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 189313 de78bf0658778da5a928b6df796d8ef25a7c5d03
parent 189184 519c9181051aea03922a3c60d9254398e6f20fa5
child 189314 593206fbd97e9510c55a60b551d759ee4e5c99bf
push id3503
push userraliiev@mozilla.com
push dateMon, 28 Apr 2014 18:51:11 +0000
treeherdermozilla-beta@c95ac01e332e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs972286
milestone30.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 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;