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