Backed out 6 changesets (bug 1354086) for OSX permaleaks on a CLOSED TREE.
authorRyan VanderMeulen <ryanvm@gmail.com>
Wed, 19 Jul 2017 13:11:48 -0400
changeset 418371 e4c251c24cb0822b0c31615b581354c4662af8b8
parent 418370 44ca093166f6164b7b790e4e5e760c21cd8121bb
child 418372 7289ba6c2ad114c86b9254d3859040e1251dcc7f
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1354086
milestone56.0a1
backs outf90ff9792bbd66c7462806f5cc959cf73f419184
a370f8134644b025274b81b8233641154bfeb2bb
87fc17c32c51d5bb78faadfbce71f9c809b9e5e8
d627b7b2dea5b619e4f0016687da7ec0f3904503
979385d4c2465dd5b4429d2cdaf349b8670fcc81
b074842173dcf99bb7bc93d3f3c8be31c90baf23
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
Backed out 6 changesets (bug 1354086) for OSX permaleaks on a CLOSED TREE. Backed out changeset f90ff9792bbd (bug 1354086) Backed out changeset a370f8134644 (bug 1354086) Backed out changeset 87fc17c32c51 (bug 1354086) Backed out changeset d627b7b2dea5 (bug 1354086) Backed out changeset 979385d4c246 (bug 1354086) Backed out changeset b074842173dc (bug 1354086)
browser/base/content/browser.css
browser/components/customizableui/CustomizableUI.jsm
browser/components/customizableui/PanelMultiView.jsm
browser/components/customizableui/content/panelUI.inc.xul
browser/components/extensions/ExtensionPopups.jsm
browser/components/extensions/ext-browserAction.js
browser/components/extensions/test/browser/browser_ext_browserAction_popup_resize.js
browser/components/extensions/test/browser/head.js
browser/themes/shared/browser.inc
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/menupanel.inc.css
browser/themes/shared/toolbarbutton-icons.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1266,17 +1266,16 @@ toolbarpaletteitem[place="palette"] > #d
   padding-bottom: 10px;
 }
 
 #customization-panelHolder > #widget-overflow-fixed-list {
   flex: 0 1 auto; /* Size to content, but allow ourselves to shrink */
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  overflow-x: hidden;
 }
 
 #customization-container:not([photon]) #customization-panelHolder {
   overflow-y: hidden;
 }
 
 #customization-container[photon] #customization-panel-container {
   display: flex;
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -779,17 +779,17 @@ var CustomizableUIInternal = {
         } // Special widgets are always removable, so no need to check them
 
         if (inPrivateWindow && widget && !widget.showInPrivateBrowsing) {
           continue;
         }
 
         this.ensureButtonContextMenu(node, aAreaNode);
         if (node.localName == "toolbarbutton") {
-          if (areaIsPanel && !gPhotonStructure) {
+          if (areaIsPanel) {
             node.setAttribute("wrap", "true");
           } else {
             node.removeAttribute("wrap");
           }
         }
 
         // This needs updating in case we're resetting / undoing a reset.
         if (widget) {
@@ -965,19 +965,17 @@ var CustomizableUIInternal = {
     for (let child of aPanelContents.children) {
       if (child.localName != "toolbarbutton") {
         if (child.localName == "toolbaritem") {
           this.ensureButtonContextMenu(child, aPanelContents, true);
         }
         continue;
       }
       this.ensureButtonContextMenu(child, aPanelContents, true);
-      if (!gPhotonStructure) {
-        child.setAttribute("wrap", "true");
-      }
+      child.setAttribute("wrap", "true");
     }
 
     this.registerBuildArea(aArea, aPanelContents);
   },
 
   onWidgetAdded(aWidgetId, aArea, aPosition) {
     this.insertNode(aWidgetId, aArea, aPosition, true);
 
@@ -4206,17 +4204,17 @@ OverflowableToolbar.prototype = {
 
   show() {
     if (this._panel.state == "open") {
       return Promise.resolve();
     }
     return new Promise(resolve => {
       let doc = this._panel.ownerDocument;
       this._panel.hidden = false;
-      let photonView = this._panel.querySelector("photonpanelmultiview");
+      let photonView = this._panel.querySelector("panelmultiview");
       let contextMenu;
       if (photonView) {
         let mainViewId = photonView.getAttribute("mainViewId");
         let mainView = doc.getElementById(mainViewId);
         contextMenu = doc.getElementById(mainView.getAttribute("context"));
       } else {
         contextMenu = doc.getElementById(this._panel.getAttribute("context"));
       }
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -410,17 +410,16 @@ this.PanelMultiView = class {
   showMainView() {
     if (this.showingSubView) {
       let viewNode = this._currentSubView;
       let evt = new this.window.CustomEvent("ViewHiding", { bubbles: true, cancelable: true });
       viewNode.dispatchEvent(evt);
       if (this.panelViews) {
         viewNode.removeAttribute("current");
         this.showSubView(this._mainViewId);
-        this.node.setAttribute("viewtype", "main");
       } else {
         this._transitionHeight(() => {
           viewNode.removeAttribute("current");
           this._currentSubView = null;
           this.node.setAttribute("viewtype", "main");
         });
       }
     }
@@ -509,21 +508,21 @@ this.PanelMultiView = class {
           let results = await Promise.all(detail.blockers);
           cancel = cancel || results.some(val => val === false);
         } catch (e) {
           Cu.reportError(e);
           cancel = true;
         }
       }
 
-      this._viewShowing = null;
       if (cancel) {
         return;
       }
 
+      this._viewShowing = null;
       this._currentSubView = viewNode;
       viewNode.setAttribute("current", true);
       if (this.panelViews) {
         this.node.setAttribute("viewtype", "subview");
         if (!playTransition)
           this.descriptionHeightWorkaround(viewNode);
       }
 
@@ -563,17 +562,17 @@ this.PanelMultiView = class {
         // is visible.
         this._viewContainer.style.height = Math.max(previousRect.height, this._mainViewHeight) + "px";
         this._viewContainer.style.width = previousRect.width + "px";
         // Lock the dimensions of the window that hosts the popup panel.
         let rect = this._panel.popupBoxObject.getOuterScreenRect();
         this._panel.setAttribute("width", rect.width);
         this._panel.setAttribute("height", rect.height);
 
-        this._viewBoundsOffscreen(viewNode, previousRect, viewRect => {
+        this._viewBoundsOffscreen(viewNode, viewRect => {
           this._transitioning = true;
           if (this._autoResizeWorkaroundTimer)
             window.clearTimeout(this._autoResizeWorkaroundTimer);
           this._viewContainer.setAttribute("transition-reverse", reverse);
           let nodeToAnimate = reverse ? previousViewNode : viewNode;
 
           if (!reverse) {
             // We set the margin here to make sure the view is positioned next
@@ -592,45 +591,41 @@ this.PanelMultiView = class {
             " var(--panelui-subview-transition-duration)";
           nodeToAnimate.style.willChange = "transform";
           nodeToAnimate.style.borderInlineStart = "1px solid var(--panel-separator-color)";
 
           // Wait until after the first paint to ensure setting 'current=true'
           // has taken full effect; once both views are visible, we want to
           // correctly measure rects using `dwu.getBoundsWithoutFlushing`.
           window.addEventListener("MozAfterPaint", () => {
-            if (this._panel.state != "open") {
-              onTransitionEnd();
-              return;
-            }
             // Now set the viewContainer dimensions to that of the new view, which
             // kicks of the height animation.
             this._viewContainer.style.height = Math.max(viewRect.height, this._mainViewHeight) + "px";
             this._viewContainer.style.width = viewRect.width + "px";
             this._panel.removeAttribute("width");
             this._panel.removeAttribute("height");
 
             // The 'magic' part: build up the amount of pixels to move right or left.
             let moveToLeft = (this._dir == "rtl" && !reverse) || (this._dir == "ltr" && reverse);
             let movementX = reverse ? viewRect.width : previousRect.width;
             let moveX = (moveToLeft ? "" : "-") + movementX;
             nodeToAnimate.style.transform = "translateX(" + moveX + "px)";
             // We're setting the width property to prevent flickering during the
             // sliding animation with smaller views.
             nodeToAnimate.style.width = viewRect.width + "px";
 
-            this._viewContainer.addEventListener("transitionend", this._transitionEndListener = ev => {
+            let listener;
+            this._viewContainer.addEventListener("transitionend", listener = ev => {
               // It's quite common that `height` on the view container doesn't need
               // to transition, so we make sure to do all the work on the transform
               // transition-end, because that is guaranteed to happen.
               if (ev.target != nodeToAnimate || ev.propertyName != "transform")
                 return;
 
-              this._viewContainer.removeEventListener("transitionend", this._transitionEndListener);
-              this._transitionEndListener = null;
+              this._viewContainer.removeEventListener("transitionend", listener);
               onTransitionEnd();
               this._transitioning = false;
               this._resetKeyNavigation(previousViewNode);
 
               // Myeah, panel layout auto-resizing is a funky thing. We'll wait
               // another few milliseconds to remove the width and height 'fixtures',
               // to be sure we don't flicker annoyingly.
               // NB: HACK! Bug 1363756 is there to fix this.
@@ -677,40 +672,25 @@ this.PanelMultiView = class {
     })().catch(e => Cu.reportError(e));
   }
 
   /**
    * Calculate the correct bounds of a panelview node offscreen to minimize the
    * amount of paint flashing and keep the stack vs panel layouts from interfering.
    *
    * @param {panelview} viewNode Node to measure the bounds of.
-   * @param {Rect}      previousRect Rect representing the previous view
-   *                                 (used to fill in any blanks).
    * @param {Function}  callback Called when we got the measurements in and pass
    *                             them on as its first argument.
    */
-  _viewBoundsOffscreen(viewNode, previousRect, callback) {
+  _viewBoundsOffscreen(viewNode, callback) {
     if (viewNode.__lastKnownBoundingRect) {
       callback(viewNode.__lastKnownBoundingRect);
       return;
     }
 
-    if (viewNode.customRectGetter) {
-      // Can't use Object.assign directly with a DOM Rect object because its properties
-      // aren't enumerable.
-      let {height, width} = previousRect;
-      let rect = Object.assign({height, width}, viewNode.customRectGetter());
-      let {header} = viewNode;
-      if (header) {
-        rect.height += this._dwu.getBoundsWithoutFlushing(header).height;
-      }
-      callback(rect);
-      return;
-    }
-
     let oldSibling = viewNode.nextSibling || null;
     this._offscreenViewStack.appendChild(viewNode);
 
     this.window.addEventListener("MozAfterPaint", () => {
       let viewRect = this._dwu.getBoundsWithoutFlushing(viewNode);
 
       try {
         this._viewStack.insertBefore(viewNode, oldSibling);
@@ -924,27 +904,19 @@ this.PanelMultiView = class {
         }
         break;
       case "popupshown":
         // Now that the main view is visible, we can check the height of the
         // description elements it contains.
         this.descriptionHeightWorkaround();
         break;
       case "popuphidden":
-        // WebExtensions consumers can hide the popup from viewshowing, or
-        // mid-transition, which disrupts our state:
-        this._viewShowing = null;
-        this._transitioning = false;
         this.node.removeAttribute("panelopen");
         this.showMainView();
         if (this.panelViews) {
-          if (this._transitionEndListener) {
-            this._viewContainer.removeEventListener("transitionend", this._transitionEndListener);
-            this._transitionEndListener = null;
-          }
           for (let panelView of this._viewStack.children) {
             if (panelView.nodeName != "children") {
               panelView.style.removeProperty("min-width");
               panelView.style.removeProperty("max-width");
             }
           }
           this.window.removeEventListener("keydown", this);
           this._panel.removeEventListener("mousemove", this);
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -401,30 +401,30 @@
        type="arrow"
        noautofocus="true"
        position="bottomcenter topright"
 #ifndef MOZ_PHOTON_THEME
        context="toolbar-context-menu"
 #endif
        hidden="true">
 #ifdef MOZ_PHOTON_THEME
-  <photonpanelmultiview mainViewId="widget-overflow-mainView">
+  <panelmultiview mainViewId="widget-overflow-mainView">
     <panelview id="widget-overflow-mainView"
                context="toolbar-context-menu">
 #endif
       <vbox id="widget-overflow-scroller">
         <vbox id="widget-overflow-list" class="widget-overflow-list"
               overflowfortoolbar="nav-bar"/>
         <toolbarseparator id="widget-overflow-fixed-separator" hidden="true"/>
         <vbox id="widget-overflow-fixed-list" class="widget-overflow-list" hidden="true"
               emptylabel="&customizeMode.emptyOverflowList.description;"/>
       </vbox>
 #ifdef MOZ_PHOTON_THEME
     </panelview>
-  </photonpanelmultiview>
+  </panelmultiview>
 #endif
 </panel>
 
 <panel id="customization-tipPanel"
        type="arrow"
        flip="none"
        side="left"
        position="leftcenter topright"
--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@@ -321,19 +321,16 @@ class BasePopup {
 
       // Set a maximum height on the <panelview> element to our preferred
       // maximum height, so that the PanelUI resizing code can make an accurate
       // calculation. If we don't do this, the flex sizing logic will prevent us
       // from ever reporting a preferred size smaller than the height currently
       // available to us in the panel.
       height = Math.max(height, this.viewHeight);
       this.viewNode.style.maxHeight = `${height}px`;
-      // Used by the panelmultiview code to figure out sizing without reparenting
-      // (which would destroy the browser and break us).
-      this.lastCalculatedInViewHeight = height;
     } else {
       this.browser.style.width = `${width}px`;
       this.browser.style.minWidth = `${width}px`;
       this.browser.style.height = `${height}px`;
       this.browser.style.minHeight = `${height}px`;
     }
 
     let event = new this.window.CustomEvent("WebExtPopupResized", {detail});
@@ -517,20 +514,16 @@ class ViewPopup extends BasePopup {
 
     this.browser.swapDocShells(browser);
     this.destroyBrowser(browser);
 
     if (this.dimensions && !this.fixedWidth) {
       this.resizeBrowser(this.dimensions);
     }
 
-    this.viewNode.customRectGetter = () => {
-      return {height: this.lastCalculatedInViewHeight || this.viewHeight};
-    };
-
     this.tempPanel.remove();
     this.tempPanel = null;
 
     this.shown = true;
 
     if (this.destroyed) {
       this.closePopup();
       this.destroy();
--- a/browser/components/extensions/ext-browserAction.js
+++ b/browser/components/extensions/ext-browserAction.js
@@ -176,16 +176,20 @@ this.browserAction = class extends Exten
         let popupURL = this.getProperty(tab, "popup");
         this.tabManager.addActiveTabPermission(tab);
 
         // Popups are shown only if a popup URL is defined; otherwise
         // a "click" event is dispatched. This is done for compatibility with the
         // Google Chrome onClicked extension API.
         if (popupURL) {
           try {
+            // FIXME: The line below needs to change eventually, but for now:
+            // ensure the view is _always_ visible _before_ `popup.attach()` is
+            // called. PanelMultiView.jsm dictates different behavior.
+            event.target.setAttribute("current", true);
             let popup = this.getPopup(document.defaultView, popupURL);
             let attachPromise = popup.attach(event.target);
             event.detail.addBlocker(attachPromise);
             await attachPromise;
             TelemetryStopwatch.finish(POPUP_OPEN_MS_HISTOGRAM, this);
             if (this.eventQueue.length) {
               let histogram = Services.telemetry.getHistogramById(POPUP_RESULT_HISTOGRAM);
               histogram.add("popupShown");
--- a/browser/components/extensions/test/browser/browser_ext_browserAction_popup_resize.js
+++ b/browser/components/extensions/test/browser/browser_ext_browserAction_popup_resize.js
@@ -177,22 +177,16 @@ async function testPopupSize(standardsMo
 
       let panelTop = browserWin.mozInnerScreenY + panelRect.top;
       ok(panelTop >= browserWin.screen.availTop, `Top of popup should be on-screen. (${panelTop} >= ${browserWin.screen.availTop})`);
     }
   };
 
   await awaitBrowserLoaded(browser);
 
-  let panelview = browser.closest("panelview");
-  // Need to wait first for the forced panel width and for the panelview's border to be gone,
-  // then for layout to happen again. Otherwise the removal of the border between views in the
-  // panelmultiview trips up our width checking causing it to be off-by-one.
-  await BrowserTestUtils.waitForCondition(() => (!panel.hasAttribute("width") && (!panelview || !panelview.style.borderInlineStart)));
-  await promiseAnimationFrame(browserWin);
   // Wait long enough to make sure the initial resize debouncing timer has
   // expired.
   await delay(100);
 
   let dims = await promiseContentDimensions(browser);
 
   is(dims.isStandards, standardsMode, "Document has the expected compat mode");
 
--- a/browser/components/extensions/test/browser/head.js
+++ b/browser/components/extensions/test/browser/head.js
@@ -200,17 +200,17 @@ var awaitBrowserLoaded = browser => Cont
 var awaitExtensionPanel = async function(extension, win = window, awaitLoad = true) {
   let {originalTarget: browser} = await BrowserTestUtils.waitForEvent(
     win.document, "WebExtPopupLoaded", true,
     event => event.detail.extension.id === extension.id);
 
   await Promise.all([
     promisePopupShown(getPanelForNode(browser)),
 
-    awaitLoad && awaitBrowserLoaded(browser),
+    awaitLoad && awaitBrowserLoaded(browser, awaitLoad),
   ]);
 
   return browser;
 };
 
 function getCustomizableUIPanelID() {
   return gPhotonStructure ? CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
                           : CustomizableUI.AREA_PANEL;
@@ -247,17 +247,18 @@ var showBrowserAction = async function(e
   }
 };
 
 var clickBrowserAction = async function(extension, win = window) {
   await promiseAnimationFrame(win);
   await showBrowserAction(extension, win);
 
   let widget = getBrowserActionWidget(extension).forWindow(win);
-  widget.node.click();
+
+  EventUtils.synthesizeMouseAtCenter(widget.node, {}, win);
 };
 
 function closeBrowserAction(extension, win = window) {
   let group = getBrowserActionWidget(extension);
 
   let node = win.document.getElementById(group.viewId);
   CustomizableUI.hidePanelForNode(node);
 
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -12,14 +12,12 @@
 % Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen
 % and want it to behave like other toolbar buttons.
 %define primaryToolbarButtons @primaryToolbarButtons@, #restore-button
 %endif
 
 %define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 
 %ifdef MOZ_PHOTON_THEME
-%define attributeSelectorForToolbar
 %define panelPaletteIconSize var(--panel-palette-icon-size)
 %else
-%define attributeSelectorForToolbar [cui-areatype="toolbar"]
 %define panelPaletteIconSize 32px
 %endif
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1213,20 +1213,16 @@ panelview:not([mainView]) .subviewbutton
 .subviewbutton.panel-subview-footer > .menu-accel-container {
   padding-inline-start: 6px;
 }
 
 .subviewbutton:not(.panel-subview-footer) {
   margin: 0;
 }
 
-%ifdef MOZ_PHOTON_THEME
-#widget-overflow-fixed-list .toolbarbutton-1 > .toolbarbutton-text,
-#widget-overflow-list .toolbarbutton-1 > .toolbarbutton-text,
-%endif
 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
 /* Bookmark items need a more specific selector. */
 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
   font: menu;
 }
 
 .subviewbutton[shortcut]::after {
@@ -1260,18 +1256,16 @@ panelview:not([mainView]) .subviewbutton
 
 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
   margin-left: 4px;
   margin-right: 4px;
 }
 
 /* START photon adjustments */
 
-.widget-overflow-list > toolbarpaletteitem[place=panel] .toolbarbutton-1,
-photonpanelmultiview .widget-overflow-list .toolbarbutton-1,
 photonpanelmultiview .PanelUI-subView .subviewbutton,
 photonpanelmultiview .cui-widget-panelview .subviewbutton:not(.panel-subview-footer),
 photonpanelmultiview .subview-subheader {
   border-radius: 0;
   border-width: 0;
   margin: 0;
   padding: 4px 12px;
 }
@@ -1308,17 +1302,17 @@ photonpanelmultiview .subviewbutton[chec
   list-style-image: url(chrome://browser/skin/check.svg);
 }
 
 photonpanelmultiview .subviewbutton > .menu-iconic-left {
   -moz-appearance: none;
   margin-inline-end: 0;
 }
 
-#appMenu-popup .toolbaritem-combined-buttons {
+photonpanelmultiview .toolbaritem-combined-buttons@inAnyPanel@ {
   -moz-box-align: center;
   -moz-box-orient: horizontal;
   border: 0;
   border-radius: 0;
   margin-inline-end: 8px;
 }
 
 photonpanelmultiview .toolbaritem-combined-buttons > label {
@@ -1381,21 +1375,19 @@ photonpanelmultiview .panel-subview-foot
 }
 
 photonpanelmultiview panelview:not([mainView]) .subviewbutton.panel-subview-footer > .toolbarbutton-text {
   text-align: start;
 }
 
 /* END photon adjustments */
 
-%ifndef MOZ_PHOTON_THEME
+panelview .toolbarbutton-1,
 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
-.widget-overflow-list > toolbaritem:not(:first-child),
-%endif
-panelview .toolbarbutton-1 {
+.widget-overflow-list > toolbaritem:not(:first-child) {
   margin-top: 6px;
 }
 
 panelview .toolbarbutton-1@buttonStateHover@,
 toolbarbutton.subviewbutton@buttonStateHover@,
 menu.subviewbutton@menuStateHover@,
 menuitem.subviewbutton@menuStateHover@,
 .share-provider-button@buttonStateHover@:not([checked="true"]),
@@ -1609,17 +1601,16 @@ toolbarpaletteitem[place="palette"] > .t
 }
 
 toolbarpaletteitem[place="palette"] > #search-container {
   min-width: 7em;
   width: 7em;
   min-height: 37px;
 }
 
-%ifndef MOZ_PHOTON_THEME
 .toolbaritem-combined-buttons@inAnyPanel@ {
   background-color: transparent;
   border-radius: 2px;
   border: 1px solid;
   border-color: transparent;
   border-bottom-color: var(--panel-separator-color);
   padding: 0;
   transition-property: background-color, border-color;
@@ -1630,52 +1621,38 @@ toolbarpaletteitem[place="palette"] > #s
 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {
   border-top-color: transparent !important;
 }
 
 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@,
 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
   margin-top: -1px;
 }
-%endif
 
-.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
+:root:not([photon-structure]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
   border: 0;
+  padding: .5em;
   margin: 0;
   -moz-box-flex: 1;
-%ifndef MOZ_PHOTON_THEME
   min-width: calc(@menuPanelButtonWidth@);
   max-width: calc(@menuPanelButtonWidth@);
-  padding: .5em;
   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
   height: calc(2.2em + 4px);
   max-height: none;
-%else
-  padding-top: 4px;
-  padding-bottom: 4px;
-%endif
   -moz-box-orient: horizontal;
 }
 
-%ifdef MOZ_PHOTON_THEME
-/* In customize mode, extend the buttons *only* in the panel, just to make them not look stupid */
-toolbarpaletteitem[place=panel] > .toolbaritem-combined-buttons > toolbarbutton {
-  min-width: calc(@menuPanelButtonWidth@ - 1px);
-  max-width: calc(@menuPanelButtonWidth@ - 1px);
-}
-%else
-#edit-controls@inAnyPanel@ > #copy-button,
-#zoom-controls@inAnyPanel@ > #zoom-reset-button {
+:root:not([photon-structure]) #edit-controls@inAnyPanel@ > #copy-button,
+:root:not([photon-structure]) #zoom-controls@inAnyPanel@ > #zoom-reset-button {
   /* reduce the width with 2px for this button to compensate for two separators
      of 1px. */
   min-width: calc(@menuPanelButtonWidth@ - 2px);
   max-width: calc(@menuPanelButtonWidth@ - 2px);
 }
-%endif
 
 #main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
   opacity: .25;
 }
 
 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 %ifdef XP_MACOSX
   min-width: 6ch;
@@ -1726,58 +1703,50 @@ toolbarpaletteitem[place=panel] > .toolb
 %else
 #widget-overflow-mainView {
 %endif
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 #widget-overflow-scroller {
-%ifdef MOZ_PHOTON_THEME
-  margin-top: 4px;
-  margin-bottom: 4px;
-%else
+%ifndef MOZ_PHOTON_THEME
   max-height: 30em;
+%endif
   margin-top: 10px;
   margin-bottom: 10px;
-%endif
 }
 
 .widget-overflow-list {
   width: @menuPanelWidth@;
-%ifndef MOZ_PHOTON_THEME
   padding-left: 10px;
   padding-right: 10px;
-%endif
 }
 
 toolbaritem[overflowedItem=true],
 .widget-overflow-list .toolbarbutton-1 {
   width: 100%;
   max-width: @menuPanelWidth@;
-%ifndef MOZ_PHOTON_THEME
   min-height: 36px;
-%endif
   background-repeat: no-repeat;
   background-position: 0 center;
 }
 
 .widget-overflow-list .toolbarbutton-1,
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-box-align: center;
   -moz-box-orient: horizontal;
 }
 
 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
   text-align: start;
   padding-inline-start: .5em;
 }
 
-%ifndef MOZ_PHOTON_THEME
 .widget-overflow-list > .toolbaritem-combined-buttons {
   min-height: 28px;
 }
 
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
   content: "";
   display: -moz-box;
   width: 1px;
@@ -1785,17 +1754,16 @@ toolbaritem[overflowedItem=true],
   margin-inline-end: -1px;
   background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
   background-clip: padding-box;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1px 18px;
   box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
 }
-%endif
 
 .subviewbutton[checked="true"] {
   background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;
 }
 
 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
   background-position: center right 7px;
 }
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -1,11 +1,10 @@
 /* Menu panel and palette styles */
 
-%ifndef MOZ_PHOTON_THEME
 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > :-moz-any(@primaryToolbarButtons@) {
   list-style-image: url(chrome://browser/skin/menuPanel.svg);
 }
 
 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
@@ -14,20 +13,22 @@ toolbarpaletteitem[place="palette"] > :-
   fill: currentColor;
 }
 
 #home-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #home-button {
   -moz-image-region: rect(0px, 128px, 32px, 96px);
 }
 
+%ifndef MOZ_PHOTON_THEME
 #bookmarks-menu-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
   -moz-image-region: rect(0px, 192px, 32px, 160px);
 }
+%endif
 
 #history-panelmenu[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #history-panelmenu {
   -moz-image-region: rect(0px, 224px, 32px, 192px);
 }
 
 #downloads-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #downloads-button {
@@ -171,17 +172,16 @@ toolbarpaletteitem[place="palette"] > #e
 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
   -moz-image-region: rect(0px, 80px, 16px, 64px);
 }
 
 #zoom-controls@inAnyPanel@ > #zoom-in-button,
 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
   -moz-image-region: rect(0px, 96px, 16px, 80px);
 }
-%endif
 
 #add-share-provider {
   list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
   -moz-image-region: rect(0px, 96px, 16px, 80px);
 }
 
 
 #appMenu-new-window-button {
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -160,157 +160,151 @@ toolbar[brighttext] .toolbarbutton-1 {
   list-style-image: url("chrome://browser/skin/reload.svg");
 }
 
 #stop-button {
   list-style-image: url("chrome://browser/skin/stop.svg");
 }
 %endif
 
-#home-button@attributeSelectorForToolbar@ {
+#home-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/home.svg");
 }
 
-#bookmarks-menu-button@attributeSelectorForToolbar@ {
+#bookmarks-menu-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
-#bookmarks-menu-button@attributeSelectorForToolbar@[starred] {
+#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
   list-style-image: url("chrome://browser/skin/bookmark.svg");
 }
 
-toolbar:not([brighttext]) #bookmarks-menu-button@attributeSelectorForToolbar@[starred] > .toolbarbutton-menubutton-button {
+toolbar:not([brighttext]) #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button {
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 %ifdef MOZ_PHOTON_THEME
-#bookmarks-menu-button > .toolbarbutton-icon {
+#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-icon {
   list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
 }
 %else
 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   list-style-image: url("chrome://browser/skin/bookmarksMenu.svg");
 }
 %endif
 
-#history-panelmenu@attributeSelectorForToolbar@ {
+#history-panelmenu[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/history.svg");
 }
 
-#downloads-button@attributeSelectorForToolbar@ {
+#downloads-button[cui-areatype="toolbar"] {
 %ifdef MOZ_PHOTON_THEME
   list-style-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar");
 %else
   list-style-image: url("chrome://browser/skin/download.svg");
 %endif
 }
 
-#add-ons-button@attributeSelectorForToolbar@ {
+#add-ons-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/addons.svg");
 }
 
-#open-file-button@attributeSelectorForToolbar@ {
+#open-file-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/open.svg");
 }
 
-#save-page-button@attributeSelectorForToolbar@ {
+#save-page-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/save.svg");
 }
 
-#sync-button@attributeSelectorForToolbar@ {
+#sync-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/synced-tabs.svg");
 }
 
-#containers-panelmenu@attributeSelectorForToolbar@ {
+#containers-panelmenu[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/containers.svg");
 }
 
-#feed-button@attributeSelectorForToolbar@ {
+#feed-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/feed.svg");
 }
 
-#social-share-button@attributeSelectorForToolbar@ {
+#social-share-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/share.svg");
 }
 
-#characterencoding-button@attributeSelectorForToolbar@{
+#characterencoding-button[cui-areatype="toolbar"]{
   list-style-image: url("chrome://browser/skin/characterEncoding.svg");
 }
 
-#new-window-button@attributeSelectorForToolbar@ {
+#new-window-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
-#e10s-button@attributeSelectorForToolbar@ {
+#e10s-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
 #e10s-button > .toolbarbutton-icon {
   transform: scaleY(-1);
 }
 
-#new-tab-button@attributeSelectorForToolbar@ {
+#new-tab-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/new-tab.svg");
 }
 
-#privatebrowsing-button@attributeSelectorForToolbar@ {
+#privatebrowsing-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
 }
 
-#find-button@attributeSelectorForToolbar@ {
+#find-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/find.svg");
 }
 
-#print-button@attributeSelectorForToolbar@ {
+#print-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/print.svg");
 }
 
 %ifdef XP_MACOSX
 #restore-button,
 %endif
-#fullscreen-button@attributeSelectorForToolbar@ {
+#fullscreen-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/fullscreen.svg");
 }
 
-#developer-button@attributeSelectorForToolbar@ {
+#developer-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/developer.svg");
 }
 
-#preferences-button@attributeSelectorForToolbar@ {
+#preferences-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/settings.svg");
 }
 
 #PanelUI-menu-button {
   list-style-image: url("chrome://browser/skin/menu.svg");
 }
 
-%ifdef MOZ_PHOTON_THEME
-%define PSEUDO_FOR_COMBINED_BUTTONS
-%else
-%define PSEUDO_FOR_COMBINED_BUTTONS :not(@inAnyPanel@)
-%endif
-
-#edit-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #cut-button {
+#edit-controls:not(@inAnyPanel@) > #cut-button {
   list-style-image: url("chrome://browser/skin/edit-cut.svg");
 }
 
-#edit-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #copy-button {
+#edit-controls:not(@inAnyPanel@) > #copy-button {
   list-style-image: url("chrome://browser/skin/edit-copy.svg");
 }
 
-#edit-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #paste-button {
+#edit-controls:not(@inAnyPanel@) > #paste-button {
   list-style-image: url("chrome://browser/skin/edit-paste.svg");
 }
 
-#zoom-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #zoom-out-button {
+#zoom-controls:not(@inAnyPanel@) > #zoom-out-button {
   list-style-image: url("chrome://browser/skin/zoom-out.svg");
 }
 
-#zoom-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #zoom-in-button {
+#zoom-controls:not(@inAnyPanel@) > #zoom-in-button {
   list-style-image: url("chrome://browser/skin/zoom-in.svg");
 }
 
 #nav-bar-overflow-button {
   list-style-image: url("chrome://browser/skin/chevron.svg");
 }
 
 %ifdef MOZ_PHOTON_ANIMATIONS
@@ -373,36 +367,36 @@ toolbar:not([brighttext]) #bookmarks-men
   width: 1278px;
 }
 
 #nav-bar-overflow-button[animate]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: overflow-animation-rtl;
 }
 %endif
 
-#email-link-button@attributeSelectorForToolbar@ {
+#email-link-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/mail.svg");
 }
 
-#sidebar-button@attributeSelectorForToolbar@ {
+#sidebar-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/sidebars-right.svg");
 }
 
-#sidebar-button@attributeSelectorForToolbar@:-moz-locale-dir(ltr):not([positionend]),
-#sidebar-button@attributeSelectorForToolbar@:-moz-locale-dir(rtl)[positionend] {
+#sidebar-button[cui-areatype="toolbar"]:-moz-locale-dir(ltr):not([positionend]),
+#sidebar-button[cui-areatype="toolbar"]:-moz-locale-dir(rtl)[positionend] {
   list-style-image: url("chrome://browser/skin/sidebars.svg");
 }
 
-#panic-button@attributeSelectorForToolbar@ {
+#panic-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/forget.svg");
 }
 
-#panic-button@attributeSelectorForToolbar@[open] {
+#panic-button[cui-areatype="toolbar"][open] {
   fill: rgb(213, 32, 20);
 }
 
-#webide-button@attributeSelectorForToolbar@ {
+#webide-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/webIDE.svg");
 }
 
 #library-button {
   list-style-image: url("chrome://browser/skin/library.svg");
 }