Bug 1420990 - Build the DOM for container items directly in containers.js instead of with XBL;r=jaws
authorBrian Grinstead <bgrinstead@mozilla.com>
Mon, 02 Apr 2018 10:19:01 -0700
changeset 466606 19dfac734e3ef2a6620ddc1af4c2cb1aba06d901
parent 466605 d0392a55774becf075a7e20ecfe852a497e96644
child 466607 e4d791bf22c70f09b5a90a4948111492a0b34b5a
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1420990
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1420990 - Build the DOM for container items directly in containers.js instead of with XBL;r=jaws MozReview-Commit-ID: Cmu4PYW2Zro
browser/components/preferences/handlers.css
browser/components/preferences/handlers.xml
browser/components/preferences/in-content/containers.js
--- a/browser/components/preferences/handlers.css
+++ b/browser/components/preferences/handlers.css
@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #handlersView > richlistitem {
   -moz-binding: url("chrome://browser/content/preferences/handlers.xml#handler");
 }
 
 #containersView > richlistitem {
-  -moz-binding: url("chrome://browser/content/preferences/handlers.xml#container");
+  -moz-binding: none;
 }
 
 /**
  * Make the icons appear.
  * Note: we display the icon box for every item whether or not it has an icon
  * so the labels of all the items align vertically.
  */
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
--- a/browser/components/preferences/handlers.xml
+++ b/browser/components/preferences/handlers.xml
@@ -51,23 +51,9 @@
                         oncommand="gMainPane.onSelectAction(event.originalTarget)">
             <xul:menupopup/>
           </xul:menulist>
         </xul:hbox>
       </xul:hbox>
     </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>
--- a/browser/components/preferences/in-content/containers.js
+++ b/browser/components/preferences/in-content/containers.js
@@ -26,32 +26,53 @@ let gContainersPane = {
 
   _rebuildView() {
     const containers = ContextualIdentityService.getPublicIdentities();
     while (this._list.firstChild) {
       this._list.firstChild.remove();
     }
     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);
     }
   },
 
   async onRemoveCommand(button) {
     let userContextId = parseInt(button.getAttribute("value"), 10);