Add userColor query param to set initial color

Add a URL parameter which sets the initial color for a user, e.g.:

    http://example.com/p/mypad?userColor=%2300ff00

Sanitize the given color value to ensure that it's a valid css value
(could be any supported CSS color format -- #fff, rgba(), "red", etc).

Shortly after rejoining a pad, the server responds with a USER_NEWINFO
message which may contain an old color value; however, this message
arrives after we have set and sent the new color value to the server.
To avoid this race condition, if the query parameter has been set,
ignore the color value in a USER_NEWINFO message which matches our user
ID.

src/static/js/collab_client.js

@@ -297,7 +297,12 @@ function getCollabClient(ace2editor, serverVars, initialUserInfo, options, _pad)
     {
       var userInfo = msg.userInfo;
       var id = userInfo.userId;
-      
+      // Avoid a race condition.  If our color was set by a query param, ignore
+      // our own "new user" message's color value.
+      if (id === initialUserInfo.userId && initialUserInfo.globalUserColor)
+      {
+        msg.userInfo.colorId = initialUserInfo.globalUserColor;
+      }
       if (userSet[id])
       {
         userSet[id] = userInfo;

src/static/js/pad.js

@@ -98,6 +98,7 @@ function getParams()
   var showControls = params["showControls"];
   var showChat = params["showChat"];
   var userName = params["userName"];
+  var userColor = params["userColor"];
   var showLineNumbers = params["showLineNumbers"];
   var useMonospaceFont = params["useMonospaceFont"];
   var IsnoColors = params["noColors"];
@@ -146,6 +147,11 @@ function getParams()
     // If the username is set as a parameter we should set a global value that we can call once we have initiated the pad.
     settings.globalUserName = decodeURIComponent(userName);
   }
+  if(userColor)
+  {
+    // If the usercolor is set as a parameter we set a global value that we can call once we have initiated the pad.
+    settings.globalUserColor = decodeURIComponent(userColor);
+  }
   if(rtl)
   {
     if(rtl == "true")
@@ -347,6 +353,26 @@ function handshake()
         pad.myUserInfo.name = settings.globalUserName;
         $('#myusernameedit').attr({"value":settings.globalUserName}); // Updates the current users UI
       }
+      if (settings.globalUserColor !== false)
+      {
+        // First, sanitize the color to ensure it's a valid color value.
+        var check = $("<span/>").css("background-color", "white");
+        $("body").append(check);
+        var white = check.css("background-color");
+        check.css("background-color", settings.globalUserColor);
+        // Ensure that setting the element changed the color.
+        if (check.css("background-color") === white) {
+          settings.globalUserColor = "#ff0000";
+        }
+        check.remove();
+
+        // Add a 'globalUserColor' property to myUserInfo, so that collabClient
+        // can avoid a race condition where the server sends collabClient a
+        // "USER_NEWINFO" message with an old colorId after we connect.
+        pad.myUserInfo.globalUserColor = settings.globalUserColor;
+        pad.notifyChangeColor(settings.globalUserColor); // Updates pad.myUserInfo.colorId
+        paduserlist.setMyUserInfo(pad.myUserInfo);
+      }
     }
     //This handles every Message after the clientVars
     else
@@ -1011,6 +1037,7 @@ var settings = {
 , noColors: false
 , useMonospaceFontGlobal: false
 , globalUserName: false
+, globalUserColor: false
 , rtlIsTrue: false
 };