Bug 1354086 - always use toolbar icons in overflow panel, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 05 Jul 2017 15:41:08 +0100
changeset 418484 4a279604f7ba3e11599f91a270f6c52d4ab299f5
parent 418483 5ca4811f78368b4f5722dae3801a0a9370e89277
child 418485 ae0195a7359affc1d6e44befb827d948fece070d
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)
reviewersmikedeboer
bugs1354086
milestone56.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 1354086 - always use toolbar icons in overflow panel, r=mikedeboer Unfortunately we still use menuPanel-small.svg for the share buttons, and menuPanel.svg for some add-on-related items. We should rename and shrink those icons separately. MozReview-Commit-ID: 6ndcITx4G1L
browser/themes/shared/browser.inc
browser/themes/shared/menupanel.inc.css
browser/themes/shared/toolbarbutton-icons.inc.css
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -12,12 +12,14 @@
 % 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/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -1,10 +1,11 @@
 /* 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,
@@ -13,22 +14,20 @@ 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 {
@@ -172,16 +171,17 @@ 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,151 +160,157 @@ 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[cui-areatype="toolbar"] {
+#home-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/home.svg");
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"] {
+#bookmarks-menu-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
+#bookmarks-menu-button@attributeSelectorForToolbar@[starred] {
   list-style-image: url("chrome://browser/skin/bookmark.svg");
 }
 
-toolbar:not([brighttext]) #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button {
+toolbar:not([brighttext]) #bookmarks-menu-button@attributeSelectorForToolbar@[starred] > .toolbarbutton-menubutton-button {
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 %ifdef MOZ_PHOTON_THEME
-#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-icon {
+#bookmarks-menu-button > .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[cui-areatype="toolbar"] {
+#history-panelmenu@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/history.svg");
 }
 
-#downloads-button[cui-areatype="toolbar"] {
+#downloads-button@attributeSelectorForToolbar@ {
 %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[cui-areatype="toolbar"] {
+#add-ons-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/addons.svg");
 }
 
-#open-file-button[cui-areatype="toolbar"] {
+#open-file-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/open.svg");
 }
 
-#save-page-button[cui-areatype="toolbar"] {
+#save-page-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/save.svg");
 }
 
-#sync-button[cui-areatype="toolbar"] {
+#sync-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/synced-tabs.svg");
 }
 
-#containers-panelmenu[cui-areatype="toolbar"] {
+#containers-panelmenu@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/containers.svg");
 }
 
-#feed-button[cui-areatype="toolbar"] {
+#feed-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/feed.svg");
 }
 
-#social-share-button[cui-areatype="toolbar"] {
+#social-share-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/share.svg");
 }
 
-#characterencoding-button[cui-areatype="toolbar"]{
+#characterencoding-button@attributeSelectorForToolbar@{
   list-style-image: url("chrome://browser/skin/characterEncoding.svg");
 }
 
-#new-window-button[cui-areatype="toolbar"] {
+#new-window-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
-#e10s-button[cui-areatype="toolbar"] {
+#e10s-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
 #e10s-button > .toolbarbutton-icon {
   transform: scaleY(-1);
 }
 
-#new-tab-button[cui-areatype="toolbar"] {
+#new-tab-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/new-tab.svg");
 }
 
-#privatebrowsing-button[cui-areatype="toolbar"] {
+#privatebrowsing-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
 }
 
-#find-button[cui-areatype="toolbar"] {
+#find-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/find.svg");
 }
 
-#print-button[cui-areatype="toolbar"] {
+#print-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/print.svg");
 }
 
 %ifdef XP_MACOSX
 #restore-button,
 %endif
-#fullscreen-button[cui-areatype="toolbar"] {
+#fullscreen-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/fullscreen.svg");
 }
 
-#developer-button[cui-areatype="toolbar"] {
+#developer-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/developer.svg");
 }
 
-#preferences-button[cui-areatype="toolbar"] {
+#preferences-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/settings.svg");
 }
 
 #PanelUI-menu-button {
   list-style-image: url("chrome://browser/skin/menu.svg");
 }
 
-#edit-controls:not(@inAnyPanel@) > #cut-button {
+%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 {
   list-style-image: url("chrome://browser/skin/edit-cut.svg");
 }
 
-#edit-controls:not(@inAnyPanel@) > #copy-button {
+#edit-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #copy-button {
   list-style-image: url("chrome://browser/skin/edit-copy.svg");
 }
 
-#edit-controls:not(@inAnyPanel@) > #paste-button {
+#edit-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #paste-button {
   list-style-image: url("chrome://browser/skin/edit-paste.svg");
 }
 
-#zoom-controls:not(@inAnyPanel@) > #zoom-out-button {
+#zoom-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #zoom-out-button {
   list-style-image: url("chrome://browser/skin/zoom-out.svg");
 }
 
-#zoom-controls:not(@inAnyPanel@) > #zoom-in-button {
+#zoom-controls@PSEUDO_FOR_COMBINED_BUTTONS@ > #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
@@ -367,36 +373,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[cui-areatype="toolbar"] {
+#email-link-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/mail.svg");
 }
 
-#sidebar-button[cui-areatype="toolbar"] {
+#sidebar-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/sidebars-right.svg");
 }
 
-#sidebar-button[cui-areatype="toolbar"]:-moz-locale-dir(ltr):not([positionend]),
-#sidebar-button[cui-areatype="toolbar"]:-moz-locale-dir(rtl)[positionend] {
+#sidebar-button@attributeSelectorForToolbar@:-moz-locale-dir(ltr):not([positionend]),
+#sidebar-button@attributeSelectorForToolbar@:-moz-locale-dir(rtl)[positionend] {
   list-style-image: url("chrome://browser/skin/sidebars.svg");
 }
 
-#panic-button[cui-areatype="toolbar"] {
+#panic-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/forget.svg");
 }
 
-#panic-button[cui-areatype="toolbar"][open] {
+#panic-button@attributeSelectorForToolbar@[open] {
   fill: rgb(213, 32, 20);
 }
 
-#webide-button[cui-areatype="toolbar"] {
+#webide-button@attributeSelectorForToolbar@ {
   list-style-image: url("chrome://browser/skin/webIDE.svg");
 }
 
 #library-button {
   list-style-image: url("chrome://browser/skin/library.svg");
 }