Bug 1354159 - Part 4 - Implement the style changes necessary to properly view the new Bookmarks view inside the Library Panel. r=Gijs,mak

MozReview-Commit-ID: 2tPH89DXbcp

--HG--
extra : rebase_source : 8356f296a77e908884a20d58b40571b78ce35966

browser/themes/linux/customizableui/panelUI.css

@@ -109,4 +109,14 @@ photonpanelmultiview .subviewbutton > .toolbarbutton-icon {
   padding: 0;
 }
 
+photonpanelmultiview .subviewbutton:-moz-any([image],[targetURI],.cui-withicon,
+  .restoreallitem, .bookmark-item) > .toolbarbutton-text {
+  padding-inline-start: 8px;
+}
+
+photonpanelmultiview .subviewbutton:-moz-any([image],[targetURI],.cui-withicon,
+  .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
+  visibility: visible;
+}
+
 /* END photon adjustments */

browser/themes/shared/customizableui/panelUI.inc.css

@@ -352,7 +352,7 @@ panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
 
 photonpanelmultiview panelview {
   background: var(--arrowpanel-background);
-  padding: 6px 0;
+  padding: 0;
 }
 
 #appMenu-popup panelview,
@@ -361,8 +361,8 @@ photonpanelmultiview panelview {
   max-width: 30em;
 }
 
-photonpanelmultiview panelview[title] {
-  padding-top: 0;
+photonpanelmultiview .panel-subview-body {
+  margin: 4px 0;
 }
 
 /* END photonpanelview adjustments */
@@ -1260,11 +1260,12 @@ panelview:not([mainView]) .subviewbutton.panel-subview-footer > .toolbarbutton-t
 
 /* START photon adjustments */
 
-photonpanelmultiview .PanelUI-subView .subviewbutton:not(.panel-subview-footer) {
+photonpanelmultiview .PanelUI-subView .subviewbutton,
+photonpanelmultiview .cui-widget-panelview .subviewbutton:not(.panel-subview-footer),
+photonpanelmultiview .subview-subheader {
   border-radius: 0;
   border-width: 0;
-  margin-left: 0;
-  margin-right: 0;
+  margin: 0;
   padding: 4px 12px;
 }
 
@@ -1277,7 +1278,7 @@ 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 .subviewbutton-iconic > .toolbarbutton-text,
 photonpanelmultiview .cui-withicon > .toolbarbutton-text,
 photonpanelmultiview .subviewbutton[image] > .toolbarbutton-text,
 photonpanelmultiview .subviewbutton[checked="true"] > .toolbarbutton-text {
@@ -1290,10 +1291,6 @@ photonpanelmultiview .panel-banner-item > .toolbarbutton-multiline-text {
   padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
 }
 
-photonpanelmultiview .PanelUI-subView .panel-subview-footer {
-  font-size: 1.2rem;
-}
-
 photonpanelmultiview .subviewbutton {
   -moz-context-properties: fill;
   fill: currentColor;
@@ -1367,6 +1364,19 @@ photonpanelmultiview .panel-banner-item::after {
   margin-inline-start: 10px;
 }
 
+photonpanelmultiview .subview-subheader {
+  color: GrayText;
+}
+
+photonpanelmultiview .subview-subheader,
+photonpanelmultiview .panel-subview-footer {
+  font: menu;
+}
+
+photonpanelmultiview panelview:not([mainView]) .subviewbutton.panel-subview-footer > .toolbarbutton-text {
+  text-align: start;
+}
+
 /* END photon adjustments */
 
 panelview .toolbarbutton-1,
@@ -2075,7 +2085,6 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   display: flex;
   flex: 1 auto;
   height: 40px; /* fixed item height to prevent flex sizing; height + 2*4px padding */
-  margin-bottom: 6px;
   padding: 4px;
 }
 
@@ -2121,4 +2130,8 @@ photonpanelmultiview .cui-widget-panelview {
   overflow-y: visible;
 }
 
+photonpanelmultiview #panelMenu_pocket {
+  display: none;
+}
+
 /* END photon adjustments */

browser/themes/shared/menupanel.inc.css

@@ -212,7 +212,8 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
   list-style-image: url(chrome://browser/skin/customize.svg);
 }
 
-#appMenu-find-button {
+#appMenu-find-button,
+#panelMenu_searchBookmarks {
   list-style-image: url(chrome://browser/skin/find.svg);
 }
 
@@ -269,10 +270,20 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
 }
 
 #appMenuViewHistorySidebar,
-#PanelUI-remotetabs-view-sidebar {
+#PanelUI-remotetabs-view-sidebar,
+#panelMenu_viewBookmarksSidebar {
   list-style-image: url("chrome://browser/skin/sidebars.svg");
 }
 
+#appMenu-library-bookmarks-button,
+#panelMenuBookmarkThisPage {
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+
+#panelMenuBookmarkThisPage[starred] {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
 %ifdef MOZ_PHOTON_THEME
 #bookmarks-menu-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {

browser/themes/shared/toolbarbuttons.inc.css

@@ -473,7 +473,6 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
   display: -moz-box !important;
 }
 
-.bookmark-item > .toolbarbutton-icon[label]:not([label=""]) {
+#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]) {
   margin-inline-end: 5px;
 }
-

browser/themes/windows/customizableui/panelUI.css

@@ -159,4 +159,14 @@ photonpanelmultiview .subviewbutton > .toolbarbutton-icon {
   padding: 0;
 }
 
+photonpanelmultiview .subviewbutton:-moz-any([image],[targetURI],.cui-withicon,
+  .restoreallitem, .bookmark-item) > .toolbarbutton-text {
+  padding-inline-start: 8px;
+}
+
+photonpanelmultiview .subviewbutton:-moz-any([image],[targetURI],.cui-withicon,
+  .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
+  visibility: visible;
+}
+
 /* END photon adjustments */