From f58305f3a0ffe10684c99d709f306403b1453054 Mon Sep 17 00:00:00 2001 From: Jay Harris Date: Thu, 4 Jun 2026 18:10:23 +1200 Subject: [PATCH] [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 --- .../bookmarks/power_bookmarks_list.ts | 61 ++++++++++++++----- .../resources/cr_elements/cr_icon/cr_icon.ts | 12 ++++ .../resources/cr_elements/cr_icons_lit.css | 19 ++++++ .../cr_url_list_item/cr_url_list_item.css | 19 ++++++ ...el-bookmarks-power_bookmarks_list.ts.patch | 8 ++- ui/webui/resources/BUILD.gn | 4 ++ 6 files changed, 108 insertions(+), 15 deletions(-) create mode 100644 chromium_src/ui/webui/resources/cr_elements/cr_icons_lit.css create mode 100644 chromium_src/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.css diff --git a/chromium_src/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts b/chromium_src/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts index b4e7bfb1cef..adcca4a5c2e 100644 --- a/chromium_src/chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts +++ b/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``) + +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); diff --git a/chromium_src/ui/webui/resources/cr_elements/cr_icon/cr_icon.ts b/chromium_src/ui/webui/resources/cr_elements/cr_icon/cr_icon.ts index cf38dd8a1c8..bd37ca93d3b 100644 --- a/chromium_src/ui/webui/resources/cr_elements/cr_icon/cr_icon.ts +++ b/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 } diff --git a/chromium_src/ui/webui/resources/cr_elements/cr_icons_lit.css b/chromium_src/ui/webui/resources/cr_elements/cr_icons_lit.css new file mode 100644 index 00000000000..f5692fe009b --- /dev/null +++ b/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); +} diff --git a/chromium_src/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.css b/chromium_src/ui/webui/resources/cr_elements/cr_url_list_item/cr_url_list_item.css new file mode 100644 index 00000000000..ae754fd589a --- /dev/null +++ b/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); +} + diff --git a/patches/chrome-browser-resources-side_panel-bookmarks-power_bookmarks_list.ts.patch b/patches/chrome-browser-resources-side_panel-bookmarks-power_bookmarks_list.ts.patch index ba06b54ea3e..e7d0dda3607 100644 --- a/patches/chrome-browser-resources-side_panel-bookmarks-power_bookmarks_list.ts.patch +++ b/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); diff --git a/ui/webui/resources/BUILD.gn b/ui/webui/resources/BUILD.gn index 7e247becc8f..854c1752e11 100644 --- a/ui/webui/resources/BUILD.gn +++ b/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",