[Bookmarks]: Update bookmark icons in the sidebar (#36950)

* [bookmarks]: Change new folder icon

* [bookmarks]: Change folder icons

* [bookmarks]: Change expand/collapse carat

* [bookmarks]: Fix back button

* [bookmarks]: Footer

* [bookmarks]: Replace add button icon

* [bookmarks]: Fix folder fill

* [bookmarks]: Don't register CE upstream

chromium_src/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts

@@ -3,29 +3,59 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import { RegisterPolymerPrototypeModification } from '//resources/brave/polymer_overriding.js'
+import { RegisterPolymerPrototypeModification, RegisterStyleOverride, RegisterPolymerTemplateModifications } from '//resources/brave/polymer_overriding.js'
 import { PowerBookmarksService } from './power_bookmarks_service.js';
-import type {BookmarksTreeNode} from './bookmarks.mojom-webui.js';
+import type { BookmarksTreeNode } from './bookmarks.mojom-webui.js';
 
-export * from './power_bookmarks_list-chromium.js'
+import { PowerBookmarksListElement } from './power_bookmarks_list-chromium.js'
+import {
+  html
+} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js'
+
+RegisterStyleOverride('power-bookmarks-list', html`<style>
+  :host {
+    --iron-icon-width: 16px;
+  }
+
+  .new-folder-row {
+    color: var(--leo-color-text-interactive);
+  }
+
+  .new-folder-icon-container {
+    --iron-icon-fill-color: var(--leo-color-icon-interactive);
+
+    border: 1px solid var(--leo-color-divider-interactive);
+    border-radius: var(--leo-radius-s);
+  }
+</style>`)
+
+RegisterPolymerTemplateModifications({
+  'power-bookmarks-list': template => {
+    // Change the icon of the add current tab button to the Brave one (without an outline).
+    const buttonIcon = template.querySelector('#addCurrentTabButton [slot=prefix-icon]')
+    if (!buttonIcon) throw new Error('buttonIcon not found')
+
+    buttonIcon.setAttribute('icon', 'plus-add')
+  }
+})
 
 const originalSortBookmarks = PowerBookmarksService.prototype.sortBookmarks
-PowerBookmarksService.prototype.sortBookmarks = function(
-    bookmarks: BookmarksTreeNode[],
-    activeSortIndex: number): boolean {
-    if (activeSortIndex === /* custom order */5) {
-      return false
-    }
-    return originalSortBookmarks.apply(this, [bookmarks, activeSortIndex])
+PowerBookmarksService.prototype.sortBookmarks = function (
+  bookmarks: BookmarksTreeNode[],
+  activeSortIndex: number): boolean {
+  if (activeSortIndex === /* custom order */5) {
+    return false
   }
+  return originalSortBookmarks.apply(this, [bookmarks, activeSortIndex])
+}
 
 RegisterPolymerPrototypeModification({
   'power-bookmarks-list': prototype => {
     const originalOnBookmarkMoved = prototype.onBookmarkMoved
     prototype.onBookmarkMoved = function (
-        bookmark: BookmarksTreeNode,
-        oldParent: BookmarksTreeNode,
-        newParent: BookmarksTreeNode) {
+      bookmark: BookmarksTreeNode,
+      oldParent: BookmarksTreeNode,
+      newParent: BookmarksTreeNode) {
       originalOnBookmarkMoved.apply(this, [bookmark, oldParent, newParent])
       const shouldShow = prototype.bookmarkShouldShow_.apply(this, [bookmark]);
       // Update if currently visible item is moved in the same directory,
@@ -33,9 +63,12 @@ RegisterPolymerPrototypeModification({
       // custom order. Moving in same direcotry doesn't affect with upstream's
       // sort orders.
       if (oldParent === newParent && shouldShow &&
-          this.activeSortIndex_ === /* customOrder */5) {
+        this.activeSortIndex_ === /* customOrder */5) {
         prototype.updateDisplayLists_.apply(this)
       }
     }
   }
 })
+
+export * from './power_bookmarks_list-chromium.js'
+customElements.define(PowerBookmarksListElement.is, PowerBookmarksListElement);

chromium_src/ui/webui/resources/cr_elements/cr_icon/cr_icon.ts

@@ -95,8 +95,20 @@ const iconMap: { [key: string]: string } = {
     'cr:file-download': 'download',
     'cr:search': 'search',
     'cr:print': 'print',
+    'cr:add': 'plus-add',
+    'cr:expand-more': 'carat-down',
+    'cr:chevron-right': 'carat-right',
+    'cr:arrow-back': 'browser-back',
+    'cr:more-vert': 'more-vertical',
+    'cr:clear': 'close',
+    'sp:filter-list': 'filter',
     'settings:download': 'download',
     'settings:performance': 'cpu-chip',
+    'bookmarks:delete': 'trash',
+    'bookmarks:move': 'folder-export',
+    'bookmarks:bookmarks-bar': 'window',
+    'bookmarks:visual-view': 'list-bullet-default',
+    'bookmarks:compact-view': 'content-compact',
     'tab-search:auto-tab-groups': 'product-brave-leo',  // tab organization
 }
 

chromium_src/ui/webui/resources/cr_elements/cr_icons_lit.css

@@ -0,0 +1,19 @@
+/** Copyright (c) 2026 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=./cr_icons_lit-chromium.css.js
+ * #scheme=relative
+ * #include=cr-icons-lit-chromium
+ * #css_wrapper_metadata_end */
+
+.icon-folder-open {
+  --cr-icon-image: url(//resources/brave-icons/folder.svg);
+}
+
+.icon-edit {
+  --cr-icon-image: url(//resources/brave-icons/edit-pencil.svg);
+}

chromium_src/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.css

@@ -0,0 +1,19 @@
+/** Copyright (c) 2026 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=./cr_url_list_item-chromium.css.js
+ * #scheme=relative
+ * #include=cr-url-list-item-chromium
+ * #css_wrapper_metadata_end */
+
+:host([is-folder_]) #iconContainer:not(#z) {
+  background: var(--leo-color-container-interactive);
+  border: 1px solid var(--leo-color-divider-interactive);
+  border-radius: var(--leo-radius-s);
+  color: var(--leo-color-icon-interactive);
+}
+

patches/chrome-browser-resources-side_panel-bookmarks-power_bookmarks_list.ts.patch

@@ -1,5 +1,5 @@
 diff --git a/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts b/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts
-index 6121d387fc3d87c4683991c9b695d2f84100f7dd..93d028645c519a8ac957352c940ffe50130bbc05 100644
+index 6121d387fc3d87c4683991c9b695d2f84100f7dd..deed96601e2c336ed138ebefeb3b4b52a7f09bea 100644
 --- a/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts
 +++ b/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts
 @@ -196,7 +196,8 @@ export class PowerBookmarksListElement extends PolymerElement implements
@@ -12,3 +12,9 @@ index 6121d387fc3d87c4683991c9b695d2f84100f7dd..93d028645c519a8ac957352c940ffe50
        },
  
        editing_: {
+@@ -1453,4 +1454,4 @@ declare global {
+   }
+ }
+ 
+-customElements.define(PowerBookmarksListElement.is, PowerBookmarksListElement);
++// customElements.define(PowerBookmarksListElement.is, PowerBookmarksListElement);

ui/webui/resources/BUILD.gn

@@ -180,6 +180,7 @@ leo_icons_sources = [
   "brave-search-big-color.svg",
   "broom.svg",
   "browser-add.svg",
+  "browser-back.svg",
   "browser-extensions.svg",
   "browser-home.svg",
   "browser-ntp-widget.svg",
@@ -225,6 +226,7 @@ leo_icons_sources = [
   "container-travel.svg",
   "container-work.svg",
   "content-big.svg",
+  "content-compact.svg",
   "contract.svg",
   "cookie-off.svg",
   "cookie.svg",
@@ -269,7 +271,9 @@ leo_icons_sources = [
   "flash.svg",
   "flashdrive.svg",
   "folder-exchange.svg",
+  "folder-export.svg",
   "folder-new.svg",
+  "folder.svg",
   "font-size-off.svg",
   "font-size.svg",
   "forward-15.svg",