Bug 1365663 - update synced tabs panel view iconography and alignment, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 16 Jun 2017 13:58:12 +0100
changeset 364655 909c1f2a6f21587a9085af039f51d0fc273ffaa7
parent 364654 36765be3ecb6b93046fd313e4e4aa80065777311
child 364656 5bd7718fb59d7661a0621106240b0fc0a0cf6c37
push id32052
push userkwierso@gmail.com
push dateTue, 20 Jun 2017 00:01:18 +0000
treeherdermozilla-central@bc9e028dbdc5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1365663
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 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
@@ -1245,26 +1245,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;
 }
@@ -2063,17 +2065,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;
 }
 
 /* END photon adjustments */
--- 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");
+}