Bug 1479433 - Changing icons and colors for containers to be class based. r=dao a=pascalc
authorJonathan Kingston <jkt@mozilla.com>
Wed, 10 Apr 2019 11:19:00 +0000
changeset 523243 12d959489400f9da89f00db018cefd316fc9d18a
parent 523242 de7ce037f97021aab515074c2323c7a774edb406
child 523244 53da81e19127fb55bcbc00c86bd910751c5b56cd
push id11115
push useraiakab@mozilla.com
push dateFri, 19 Apr 2019 16:14:22 +0000
treeherdermozilla-beta@86f6ec90b34b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, pascalc
bugs1479433
milestone67.0
Bug 1479433 - Changing icons and colors for containers to be class based. r=dao a=pascalc Differential Revision: https://phabricator.services.mozilla.com/D24918
browser/base/content/browser-allTabsMenu.js
browser/base/content/browser.js
browser/base/content/tabbrowser.js
browser/base/content/utilityOverlay.js
browser/components/contextualidentity/content/usercontext.css
browser/components/preferences/containers.js
browser/components/preferences/in-content/containers.js
browser/themes/shared/preferences/containers.css
toolkit/components/contextualidentity/ContextualIdentityService.jsm
--- a/browser/base/content/browser-allTabsMenu.js
+++ b/browser/base/content/browser-allTabsMenu.js
@@ -75,18 +75,18 @@ var gTabsPanel = {
       ContextualIdentityService.getPublicIdentities().forEach(identity => {
         let menuitem = document.createXULElement("toolbarbutton");
         menuitem.setAttribute("class", "subviewbutton subviewbutton-iconic");
         menuitem.setAttribute("label", ContextualIdentityService.getUserContextLabel(identity.userContextId));
         // The styles depend on this.
         menuitem.setAttribute("usercontextid", identity.userContextId);
         // The command handler depends on this.
         menuitem.setAttribute("data-usercontextid", identity.userContextId);
-        menuitem.setAttribute("data-identity-color", identity.color);
-        menuitem.setAttribute("data-identity-icon", identity.icon);
+        menuitem.classList.add("identity-icon-" + identity.icon);
+        menuitem.classList.add("identity-color-" + identity.color);
 
         menuitem.setAttribute("command", "Browser:NewUserContextTab");
 
         frag.appendChild(menuitem);
         elements.push(menuitem);
       });
 
       e.target.addEventListener("ViewHiding", () => {
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -4692,39 +4692,54 @@ function updateFileMenuUserContextUIVisi
     menu.setAttribute("disabled", "true");
   }
 }
 
 /**
  * Updates the User Context UI indicators if the browser is in a non-default context
  */
 function updateUserContextUIIndicator() {
+  function replaceContainerClass(classType, element, value) {
+    let prefix = "identity-" + classType + "-";
+    if (value && element.classList.contains(prefix + value)) {
+      return;
+    }
+    for (let className of element.classList) {
+      if (className.startsWith(prefix)) {
+        element.classList.remove(className);
+      }
+    }
+    if (value) {
+      element.classList.add(prefix + value);
+    }
+  }
+
   let hbox = document.getElementById("userContext-icons");
 
   let userContextId = gBrowser.selectedBrowser.getAttribute("usercontextid");
   if (!userContextId) {
-    hbox.setAttribute("data-identity-color", "");
+    replaceContainerClass("color", hbox, "");
     hbox.hidden = true;
     return;
   }
 
   let identity = ContextualIdentityService.getPublicIdentityFromId(userContextId);
   if (!identity) {
-    hbox.setAttribute("data-identity-color", "");
+    replaceContainerClass("color", hbox, "");
     hbox.hidden = true;
     return;
   }
 
-  hbox.setAttribute("data-identity-color", identity.color);
+  replaceContainerClass("color", hbox, identity.color);
 
   let label = document.getElementById("userContext-label");
   label.setAttribute("value", ContextualIdentityService.getUserContextLabel(userContextId));
 
   let indicator = document.getElementById("userContext-indicator");
-  indicator.setAttribute("data-identity-icon", identity.icon);
+  replaceContainerClass("icon", indicator, identity.icon);
 
   hbox.hidden = false;
 }
 
 /**
  * Makes the Character Encoding menu enabled or disabled as appropriate.
  * To be called when the View menu or the app menu is opened.
  */
--- a/browser/base/content/tabbrowser.js
+++ b/browser/base/content/tabbrowser.js
@@ -2430,17 +2430,17 @@ window._gBrowser = {
     if (skipBackgroundNotify) {
       t.setAttribute("skipbackgroundnotify", true);
     }
 
     if (pinned) {
       t.setAttribute("pinned", "true");
     }
 
-    t.className = "tabbrowser-tab";
+    t.classList.add("tabbrowser-tab");
 
     this.tabContainer._unlockTabSizing();
 
     // When overflowing, new tabs are scrolled into view smoothly, which
     // doesn't go well together with the width transition. So we skip the
     // transition in that case.
     let animate = !skipAnimation && !pinned &&
       this.tabContainer.getAttribute("overflow") != "true" &&
--- a/browser/base/content/utilityOverlay.js
+++ b/browser/base/content/utilityOverlay.js
@@ -666,23 +666,23 @@ function createUserContextMenu(event, {
     menuitem.setAttribute("data-usercontextid", identity.userContextId);
     menuitem.setAttribute("label", ContextualIdentityService.getUserContextLabel(identity.userContextId));
 
     if (identity.accessKey && useAccessKeys) {
       menuitem.setAttribute("accesskey", bundle.GetStringFromName(identity.accessKey));
     }
 
     menuitem.classList.add("menuitem-iconic");
-    menuitem.setAttribute("data-identity-color", identity.color);
+    menuitem.classList.add("identity-color-" + identity.color);
 
     if (!isContextMenu) {
       menuitem.setAttribute("command", "Browser:NewUserContextTab");
     }
 
-    menuitem.setAttribute("data-identity-icon", identity.icon);
+    menuitem.classList.add("identity-icon-" + identity.icon);
 
     docfrag.appendChild(menuitem);
   });
 
   if (!isContextMenu) {
     docfrag.appendChild(document.createXULElement("menuseparator"));
 
     let menuitem = document.createXULElement("menuitem");
--- a/browser/components/contextualidentity/content/usercontext.css
+++ b/browser/components/contextualidentity/content/usercontext.css
@@ -1,93 +1,93 @@
-[data-identity-color="blue"] {
+.identity-color-blue {
   --identity-tab-color: #37adff;
   --identity-icon-color: #37adff;
 }
 
-[data-identity-color="turquoise"] {
+.identity-color-turquoise {
   --identity-tab-color: #00c79a;
   --identity-icon-color: #00c79a;
 }
 
-[data-identity-color="green"] {
+.identity-color-green {
   --identity-tab-color: #51cd00;
   --identity-icon-color: #51cd00;
 }
 
-[data-identity-color="yellow"] {
+.identity-color-yellow {
   --identity-tab-color: #ffcb00;
   --identity-icon-color: #ffcb00;
 }
 
-[data-identity-color="orange"] {
+.identity-color-orange {
   --identity-tab-color: #ff9f00;
   --identity-icon-color: #ff9f00;
 }
 
-[data-identity-color="red"] {
+.identity-color-red {
   --identity-tab-color: #ff613d;
   --identity-icon-color: #ff613d;
 }
 
-[data-identity-color="pink"] {
+.identity-color-pink {
   --identity-tab-color: #ff4bda;
   --identity-icon-color: #ff4bda;
 }
 
-[data-identity-color="purple"] {
+.identity-color-purple {
   --identity-tab-color: #af51f5;
   --identity-icon-color: #af51f5;
 }
 
-[data-identity-icon="fingerprint"] {
+.identity-icon-fingerprint {
   --identity-icon: url("resource://usercontext-content/fingerprint.svg");
 }
 
-[data-identity-icon="briefcase"] {
+.identity-icon-briefcase {
   --identity-icon: url("resource://usercontext-content/briefcase.svg");
 }
 
-[data-identity-icon="dollar"] {
+.identity-icon-dollar {
   --identity-icon: url("resource://usercontext-content/dollar.svg");
 }
 
-[data-identity-icon="cart"] {
+.identity-icon-cart {
   --identity-icon: url("resource://usercontext-content/cart.svg");
 }
 
-[data-identity-icon="circle"] {
+.identity-icon-circle {
   --identity-icon: url("resource://usercontext-content/circle.svg");
 }
 
-[data-identity-icon="vacation"] {
+.identity-icon-vacation {
   --identity-icon: url("resource://usercontext-content/vacation.svg");
 }
 
-[data-identity-icon="gift"] {
+.identity-icon-gift {
   --identity-icon: url("resource://usercontext-content/gift.svg");
 }
 
-[data-identity-icon="food"] {
+.identity-icon-food {
   --identity-icon: url("resource://usercontext-content/food.svg");
 }
 
-[data-identity-icon="fruit"] {
+.identity-icon-fruit {
   --identity-icon: url("resource://usercontext-content/fruit.svg");
 }
 
-[data-identity-icon="pet"] {
+.identity-icon-pet {
   --identity-icon: url("resource://usercontext-content/pet.svg");
 }
 
-[data-identity-icon="tree"] {
+.identity-icon-tree {
   --identity-icon: url("resource://usercontext-content/tree.svg");
 }
 
-[data-identity-icon="chill"] {
+.identity-icon-chill {
   --identity-icon: url("resource://usercontext-content/chill.svg");
 }
 
 #userContext-indicator {
   height: 16px;
   width: 16px;
 }
 
--- a/browser/components/preferences/containers.js
+++ b/browser/components/preferences/containers.js
@@ -101,17 +101,17 @@ let gContainersManager = {
 
       if (this.identity.icon && this.identity.icon == icon) {
         iconSwatch.setAttribute("selected", true);
       }
 
       document.l10n.setAttributes(iconSwatch, `containers-icon-${icon}`);
       let iconElement = document.createXULElement("hbox");
       iconElement.className = "userContext-icon";
-      iconElement.setAttribute("data-identity-icon", icon);
+      iconElement.classList.add("identity-icon-" + icon);
 
       iconSwatch.appendChild(iconElement);
       radiogroup.appendChild(iconSwatch);
     }
 
     return radiogroup;
   },
 
@@ -129,18 +129,18 @@ let gContainersManager = {
 
       if (this.identity.color && this.identity.color == color) {
         colorSwatch.setAttribute("selected", true);
       }
 
       document.l10n.setAttributes(colorSwatch, `containers-color-${color}`);
       let iconElement = document.createXULElement("hbox");
       iconElement.className = "userContext-icon";
-      iconElement.setAttribute("data-identity-icon", "circle");
-      iconElement.setAttribute("data-identity-color", color);
+      iconElement.classList.add("identity-icon-circle");
+      iconElement.classList.add("identity-color-" + color);
 
       colorSwatch.appendChild(iconElement);
       radiogroup.appendChild(colorSwatch);
     }
     return radiogroup;
   },
 
   onApplyChanges() {
--- a/browser/components/preferences/in-content/containers.js
+++ b/browser/components/preferences/in-content/containers.js
@@ -35,18 +35,18 @@ let gContainersPane = {
       outer.setAttribute("flex", 1);
       outer.setAttribute("align", "center");
       item.appendChild(outer);
 
       let userContextIcon = document.createXULElement("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);
+      userContextIcon.classList.add("identity-icon-" + container.icon);
+      userContextIcon.classList.add("identity-color-" + container.color);
       outer.appendChild(userContextIcon);
 
       let label = document.createXULElement("label");
       label.setAttribute("flex", 1);
       label.setAttribute("crop", "end");
       label.textContent = ContextualIdentityService.getUserContextLabel(container.userContextId);
       outer.appendChild(label);
 
--- a/browser/themes/shared/preferences/containers.css
+++ b/browser/themes/shared/preferences/containers.css
@@ -26,25 +26,25 @@
   -moz-outline-radius: 100%;
   min-block-size: 24px;
   min-inline-size: 24px;
   border-radius: 50%;
   padding: 2px;
   margin: 9px;
 }
 
-.icon-buttons > radio > [data-identity-icon] {
+.icon-buttons > radio > .userContext-icon {
   fill: #4d4d4d;
 }
 
 .radio-buttons > radio {
   padding-inline-start: 2px;
 }
 
-radio > [data-identity-icon] {
+radio > .userContext-icon {
   inline-size: 22px;
   block-size: 22px;
 }
 
 .radio-buttons > radio[selected=true] {
   outline-color: var(--preference-unselected-color);
 }
 
--- a/toolkit/components/contextualidentity/ContextualIdentityService.jsm
+++ b/toolkit/components/contextualidentity/ContextualIdentityService.jsm
@@ -420,17 +420,27 @@ function _ContextualIdentityService(path
 
   setTabStyle(tab) {
     if (!tab.hasAttribute("usercontextid")) {
       return;
     }
 
     let userContextId = tab.getAttribute("usercontextid");
     let identity = this.getPublicIdentityFromId(userContextId);
-    tab.setAttribute("data-identity-color", identity ? identity.color : "");
+
+    let prefix = "identity-color-";
+    /* Remove the existing container color highlight if it exists */
+    for (let className of tab.classList) {
+      if (className.startsWith(prefix)) {
+        tab.classList.remove(className);
+      }
+    }
+    if (identity && identity.color) {
+      tab.classList.add(prefix + identity.color);
+    }
   },
 
   countContainerTabs(userContextId = 0) {
     let count = 0;
     this._forEachContainerTab(function() {
       ++count;
     }, userContextId);
     return count;