From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- browser/themes/shared/places/bookmarksMenu.svg | 9 + browser/themes/shared/places/bookmarksToolbar.svg | 8 + browser/themes/shared/places/editBookmark.css | 160 ++++++++++++++++ browser/themes/shared/places/editBookmarkPanel.css | 156 +++++++++++++++ browser/themes/shared/places/folder-smart.svg | 6 + browser/themes/shared/places/organizer-shared.css | 19 ++ browser/themes/shared/places/sidebar.css | 210 +++++++++++++++++++++ browser/themes/shared/places/tag.svg | 8 + browser/themes/shared/places/tree-icons.css | 95 ++++++++++ 9 files changed, 671 insertions(+) create mode 100644 browser/themes/shared/places/bookmarksMenu.svg create mode 100644 browser/themes/shared/places/bookmarksToolbar.svg create mode 100644 browser/themes/shared/places/editBookmark.css create mode 100644 browser/themes/shared/places/editBookmarkPanel.css create mode 100644 browser/themes/shared/places/folder-smart.svg create mode 100644 browser/themes/shared/places/organizer-shared.css create mode 100644 browser/themes/shared/places/sidebar.css create mode 100644 browser/themes/shared/places/tag.svg create mode 100644 browser/themes/shared/places/tree-icons.css (limited to 'browser/themes/shared/places') diff --git a/browser/themes/shared/places/bookmarksMenu.svg b/browser/themes/shared/places/bookmarksMenu.svg new file mode 100644 index 0000000000..97154aadb6 --- /dev/null +++ b/browser/themes/shared/places/bookmarksMenu.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/places/bookmarksToolbar.svg b/browser/themes/shared/places/bookmarksToolbar.svg new file mode 100644 index 0000000000..2b031295be --- /dev/null +++ b/browser/themes/shared/places/bookmarksToolbar.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css new file mode 100644 index 0000000000..4c00982e62 --- /dev/null +++ b/browser/themes/shared/places/editBookmark.css @@ -0,0 +1,160 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +#editBookmarkPanelContent { + display: grid; + grid-template-columns: auto; +} + +#editBMPanel_folderTree, +#editBMPanel_tagsSelector { + margin: 0; + height: 12.5em; + flex: 1 auto; + border: 1px solid ThreeDShadow; + border-radius: 4px; +} + +#editBMPanel_folderTree { + appearance: none; + overflow: hidden; +} + +#editBMPanel_folderMenuList::part(icon) { + width: 16px; + height: 16px; +} + +@media (-moz-platform: macos) { + /* FIXME(emilio): Is this rule needed at all? */ + .folder-icon > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + } +} + +.folder-icon > .menu-iconic-left { + display: flex; +} + +.folder-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg") !important; + -moz-context-properties: fill; + fill: currentColor; +} + +#editBMPanel_tagsSelector > richlistitem > image { + appearance: auto; + -moz-default-appearance: checkbox; + align-items: center; + margin: 0 2px; + min-width: 13px; + min-height: 13px; +} + +@media (-moz-platform: windows) { + #editBMPanel_tagsSelector > richlistitem > image { + border: 1px solid -moz-DialogText; + background: Field no-repeat 50% 50%; + } +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector { + border-color: var(--in-content-border-color); + padding: 12px; +} + +/* Reset default margins for tags so we can apply custom ones */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image, +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > label { + margin: 0; +} + +/* Set spacing between tags */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem:not(:last-child) { + margin-bottom: 8px; +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image { + margin-inline-end: 8px; +} + +/* Bookmark panel dropdown icons */ + +#editBMPanel_folderMenuList[selectedGuid="toolbar_____"], +#editBMPanel_toolbarFolderItem { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; +} + +#editBMPanel_folderMenuList[selectedGuid="menu________"], +#editBMPanel_bmRootItem { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > label:not(.editBMPanel_nameRow), +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-block: var(--editbookmarkdialog-padding) 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent label[control] { + margin-inline-start: 0; + margin-block: 0 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding: calc(var(--editbookmarkdialog-padding) / 2) var(--editbookmarkdialog-padding) var(--editbookmarkdialog-padding); +} + +#bookmarkpropertiesdialog .expander-up, +#bookmarkpropertiesdialog .expander-down { + appearance: none; + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + min-width: 32px; + min-height: 32px; + padding: 0; +} + +#bookmarkpropertiesdialog .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#bookmarkpropertiesdialog .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > input, +#bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input, +#bookmarkpropertiesdialog #editBMPanel_folderMenuList { + margin: 0; +} + +/* dialog-specific #editBookmarkPanel styles */ + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding-inline: 0; + margin-inline: 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent, +#bookmarkpropertiesdialog vbox#editBMPanel_nameRow { + padding-top: 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_tagsField, +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_folderMenuList { + margin-inline-end: 16px; +} + +#bookmarkpropertiesdialog .caption-label { + margin: 4px; + color: var(--text-color-deemphasized); +} + +.caption-label { + font-size: 0.9em; + margin: 2px 4px; +} diff --git a/browser/themes/shared/places/editBookmarkPanel.css b/browser/themes/shared/places/editBookmarkPanel.css new file mode 100644 index 0000000000..64840f1cf1 --- /dev/null +++ b/browser/themes/shared/places/editBookmarkPanel.css @@ -0,0 +1,156 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#editBookmarkPanel > .panel-subview-body { + padding-bottom: 0; +} + +#editBMPanel_newFolderButton { + appearance: none; + margin: 0; + border: 0; + border-radius: 4px; + background-color: var(--button-bgcolor); + color: var(--button-color, inherit); + font-weight: 600; + min-width: 0; + padding: 8px 16px; + + /* This button is deeper in the visual hierarchy than others (notably the + buttons at the bottom of the panel), so it should be slightly smaller. */ + font-size: 90%; +} + +#editBMPanel_newFolderButton:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBMPanel_newFolderButton:hover:active { + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel > #editBookmarkHeaderSeparator { + margin-bottom: 0; + margin-inline: 16px; +} + +#editBookmarkPanel { + font: caption; +} + +#editBookmarkPanelContent > label:not(.editBMPanel_nameRow) { + padding-top: var(--arrowpanel-padding); +} + +#editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#editBookmarkPanelContent > #editBMPanel_folderTreeRow > #editBMPanel_newFolderBox, +#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-top: 4px; +} + +#editBookmarkPanelContent label[control] { + margin: 0; + margin-bottom: 4px; +} + +#editBookmarkPanel .caption-label { + display: none; +} + +#editBookmarkPanelContent { + padding: 0.8em var(--arrowpanel-padding) var(--arrowpanel-padding); +} + +#editBMPanel_selectionCount { + padding-top: 0.8em; +} + +#editBookmarkPanelBottomContent { + padding: 0 var(--arrowpanel-padding) calc(var(--arrowpanel-padding) / 2); +} + +#editBookmarkPanelBottomContent > checkbox { + margin-inline-start: 0; +} + +#editBookmarkPanel_showForNewBookmarks > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +#editBookmarkPanel .expander-up > .button-box > .button-text, +#editBookmarkPanel .expander-down > .button-box > .button-text { + display: none; +} + +#editBookmarkPanel .expander-up, +#editBookmarkPanel .expander-down { + appearance: none; /* override button.css */ + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + margin-inline-start: 4px; + min-width: 32px; + min-height: 32px; + color: var(--button-color); + background-color: var(--button-bgcolor); + border-radius: 4px; +} + +#editBookmarkPanel .expander-up:hover, +#editBookmarkPanel .expander-down:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBookmarkPanel .expander-up:hover:active, +#editBookmarkPanel .expander-down:hover:active { + /** + * We override the colour here because on macOS, buttons default to + * having :hover:active buttons have color -moz-buttonactivetext + */ + color: var(--button-color); + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#editBookmarkPanel .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#editBMPanel_folderMenuList { + margin: 0; +} + +#editBookmarkPanelContent > html|input, +#editBookmarkPanelContent > hbox > html|input { + appearance: none; + padding: 8px; + border-radius: 4px; + border: 1px solid var(--input-border-color, ThreeDShadow); + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); + margin: 0; +} + +/* Focus outlines */ + +#editBookmarkPanel .expander-up:focus-visible, +#editBookmarkPanel .expander-down:focus-visible, +#editBMPanel_newFolderButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#editBMPanel_folderTree:focus-visible, +#editBMPanel_tagsSelector:focus-visible, +#editBookmarkPanelContent > html|input:focus-visible, +#editBookmarkPanelContent > hbox > html|input:focus-visible { + border-color: transparent; + outline: var(--focus-outline); + outline-offset: -1px; +} diff --git a/browser/themes/shared/places/folder-smart.svg b/browser/themes/shared/places/folder-smart.svg new file mode 100644 index 0000000000..c38c606efc --- /dev/null +++ b/browser/themes/shared/places/folder-smart.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/places/organizer-shared.css b/browser/themes/shared/places/organizer-shared.css new file mode 100644 index 0000000000..f0563e695c --- /dev/null +++ b/browser/themes/shared/places/organizer-shared.css @@ -0,0 +1,19 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +#contentView { + flex: 4 4; +} + +#contentView, +#placesView, +#placesViewsBox { + min-width: 0; + min-height: 0; +} + +#placesViewsBox { + min-height: 5em; + overflow: clip; +} diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css new file mode 100644 index 0000000000..d8bb12e241 --- /dev/null +++ b/browser/themes/shared/places/sidebar.css @@ -0,0 +1,210 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +.sidebar-panel { + appearance: none; + background-color: transparent; +} + +/* Themed sidebars */ + +.sidebar-panel[lwt-sidebar] { + background-color: var(--lwt-sidebar-background-color); + color: var(--lwt-sidebar-text-color); + color-scheme: light; + + scrollbar-color: + light-dark( + rgba(204,204,204,.5), + rgba(249,249,250,.4) + ) + light-dark( + rgba(230,230,235,.5), + rgba(20,20,25,.3) + ); +} + +.sidebar-panel[lwt-sidebar="dark"] { + color-scheme: dark; +} + +.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) { + background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1)); +} + +.sidebar-panel[lwt-sidebar="dark"] .sidebar-placesTreechildren { + &::-moz-tree-image(selected), + &::-moz-tree-twisty(selected), + &::-moz-tree-cell-text(selected) { + color: var(--lwt-sidebar-text-color); + } +} + +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren { + &::-moz-tree-row(selected,focus) { + background-color: var(--lwt-sidebar-highlight-background-color); + } + + &::-moz-tree-image(selected, focus), + &::-moz-tree-twisty(selected, focus), + &::-moz-tree-cell-text(selected, focus) { + color: var(--lwt-sidebar-highlight-text-color, var(--lwt-sidebar-text-color, var(--sidebar-text-color))); + } +} + +/* Sidebar tree */ + +.sidebar-placesTree { + appearance: none; + background-color: transparent; + color: inherit; + border: 0; + margin: 0; +} + +/* View button */ + +#viewButton { + appearance: none; + border-radius: 4px; + padding: 2px 4px; + color: inherit; +} + +#viewButton:hover { + /* Matches --toolbarbutton-hover-background: */ + background-color: color-mix(in srgb, currentColor 17%, transparent); +} + +#viewButton[open] { + /* Matches --toolbarbutton-active-background: */ + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +#viewButton:focus-visible { + outline: var(--focus-outline); +} + +#viewButton > .button-box > .button-menu-dropmarker { + appearance: none; + display: flex; + content: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +@media (-moz-platform: windows) { + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-cell, + .sidebar-placesTreechildren::-moz-tree-twisty { + padding: 0 4px; + } + + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , + .sidebar-placesTreechildren::-moz-tree-image(leaf) { + cursor: pointer; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + cursor: pointer; + text-decoration: underline; + } + + .sidebar-placesTreechildren::-moz-tree-cell(separator) { + cursor: default; + } + + @media not (prefers-contrast) { + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + text-decoration: none; + } + } + + /* Default button vert. margins are 1px/2px, and this can cause misalignment */ + #viewButton { + margin: 0; + margin-inline-start: 4px; + border-radius: 2px; + } + + #sidebar-search-container { + padding: 8px; + } + + #search-box { + margin: 0; + } +} + +@media (-moz-platform: linux) { + #sidebar-search-container { + padding: 8px; + } + + #search-box { + margin: 0; + } + + #viewButton { + margin: 1px 0; + margin-inline-start: 4px; + } + + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , + .sidebar-placesTreechildren::-moz-tree-image(leaf) { + cursor: pointer; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + cursor: pointer; + text-decoration: underline; + } + + .sidebar-placesTreechildren::-moz-tree-cell(separator) { + cursor: default; + } +} + +@media (-moz-platform: macos) { + .sidebar-placesTree { + margin: 0; + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + } + + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-separator { + border-top: 1px solid #505d6d; + margin: 0 10px; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text { + margin-inline-end: 6px; + } + + #sidebar-search-container { + /* Native searchbar styling already adds 4px margin on Mac, so + * adding 4px padding results in 8px of total whitespace. */ + padding: 4px; + } + + #viewButton { + margin: 4px 0; + margin-inline-end: 4px; + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + } +} diff --git a/browser/themes/shared/places/tag.svg b/browser/themes/shared/places/tag.svg new file mode 100644 index 0000000000..3be1d0e1be --- /dev/null +++ b/browser/themes/shared/places/tag.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/tree-icons.css b/browser/themes/shared/places/tree-icons.css new file mode 100644 index 0000000000..38df3ea4d1 --- /dev/null +++ b/browser/themes/shared/places/tree-icons.css @@ -0,0 +1,95 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +treechildren::-moz-tree-image { + -moz-context-properties: fill, fill-opacity; + fill-opacity: 0.7; +} + +treechildren::-moz-tree-image(title) { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + padding-inline-end: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(title, container), +treechildren::-moz-tree-image(title, open) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(title, separator) { + list-style-image: none; + width: 0 !important; + height: 0 !important; + margin: 0; +} + +treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg"); +} + +treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg"); +} + +/* query-nodes should be styled even if they're not expandable */ +treechildren::-moz-tree-image(query) { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +treechildren::-moz-tree-image(title, query, tagContainer), +treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { + list-style-image: url("chrome://browser/skin/places/tag.svg"); +} + +/* calendar icon for folders grouping items by date */ +treechildren::-moz-tree-image(title, query, dayContainer) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +treechildren::-moz-tree-image(title, query, hostContainer) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +/* We want some queries to look like ordinary folders. This must come + after the (title, query) selector, or it would get overridden. */ +treechildren::-moz-tree-image(title, query, folder) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-cell-text(title, separator) { + color: ThreeDShadow; + margin: 0 5px; +} + +treechildren::-moz-tree-cell-text(title, separator, selected, focus) { + color: SelectedItemText; +} + +/* Remove tiny spacing in separators appearing after the twisty column */ +treechildren::-moz-tree-twisty(title, separator) { + padding: 0; +} + +treechildren::-moz-tree-image(cutting) { + opacity: 0.5; +} + +treechildren::-moz-tree-cell-text(cutting) { + opacity: 0.7; +} -- cgit v1.2.3