Bug 1479433 - Changing icons and colors for containers to be class based. r=dao
authorJonathan Kingston <jkt@mozilla.com>
Wed, 10 Apr 2019 11:19:00 +0000
changeset 468790 45e56d6e9dd0c1939f5ef13d9f4b7bd25e1e9b69
parent 468789 dab333301010235ac4fa232bbfafabd2a7179080
child 468791 18f074af5d93ffb94a4f905509a21a5c143f2b02
push id112755
push userdvarga@mozilla.com
push dateWed, 10 Apr 2019 22:06:41 +0000
treeherdermozilla-inbound@606f85641d0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1479433
milestone68.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 1479433 - Changing icons and colors for containers to be class based. r=dao 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
@@ -4706,39 +4706,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
@@ -2350,17 +2350,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
@@ -677,23 +677,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;