Redesign of the bookmarks popup

src/browser/base/content/browser-places-js.patch

@@ -0,0 +1,35 @@
+diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js
+index 6992d22069643b58b249ae16edfe354304e56a39..38a006799feb5f4f41e582074901bb7226397ae1 100644
+--- a/browser/base/content/browser-places.js
++++ b/browser/base/content/browser-places.js
+@@ -243,6 +243,8 @@ var StarUI = {
+       });
+     }
+ 
++    this._setIconAndPreviewImage();
++
+     let onPanelReady = fn => {
+       let target = this.panel;
+       if (target.parentNode) {
+@@ -294,6 +296,21 @@ var StarUI = {
+     }
+   },
+ 
++  _setIconAndPreviewImage() {
++    let faviconImage = this._element("zenEditBookmarkPanelFavicon");
++    faviconImage.removeAttribute("iconloadingprincipal");
++    faviconImage.removeAttribute("src");
++
++    let tab = gBrowser.selectedTab;
++    if (tab.hasAttribute("image") && !tab.hasAttribute("busy")) {
++      faviconImage.setAttribute(
++        "iconloadingprincipal",
++        tab.getAttribute("iconloadingprincipal")
++      );
++      faviconImage.setAttribute("src", tab.getAttribute("image"));
++    }
++  },
++
+   removeBookmarkButtonCommand: function SU_removeBookmarkButtonCommand() {
+     this._removeBookmarksOnPopupHidden = true;
+     this.panel.hidePopup();

src/browser/base/content/main-popupset-inc-xhtml.patch

@@ -0,0 +1,23 @@
+diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
+index 4074f35ffc622d5ec44a4b4e4c766aa5ecefd9f2..df8781b76d29866fe9ba2e73ef99027619c7d013 100644
+--- a/browser/base/content/main-popupset.inc.xhtml
++++ b/browser/base/content/main-popupset.inc.xhtml
+@@ -166,6 +166,10 @@
+            hidden="true"
+            tabspecific="true"
+            aria-labelledby="editBookmarkPanelTitle">
++      <html:div id="zenEditBookmarkPanelFaviconContainer">
++        <html:img id="zenEditBookmarkPanelFavicon"/>
++      </html:div>
++      <vbox>
+       <box class="panel-header">
+         <html:h1>
+           <html:span id="editBookmarkPanelTitle"/>
+@@ -194,6 +198,7 @@
+                   oncommand="StarUI.removeBookmarkButtonCommand();"/>
+         </html:moz-button-group>
+       </vbox>
++      </vbox>
+     </panel>
+   </html:template>
+ 

src/browser/components/places/content/bookmarkProperties-xhtml.patch

@@ -0,0 +1,12 @@
+diff --git a/browser/components/places/content/bookmarkProperties.xhtml b/browser/components/places/content/bookmarkProperties.xhtml
+index 047652a52e705d49f870399992873fce536c07b9..2932eb94e8c16eb05f172322a6ce3ea201ecd0b1 100644
+--- a/browser/components/places/content/bookmarkProperties.xhtml
++++ b/browser/components/places/content/bookmarkProperties.xhtml
+@@ -37,6 +37,7 @@
+     />
+ 
+     <html:link rel="localization" href="browser/editBookmarkOverlay.ftl"/>
++    <script src="chrome://browser/content/zenThemeModifier.js"></script>
+   </linkset>
+ 
+   <stringbundleset id="stringbundleset">

src/browser/components/places/content/editBookmarkPanel-inc-xhtml.patch

@@ -0,0 +1,39 @@
+diff --git a/browser/components/places/content/editBookmarkPanel.inc.xhtml b/browser/components/places/content/editBookmarkPanel.inc.xhtml
+index 3ec3f094831c2143a818b43d1761a571f0ffa63d..309dfa8ed628f4cc124fe16d20b7411065c09f23 100644
+--- a/browser/components/places/content/editBookmarkPanel.inc.xhtml
++++ b/browser/components/places/content/editBookmarkPanel.inc.xhtml
+@@ -5,7 +5,7 @@
+ <div id="editBookmarkPanelContent">
+   <label id="editBMPanel_itemsCountText"
+          class="editBMPanel_selectionCount"/>
+-
++<hbox flex="1" class="zenEditBMPanel_fieldContainer">
+   <label data-l10n-id="bookmark-overlay-name-2"
+          class="editBMPanel_nameRow hideable"
+          control="editBMPanel_namePicker"/>
+@@ -13,7 +13,7 @@
+               class="editBMPanel_nameRow hideable"
+               type="text"
+               onchange="gEditItemOverlay.onNamePickerChange().catch(Cu.reportError);"/>
+-
++</hbox>
+   <label data-l10n-id="bookmark-overlay-url"
+          class="editBMPanel_locationRow hideable"
+          control="editBMPanel_locationField"/>
+@@ -21,7 +21,7 @@
+               class="editBMPanel_locationRow uri-element hideable"
+               type="text"
+               onchange="gEditItemOverlay.onLocationFieldChange();"/>
+-
++<hbox flex="1" class="zenEditBMPanel_fieldContainer">
+   <label data-l10n-id="bookmark-overlay-location-2"
+          class="editBMPanel_folderRow hideable"
+          control="editBMPanel_folderMenuList"/>
+@@ -51,6 +51,7 @@
+             data-l10n-id="bookmark-overlay-folders-expander2"
+             oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"/>
+   </hbox>
++</hbox>
+ 
+   <vbox id="editBMPanel_folderTreeRow"
+         class="hideable"

src/browser/locales/en-US/browser/editBookmarkOverlay-ftl.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/locales/en-US/browser/editBookmarkOverlay.ftl b/browser/locales/en-US/browser/editBookmarkOverlay.ftl
+index da74660e48620fe9097d05a51ba4be34f21246e6..3153ee3e3ea534807f7e6c35b016edf25749bbe7 100644
+--- a/browser/locales/en-US/browser/editBookmarkOverlay.ftl
++++ b/browser/locales/en-US/browser/editBookmarkOverlay.ftl
+@@ -13,7 +13,7 @@ bookmark-overlay-url =
+ # Location refers to the position of the bookmark within the browser's
+ # bookmarks, not to its URL or address.
+ bookmark-overlay-location-2 =
+-  .value = Location
++  .value = Folder
+   .accesskey = L
+ 
+ bookmark-overlay-choose =

src/browser/themes/shared/zen-browser-shared.css

@@ -19,6 +19,9 @@
   --fp-contextmenu-separator-horizontal: 0;
   --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
   --toolbar-bgcolor: var(--zen-colors-tertiary) !important;
+
+  --input-bgcolor: var(--zen-colors-tertiary) !important;
+  --input-border-color: var(--zen-input-border-color) !important;
 }
 
 #PersonalToolbar {
@@ -359,7 +362,8 @@ menuseparator {
 
 /** Specific dialogs override */
 
-#identity-popup-multiView toolbarseparator {
+#identity-popup-multiView toolbarseparator,
+#editBookmarkHeaderSeparator {
   display: none;
 }
 
@@ -367,6 +371,14 @@ menuseparator {
   display: block;
 }
 
+#editBMPanel_foldersExpander {
+  display: none;
+}
+
+#editBookmarkPanelContent > label:not(.editBMPanel_nameRow) {
+  padding-top: 5px;
+}
+
 panelmultiview {
   display: flex;
   flex-direction: column;

src/toolkit/themes/shared/in-content/zen-common-shared.css

@@ -63,6 +63,7 @@
 
   /* Other colors */
   --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77)) !important;
+  --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77)) !important;
 
   /* TODO: Support dark themes! */
 }

src/toolkit/themes/shared/menulist-shared-css.patch

@@ -0,0 +1,19 @@
+diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css
+index fa7e68c7b71b28c6dc1b2f67a9868f9ad4090034..9d082381e2d491d63647f8047a748354918686fe 100644
+--- a/toolkit/themes/shared/menulist-shared.css
++++ b/toolkit/themes/shared/menulist-shared.css
+@@ -14,12 +14,13 @@
+ 
+ :host(:not([native])) {
+   appearance: none;
+-  background-color: var(--button-bgcolor, ButtonFace);
++  background-color: var(--zen-colors-tertiary, ButtonFace);
+   color: var(--button-color, ButtonText);
+   border-radius: 4px;
+   padding-block: 4px;
+   padding-inline: 12px 8px;
+   margin: 5px 2px 3px;
++  border: 1px solid var(--input-border-color, ThreeDShadow);
+ }
+ 
+ :host(:not([native])[size="medium"]) {

src/toolkit/themes/shared/zen-popup.css

@@ -287,3 +287,70 @@ toolbarseparator, menuseparator {
 #appMenu-zoom-controls {
   border-top-width: var(--zen-panel-separator-width) !important;
 }
+
+#zenEditBookmarkPanelFaviconContainer {
+  border: 1px solid var(--input-border-color);
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 16px;
+  background: light-dark(#fff, rgba(255,255,255,.2));
+}
+
+#editBookmarkPanel::part(content) {
+  display: flex;
+  flex-direction: row !important;
+}
+
+#zenEditBookmarkPanelFavicon {
+  width: 20px;
+  height: 20px;
+}
+
+#editBookmarkPanel .panel-header {
+  min-height: 0 !important;
+  padding-bottom: 0;
+  padding-top: 16px;
+}
+
+#editBMPanel_namePicker {
+  width: -moz-available;
+}
+
+label.editBMPanel_folderRow,
+label.editBMPanel_nameRow {
+  min-width: 60px;
+}
+
+hbox.editBMPanel_folderRow {
+  width: -moz-available;
+}
+
+.zenEditBMPanel_fieldContainer:not(:first-child) {
+  margin-top: 10px;
+}
+
+.zenEditBMPanel_fieldContainer {
+  align-items: center;
+}
+
+#editBookmarkPanelBottomContent {
+  display: none;
+}
+
+:host(:not([native])) #label-box {
+  font-weight: 500 !important;
+}
+
+#editBMPanel_folderMenuList::part(icon) {
+  margin-right: 10px;
+}
+
+/**/
+
+#unified-extensions-manage-extensions {
+  padding-left: 20px;
+}