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
--- 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");
}