Bug 1354086 - always use toolbar icons in overflow panel, r?mikedeboer draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 05 Jul 2017 15:41:08 +0100
changeset 611494 f8be0596421938f7e95f3f878806efdb4466be7f
parent 611493 53c5c7e4e9e3fd339200189169b0c9b433ca5ade
child 611495 a22ebfa1b1be72b95bd51dc0a9acb244153fb95d
push id69242
push usergijskruitbosch@gmail.com
push dateWed, 19 Jul 2017 20:25:10 +0000
reviewersmikedeboer
bugs1354086
milestone56.0a1
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");
 }