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

@@ -358,6 +358,14 @@ function getCollabClient(ace2editor, serverVars, initialUserInfo, options, _pad)
     {
       var userInfo = msg.userInfo;
       var id = userInfo.userId;
+
+      // Avoid a race condition when setting colors.  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])
       {

src/static/js/pad.js

@@ -114,6 +114,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"];
@@ -162,6 +163,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, set a global value to use once we have initiated hte pad.
+  {
+    settings.globalUserColor = decodeURIComponent(userColor);
+  }
   if(rtl)
   {
     if(rtl == "true")
@@ -363,6 +369,24 @@ function handshake()
         pad.myUserInfo.name = settings.globalUserName;
         $('#myusernameedit').attr({"value":settings.globalUserName}); // Updates the current users UI
       }
+      if (settings.globalUserColor !== false)
+      {
+        // First, check the color to ensure it's a valid css 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 collabClient knows we have a query parameter.
+        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
@@ -1025,6 +1049,7 @@ var settings = {
 , noColors: false
 , useMonospaceFontGlobal: false
 , globalUserName: false
+, globalUserColor: false
 , rtlIsTrue: false
 };