semi working example

src/locales/en.json

@@ -32,6 +32,7 @@
   "pad.settings.padSettings": "Pad Settings",
   "pad.settings.myView": "My View",
   "pad.settings.stickychat": "Chat always on screen",
+  "pad.settings.chatAndUsers": "Show Chat and Users",
   "pad.settings.colorcheck": "Authorship colors",
   "pad.settings.linenocheck": "Line numbers",
   "pad.settings.rtlcheck": "Read content from right to left?",

src/static/css/pad.css

@@ -914,6 +914,17 @@ input[type=checkbox] {
   border-left: 1px solid #ccc !important;
   width: 185px !important;
 }
+.chatAndUsers{
+  display:block !important;
+  right:0px !important;
+  border-radius:0px !important;
+  height:185px !important;
+  width:180px !important;
+}
+.chatAndUsersChat{
+  top:300px !important;
+}
+
 @media screen and (max-width: 600px) {
   .toolbar ul li.separator {
     display: none;

src/static/js/chat.js

@@ -54,6 +54,20 @@ var chat = (function()
         isStuck = false;
       }
     },
+    chatAndUsers: function(status){
+      if(status || $('#options-chatandusers').prop('checked')){
+        padcookie.setPref("chatAndUsers", true);
+        chat.stickToScreen(true);
+        $('#options-stickychat').prop("disabled", "disabled");
+        $('#users').addClass("chatAndUsers");
+        $("#chatbox").addClass("chatAndUsersChat");
+      }else{
+        chat.stickToScreen(false);
+        $('#options-stickychat').prop("disabled", false);
+        $('#users').removeClass("chatAndUsers");
+        $("#chatbox").removeClass("chatAndUsersChat");
+      }
+    },
     hide: function () 
     {
       // decide on hide logic based on chat window being maximized or not 

src/static/js/pad.js

@@ -120,6 +120,7 @@ var getParameters = [
   { name: "userColor",        checkVal: null,    callback: function(val) { settings.globalUserColor = decodeURIComponent(val); } },
   { name: "rtl",              checkVal: "true",  callback: function(val) { settings.rtlIsTrue = true } },
   { name: "alwaysShowChat",   checkVal: "true",  callback: function(val) { chat.stickToScreen(); } },
+  { name: "chatAndUsers",     checkVal: "true",  callback: function(val) { chat.chatAndUsers(); } },
   { name: "lang",             checkVal: null,    callback: function(val) { window.html10n.localize([val, 'en']); } }
 ];
 
@@ -562,6 +563,10 @@ var pad = {
         chat.stickToScreen(true); // stick it to the screen
         $('#options-stickychat').prop("checked", true); // set the checkbox to on
       }
+      if(padcookie.getPref("chatAndUsers")){ // if we have a cookie for always showing chat then show it
+        chat.chatAndUsers(true); // stick it to the screen
+        $('#options-chatandusers').prop("checked", true); // set the checkbox to on
+      }
       if(padcookie.getPref("showAuthorshipColors") == false){
         pad.changeViewOption('showAuthorColors', false);
       }
@@ -791,6 +796,16 @@ var pad = {
       $('#options-stickychat').prop("checked", false); // set the checkbox for off
     }
   },
+  determineChatAndUsersVisibility: function(){
+    var chatAUVisCookie = padcookie.getPref('chatAndUsersVisible');
+    if(chatAUVisCookie){ // if the cookie is set for chat always visible
+      chat.chatAndUsers(true); // stick it to the screen
+      $('#options-chatandusers').prop("checked", true); // set the checkbox to on
+    }
+    else{
+      $('#options-chatandusers').prop("checked", false); // set the checkbox for off
+    }
+  },
   determineAuthorshipColorsVisibility: function(){
     var authColCookie = padcookie.getPref('showAuthorshipColors');
     if (authColCookie){

src/templates/pad.html

@@ -133,6 +133,10 @@
                     <input type="checkbox" id="options-stickychat" onClick="chat.stickToScreen();">
                     <label for="options-stickychat" data-l10n-id="pad.settings.stickychat"></label>
                 </p>
+                <p>
+                    <input type="checkbox" id="options-chatandusers" onClick="chat.chatAndUsers();">
+                    <label for="options-chatandusers" data-l10n-id="pad.settings.chatAndUsers"></label>
+                </p>
                 <p>
                     <input type="checkbox" id="options-colorscheck">
                     <label for="options-colorscheck" data-l10n-id="pad.settings.colorcheck"></label>