Bug 1420990 - Build the DOM for container items directly in containers.js instead of with XBL;r=jaws

MozReview-Commit-ID: Cmu4PYW2Zro

--HG--
extra : rebase_source : d97d6abc594696b6738cab8b4b19e3bf2e6e3e15

browser/components/preferences/handlers.css

@@ -7,7 +7,7 @@
 }
 
 #containersView > richlistitem {
-  -moz-binding: url("chrome://browser/content/preferences/handlers.xml#container");
+  -moz-binding: none;
 }
 
 /**

browser/components/preferences/handlers.xml

@@ -56,18 +56,4 @@
     </content>
   </binding>
 
-  <binding id="container">
-    <content>
-      <xul:hbox flex="1" equalsize="always">
-        <xul:hbox flex="1" align="center">
-          <xul:hbox xbl:inherits="data-identity-icon=containerIcon,data-identity-color=containerColor" height="24" width="24" class="userContext-icon"/>
-          <xul:label flex="1" crop="end" xbl:inherits="xbl:text=containerName,highlightable"/>
-        </xul:hbox>
-        <xul:hbox flex="1" align="right">
-          <children />
-        </xul:hbox>
-      </xul:hbox>
-    </content>
-  </binding>
-
 </bindings>

browser/components/preferences/in-content/containers.js

@@ -31,22 +31,43 @@ let gContainersPane = {
     }
     for (let container of containers) {
       let item = document.createElement("richlistitem");
-      item.setAttribute("containerName", ContextualIdentityService.getUserContextLabel(container.userContextId));
-      item.setAttribute("containerIcon", container.icon);
-      item.setAttribute("containerColor", container.color);
-      item.setAttribute("userContextId", container.userContextId);
+
+      let outer = document.createElement("hbox");
+      outer.setAttribute("flex", 1);
+      outer.setAttribute("align", "center");
+      item.appendChild(outer);
+
+      let userContextIcon = document.createElement("hbox");
+      userContextIcon.className = "userContext-icon";
+      userContextIcon.setAttribute("width", 24);
+      userContextIcon.setAttribute("height", 24);
+      userContextIcon.setAttribute("data-identity-icon", container.icon);
+      userContextIcon.setAttribute("data-identity-color", container.color);
+      outer.appendChild(userContextIcon);
+
+      let label = document.createElement("label");
+      label.setAttribute("flex", 1);
+      label.setAttribute("crop", "end");
+      label.textContent = ContextualIdentityService.getUserContextLabel(container.userContextId);
+      outer.appendChild(label);
+
+      let containerButtons = document.createElement("hbox");
+      containerButtons.className = "container-buttons";
+      containerButtons.setAttribute("flex", 1);
+      containerButtons.setAttribute("align", "right");
+      item.appendChild(containerButtons);
 
       let prefsButton = document.createElement("button");
       prefsButton.setAttribute("oncommand", "gContainersPane.onPreferenceCommand(event.originalTarget)");
       prefsButton.setAttribute("value", container.userContextId);
       document.l10n.setAttributes(prefsButton, "containers-preferences-button");
-      item.appendChild(prefsButton);
+      containerButtons.appendChild(prefsButton);
 
       let removeButton = document.createElement("button");
       removeButton.setAttribute("oncommand", "gContainersPane.onRemoveCommand(event.originalTarget)");
       removeButton.setAttribute("value", container.userContextId);
       document.l10n.setAttributes(removeButton, "containers-remove-button");
-      item.appendChild(removeButton);
+      containerButtons.appendChild(removeButton);
 
       this._list.appendChild(item);
     }