Bug 1365663 - update synced tabs panel view iconography and alignment, r?mikedeboer draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 16 Jun 2017 13:58:12 +0100
changeset 596568 a000c1b052502a63e294cffbddac4344fd2ce3b4
parent 596567 406797825d896993ee56bb138ca33a5b8c7bdebb
child 633996 a3bf0aed73d0a5aea98ca1a0bb6ad1539e7e4edb
push id64679
push usergijskruitbosch@gmail.com
push dateMon, 19 Jun 2017 12:41:11 +0000
reviewersmikedeboer
bugs1365663
milestone56.0a1
Bug 1365663 - update synced tabs panel view iconography and alignment, r?mikedeboer This also adds the icons in non-photon. They seem to work fine there, so I don't think this is a problem. MozReview-Commit-ID: GkvT3i2jnD1
browser/components/customizableui/content/panelUI.inc.xul
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/menupanel.inc.css
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -112,26 +112,26 @@
     <panelview id="PanelUI-remotetabs" flex="1" class="PanelUI-subView">
       <label value="&appMenuRemoteTabs.label;" class="panel-subview-header"/>
       <vbox class="panel-subview-body">
         <!-- this widget has 3 boxes in the body, but only 1 is ever visible -->
         <!-- When Sync is ready to sync -->
         <vbox id="PanelUI-remotetabs-main" observes="sync-syncnow-state">
           <vbox id="PanelUI-remotetabs-buttons">
             <toolbarbutton id="PanelUI-remotetabs-view-sidebar"
-                           class="subviewbutton"
+                           class="subviewbutton subviewbutton-iconic"
                            observes="viewTabsSidebar"
                            label="&appMenuRemoteTabs.sidebar.label;"/>
             <toolbarbutton id="PanelUI-remotetabs-view-managedevices"
-                           class="subviewbutton"
+                           class="subviewbutton subviewbutton-iconic"
                            label="&appMenuRemoteTabs.managedevices.label;"
                            oncommand="gSync.openDevicesManagementPage('syncedtabs-menupanel');"/>
             <toolbarbutton id="PanelUI-remotetabs-syncnow"
                            observes="sync-status"
-                           class="subviewbutton"
+                           class="subviewbutton subviewbutton-iconic"
                            oncommand="gSync.doSync();"
                            closemenu="none"/>
             <menuseparator id="PanelUI-remotetabs-separator"/>
           </vbox>
           <deck id="PanelUI-remotetabs-deck">
             <!-- Sync is ready to Sync and the "tabs" engine is enabled -->
             <vbox id="PanelUI-remotetabs-tabspane">
               <vbox id="PanelUI-remotetabs-tabslist"
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1248,26 +1248,28 @@ photonpanelmultiview .PanelUI-subView .s
   margin-right: 0;
   padding: 4px 12px;
 }
 
 photonpanelmultiview .subviewbutton:focus {
   outline: 0;
 }
 
+photonpanelmultiview .subviewbutton > .toolbarbutton-text {
+  padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined above. */
+}
+
 photonpanelmultiview .subviewbutton-iconic:not(.subviewbutton-back) > .toolbarbutton-text,
+photonpanelmultiview .cui-withicon > .toolbarbutton-text,
+photonpanelmultiview .subviewbutton[image] > .toolbarbutton-text,
 photonpanelmultiview .subviewbutton[checked="true"] > .toolbarbutton-text,
 photonpanelmultiview .panel-banner-item > .toolbarbutton-multiline-text {
   padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
 }
 
-photonpanelmultiview .subviewbutton:not(.subviewbutton-iconic):not([checked="true"]) > .toolbarbutton-text {
-  padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined above. */
-}
-
 photonpanelmultiview .PanelUI-subView .panel-subview-footer {
   font-size: 1.2rem;
 }
 
 photonpanelmultiview .subviewbutton {
   -moz-context-properties: fill;
   fill: currentColor;
 }
@@ -2066,17 +2068,19 @@ photonpanelmultiview .PanelUI-subView .p
   padding: 8px;
 }
 
 .panel-header > .subviewbutton-back:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 
 .panel-header > .subviewbutton-back > .toolbarbutton-text {
-  display: none;
+  /* !important to override .cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text
+   * selector further down. */
+  display: none !important;
 }
 
 photonpanelmultiview .PanelUI-subView toolbarseparator {
   margin-inline-start: 0;
   margin-inline-end: 0;
 }
 
 photonpanelmultiview#customizationui-widget-multiview > .panel-viewcontainer {
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -244,8 +244,29 @@ toolbarpaletteitem[place="palette"] > #z
 
 #appMenu-fullscreen-button {
   list-style-image: url(chrome://browser/skin/fullscreen-enter.svg);
 }
 
 #appMenu-fullscreen-button[checked] {
   list-style-image: url(chrome://browser/skin/fullscreen-exit.svg);
 }
+
+#appMenu-library-history-button {
+  list-style-image: url(chrome://browser/skin/history.svg);
+}
+
+#appMenu-library-remotetabs-button {
+  list-style-image: url("chrome://browser/skin/synced-tabs.svg");
+}
+
+#PanelUI-remotetabs-syncnow {
+  list-style-image: url("chrome://browser/skin/sync.svg");
+}
+
+#PanelUI-remotetabs-view-managedevices {
+  list-style-image: url("chrome://browser/skin/device-mobile.svg");
+}
+
+#appMenuViewHistorySidebar,
+#PanelUI-remotetabs-view-sidebar {
+  list-style-image: url("chrome://browser/skin/sidebars.svg");
+}