Bug 1391017 - Use a .bookmark-item placeholder for the bookmarks toolbar items in the toolbar while customizing. r=Gijs

MozReview-Commit-ID: JB9OSshDLKy

--HG--
extra : rebase_source : 2eded7e6868e231ae5ac91a693848cc42a221236

browser/base/content/browser-places.js

@@ -1176,10 +1176,6 @@ var PlacesToolbarHelper = {
     return document.getElementById("PlacesToolbar");
   },
 
-  get _placeholder() {
-    return document.getElementById("bookmarks-toolbar-placeholder");
-  },
-
   init: function PTH_init(forceToolbarOverflowCheck) {
     let viewElt = this._viewElt;
     if (!viewElt || viewElt._placesView)

browser/base/content/browser.css

@@ -423,23 +423,23 @@ toolbarpaletteitem[place="toolbar"] {
 %endif
 
 #bookmarks-toolbar-placeholder,
+#bookmarks-toolbar-button,
 toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
-#personal-bookmarks[cui-areatype="menu-panel"] > #PlacesToolbar,
-#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #PlacesToolbar {
+#personal-bookmarks:-moz-any([overflowedItem=true], [cui-areatype="menu-panel"]) > #PlacesToolbar {
   display: none;
 }
 
+toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
+toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button,
+#personal-bookmarks:-moz-any([overflowedItem=true], [cui-areatype="menu-panel"]) > #bookmarks-toolbar-button {
+  display: -moz-box;
+}
+
 #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=true] > #bookmarks-toolbar-placeholder {
-  display: -moz-box;
-}
-
 #nav-bar-customization-target > #personal-bookmarks,
 toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
 toolbar:not(#TabsToolbar) > #personal-bookmarks {
@@ -784,10 +784,6 @@ toolbarspring {
   unicode-bidi: plaintext;
 }
 
-toolbarbutton.bookmark-item {
-  max-width: 13em;
-}
-
 /* Apply crisp rendering for favicons at exactly 2dppx resolution */
 @media (resolution: 2dppx) {
   #alltabs-popup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon,
@@ -796,8 +792,7 @@ toolbarbutton.bookmark-item {
   }
 
   .bookmark-item > .toolbarbutton-icon,
-  .bookmark-item > .menu-iconic-left > .menu-iconic-icon,
-  #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
+  .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
     image-rendering: -moz-crisp-edges;
   }
   /* Synced Tabs sidebar */

browser/base/content/browser.xul

@@ -985,8 +985,11 @@
                    cui-areatype="toolbar"
                    removable="true">
         <toolbarbutton id="bookmarks-toolbar-placeholder"
+                       class="bookmark-item"
+                       label="&bookmarksToolbarItem.label;"/>
+        <toolbarbutton id="bookmarks-toolbar-button"
                        class="toolbarbutton-1"
-                       mousethrough="never"
+                       flex="1"
                        label="&bookmarksToolbarItem.label;"
                        oncommand="PlacesToolbarHelper.onPlaceholderCommand();"/>
         <hbox flex="1"

browser/base/content/theme-vars.inc.css

@@ -25,8 +25,7 @@
   list-style-image: var(--bookmark_star-icon) !important;
 }
 
-:root[lwthemeicons~="--bookmark_menu-icon"] #bookmarks-menu-button:-moz-lwtheme,
-:root[lwthemeicons~="--bookmark_menu-icon"] #bookmarks-menu-button[cui-areatype='toolbar'] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-lwtheme {
+:root[lwthemeicons~="--bookmark_menu-icon"] #bookmarks-menu-button:-moz-lwtheme {
   list-style-image: var(--bookmark_menu-icon) !important;
 }
 
@@ -129,7 +128,6 @@
 :root[lwthemeicons~="--reload-icon"] #reload-button:-moz-lwtheme,
 :root[lwthemeicons~="--stop-icon"] #stop-button:-moz-lwtheme,
 :root[lwthemeicons~="--bookmark_star-icon"] #bookmarks-menu-button:-moz-lwtheme,
-:root[lwthemeicons~="--bookmark_menu-icon"] #bookmarks-menu-button[cui-areatype='toolbar'] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-lwtheme,
 :root[lwthemeicons~="--downloads-icon"] #downloads-button:-moz-lwtheme,
 :root[lwthemeicons~="--home-icon"] #home-button:-moz-lwtheme,
 :root[lwthemeicons~="--app_menu-icon"] #PanelUI-menu-button:-moz-lwtheme,

browser/components/extensions/test/browser/browser_ext_themes_icons.js

@@ -14,22 +14,7 @@ const ENCODED_IMAGE_DATA = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci
    */
 function verifyButtonProperties(selector, shouldHaveCustomStyling, message) {
   try {
-    let element;
-    // This selector is different than the others because it's the only
-    // toolbarbutton that we ship by default that has type="menu-button",
-    // which don't place a unique ID on the associated dropmarker-icon.
-    if (selector == "#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon") {
-      if (message.includes("panel")) {
-        // The dropmarker isn't shown in the menupanel.
-        return;
-      }
-      element = document.querySelector("#bookmarks-menu-button");
-      element = document.getAnonymousElementByAttribute(element, "class", "toolbarbutton-menubutton-dropmarker");
-      element = document.getAnonymousElementByAttribute(element, "class", "dropmarker-icon");
-    } else {
-      element = document.querySelector(selector);
-    }
-
+    let element = document.querySelector(selector);
     let listStyleImage = getComputedStyle(element).listStyleImage;
     info(`listStyleImage for fox.svg is ${listStyleImage}`);
     is(listStyleImage.includes("moz-extension:"), shouldHaveCustomStyling, message);

browser/themes/linux/browser.css

@@ -80,15 +80,6 @@
   background-color: -moz-Dialog;
 }
 
-#bookmarks-toolbar-placeholder {
-  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
-}
-
-toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
-#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
-  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
-}
-
 /* Bookmark menus */
 menu.bookmark-item,
 menuitem.bookmark-item {

browser/themes/linux/jar.mn

@@ -43,7 +43,6 @@ browser.jar:
   skin/classic/browser/places/allBookmarks.png        (places/allBookmarks.png)
   skin/classic/browser/places/bookmarksMenu.png       (places/bookmarksMenu.png)
   skin/classic/browser/places/bookmarksToolbar.png    (places/bookmarksToolbar.png)
-  skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)
   skin/classic/browser/places/bookmarks-menu-arrow.png           (places/bookmarks-menu-arrow.png)
   skin/classic/browser/places/calendar.png            (places/calendar.png)
 * skin/classic/browser/places/editBookmarkOverlay.css (places/editBookmarkOverlay.css)

browser/themes/osx/browser.css

@@ -254,30 +254,6 @@
   opacity: 0.7;
 }
 
-#bookmarks-toolbar-placeholder {
-  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
-}
-
-toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
-#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
-  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
-}
-
-@media (min-resolution: 2dppx) {
-  #bookmarks-toolbar-placeholder {
-    list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png") !important;
-  }
-
-  toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
-  #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
-    list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel@2x.png") !important;
-  }
-
-  #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
 /* ----- BOOKMARK MENUS ----- */
 
 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {

browser/themes/osx/jar.mn

@@ -59,8 +59,6 @@ browser.jar:
   skin/classic/browser/places/bookmarksMenu.png             (places/bookmarksMenu.png)
   skin/classic/browser/places/bookmarksToolbar.png          (places/bookmarksToolbar.png)
   skin/classic/browser/places/bookmarksToolbar@2x.png       (places/bookmarksToolbar@2x.png)
-  skin/classic/browser/places/bookmarksToolbar-menuPanel.png    (places/bookmarksToolbar-menuPanel.png)
-  skin/classic/browser/places/bookmarksToolbar-menuPanel@2x.png (places/bookmarksToolbar-menuPanel@2x.png)
   skin/classic/browser/places/history.png                   (places/history.png)
   skin/classic/browser/places/history@2x.png                (places/history@2x.png)
   skin/classic/browser/places/toolbar.png                   (places/toolbar.png)

browser/themes/shared/browser.inc.css

@@ -47,7 +47,7 @@
 
 #navigator-toolbox > toolbar[customizing]:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
   outline: 1px dashed;
-  outline-offset: -4px;
+  outline-offset: -3px;
   -moz-outline-radius: 2px;
   /* Avoid the toolbar having no height when there's no items in it */
   min-height: 22px;

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -279,10 +279,6 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
   display: none;
 }
 
-#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;

browser/themes/shared/customizableui/panelUI.inc.css

@@ -536,8 +536,6 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
-.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
-.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 .panel-customization-placeholder-child > .toolbarbutton-icon {
   width: @panelPaletteIconSize@;
   height: @panelPaletteIconSize@;
@@ -548,7 +546,6 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
-.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 .panel-customization-placeholder-child > .toolbarbutton-icon {
   /* Explanation for the below formula (A / B - C)
      A
@@ -578,14 +575,6 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
   padding: 0;
 }
 
-#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;
-}
-
 #edit-controls@inAnyPanel@ > #copy-button,
 #zoom-controls@inAnyPanel@ > #zoom-reset-button {
   border-left: none;

browser/themes/shared/toolbarbutton-icons.inc.css

@@ -180,20 +180,12 @@ toolbar[brighttext] .toolbarbutton-1 {
   list-style-image: url("chrome://browser/skin/home.svg");
 }
 
-#bookmarks-menu-button {
+#bookmarks-toolbar-button,
+#bookmarks-toolbar-placeholder {
   list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
-#bookmarks-menu-button[starred] {
-  list-style-image: url("chrome://browser/skin/bookmark.svg");
-}
-
-toolbar:not([brighttext]) #bookmarks-menu-button[starred] > .toolbarbutton-menubutton-button {
-  -moz-context-properties: fill;
-  fill: var(--toolbarbutton-icon-fill-attention);
-}
-
-#bookmarks-menu-button > .toolbarbutton-icon {
+#bookmarks-menu-button {
   list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
 }
 

browser/themes/shared/toolbarbuttons.inc.css

@@ -267,15 +267,17 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
   padding: 4px;
 }
 
-.bookmark-item > .toolbarbutton-icon,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
+toolbarbutton.bookmark-item:not(#bookmarks-toolbar-placeholder) {
+  max-width: 13em;
+}
+
+.bookmark-item > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 /* Force the display of the label for bookmarks */
-.bookmark-item > .toolbarbutton-text,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
+.bookmark-item > .toolbarbutton-text {
   display: -moz-box !important;
 }
 

browser/themes/windows/browser.css

@@ -263,17 +263,6 @@
   }
 }
 
-/* ::::: bookmark buttons ::::: */
-
-#bookmarks-toolbar-placeholder {
-  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
-}
-
-toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
-#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
-  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
-}
-
 /* ::::: bookmark menus ::::: */
 
 menu.bookmark-item,

browser/themes/windows/jar.mn

@@ -56,7 +56,6 @@ browser.jar:
   skin/classic/browser/places/query.png                        (places/query.png)
   skin/classic/browser/places/bookmarksMenu.png                (places/bookmarksMenu.png)
   skin/classic/browser/places/bookmarksToolbar.png             (places/bookmarksToolbar.png)
-  skin/classic/browser/places/bookmarksToolbar-menuPanel.png   (places/bookmarksToolbar-menuPanel.png)
   skin/classic/browser/places/calendar.png                     (places/calendar.png)
   skin/classic/browser/places/toolbarDropMarker.png            (places/toolbarDropMarker.png)
   skin/classic/browser/places/editBookmarkOverlay.css          (places/editBookmarkOverlay.css)