Bug 1388029 - remove dead CSS relating to the old panel, r?jaws draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 07 Nov 2017 12:52:56 +0000
changeset 697176 a5fd09e13572385485be04a780c7f3d968c4757c
parent 697175 e569c8c8c7c9b219a04705f9967d1c46902f503e
child 697177 781e2533e2cc81856c89d6a677183988bea9258f
push id88916
push userbmo:gijskruitbosch+bugs@gmail.com
push dateMon, 13 Nov 2017 14:22:40 +0000
reviewersjaws
bugs1388029
milestone59.0a1
Bug 1388029 - remove dead CSS relating to the old panel, r?jaws MozReview-Commit-ID: FoXjvWPc9in
browser/components/customizableui/PanelMultiView.jsm
browser/components/customizableui/test/browser_876926_customize_mode_wrapping.js
browser/themes/shared/customizableui/customizeMode.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -1027,45 +1027,16 @@ this.PanelMultiView = class {
         // currently 11px on Mac, 13px on Windows, and 13px on Linux. We also
         // want an extra margin, both for visual reasons and to prevent glitches
         // due to small rounding errors. So, we just use a value that makes
         // sense for all platforms. If the arrow visuals change significantly,
         // this value will be easy to adjust.
         const EXTRA_MARGIN_PX = 20;
         maxHeight -= EXTRA_MARGIN_PX;
         this._viewStack.style.maxHeight = maxHeight + "px";
-
-        // When using block-in-box layout inside a scrollable frame, like in the
-        // main menu contents scroller, if we allow the contents to scroll then
-        // it will not cause its container to expand. Thus, we layout first
-        // without any scrolling (using "display: flex;"), and only if the view
-        // exceeds the available space we set the height explicitly and enable
-        // scrolling.
-        let mainView = this._mainView;
-        if (mainView && mainView.hasAttribute("blockinboxworkaround")) {
-          let blockInBoxWorkaround = () => {
-            let mainViewHeight =
-                this._dwu.getBoundsWithoutFlushing(mainView).height;
-            if (mainViewHeight > maxHeight) {
-              mainView.style.height = maxHeight + "px";
-              mainView.setAttribute("exceeding", "true");
-            }
-          };
-          // On Windows, we cannot measure the full height of the main view
-          // until it is visible. Unfortunately, this causes a visible jump when
-          // the view needs to scroll, but there is no easy way around this.
-          if (AppConstants.platform == "win") {
-            // We register a "once" listener so we don't need to store the value
-            // of maxHeight elsewhere on the object.
-            this._panel.addEventListener("popupshown", blockInBoxWorkaround,
-                                         { once: true });
-          } else {
-            blockInBoxWorkaround();
-          }
-        }
         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": {
@@ -1092,23 +1063,16 @@ this.PanelMultiView = class {
           this._mainViewHeight = 0;
           this._mainViewWidth = 0;
           this._viewContainer.style.removeProperty("min-height");
           this._viewStack.style.removeProperty("max-height");
           this._viewContainer.style.removeProperty("min-width");
           this._viewContainer.style.removeProperty("max-width");
         }
 
-        // Always try to layout the panel normally when reopening it. This is
-        // also the layout that will be used in customize mode.
-        let mainView = this._mainView;
-        if (mainView && mainView.hasAttribute("blockinboxworkaround")) {
-          mainView.style.removeProperty("height");
-          mainView.removeAttribute("exceeding");
-        }
         this._dispatchViewEvent(this.node, "PanelMultiViewHidden");
         break;
       }
     }
   }
 
   /**
    * Based on going up or down, select the previous or next focusable button
--- a/browser/components/customizableui/test/browser_876926_customize_mode_wrapping.js
+++ b/browser/components/customizableui/test/browser_876926_customize_mode_wrapping.js
@@ -4,17 +4,16 @@
 
 "use strict";
 
 const kXULWidgetId = "a-test-button"; // we'll create a button with this ID.
 const kAPIWidgetId = "feed-button";
 const kPanel = CustomizableUI.AREA_FIXED_OVERFLOW_PANEL;
 const kToolbar = CustomizableUI.AREA_NAVBAR;
 const kVisiblePalette = "customization-palette";
-const kPlaceholderClass = "panel-customization-placeholder";
 
 function checkWrapper(id) {
   is(document.querySelectorAll("#wrapper-" + id).length, 1, "There should be exactly 1 wrapper for " + id + " in the customizing window.");
 }
 
 async function ensureVisibleIfInPalette(node) {
     if (node.parentNode.parentNode == gNavToolbox.palette) {
       node.scrollIntoView();
@@ -38,17 +37,17 @@ var move = {
     await ensureVisibleIfInPalette(nodeToMove);
     simulateItemDrag(nodeToMove, targetNode);
   },
   "dragToItem": async function(id, target) {
     let targetNode = document.getElementById(target);
     if (targetNode.customizationTarget) {
       targetNode = targetNode.customizationTarget;
     }
-    let items = targetNode.querySelectorAll("toolbarpaletteitem:not(." + kPlaceholderClass + ")");
+    let items = targetNode.querySelectorAll("toolbarpaletteitem");
     if (target == kPanel) {
       targetNode = items[items.length - 1];
     } else {
       targetNode = items[0];
     }
     let nodeToMove = document.getElementById(id);
     await ensureVisibleIfInPalette(nodeToMove);
     simulateItemDrag(nodeToMove, targetNode);
@@ -119,17 +118,17 @@ async function checkToolbar(id, method) 
     isLast(kToolbar, toolbarPlacements, id);
   }
   checkWrapper(id);
 }
 
 async function checkPanel(id, method) {
   let panelPlacements = getAreaWidgetIds(kPanel);
   await move[method](id, kPanel);
-  let children = document.getElementById(kPanel).querySelectorAll("toolbarpaletteitem:not(." + kPlaceholderClass + ")");
+  let children = document.getElementById(kPanel).querySelectorAll("toolbarpaletteitem");
   let otherChildren = otherWin.document.getElementById(kPanel).children;
   let newPlacements = panelPlacements.concat([id]);
   // Relative position of the new item from the end:
   let position = -1;
   // For the drag to item case, we drag to the last item, making the dragged item the
   // penultimate item. We can't well use the first item because the panel has complicated
   // rules about rearranging wide items (which, by default, the first two items are).
   if (method == "dragToItem") {
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -3,17 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Customization mode */
 
 :root {
   --drag-drop-transition-duration: .3s;
 }
 
-#main-window[customizing] .customization-target:not(#PanelUI-contents):not(#widget-overflow-fixed-list) {
+#main-window[customizing] .customization-target:not(#widget-overflow-fixed-list) {
   min-width: 100px;
 }
 
 #customization-container {
   background-color: var(--toolbar-non-lwt-bgcolor);
   background-image: var(--toolbar-non-lwt-bgimage);
   color: var(--toolbar-non-lwt-textcolor);
   text-shadow: none;
@@ -169,17 +169,16 @@
 toolbarpaletteitem[place="toolbar"] {
   transition: border-width 250ms ease-in-out;
 }
 
 toolbarpaletteitem[mousedown] {
   cursor: -moz-grabbing;
 }
 
-.panel-customization-placeholder,
 toolbarpaletteitem[place="palette"],
 toolbarpaletteitem[place="panel"] {
   transition: transform var(--drag-drop-transition-duration) ease-in-out;
 }
 
 #customization-palette {
   transition: opacity .3s ease-in-out;
   opacity: 0;
@@ -189,17 +188,16 @@ toolbarpaletteitem[place="panel"] {
   opacity: 1;
 }
 
 toolbarpaletteitem toolbarbutton[disabled] {
   color: inherit !important;
 }
 
 #widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
-toolbarpaletteitem[notransition].panel-customization-placeholder,
 toolbarpaletteitem[notransition][place="toolbar"],
 toolbarpaletteitem[notransition][place="palette"],
 toolbarpaletteitem[notransition][place="panel"] {
   transition: none;
 }
 
 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -232,45 +232,16 @@ panelview {
 panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
   overflow: hidden;
 }
 
 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
   padding: 0;
 }
 
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
-  line-height: 1.2;
-  max-height: 2.4em;
-}
-
-.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
-.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
-  -moz-hyphens: auto;
-}
-
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
-  position: absolute;
-  clip: rect(-0.1em, auto, 2.6em, auto);
-}
-
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
-  text-align: center;
-  /* Need to override toolkit theming which sets margin: 0 !important; */
-  margin: 2px 0 0 !important;
-}
-
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
-  text-align: center;
-  margin: -1px 0 0;
-}
-
 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
   margin-inline-start: 0;
 }
 
 #BMB_bookmarksPopup,
 .panel-mainview {
   max-width: @standaloneSubviewWidth@;
@@ -411,54 +382,22 @@ photonpanelmultiview .panel-subview-body
 }
 
 /* END photonpanelview adjustments */
 
 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
   padding-bottom: 0;
 }
 
-#PanelUI-contents {
-  display: block;
-  flex: 1 0 auto;
-  margin-left: auto;
-  margin-right: auto;
-  padding: .5em 0;
-  max-width: @menuPanelWidth@;
-}
-
-#PanelUI-contents-scroller {
-  -moz-box-flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  width: @menuPanelWidth@;
-  padding-left: 5px;
-  padding-right: 5px;
-  -moz-box-align: center;
-}
-
-/* Allow box layout to take over when the view exceeds the available space. */
-#PanelUI-mainView:not([exceeding]) > #PanelUI-contents-scroller {
-  display: flex;
-}
-
 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
   min-width: 0;
   min-height: 0;
   margin: 0;
 }
 
-.panelUI-grid .toolbarbutton-1,
-.panel-customization-placeholder-child {
-  -moz-appearance: none;
-  -moz-box-orient: vertical;
-  width: calc(@menuPanelButtonWidth@);
-  height: calc(51px + 2.2em);
-}
-
 .animate-out {
   animation-name: widget-animate-out;
   animation-fill-mode: forwards;
   animation-duration: 500ms;
   animation-timing-function: var(--animation-easing-function);
 }
 
 @keyframes widget-animate-out {
@@ -490,18 +429,17 @@ toolbarbutton[constrain-size="true"][cui
   -moz-box-orient: vertical;
   padding: 12px 0 9px;
   margin: 0;
 }
 
 /* above we treat the container as the icon for the margins, that is so the
 /* badge itself is positioned correctly. Here we make sure that the icon itself
 /* has the minimum size we want, but no padding/margin. */
-.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   width: @panelPaletteIconSize@;
   height: @panelPaletteIconSize@;
   min-width: @panelPaletteIconSize@;
   min-height: @panelPaletteIconSize@;
   margin: 0;
   padding: 0;
 }