Bug 1354117 - remove old panel code from panelUI and CSS, r?jaws draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 01 Aug 2017 19:59:38 +0100
changeset 621138 2e6b36cfdb08fc4a08972aa2fefbd9b35de32cbf
parent 621137 22e7d3f2e658bfa552bdbaa34f691843919592a2
child 621139 74020fce8e957cead6e03b78ed96a0ee9828fcc7
push id72277
push usergijskruitbosch@gmail.com
push dateFri, 04 Aug 2017 12:03:53 +0000
reviewersjaws
bugs1354117
milestone57.0a1
Bug 1354117 - remove old panel code from panelUI and CSS, r?jaws MozReview-Commit-ID: G6a9ybDxqki
browser/base/content/browser.css
browser/base/content/browser.xul
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/content/panelUI.js
browser/components/customizableui/test/browser_editcontrols_update.js
browser/themes/shared/customizableui/customizeMode.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -221,17 +221,17 @@ toolbar[overflowable] > .customization-t
 }
 
 toolbar:not([overflowing]) > .overflow-button,
 toolbar[customizing] > .overflow-button {
   display: none;
 }
 
 window:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
-#nav-bar[customizing][photon-structure] > .overflow-button {
+#nav-bar[customizing] > .overflow-button {
   display: -moz-box;
 }
 
 /* The ids are ugly, but this should be reasonably performant, and
  * using a tagname as the last item would be less so.
  */
 #widget-overflow-list:empty + #widget-overflow-fixed-separator,
 #widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
@@ -1337,51 +1337,37 @@ toolbarpaletteitem[dragover] {
   flex-wrap: wrap;
 }
 
 #customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
   display: -moz-box;
 }
 
 toolbarpaletteitem[place="palette"] {
-  width: 10em;
-  /* icon (32) + margin (2 * 4) + button padding/border (2 * 4) + label margin (~2) + label
-   * line-height (1.5em): */
-  height: calc(50px + 1.5em);
-  margin-bottom: 5px;
-  overflow: hidden;
-  display: inline-block;
-}
-
-#main-window[photon-structure] toolbarpaletteitem[place="palette"] {
   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbarpaletteitem-palette-wrapping-label");
   width: 7em;
   /* icon (16) + margin (9 + 12) + 3 lines of text: */
   height: calc(39px + 3em);
+  margin-bottom: 5px;
   margin-inline-end: 24px;
   overflow: visible;
+  display: inline-block;
   vertical-align: top;
 }
 
 toolbarpaletteitem[place="palette"][hidden] {
   display: none;
 }
 
 #customization-palette .toolbarpaletteitem-box {
   -moz-box-pack: center;
   width: 7em;
   max-width: 7em;
 }
 
-#main-window:not([photon-structure]) #customization-palette .toolbarpaletteitem-box {
-  -moz-box-flex: 1;
-  width: 10em;
-  max-width: 10em;
-}
-
 #main-window[customizing=true] .addon-banner-item,
 #main-window[customizing=true] .panel-banner-item {
   display: none;
 }
 
 /* UI Tour */
 
 @keyframes uitour-wobble {
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -324,20 +324,18 @@
       <toolbarbutton label="&sidebarMenuClose.label;"
                      class="subviewbutton"
                      oncommand="SidebarUI.hide()"/>
     </panel>
 
     <menupopup id="toolbar-context-menu"
                onpopupshowing="onViewToolbarsPopupShowing(event, document.getElementById('viewToolbarsMenuSeparator'));">
       <menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
-                photonaccesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
-                photonlabel="&customizeMenu.pinToOverflowMenu.label;"
-                accesskey="&customizeMenu.moveToPanel.accesskey;"
-                label="&customizeMenu.moveToPanel.label;"
+                accesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
+                label="&customizeMenu.pinToOverflowMenu.label;"
                 contexttype="toolbaritem"
                 class="customize-context-moveToPanel"/>
       <menuitem oncommand="gCustomizeMode.removeFromArea(document.popupNode)"
                 accesskey="&customizeMenu.removeFromToolbar.accesskey;"
                 label="&customizeMenu.removeFromToolbar.label;"
                 contexttype="toolbaritem"
                 class="customize-context-removeFromToolbar"/>
       <menuitem id="toolbar-context-reloadAllTabs"
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -437,37 +437,31 @@
 #endif
   <!-- This menu is here because not having it in the menu in which it's used flickers
        when hover styles overlap. See https://bugzilla.mozilla.org/show_bug.cgi?id=1378427 .
        -->
   <menupopup id="customizationPanelItemContextMenu"
              onpopupshowing="gCustomizeMode.onPanelContextMenuShowing(event)">
     <menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
               id="customizationPanelItemContextMenuPin"
-              photonaccesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
-              photonlabel="&customizeMenu.pinToOverflowMenu.label;"
-              accesskey="&customizeMenu.moveToPanel.accesskey;"
-              label="&customizeMenu.moveToPanel.label;"
+              accesskey="&customizeMenu.pinToOverflowMenu.accesskey;"
+              label="&customizeMenu.pinToOverflowMenu.label;"
               closemenu="single"
               class="customize-context-moveToPanel"/>
     <menuitem oncommand="gCustomizeMode.addToToolbar(document.popupNode)"
               id="customizationPanelItemContextMenuUnpin"
               closemenu="single"
               class="customize-context-moveToToolbar"
-              photonaccesskey="&customizeMenu.unpinFromOverflowMenu.accesskey;"
-              photonlabel="&customizeMenu.unpinFromOverflowMenu.label;"
-              accesskey="&customizeMenu.moveToToolbar.accesskey;"
-              label="&customizeMenu.moveToToolbar.label;"/>
+              accesskey="&customizeMenu.unpinFromOverflowMenu.accesskey;"
+              label="&customizeMenu.unpinFromOverflowMenu.label;"/>
     <menuitem oncommand="gCustomizeMode.removeFromArea(document.popupNode)"
               closemenu="single"
               class="customize-context-removeFromPanel"
-              photonaccesskey="&customizeMenu.removeFromToolbar.accesskey;"
-              photonlabel="&customizeMenu.removeFromToolbar.label;"
-              accesskey="&customizeMenu.removeFromMenu.accesskey;"
-              label="&customizeMenu.removeFromMenu.label;"/>
+              accesskey="&customizeMenu.removeFromToolbar.accesskey;"
+              label="&customizeMenu.removeFromToolbar.label;"/>
     <menuseparator/>
     <menuitem command="cmd_CustomizeToolbars"
               class="viewCustomizeToolbar"
               accesskey="&viewCustomizeToolbar.accesskey;"
               label="&viewCustomizeToolbar.label;"/>
   </menupopup>
 </panel>
 
@@ -574,20 +568,18 @@
 
 <menupopup id="customizationPaletteItemContextMenu">
   <menuitem oncommand="gCustomizeMode.addToToolbar(document.popupNode)"
             class="customize-context-addToToolbar"
             accesskey="&customizeMenu.addToToolbar.accesskey;"
             label="&customizeMenu.addToToolbar.label;"/>
   <menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
             class="customize-context-addToPanel"
-            photonaccesskey="&customizeMenu.addToOverflowMenu.accesskey;"
-            photonlabel="&customizeMenu.addToOverflowMenu.label;"
-            accesskey="&customizeMenu.addToPanel.accesskey;"
-            label="&customizeMenu.addToPanel.label;"/>
+            accesskey="&customizeMenu.addToOverflowMenu.accesskey;"
+            label="&customizeMenu.addToOverflowMenu.label;"/>
 </menupopup>
 
 <menupopup id="customizationPanelContextMenu">
   <menuitem command="cmd_CustomizeToolbars"
             accesskey="&customizeMenu.addMoreItems.accesskey;"
             label="&customizeMenu.addMoreItems.label;"/>
 </menupopup>
 
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -17,28 +17,25 @@ const PanelUI = {
     return ["popupshowing", "popupshown", "popuphiding", "popuphidden"];
   },
   /**
    * Used for lazily getting and memoizing elements from the document. Lazy
    * getters are set in init, and memoizing happens after the first retrieval.
    */
   get kElements() {
     return {
-      contents: "PanelUI-contents",
-      mainView: gPhotonStructure ? "appMenu-mainView" : "PanelUI-mainView",
-      multiView: gPhotonStructure ? "appMenu-multiView" : "PanelUI-multiView",
+      mainView: "appMenu-mainView",
+      multiView: "appMenu-multiView",
       helpView: "PanelUI-helpView",
       menuButton: "PanelUI-menu-button",
-      panel: gPhotonStructure ? "appMenu-popup" : "PanelUI-popup",
+      panel: "appMenu-popup",
       notificationPanel: "appMenu-notification-popup",
-      scroller: "PanelUI-contents-scroller",
-      addonNotificationContainer: gPhotonStructure ? "appMenu-addon-banners" : "PanelUI-footer-addons",
-
-      overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
-      overflowPanel: gPhotonStructure ? "widget-overflow" : "",
+      addonNotificationContainer: "appMenu-addon-banners",
+      overflowFixedList: "widget-overflow-fixed-list",
+      overflowPanel: "widget-overflow",
       navbar: "nav-bar",
     };
   },
 
   _initialized: false,
   _notifications: null,
 
   init() {
@@ -81,91 +78,41 @@ const PanelUI = {
     window.addEventListener("activate", this);
     window.matchMedia("(-moz-overlay-scrollbars)").addListener(this._overlayScrollListenerBoundFn);
     CustomizableUI.addListener(this);
 
     for (let event of this.kEvents) {
       this.notificationPanel.addEventListener(event, this);
     }
 
-    this._initPhotonPanel();
-    this._updateContextMenuLabels();
+    // We do this sync on init because in order to have the overflow button show up
+    // we need to know whether anything is in the permanent panel area.
+    this.overflowFixedList.hidden = false;
+    // Also unhide the separator. We use CSS to hide/show it based on the panel's content.
+    this.overflowFixedList.previousSibling.hidden = false;
+    CustomizableUI.registerMenuPanel(this.overflowFixedList, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+    this.updateOverflowStatus();
+
     Services.obs.notifyObservers(null, "appMenu-notifications-request", "refresh");
 
     this._initialized = true;
   },
 
-  reinit() {
-    this._removeEventListeners();
-    // If the Photon pref changes, we need to re-init our element references.
-    this._initElements();
-    this._initPhotonPanel();
-    this._updateContextMenuLabels();
-    delete this._readyPromise;
-    this._isReady = false;
-  },
-
-  // We do this sync on init because in order to have the overflow button show up
-  // we need to know whether anything is in the permanent panel area.
-  _initPhotonPanel() {
-    if (gPhotonStructure) {
-      this.overflowFixedList.hidden = false;
-      // Also unhide the separator. We use CSS to hide/show it based on the panel's content.
-      this.overflowFixedList.previousSibling.hidden = false;
-      CustomizableUI.registerMenuPanel(this.overflowFixedList, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
-      this.navbar.setAttribute("photon-structure", "true");
-      document.documentElement.setAttribute("photon-structure", "true");
-      this.updateOverflowStatus();
-    } else {
-      this.navbar.removeAttribute("photon-structure");
-      document.documentElement.removeAttribute("photon-structure");
-    }
-  },
-
   _initElements() {
     for (let [k, v] of Object.entries(this.kElements)) {
-      if (!v) {
-        continue;
-      }
       // Need to do fresh let-bindings per iteration
       let getKey = k;
       let id = v;
       this.__defineGetter__(getKey, function() {
         delete this[getKey];
         return this[getKey] = document.getElementById(id);
       });
     }
   },
 
-  _updateContextMenuLabels() {
-    const kContextMenus = [
-      "customizationPanelItemContextMenu",
-      "customizationPaletteItemContextMenu",
-      "toolbar-context-menu",
-    ];
-    for (let menuId of kContextMenus) {
-      let menu = document.getElementById(menuId);
-      if (gPhotonStructure) {
-        let items = menu.querySelectorAll("menuitem[photonlabel]");
-        for (let item of items) {
-          item.setAttribute("nonphotonlabel", item.getAttribute("label"));
-          item.setAttribute("nonphotonaccesskey", item.getAttribute("accesskey"));
-          item.setAttribute("label", item.getAttribute("photonlabel"));
-          item.setAttribute("accesskey", item.getAttribute("photonaccesskey"));
-        }
-      } else {
-        let items = menu.querySelectorAll("menuitem[nonphotonlabel]");
-        for (let item of items) {
-          item.setAttribute("label", item.getAttribute("nonphotonlabel"));
-          item.setAttribute("accesskey", item.getAttribute("nonphotonaccesskey"));
-        }
-      }
-    }
-  },
-
   _eventListenersAdded: false,
   _ensureEventListenersAdded() {
     if (this._eventListenersAdded)
       return;
     this._addEventListeners();
   },
 
   _addEventListeners() {
@@ -241,19 +188,17 @@ const PanelUI = {
   /**
    * Opens the menu panel. If the event target has a child with the
    * toolbarbutton-icon attribute, the panel will be anchored on that child.
    * Otherwise, the panel is anchored on the event target itself.
    *
    * @param aEvent the event (if any) that triggers showing the menu.
    */
   show(aEvent) {
-    if (gPhotonStructure) {
-      this._ensureShortcutsShown();
-    }
+    this._ensureShortcutsShown();
     return new Promise(resolve => {
       this.ensureReady().then(() => {
         if (this.panel.state == "open" ||
             document.documentElement.hasAttribute("customizing")) {
           resolve();
           return;
         }
 
@@ -311,33 +256,32 @@ const PanelUI = {
   handleEvent(aEvent) {
     // Ignore context menus and menu button menus showing and hiding:
     if (aEvent.type.startsWith("popup") &&
         aEvent.target != this.panel) {
       return;
     }
     switch (aEvent.type) {
       case "popupshowing":
-        this._adjustLabelsForAutoHyphens();
         updateEditUIVisibility();
         // Fall through
       case "popupshown":
-        if (gPhotonStructure && aEvent.type == "popupshown") {
+        if (aEvent.type == "popupshown") {
           CustomizableUI.addPanelCloseListeners(this.panel);
         }
         // Fall through
       case "popuphiding":
         if (aEvent.type == "popuphiding") {
           updateEditUIVisibility();
         }
         // Fall through
       case "popuphidden":
         this._updateNotifications();
         this._updatePanelButton(aEvent.target);
-        if (gPhotonStructure && aEvent.type == "popuphidden") {
+        if (aEvent.type == "popuphidden") {
           CustomizableUI.removePanelCloseListeners(this.panel);
         }
         break;
       case "mousedown":
         if (aEvent.button == 0)
           this.toggle(aEvent);
         break;
       case "keypress":
@@ -369,77 +313,24 @@ const PanelUI = {
    * by the user.
    *
    * @param aCustomizing (optional) set to true if this was called while entering
    *        customization mode. If that's the case, we trust that customization
    *        mode will handle calling beginBatchUpdate and endBatchUpdate.
    *
    * @return a Promise that resolves once the panel is ready to roll.
    */
-  ensureReady(aCustomizing = false) {
+  ensureReady() {
     if (this._readyPromise) {
       return this._readyPromise;
     }
     this._ensureEventListenersAdded();
-    if (gPhotonStructure) {
-      this.panel.hidden = false;
-      this._readyPromise = Promise.resolve();
-      this._isReady = true;
-      return this._readyPromise;
-    }
-    this._readyPromise = (async () => {
-      if (!this._initialized) {
-        await new Promise(resolve => {
-          let delayedStartupObserver = (aSubject, aTopic, aData) => {
-            if (aSubject == window) {
-              Services.obs.removeObserver(delayedStartupObserver, "browser-delayed-startup-finished");
-              resolve();
-            }
-          };
-          Services.obs.addObserver(delayedStartupObserver, "browser-delayed-startup-finished");
-        });
-      }
-
-      this.contents.setAttributeNS("http://www.w3.org/XML/1998/namespace", "lang",
-                                   getLocale());
-      if (!this._scrollWidth) {
-        // In order to properly center the contents of the panel, while ensuring
-        // that we have enough space on either side to show a scrollbar, we have to
-        // do a bit of hackery. In particular, we calculate a new width for the
-        // scroller, based on the system scrollbar width.
-        this._scrollWidth =
-          (await ScrollbarSampler.getSystemScrollbarWidth()) + "px";
-        let cstyle = window.getComputedStyle(this.scroller);
-        let widthStr = cstyle.width;
-        // Get the calculated padding on the left and right sides of
-        // the scroller too. We'll use that in our final calculation so
-        // that if a scrollbar appears, we don't have the contents right
-        // up against the edge of the scroller.
-        let paddingLeft = cstyle.paddingLeft;
-        let paddingRight = cstyle.paddingRight;
-        let calcStr = [widthStr, this._scrollWidth,
-                       paddingLeft, paddingRight].join(" + ");
-        this.scroller.style.width = "calc(" + calcStr + ")";
-      }
-
-      if (aCustomizing) {
-        CustomizableUI.registerMenuPanel(this.contents, CustomizableUI.AREA_PANEL);
-      } else {
-        this.beginBatchUpdate();
-        try {
-          CustomizableUI.registerMenuPanel(this.contents, CustomizableUI.AREA_PANEL);
-        } finally {
-          this.endBatchUpdate();
-        }
-      }
-      this._updateQuitTooltip();
-      this.panel.hidden = false;
-      this._isReady = true;
-    })().catch(Cu.reportError);
-
+    this.panel.hidden = false;
+    this._readyPromise = Promise.resolve();
+    this._isReady = true;
     return this._readyPromise;
   },
 
   /**
    * Switch the panel to the main view if it's not already
    * in that view.
    */
   showMainView() {
@@ -508,29 +399,24 @@ const PanelUI = {
         tempPanel.setAttribute("animate", "false");
       }
       tempPanel.setAttribute("context", "");
       document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(tempPanel);
       // If the view has a footer, set a convenience class on the panel.
       tempPanel.classList.toggle("cui-widget-panelWithFooter",
                                  viewNode.querySelector(".panel-subview-footer"));
 
-      let multiView = document.createElement(gPhotonStructure ? "photonpanelmultiview" : "panelmultiview");
+      let multiView = document.createElement("photonpanelmultiview");
       multiView.setAttribute("id", "customizationui-widget-multiview");
       multiView.setAttribute("nosubviews", "true");
       multiView.setAttribute("viewCacheId", "appMenu-viewCache");
-      if (gPhotonStructure) {
-        tempPanel.setAttribute("photon", true);
-        multiView.setAttribute("mainViewId", viewNode.id);
-        multiView.appendChild(viewNode);
-      }
+      tempPanel.setAttribute("photon", true);
+      multiView.setAttribute("mainViewId", viewNode.id);
+      multiView.appendChild(viewNode);
       tempPanel.appendChild(multiView);
-      if (!gPhotonStructure) {
-        multiView.setMainView(viewNode);
-      }
       viewNode.classList.add("cui-widget-panelview");
 
       let viewShown = false;
       let panelRemover = () => {
         viewNode.classList.remove("cui-widget-panelview");
         if (viewShown) {
           CustomizableUI.removePanelCloseListeners(tempPanel);
           tempPanel.removeEventListener("popuphidden", panelRemover);
@@ -600,80 +486,42 @@ const PanelUI = {
   disableSingleSubviewPanelAnimations() {
     this._disableAnimations = true;
   },
 
   enableSingleSubviewPanelAnimations() {
     this._disableAnimations = false;
   },
 
-  onPhotonChanged() {
-    this.reinit();
-  },
-
   updateOverflowStatus() {
     let hasKids = this.overflowFixedList.hasChildNodes();
     if (hasKids && !this.navbar.hasAttribute("nonemptyoverflow")) {
       this.navbar.setAttribute("nonemptyoverflow", "true");
       this.overflowPanel.setAttribute("hasfixeditems", "true");
     } else if (!hasKids && this.navbar.hasAttribute("nonemptyoverflow")) {
       if (this.overflowPanel.state != "closed") {
         this.overflowPanel.hidePopup();
       }
       this.overflowPanel.removeAttribute("hasfixeditems");
       this.navbar.removeAttribute("nonemptyoverflow");
     }
   },
 
   onWidgetAfterDOMChange(aNode, aNextNode, aContainer, aWasRemoval) {
-    if (gPhotonStructure && aContainer == this.overflowFixedList) {
+    if (aContainer == this.overflowFixedList) {
       this.updateOverflowStatus();
-      return;
-    }
-    if (aContainer != this.contents) {
-      return;
-    }
-    if (aWasRemoval) {
-      aNode.removeAttribute("auto-hyphens");
-    }
-  },
-
-  onWidgetBeforeDOMChange(aNode, aNextNode, aContainer, aIsRemoval) {
-    if (aContainer != this.contents) {
-      return;
-    }
-    if (!aIsRemoval &&
-        (this.panel.state == "open" ||
-         document.documentElement.hasAttribute("customizing"))) {
-      this._adjustLabelsForAutoHyphens(aNode);
     }
   },
 
   onAreaReset(aArea, aContainer) {
-    if (gPhotonStructure && aContainer == this.overflowFixedList) {
+    if (aContainer == this.overflowFixedList) {
       this.updateOverflowStatus();
     }
   },
 
-  _adjustLabelsForAutoHyphens(aNode) {
-    let toolbarButtons = aNode ? [aNode] :
-                                 this.contents.querySelectorAll(".toolbarbutton-1");
-    for (let node of toolbarButtons) {
-      let label = node.getAttribute("label");
-      if (!label) {
-        continue;
-      }
-      if (label.includes("\u00ad")) {
-        node.setAttribute("auto-hyphens", "off");
-      } else {
-        node.removeAttribute("auto-hyphens");
-      }
-    }
-  },
-
   /**
    * Sets the anchor node into the open or closed state, depending
    * on the state of the panel.
    */
   _updatePanelButton() {
     this.menuButton.open = this.panel.state == "open" ||
                            this.panel.state == "showing";
   },
--- a/browser/components/customizableui/test/browser_editcontrols_update.js
+++ b/browser/components/customizableui/test/browser_editcontrols_update.js
@@ -148,37 +148,35 @@ add_task(async function test_panelui_cus
   kOverflowPanel.hidePopup();
   overridePromise = expectCommandUpdate(isMac ? 1 : 0);
   gURLBar.select();
   await overridePromise;
 
   window.resizeTo(originalWidth, window.outerHeight);
   await waitForCondition(() => !navbar.hasAttribute("overflowing"));
 
-  if (gPhotonStructure) {
-    CustomizableUI.addWidgetToArea("edit-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
-    // updateEditUIVisibility should be called when customization happens but isn't. See bug 1359790.
-    updateEditUIVisibility();
+  CustomizableUI.addWidgetToArea("edit-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+  // updateEditUIVisibility should be called when customization happens but isn't. See bug 1359790.
+  updateEditUIVisibility();
 
-    overridePromise = expectCommandUpdate(isMac ? 1 : 0);
-    gURLBar.select();
-    await overridePromise;
+  overridePromise = expectCommandUpdate(isMac ? 1 : 0);
+  gURLBar.select();
+  await overridePromise;
 
-    // Check that we get an update if we select content while the panel is open.
-    overridePromise = expectCommandUpdate(1);
-    await navbar.overflowable.show();
-    gURLBar.select();
-    await overridePromise;
+  // Check that we get an update if we select content while the panel is open.
+  overridePromise = expectCommandUpdate(1);
+  await navbar.overflowable.show();
+  gURLBar.select();
+  await overridePromise;
 
-    // And that we don't (except on mac) when the panel is hidden.
-    kOverflowPanel.hidePopup();
-    overridePromise = expectCommandUpdate(isMac ? 1 : 0);
-    gURLBar.select();
-    await overridePromise;
-  }
+  // And that we don't (except on mac) when the panel is hidden.
+  kOverflowPanel.hidePopup();
+  overridePromise = expectCommandUpdate(isMac ? 1 : 0);
+  gURLBar.select();
+  await overridePromise;
 });
 
 // Test updating when the edit-controls are moved to the palette.
 add_task(async function test_panelui_customize_to_palette() {
   await startCustomizing();
   let palette = document.getElementById("customization-palette");
   simulateItemDrag(document.getElementById("edit-controls"), palette);
   await endCustomizing();
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -386,53 +386,25 @@ toolbarpaletteitem[place=palette] > tool
 
 toolbarpaletteitem[place=toolbar] > toolbarspring {
   outline: 1px solid GrayText;
   outline-offset: -2px;
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
-  margin-top: 20px;
-}
-
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
-  margin-left: 0;
-  margin-right: 0;
-  max-width: 24px;
-  min-width: 24px;
-  max-height: 24px;
-  min-height: 24px;
-  padding: 4px;
-}
-
-:root:not([photon-structure]) #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
-:root:not([photon-structure]) #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
-  width: 16px;
-}
-
 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
 }
 
 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
   display: none;
 }
 
-:root:not([photon-structure]) #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
-  -moz-box-pack: center;
-  min-height: 48px;
-}
-
 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
   margin-inline-end: 5px;
 }
 
 #customization-palette > toolbarpaletteitem > label {
   text-align: center;
   margin-left: 0;
   margin-right: 0;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -21,20 +21,16 @@
 %include ../browser.inc
 
 :root {
   --panel-ui-exit-subview-gutter-width: 38px;
   --appmenu-yellow-warning-border-color: hsl(45, 100%, 77%);
   --appmenu-yellow-warning-color: #FFEFBF;
   --appmenu-yellow-warning-hover-color: #FFE8A2;
   --appmenu-yellow-warning-active-color: #FFE38F;
-  --panel-palette-icon-size: 32px;
-}
-
-:root[photon-structure] {
   --panel-palette-icon-size: 16px;
 }
 
 #PanelUI-popup #PanelUI-contents:empty {
   height: 128px;
 }
 
 #PanelUI-popup #PanelUI-contents:empty::before {
@@ -396,46 +392,40 @@ photonpanelmultiview .panel-subview-body
 }
 
 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
   min-width: 0;
   min-height: 0;
   margin: 0;
 }
 
-:root:not([photon-structure]) toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
 .panelUI-grid .toolbarbutton-1,
 .panel-customization-placeholder-child {
   -moz-appearance: none;
   -moz-box-orient: vertical;
   width: calc(@menuPanelButtonWidth@);
   height: calc(51px + 2.2em);
 }
 
-/* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
- * should have a min-width set so they abide by the width set above (which they do outside of
- * customize mode because they're in a flexed container) */
-:root:not([photon-structure]) toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
-  min-width: 0.01px;
-}
-
 /* Help SDK buttons fit in. */
 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 toolbarpaletteitem[place="palette"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon,
 toolbarpaletteitem[place="panel"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon,
 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   height: @panelPaletteIconSize@;
   width: @panelPaletteIconSize@;
 }
 
-.customization-palette .toolbarbutton-1 {
+#customization-palette .toolbarbutton-1 {
   -moz-appearance: none;
   -moz-box-orient: vertical;
+  padding: 12px 0 9px;
+  margin: 0;
 }
 
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-appearance: none;
   -moz-box-orient: vertical;
   width: calc(@menuPanelButtonWidth@ - 2px);
   height: calc(49px + 2.2em);
   border: 0;
@@ -547,21 +537,17 @@ toolbaritem[cui-areatype="menu-panel"][s
   height: @panelPaletteIconSize@;
   min-width: @panelPaletteIconSize@;
   min-height: @panelPaletteIconSize@;
 }
 
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
-:root:not([photon-structure]) .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-:root:not([photon-structure]) .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
-:root:not([photon-structure]) .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
-:root:not([photon-structure]) .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 .panel-customization-placeholder-child > .toolbarbutton-icon {
   /* Explanation for the below formula (A / B - C)
      A
        Each button is @menuPanelButtonWidth@ wide
      B
        Each button has two margins.
      C (46px / 2 = 23px)
        The button icon is 32 pixels wide.
@@ -581,25 +567,16 @@ toolbaritem[cui-areatype="menu-panel"][s
   width: @panelPaletteIconSize@;
   height: @panelPaletteIconSize@;
   min-width: @panelPaletteIconSize@;
   min-height: @panelPaletteIconSize@;
   margin: 0;
   padding: 0;
 }
 
-:root[photon-structure] .customization-palette .toolbarbutton-1 {
-  padding: 12px 0 9px;
-  margin: 0;
-}
-
-:root[photon-structure] toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
-  -moz-box-flex: 1;
-}
-
 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
   -moz-box-flex: 1;
 }
 
 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
   margin-inline-end: 2px;
 }
 
@@ -1172,31 +1149,29 @@ toolbaritem[cui-areatype="menu-panel"][s
 #customization-palette .toolbarbutton-text {
   display: none;
 }
 
 panelview .toolbarbutton-1,
 .subviewbutton,
 .widget-overflow-list .toolbarbutton-1,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-.share-provider-button,
-:root:not([photon-structure]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
+.share-provider-button {
   -moz-appearance: none;
   padding: 0 6px;
   background-color: transparent;
   border-radius: 2px;
   border-style: solid;
   border-color: transparent;
 }
 
 panelview .toolbarbutton-1,
 .subviewbutton,
 .widget-overflow-list .toolbarbutton-1,
-.share-provider-button,
-:root:not([photon-structure]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
+.share-provider-button {
   border-width: 1px;
 }
 
 .subviewbutton.panel-subview-footer {
   border-radius: 0;
   border: none;
 }