Bug 1507875 - Remove the customizable ui toolbarpaletteitem binding;r=Gijs
authorBrian Grinstead <bgrinstead@mozilla.com>
Tue, 20 Nov 2018 17:01:48 +0000
changeset 503683 8f7476054232c929476c1a5112bb855f6ba7612f
parent 503682 efa49008bfc788e3354d6150eab71a7f105e3102
child 503684 29b3f0dfc6bb418b73a9cd519241b4ec38d0efbc
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1507875
milestone65.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 1507875 - Remove the customizable ui toolbarpaletteitem binding;r=Gijs This removes the wrapping box inside the anonymous content, and replaces the anonymous label with an ::after CSS rule that sets text based on the [title] attribute. Because it doesn't replicate the anonymous wrapping box with light DOM: - Calling JS don't need to be updated (the child added via appendChild is still a direct descendant of the element). - Many CSS selectors don't need to be updated (if they were targeting the slotted children as direct descendants. However, CSS selectors that were targeting the anonymous content directly do need to be updated, since those nodes are removed. Differential Revision: https://phabricator.services.mozilla.com/D12172
browser/base/content/browser.css
browser/components/customizableui/content/jar.mn
browser/components/customizableui/content/toolbar.xml
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
@@ -320,16 +320,17 @@ window:not([chromehidden~="toolbar"]) #n
 }
 
 #personal-bookmarks {
   -moz-window-dragging: inherit;
 }
 
 toolbarpaletteitem {
   -moz-window-dragging: no-drag;
+  -moz-box-pack: start;
 }
 
 .titlebar-buttonbox-container {
   -moz-box-ordinal-group: 1000;
 }
 
 %ifdef XP_MACOSX
 #titlebar-fullscreen-button {
@@ -1255,52 +1256,39 @@ toolbarpaletteitem[dragover] {
   flex-shrink: 0;
   flex-wrap: wrap;
 }
 
 #customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
   display: -moz-box;
 }
 
-toolbarpaletteitem {
-  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbarpaletteitem");
-}
-
 toolbarpaletteitem[place="palette"] {
   -moz-box-orient: vertical;
   width: 7em;
+  max-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:not([place="palette"]) > .toolbarpaletteitem-label,
 toolbarpaletteitem[place="palette"][hidden] {
   display: none;
 }
 
-.toolbarpaletteitem-box {
+toolbarpaletteitem > toolbarbutton,
+toolbarpaletteitem > toolbaritem {
   /* Prevent children from getting events */
   pointer-events: none;
 }
 
-toolbarpaletteitem[place="palette"] > .toolbarpaletteitem-box {
-  -moz-box-pack: center;
-  width: 7em;
-  max-width: 7em;
-}
-
-toolbarpaletteitem:not([place="palette"]) > .toolbarpaletteitem-box {
-  -moz-box-flex: 1;
-}
-
 #main-window[customizing=true] .addon-banner-item,
 #main-window[customizing=true] .panel-banner-item {
   display: none;
 }
 
 /* UI Tour */
 
 @keyframes uitour-wobble {
--- a/browser/components/customizableui/content/jar.mn
+++ b/browser/components/customizableui/content/jar.mn
@@ -1,8 +1,6 @@
 # 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/.
 
 browser.jar:
   content/browser/customizableui/panelUI.js
-  content/browser/customizableui/toolbar.xml
-
deleted file mode 100644
--- a/browser/components/customizableui/content/toolbar.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0"?>
-<!-- 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/. -->
-
-<bindings id="browserToolbarBindings"
-          xmlns="http://www.mozilla.org/xbl"
-          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-          xmlns:xbl="http://www.mozilla.org/xbl">
-  <binding id="toolbarpaletteitem">
-    <content>
-      <xul:hbox class="toolbarpaletteitem-box">
-        <children/>
-      </xul:hbox>
-      <xul:label class="toolbarpaletteitem-label" xbl:inherits="xbl:text=title"/>
-    </content>
-  </binding>
-</bindings>
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -249,23 +249,30 @@ toolbarpaletteitem[place="toolbar"]:not(
   outline: 1px dotted;
   -moz-outline-radius: 2.5px;
 }
 
 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
   outline-offset: -5px;
 }
 
+toolbarpaletteitem[place=palette]::after {
+  content: attr(title);
+  display: block;
+  text-align: center;
+}
+
 toolbarpaletteitem[place=palette] > toolbarspring {
   width: 7em;
   min-width: 7em;
   outline: 1px solid;
   outline-offset: -8px;
   opacity: .6;
-  height: 37px;
+  min-height: 37px;
+  max-height: 37px;
 }
 
 toolbarpaletteitem[place=toolbar] > toolbarspring {
   outline: 1px solid;
   outline-offset: -2px;
   opacity: .6;
   margin-top: 5px;
   margin-bottom: 5px;
@@ -275,20 +282,27 @@ toolbarpaletteitem[place=toolbar] > tool
   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;
 }
 
-#customization-palette > toolbarpaletteitem > label {
-  text-align: center;
-  margin-left: 0;
-  margin-right: 0;
+/* Squeeze together the multi-button toolbarpaletteitems: */
+#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button,
+#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button {
+  -moz-box-align: end;
+}
+#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button,
+#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button {
+  -moz-box-align: start;
+}
+#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button {
+  -moz-box-flex: 0;
 }
 
 #customization-uidensity-touch-spacer {
   border-top: 1px solid ThreeDLightShadow;
   margin: 0 -10px 10px;
 }
 
 #customization-uidensity-autotouchmode-checkbox {
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1198,16 +1198,17 @@ toolbarpaletteitem[place="palette"] > .t
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
 toolbarpaletteitem[place="palette"] > #search-container {
   min-width: 7em;
   width: 7em;
   min-height: 37px;
+  max-height: 37px;
 }
 
 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
   border: 0;
   margin: 0;
   -moz-box-flex: 1;
   padding-top: 4px;
   padding-bottom: 4px;