Bug 972286 - switch to attributes instead of classes for overflowedItem and for the Australis panel subview anchor, r=MattN
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 04 Mar 2014 14:38:33 -0500
changeset 171981 de78bf0658778da5a928b6df796d8ef25a7c5d03
parent 171980 519c9181051aea03922a3c60d9254398e6f20fa5
child 171982 593206fbd97e9510c55a60b551d759ee4e5c99bf
push id5463
push usergijskruitbosch@gmail.com
push dateWed, 05 Mar 2014 17:01:26 +0000
treeherderfx-team@de78bf065877 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs972286
milestone30.0a1
Bug 972286 - switch to attributes instead of classes for overflowedItem and for the Australis panel subview anchor, r=MattN
browser/base/content/browser-places.js
browser/base/content/browser.css
browser/base/content/browser.js
browser/components/customizableui/content/panelUI.xml
browser/components/customizableui/src/CustomizableUI.jsm
browser/components/customizableui/test/browser_884402_customize_from_overflow.js
browser/components/customizableui/test/browser_914138_widget_API_overflowable_toolbar.js
browser/themes/osx/browser.css
browser/themes/osx/customizableui/panelUIOverlay.css
browser/themes/shared/browser.inc
browser/themes/shared/customizableui/panelUIOverlay.inc.css
browser/themes/shared/menupanel.inc.css
browser/themes/windows/browser.css
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -1342,17 +1342,17 @@ let BookmarkingUI = {
       }
       this.notifier.style.transform = transform;
     }
 
     let isInBookmarksToolbar = this.button.classList.contains("bookmark-item");
     if (isInBookmarksToolbar)
       this.notifier.setAttribute("in-bookmarks-toolbar", true);
 
-    let isInOverflowPanel = this.button.classList.contains("overflowedItem");
+    let isInOverflowPanel = this.button.getAttribute("overflowedItem") == "true";
     if (!isInOverflowPanel) {
       this.notifier.setAttribute("notification", "finish");
       this.button.setAttribute("notification", "finish");
     }
 
     this._notificationTimeout = setTimeout( () => {
       this.notifier.removeAttribute("notification");
       this.notifier.removeAttribute("in-bookmarks-toolbar");
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -252,32 +252,32 @@ toolbarpaletteitem > toolbaritem[sdkstyl
 toolbarpaletteitem[removable="false"] {
   opacity: 0.5;
   cursor: default;
 }
 
 #bookmarks-toolbar-placeholder,
 toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
 #personal-bookmarks[cui-areatype="menu-panel"] > #PlacesToolbar,
-#personal-bookmarks[cui-areatype="toolbar"].overflowedItem > #PlacesToolbar {
+#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #PlacesToolbar {
   display: none;
 }
 
 #PlacesToolbarDropIndicatorHolder {
   position: absolute;
   top: 25%;
 }
 
 toolbarpaletteitem > #personal-bookmarks > #bookmarks-toolbar-placeholder,
 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder,
-#personal-bookmarks[cui-areatype="toolbar"].overflowedItem > #bookmarks-toolbar-placeholder {
+#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder {
   display: -moz-box;
 }
 
-#zoom-controls[cui-areatype="toolbar"]:not(.overflowedItem) > #zoom-reset-button > .toolbarbutton-text {
+#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-reload-button:not([displaystop]) + #urlbar-stop-button,
 #urlbar-reload-button[displaystop] {
   visibility: collapse;
 }
 
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -2901,17 +2901,17 @@ const BrowserSearch = {
       openSearchPageIfFieldIsNotActive(searchBar);
     };
     if (placement && placement.area == CustomizableUI.AREA_PANEL) {
       // The panel is not constructed until the first time it is shown.
       PanelUI.show().then(focusSearchBar);
       return;
     }
     if (placement && placement.area == CustomizableUI.AREA_NAVBAR && searchBar &&
-        searchBar.parentNode.classList.contains("overflowedItem")) {
+        searchBar.parentNode.getAttribute("overflowedItem") == "true") {
       let navBar = document.getElementById(CustomizableUI.AREA_NAVBAR);
       navBar.overflowable.show().then(() => {
         focusSearchBar();
       });
       return;
     }
     if (searchBar) {
       if (window.fullScreen)
--- a/browser/components/customizableui/content/panelUI.xml
+++ b/browser/components/customizableui/content/panelUI.xml
@@ -244,21 +244,21 @@
             if (direction == "ltr") {
               edge = anchorRect.left - mainViewRect.left;
               target = "-" + (edge + center);
             } else {
               edge = mainViewRect.right - anchorRect.right;
               target = edge + center;
             }
             this._mainViewContainer.style.transform = "translateX(" + target + "px)";
-            aAnchor.classList.add("panel-multiview-anchor");
+            aAnchor.setAttribute("panel-multiview-anchor", true);
           } else {
             this._mainViewContainer.style.transform = "";
             if (this.anchorElement)
-              this.anchorElement.classList.remove("panel-multiview-anchor");
+              this.anchorElement.removeAttribute("panel-multiview-anchor");
           }
           this.anchorElement = aAnchor;
         ]]></body>
       </method>
 
       <method name="handleEvent">
         <parameter name="aEvent"/>
         <body><![CDATA[
--- a/browser/components/customizableui/src/CustomizableUI.jsm
+++ b/browser/components/customizableui/src/CustomizableUI.jsm
@@ -3322,17 +3322,17 @@ function WidgetSingleWrapper(aWidget, aN
       anchorId = aNode.getAttribute("cui-anchorid");
     }
 
     return anchorId ? aNode.ownerDocument.getElementById(anchorId)
                     : aNode;
   });
 
   this.__defineGetter__("overflowed", function() {
-    return aNode.classList.contains("overflowedItem");
+    return aNode.getAttribute("overflowedItem") == "true";
   });
 
   Object.freeze(this);
 }
 
 /**
  * XULWidgetGroupWrapper is the common interface for interacting with an entire
  * widget group - AKA, all instances of a widget across a series of windows.
@@ -3412,17 +3412,17 @@ function XULWidgetSingleWrapper(aWidgetI
       anchorId = aNode.getAttribute("cui-anchorid");
     }
 
     return anchorId ? aNode.ownerDocument.getElementById(anchorId)
                     : aNode;
   });
 
   this.__defineGetter__("overflowed", function() {
-    return aNode.classList.contains("overflowedItem");
+    return aNode.getAttribute("overflowedItem") == "true";
   });
 
   Object.freeze(this);
 }
 
 const LAZY_RESIZE_INTERVAL_MS = 200;
 
 function OverflowableToolbar(aToolbarNode) {
@@ -3569,17 +3569,17 @@ OverflowableToolbar.prototype = {
 
     let child = this._target.lastChild;
 
     while (child && this._target.scrollLeftMax > 0) {
       let prevChild = child.previousSibling;
 
       if (child.getAttribute("overflows") != "false") {
         this._collapsed.set(child.id, this._target.clientWidth);
-        child.classList.add("overflowedItem");
+        child.setAttribute("overflowedItem", true);
         child.setAttribute("cui-anchorid", this._chevron.id);
         CustomizableUIInternal.notifyListeners("onWidgetOverflow", child, this._target);
 
         this._list.insertBefore(child, this._list.firstChild);
         if (!this._toolbar.hasAttribute("overflowing")) {
           CustomizableUI.addListener(this);
         }
         this._toolbar.setAttribute("overflowing", "true");
@@ -3627,17 +3627,17 @@ OverflowableToolbar.prototype = {
           inserted = true;
           break;
         }
       }
       if (!inserted) {
         this._target.appendChild(child);
       }
       child.removeAttribute("cui-anchorid");
-      child.classList.remove("overflowedItem");
+      child.removeAttribute("overflowedItem");
       CustomizableUIInternal.notifyListeners("onWidgetUnderflow", child, this._target);
     }
 
     let win = this._target.ownerDocument.defaultView;
     win.UpdateUrlbarSearchSplitterState();
 
     if (!this._collapsed.size) {
       this._toolbar.removeAttribute("overflowing");
@@ -3702,17 +3702,17 @@ OverflowableToolbar.prototype = {
       // ... but it is now, then we added to the overflow panel. Exciting stuff:
       if (nowOverflowed) {
         // NB: we're guaranteed that it has a previousSibling, because if it didn't,
         // we would have added it to the toolbar instead. See getOverflowedNextNode.
         let prevId = aNode.previousSibling.id;
         let minSize = this._collapsed.get(prevId);
         this._collapsed.set(aNode.id, minSize);
         aNode.setAttribute("cui-anchorid", this._chevron.id);
-        aNode.classList.add("overflowedItem");
+        aNode.setAttribute("overflowedItem", true);
         CustomizableUIInternal.notifyListeners("onWidgetOverflow", aNode, this._target);
       }
       // If it is not overflowed and not in the toolbar, and was not overflowed
       // either, it moved out of the toolbar. That means there's now space in there!
       // Let's try to move stuff back:
       else if (!nowInBar) {
         this._moveItemsBackToTheirOrigin(true);
       }
@@ -3720,17 +3720,17 @@ OverflowableToolbar.prototype = {
       // fire afterwards; that's ok!
     }
     // If it used to be overflowed...
     else {
       // ... and isn't anymore, let's remove our bookkeeping:
       if (!nowOverflowed) {
         this._collapsed.delete(aNode.id);
         aNode.removeAttribute("cui-anchorid");
-        aNode.classList.remove("overflowedItem");
+        aNode.removeAttribute("overflowedItem");
         CustomizableUIInternal.notifyListeners("onWidgetUnderflow", aNode, this._target);
 
         if (!this._collapsed.size) {
           this._toolbar.removeAttribute("overflowing");
           CustomizableUI.removeListener(this);
         }
       }
       // but if it still is, it must have changed places. Bookkeep:
@@ -3763,16 +3763,16 @@ OverflowableToolbar.prototype = {
     // the new node to the overflow target.
     if (!nextNode.previousSibling) {
       return [this._target, null];
     }
     return [this._list, nextNode];
   },
 
   getContainerFor: function(aNode) {
-    if (aNode.classList.contains("overflowedItem")) {
+    if (aNode.getAttribute("overflowedItem") == "true") {
       return this._list;
     }
     return this._target;
   },
 };
 
 CustomizableUIInternal.initialize();
--- a/browser/components/customizableui/test/browser_884402_customize_from_overflow.js
+++ b/browser/components/customizableui/test/browser_884402_customize_from_overflow.js
@@ -25,17 +25,17 @@ add_task(function() {
   let shownPanelPromise = promisePanelElementShown(window, overflowPanel);
   chevron.click();
   yield shownPanelPromise;
 
   let contextMenu = document.getElementById("toolbar-context-menu");
   let shownContextPromise = contextMenuShown(contextMenu);
   let homeButton = document.getElementById("home-button");
   ok(homeButton, "home-button was found");
-  ok(homeButton.classList.contains("overflowedItem"), "Home button is overflowing");
+  is(homeButton.getAttribute("overflowedItem"), "true", "Home button is overflowing");
   EventUtils.synthesizeMouse(homeButton, 2, 2, {type: "contextmenu", button: 2});
   yield shownContextPromise;
 
   is(overflowPanel.state, "open", "The widget overflow panel should still be open.");
 
   let expectedEntries = [
     [".customize-context-moveToPanel", true],
     [".customize-context-removeFromToolbar", true],
@@ -69,10 +69,10 @@ add_task(function() {
   // In some cases, it can take a tick for the navbar to overflow again. Wait for it:
   yield waitForCondition(() => navbar.hasAttribute("overflowing"));
   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
 
   let homeButtonPlacement = CustomizableUI.getPlacementOfWidget("home-button");
   ok(homeButtonPlacement, "Home button should still have a placement");
   is(homeButtonPlacement && homeButtonPlacement.area, "nav-bar", "Home button should be back in the navbar now");
 
-  ok(homeButton.classList.contains("overflowedItem"), "Home button should still be overflowed");
+  is(homeButton.getAttribute("overflowedItem"), "true", "Home button should still be overflowed");
 });
--- a/browser/components/customizableui/test/browser_914138_widget_API_overflowable_toolbar.js
+++ b/browser/components/customizableui/test/browser_914138_widget_API_overflowable_toolbar.js
@@ -25,36 +25,36 @@ add_task(function() {
   ok(CustomizableUI.inDefaultState, "Should start in default state.");
 
   window.resizeTo(400, window.outerHeight);
   yield waitForCondition(() => navbar.hasAttribute("overflowing"));
   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
   ok(!navbar.querySelector("#" + kHomeBtn), "Home button should no longer be in the navbar");
   let homeBtnNode = overflowList.querySelector("#" + kHomeBtn);
   ok(homeBtnNode, "Home button should be overflowing");
-  ok(homeBtnNode && homeBtnNode.classList.contains("overflowedItem"), "Home button should have overflowedItem class");
+  ok(homeBtnNode && homeBtnNode.getAttribute("overflowedItem") == "true", "Home button should have overflowedItem attribute");
 
   let placementOfHomeButton = CustomizableUI.getWidgetIdsInArea(navbar.id).indexOf(kHomeBtn);
   CustomizableUI.addWidgetToArea(kTestBtn1, navbar.id, placementOfHomeButton);
   ok(!navbar.querySelector("#" + kTestBtn1), "New button should not be in the navbar");
   let newButtonNode = overflowList.querySelector("#" + kTestBtn1);
   ok(newButtonNode, "New button should be overflowing");
-  ok(newButtonNode && newButtonNode.classList.contains("overflowedItem"), "New button should have overflowedItem class");
+  ok(newButtonNode && newButtonNode.getAttribute("overflowedItem") == "true", "New button should have overflowedItem attribute");
   let nextEl = newButtonNode && newButtonNode.nextSibling;
   is(nextEl && nextEl.id, kHomeBtn, "Test button should be next to home button.");
 
   window.resizeTo(originalWindowWidth, window.outerHeight);
   yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
   ok(!navbar.hasAttribute("overflowing"), "Should not have an overflowing toolbar.");
   ok(navbar.querySelector("#" + kHomeBtn), "Home button should be in the navbar");
-  ok(homeBtnNode && !homeBtnNode.classList.contains("overflowedItem"), "Home button should no longer have overflowedItem class");
+  ok(homeBtnNode && (homeBtnNode.getAttribute("overflowedItem") != "true"), "Home button should no longer have overflowedItem attribute");
   ok(!overflowList.querySelector("#" + kHomeBtn), "Home button should no longer be overflowing");
   ok(navbar.querySelector("#" + kTestBtn1), "Test button should be in the navbar");
   ok(!overflowList.querySelector("#" + kTestBtn1), "Test button should no longer be overflowing");
-  ok(newButtonNode && !newButtonNode.classList.contains("overflowedItem"), "New button should no longer have overflowedItem class");
+  ok(newButtonNode && (newButtonNode.getAttribute("overflowedItem") != "true"), "New button should no longer have overflowedItem attribute");
   let el = document.getElementById(kTestBtn1);
   if (el) {
     CustomizableUI.removeWidgetFromArea(kTestBtn1);
     el.remove();
   }
   window.resizeTo(originalWindowWidth, window.outerHeight);
 });
 
@@ -96,32 +96,32 @@ add_task(function() {
   ok(CustomizableUI.inDefaultState, "Should start in default state.");
 
   window.resizeTo(400, window.outerHeight);
   yield waitForCondition(() => navbar.hasAttribute("overflowing"));
   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
   ok(!navbar.querySelector("#" + kHomeBtn), "Home button should no longer be in the navbar");
   let homeBtnNode = overflowList.querySelector("#" + kHomeBtn);
   ok(homeBtnNode, "Home button should be overflowing");
-  ok(homeBtnNode && homeBtnNode.classList.contains("overflowedItem"), "Home button should have overflowedItem class");
+  ok(homeBtnNode && homeBtnNode.getAttribute("overflowedItem") == "true", "Home button should have overflowedItem class");
 
   let testBtnSpec = {id: kTestBtn3, label: "Overflowable widget test", defaultArea: "nav-bar"};
   CustomizableUI.createWidget(testBtnSpec);
   let testNode = overflowList.querySelector("#" + kTestBtn3);
   ok(testNode, "Test button should be overflowing");
-  ok(testNode && testNode.classList.contains("overflowedItem"), "Test button should have overflowedItem class");
+  ok(testNode && testNode.getAttribute("overflowedItem") == "true", "Test button should have overflowedItem class");
 
   CustomizableUI.destroyWidget(kTestBtn3);
   testNode = document.getElementById(kTestBtn3);
   ok(!testNode, "Test button should be gone");
 
   CustomizableUI.createWidget(testBtnSpec);
   testNode = overflowList.querySelector("#" + kTestBtn3);
   ok(testNode, "Test button should be overflowing");
-  ok(testNode && testNode.classList.contains("overflowedItem"), "Test button should have overflowedItem class");
+  ok(testNode && testNode.getAttribute("overflowedItem") == "true", "Test button should have overflowedItem class");
 
   CustomizableUI.removeWidgetFromArea(kTestBtn3);
   testNode = document.getElementById(kTestBtn3);
   ok(!testNode, "Test button should be gone");
   CustomizableUI.destroyWidget(kTestBtn3);
   window.resizeTo(originalWindowWidth, window.outerHeight);
 });
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1018,26 +1018,26 @@ toolbar .toolbarbutton-1:not([type="menu
     -moz-image-region: rect(0px, 256px, 64px, 192px);
   }
 
   #bookmarks-menu-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
     -moz-image-region: rect(0px, 320px, 64px, 256px);
   }
 
-  #bookmarks-menu-button[cui-areatype="menu-panel"].panel-multiview-anchor {
+  #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
     -moz-image-region: rect(64px, 320px, 128px, 256px);
   }
 
   #history-panelmenu[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #history-panelmenu {
     -moz-image-region: rect(0px, 448px, 64px, 384px);
   }
 
-  #history-panelmenu[cui-areatype="menu-panel"].panel-multiview-anchor {
+  #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
     -moz-image-region: rect(64px, 448px, 128px, 384px);
   }
 
   #downloads-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #downloads-button {
     -moz-image-region: rect(0px, 512px, 64px, 448px);
   }
 
@@ -1071,17 +1071,17 @@ toolbar .toolbarbutton-1:not([type="menu
     -moz-image-region: rect(0px, 896px, 64px, 832px);
   }
 
   #characterencoding-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #characterencoding-button {
     -moz-image-region: rect(0, 960px, 64px, 896px);
   }
 
-  #characterencoding-button[cui-areatype="menu-panel"].panel-multiview-anchor {
+  #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
     -moz-image-region: rect(64px, 960px, 128px, 896px);
   }
 
   #new-window-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #new-window-button {
     -moz-image-region: rect(0px, 1024px, 64px, 960px);
   }
 
@@ -1115,17 +1115,17 @@ toolbar .toolbarbutton-1:not([type="menu
     -moz-image-region: rect(0px, 1408px, 64px, 1344px);
   }
 
   #developer-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #developer-button {
     -moz-image-region: rect(0px, 1472px, 64px, 1408px);
   }
 
-  #developer-button[cui-areatype="menu-panel"].panel-multiview-anchor {
+  #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
     -moz-image-region: rect(64px, 1472px, 128px, 1408px);
   }
 
   #preferences-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #preferences-button {
     -moz-image-region: rect(0px, 1536px, 64px, 1472px);
   }
 
@@ -1528,22 +1528,22 @@ toolbarbutton[sdk-button="true"][cui-are
 }
 
 #zoom-out-button:-moz-locale-dir(rtl),
 #zoom-in-button:-moz-locale-dir(ltr) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-#zoom-controls[cui-areatype="toolbar"]:not(.overflowedItem) > #zoom-reset-button {
+#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button {
   min-width: 0;
   margin: 0;
 }
 
-#zoom-controls[cui-areatype="toolbar"]:not(.overflowedItem) > #zoom-reset-button > .toolbarbutton-text {
+#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
   padding-top: 8px;
   margin: 2px;
 }
 
 /* sync button */
 
 #sync-button[status="active"] {
   list-style-image: url("chrome://browser/skin/sync-throbber.png");
--- a/browser/themes/osx/customizableui/panelUIOverlay.css
+++ b/browser/themes/osx/customizableui/panelUIOverlay.css
@@ -1,16 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 %include ../../shared/customizableui/panelUIOverlay.inc.css
 
 @media (min-resolution: 2dppx) {
-  toolbarbutton.panel-multiview-anchor {
+  toolbarbutton[panel-multiview-anchor=true] {
     background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png),
                       linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
     background-size: 16px, auto;
   }
 
   #PanelUI-fxa-status {
     list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png);
   }
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -1,5 +1,5 @@
 %filter substitution
 
 %define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button
-%define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)
+%define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), :not([overflowedItem=true]))
 %define nestedButtons #zoom-out-button, #zoom-in-button, #cut-button, #copy-button, #paste-button
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -688,32 +688,32 @@ menuitem.subviewbutton@menuStateActive@,
 
 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
-#PanelUI-footer > #PanelUI-footer-inner.panel-multiview-anchor,
-toolbarbutton.panel-multiview-anchor {
+#PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
+toolbarbutton[panel-multiview-anchor=true] {
   background-color: Highlight;
   background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
 }
 
-toolbarbutton.panel-multiview-anchor {
+toolbarbutton[panel-multiview-anchor=true] {
   background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
                     linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
   background-position: right 5px center;
   background-repeat: no-repeat;
 }
 
-#PanelUI-footer > #PanelUI-footer-inner.panel-multiview-anchor,
-toolbarbutton.panel-multiview-anchor,
-toolbarbutton.panel-multiview-anchor > .toolbarbutton-menubutton-button {
+#PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
+toolbarbutton[panel-multiview-anchor=true],
+toolbarbutton[panel-multiview-anchor=true] > .toolbarbutton-menubutton-button {
   color: HighlightText;
 }
 
 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
   display: none;
 }
 
@@ -839,17 +839,18 @@ toolbarpaletteitem[place="palette"] > #s
 }
 
 #widget-overflow-list {
   width: @menuPanelWidth@;
   padding-left: 10px;
   padding-right: 10px;
 }
 
-#widget-overflow-list > .overflowedItem {
+toolbaritem[overflowedItem=true],
+toolbarbutton[overflowedItem=true] {
   width: 100%;
   max-width: @menuPanelWidth@;
   min-height: 36px;
   background-repeat: no-repeat;
   background-position: 0 center;
 }
 
 #widget-overflow-list > toolbarbutton,
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -10,26 +10,26 @@ toolbarpaletteitem[place="palette"] > #h
   -moz-image-region: rect(0px, 128px, 32px, 96px);
 }
 
 #bookmarks-menu-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
   -moz-image-region: rect(0px, 160px, 32px, 128px);
 }
 
-#bookmarks-menu-button[cui-areatype="menu-panel"].panel-multiview-anchor {
+#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
   -moz-image-region: rect(32px, 160px, 64px, 128px);
 }
 
 #history-panelmenu[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #history-panelmenu {
   -moz-image-region: rect(0px, 224px, 32px, 192px);
 }
 
-#history-panelmenu[cui-areatype="menu-panel"].panel-multiview-anchor {
+#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
   -moz-image-region: rect(32px, 224px, 64px, 192px);
 }
 
 #downloads-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #downloads-button {
   -moz-image-region: rect(0px, 256px, 32px, 224px);
 }
 
@@ -63,17 +63,17 @@ toolbarpaletteitem[place="palette"] > #s
   -moz-image-region: rect(0px, 448px, 32px, 416px);
 }
 
 #characterencoding-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #characterencoding-button {
   -moz-image-region: rect(0px, 480px, 32px, 448px);
 }
 
-#characterencoding-button[cui-areatype="menu-panel"].panel-multiview-anchor {
+#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
   -moz-image-region: rect(32px, 480px, 64px, 448px);
 }
 
 #new-window-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #new-window-button {
   -moz-image-region: rect(0px, 512px, 32px, 480px);
 }
 
@@ -107,17 +107,17 @@ toolbarpaletteitem[place="palette"] > #f
   -moz-image-region: rect(0px, 704px, 32px, 672px);
 }
 
 #developer-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #developer-button {
   -moz-image-region: rect(0px, 736px, 32px, 704px);
 }
 
-#developer-button[cui-areatype="menu-panel"].panel-multiview-anchor {
+#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
   -moz-image-region: rect(32px, 736px, 64px, 704px);
 }
 
 #preferences-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #preferences-button {
   -moz-image-region: rect(0px, 768px, 32px, 736px);
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1457,17 +1457,17 @@ toolbarbutton[type="socialmark"] > .tool
 #bookmarks-menu-button.bookmark-item[starred] {
   -moz-image-region: rect(0px 48px 16px 32px);
 }
 
 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   -moz-margin-start: 5px;
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not(.overflowedItem) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+#bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
 #BMB_bookmarksPopup[side="top"],
 #BMB_bookmarksPopup[side="bottom"] {
   margin-left: -20px;
   margin-right: -20px;