From a90a5cba08fdf6c0ceb95101c275108a152a3aed Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Wed, 12 Jun 2024 07:35:37 +0200 Subject: Merging upstream version 127.0. Signed-off-by: Daniel Baumann --- browser/themes/osx/places/organizer.css | 20 +- browser/themes/shared/autocomplete.css | 2 +- browser/themes/shared/browser-shared.css | 10 +- browser/themes/shared/controlcenter/dashboard.svg | 2 +- browser/themes/shared/controlcenter/panel.css | 6 + .../themes/shared/customizableui/customizeMode.css | 4 - .../shared/customizableui/panelUI-shared.css | 169 ++++------------- browser/themes/shared/icons/back.svg | 2 +- browser/themes/shared/icons/forward.svg | 2 +- browser/themes/shared/icons/insights.svg | 6 - browser/themes/shared/icons/ion.svg | 2 +- browser/themes/shared/jar.inc.mn | 1 - browser/themes/shared/notification-icons.css | 185 ++++++++----------- browser/themes/shared/preferences/preferences.css | 17 +- browser/themes/shared/sanitizeDialog_v2.css | 8 + browser/themes/shared/tabs.css | 203 +++++++++++++++------ browser/themes/shared/toolbarbutton-icons.css | 12 +- browser/themes/shared/translations/panel.css | 49 +++-- browser/themes/shared/urlbarView.css | 44 +++++ 19 files changed, 395 insertions(+), 349 deletions(-) delete mode 100644 browser/themes/shared/icons/insights.svg (limited to 'browser/themes') diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css index fc2698aff1..ae32edae57 100644 --- a/browser/themes/osx/places/organizer.css +++ b/browser/themes/osx/places/organizer.css @@ -184,15 +184,21 @@ #placeContent { appearance: none; border: none; -} -#placeContent > treechildren::-moz-tree-cell, -#placeContent > treechildren::-moz-tree-column { - border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent); -} + > treechildren::-moz-tree-cell, + > treechildren::-moz-tree-column { + border-inline-start: 1px solid color-mix(in srgb, FieldText 30%, transparent); + } -#placeContent > treechildren::-moz-tree-cell(separator) { - border-color: transparent; + > treechildren::-moz-tree-column(first-column), + > treechildren::-moz-tree-cell(first-column) { + /* This matches the treecol separator in tree.css */ + border-inline-start: none; + } + + > treechildren::-moz-tree-cell(separator) { + border-color: transparent; + } } /** diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css index 62c82897b7..d7a4bafb81 100644 --- a/browser/themes/shared/autocomplete.css +++ b/browser/themes/shared/autocomplete.css @@ -178,7 +178,7 @@ opacity: 1; } - &[originaltype="autofill"] > .two-line-wrapper { + &[originaltype="autofill"][ac-image]:not([ac-image=""]) > .two-line-wrapper { display: grid; grid-template-columns: 32px 1fr; diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css index 276799c35f..9e513830a9 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css @@ -515,6 +515,14 @@ menupopup::part(drop-indicator) { /* End private browsing indicator */ +/* Content analysis indicator */ + +:root:not([contentanalysisactive]) #content-analysis-indicator { + display: none; +} + +/* End content analysis indicator */ + /* Override theme colors since the picker uses extra colors that themes cannot set */ #DateTimePickerPanel { @@ -648,7 +656,7 @@ menupopup::part(drop-indicator) { float: inline-end; background-color: transparent; flex-direction: row-reverse; - /* Override proton-doorhanger default styles that increase the size of the button */ + /* Override doorhanger default styles that increase the size of the button */ margin: 0; } diff --git a/browser/themes/shared/controlcenter/dashboard.svg b/browser/themes/shared/controlcenter/dashboard.svg index e2908d9485..ac3d13fd0c 100644 --- a/browser/themes/shared/controlcenter/dashboard.svg +++ b/browser/themes/shared/controlcenter/dashboard.svg @@ -1,4 +1,4 @@ - + diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css index b8ba6b72e4..6708bc604c 100644 --- a/browser/themes/shared/controlcenter/panel.css +++ b/browser/themes/shared/controlcenter/panel.css @@ -642,6 +642,12 @@ #permission-popup-menulist { padding-inline: 12px 6px; + margin: 0; + + &, + > menupopup { + min-width: 6.5em; + } } .protections-popup-section-header, diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css index a1bb6a62f9..d0bc283256 100644 --- a/browser/themes/shared/customizableui/customizeMode.css +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -95,10 +95,6 @@ toolbarpaletteitem:not([notransition])[place="panel"] { opacity: 1; } -#customization-palette #firefox-view-button[attention] { - background-position: center bottom 8%; -} - toolbarpaletteitem toolbarbutton[disabled] { color: inherit !important; } diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css index 07994d3233..2236613cf1 100644 --- a/browser/themes/shared/customizableui/panelUI-shared.css +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -172,7 +172,6 @@ menupopup { panelview { flex-direction: column; - background: var(--arrowpanel-background); padding: 0; /* Prevent a scrollbar from appearing while the animation for transitioning from @@ -696,6 +695,10 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg margin: 0; } +#PanelUI-fxa-cta-menu .fxa-cta-button { + margin: var(--space-xsmall); +} + .PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { font-size: 11px; } @@ -1150,6 +1153,11 @@ panelview .toolbarbutton-1, stroke: var(--panel-item-hover-bgcolor); } +#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text, +#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon { + background-color: var(--panel-item-hover-bgcolor); +} + #appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text, #appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon { background-color: var(--panel-item-active-bgcolor); @@ -1300,7 +1308,7 @@ panelview .toolbarbutton-1 { } } -.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"], +.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"], #PanelUI-historyItems > toolbarbutton { list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); -moz-context-properties: fill; @@ -1310,7 +1318,7 @@ panelview .toolbarbutton-1 { #fxa-menu-account-fxa-avatar, #appMenu-fxa-label > .toolbarbutton-icon, #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon, -.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, +.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { @@ -1322,6 +1330,15 @@ panelview .toolbarbutton-1 { min-width: 0; } +.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"] { + flex: 1; + min-width: 0; +} + +.remotetabs-close { + width: 18px; + margin-inline-end: 4px; +} #PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon { border-radius: 50%; } @@ -1649,11 +1666,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } } -/* What's New panel */ -#customizationui-widget-multiview #PanelUI-whatsNew { - max-width: var(--menu-panel-width); -} - +/* Protections panel info message */ #protections-popup { #info-message-container { height: 260px; @@ -1695,7 +1708,16 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { margin: 12px 0; } - .whatsNew-message-body { + .protections-popup-message-title { + display: grid; + font-size: 1.3em; + font-weight: 600; + line-height: 1.4em; + margin: 14px 0 0; + grid-column-start: 1; + } + + .protections-popup-message-body { /* -10px to compensate for the margin on the container. We can't get rid of that because it helps position the background image. */ margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding); @@ -1708,129 +1730,6 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } } -panelview { - &[mainview] #PanelUI-whatsNew-content { - height: 43em; - } - - /* Hide the What's New header when the panel is a subview */ - &:not([mainview]) #PanelUI-whatsNew-title { - display: none; - } -} - -#PanelUI-whatsNew { - .panelMenu-toggleWhatsNew-checkbox { - padding-inline-start: 16px; - min-height: 41px; - } - - .whatsNew-message { - cursor: pointer; - margin: 0; - padding: 0; - } - - /* The following 2 rules show a 1 pixel line separator between What's New - * messages while at the same time ensuring that the first message (which has - * a date header) will not show the separator - */ - .whatsNew-message-body::before { - content: ""; - display: block; - height: 1px; - width: 104%; - margin-inline-start: -2%; - background: var(--panel-separator-color); - } - - .has-icon::before { - /* the width of the icon + the grid margin */ - width: calc(104% + 40px); - } - - .whatsNew-message-date + .whatsNew-message-body::before { - display: none; - } - - .whatsNew-message-date { - font-size: .85em; - margin: -12px; - margin-top: 0; - margin-inline-start: 0; - padding: 6px 16px; - background: var(--arrowpanel-dimmed); - } - - .whatsNew-message-body { - padding: 5px 0 10px; - margin: 10px 16px; - text-align: inherit; - text-decoration: none; - color: inherit; - background: none; - border: none; - cursor: pointer; - } - - .whatsNew-message-body.has-icon { - display: grid; - grid-template-columns: auto 32px; - grid-template-rows: 0; - grid-gap: 0 8px; - } - - .whatsNew-message-icon { - height: 32px; - width: 32px; - margin: 14px auto; - display: grid; - grid-column-start: 2; - } - - .whatsNew-message-subtitle { - margin: 2px 0; - font-size: .8em; - color: #949494; - font-weight: normal; - grid-column-start: 1; - } - - .whatsNew-message-content { - display: grid; - margin: 5px 0 10px; - grid-column-start: 1; - } - - .text-link { - background: none; - border: 0; - color: #45a1ff; - cursor: pointer; - font-size: .9em; - grid-column-start: 1; - - &:hover { - color: #0a84ff; - text-decoration: underline; - - &:active { - color: #0060df; - } - } - } -} - -#PanelUI-whatsNew .whatsNew-message-title, -#protections-popup-message .whatsNew-message-title { - display: grid; - font-size: 1.3em; - font-weight: 600; - line-height: 1.4em; - margin: 14px 0 0; - grid-column-start: 1; -} - #customizationui-widget-panel { /* In the next two rules the panel's width is set according to the * profiler backdrop image when not opened from the overflow panel. */ @@ -2180,3 +2079,9 @@ panelview { padding: var(--space-xxlarge) 0 var(--space-medium); gap: var(--space-small); } + +/* ----- Content Analysis indicator panel ----- */ + +#content-analysis-panel-container { + padding: 8px; +} diff --git a/browser/themes/shared/icons/back.svg b/browser/themes/shared/icons/back.svg index b52c06b776..c49e6c1ed2 100644 --- a/browser/themes/shared/icons/back.svg +++ b/browser/themes/shared/icons/back.svg @@ -2,5 +2,5 @@ - 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/. --> - + diff --git a/browser/themes/shared/icons/forward.svg b/browser/themes/shared/icons/forward.svg index 2eac6f3ed7..8fef9db8f2 100644 --- a/browser/themes/shared/icons/forward.svg +++ b/browser/themes/shared/icons/forward.svg @@ -2,5 +2,5 @@ - 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/. --> - + diff --git a/browser/themes/shared/icons/insights.svg b/browser/themes/shared/icons/insights.svg deleted file mode 100644 index 1fadce366c..0000000000 --- a/browser/themes/shared/icons/insights.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/browser/themes/shared/icons/ion.svg b/browser/themes/shared/icons/ion.svg index 870914287b..d324bae72e 100644 --- a/browser/themes/shared/icons/ion.svg +++ b/browser/themes/shared/icons/ion.svg @@ -1,4 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index e55e677fb3..92d59e6f5e 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/browser/themes/shared/jar.inc.mn @@ -178,7 +178,6 @@ skin/classic/browser/history.svg (../shared/icons/history.svg) skin/classic/browser/home.svg (../shared/icons/home.svg) skin/classic/browser/import.svg (../shared/icons/import.svg) - skin/classic/browser/insights.svg (../shared/icons/insights.svg) #ifndef MOZ_WIDGET_GTK skin/classic/browser/import-export.svg (../shared/icons/import-export.svg) #endif diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css index 92466732f6..5c2d783e94 100644 --- a/browser/themes/shared/notification-icons.css +++ b/browser/themes/shared/notification-icons.css @@ -11,13 +11,15 @@ fill-opacity: var(--urlbar-icon-fill-opacity); color: inherit; border-radius: var(--urlbar-icon-border-radius); -} -#notification-popup-box:hover { - background-color: hsla(0,0%,70%,.2); -} -#notification-popup-box:hover:active, -#notification-popup-box[open] { - background-color: hsla(0,0%,70%,.3); + + &:hover { + background-color: hsla(0,0%,70%,.2); + } + + &:hover:active, + &[open] { + background-color: hsla(0,0%,70%,.3); + } } .popup-notification-icon, @@ -26,24 +28,24 @@ fill: currentColor; } -.notification-anchor-icon:focus-visible { - outline: var(--focus-outline); - outline-offset: var(--focus-outline-inset); - border-radius: var(--urlbar-icon-border-radius); -} - -.blocked-permission-icon:focus-visible { - outline: var(--focus-outline); - outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset)); - border-radius: 1px; -} - /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { list-style-image: url(chrome://global/skin/icons/info-filled.svg); padding: var(--urlbar-icon-padding); + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + border-radius: var(--urlbar-icon-border-radius); + } +} + +.blocked-permission-icon:focus-visible { + outline: var(--focus-outline); + outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset)); + border-radius: 1px; } /* INDIVIDUAL NOTIFICATIONS */ @@ -58,68 +60,50 @@ .persistent-storage-icon { list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); -} -.persistent-storage-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg); + } } .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); -} -.desktop-notification-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg); + } } .geo-icon { list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); -} -.geo-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg); + } } .open-protocol-handler-icon { list-style-image: url(chrome://global/skin/icons/open-in-new.svg); -} -.open-protocol-handler-icon:-moz-locale-dir(rtl) { - transform: scaleX(-1); + &:-moz-locale-dir(rtl) { + transform: scaleX(-1); + } } .xr-icon { list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); -} -.xr-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg); + } } .autoplay-media-icon { list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); -} -.autoplay-media-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg); -} - -.storage-access-notification-content { - color: var(--panel-disabled-color); - font-style: italic; - margin-top: 15px; -} - -.storage-access-notification-content .text-link { - color: LinkText; -} - -.storage-access-notification-content .text-link:hover { - text-decoration: underline; -} - -#storage-access-notification .popup-notification-body-container { - padding: 20px; + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg); + } } .indexedDB-icon { @@ -128,59 +112,59 @@ #password-notification-icon { list-style-image: url(chrome://browser/skin/login.svg); -} -#password-notification-icon[extraAttr="attention"] { - fill: var(--toolbarbutton-icon-fill-attention); - fill-opacity: 1; + &[extraAttr="attention"] { + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; + } } .camera-icon { list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); -} -.camera-icon.in-use { - list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); -} + &.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); + } -.camera-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); + } } .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); -} -.microphone-icon.in-use { - list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); -} + &.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); + } -.microphone-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); -} + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); + } -.popup-notification-icon.microphone-icon { - list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); + &.popup-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); + } } + .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); -} -.screen-icon.in-use { - list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); -} + &.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); + } -.screen-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); + } } .speaker-icon { list-style-image: url(chrome://browser/skin/notification-icons/speaker.svg); } -.midi-icon, -.midi-sysex-icon { +.midi-icon { list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); } @@ -202,16 +186,8 @@ list-style-image: url(chrome://browser/skin/login.svg); } -#permission-popup-menulist { - margin-inline-end: 0; -} - -#webRTC-preview:not([hidden]) { - flex-direction: column; -} - #webRTC-previewVideo { - border-radius: 4px; + border-radius: var(--border-radius-small); border: 1px solid var(--panel-separator-color); min-width: 0; min-height: 10em; @@ -221,17 +197,14 @@ #webRTC-all-windows-shared, #webRTC-previewWarning { font-size: 0.8em; -} -@media not (prefers-contrast) { - #webRTC-all-windows-shared, - #webRTC-previewWarning { + @media not (prefers-contrast) { opacity: 0.6; } } #webRTC-previewWarning { - margin-block-start: 14px; + margin-block-start: var(--space-large); } /** @@ -244,14 +217,6 @@ font-size: 0.75em; } -#webRTC-previewWarningBox:-moz-locale-dir(rtl) { - background-position: calc(100% - .75em) .75em; -} - -#webRTC-previewWarning > .text-link { - margin-inline-start: 0; -} - /* This icon has a block sign in it, so we don't need a blocked version. */ .popup-icon { list-style-image: url("chrome://browser/skin/notification-icons/popup.svg"); @@ -267,11 +232,6 @@ transform: translateY(1px); } -#permission-popup-menulist, -#permission-popup-menulist > menupopup { - min-width: 6.5em; -} - /* EME */ .drm-icon { @@ -294,13 +254,14 @@ .install-icon { list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); -} -.install-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); + } } /* UPDATE */ + .popup-notification-icon[popupid="update-available"], .popup-notification-icon[popupid="update-manual"], .popup-notification-icon[popupid="update-other-instance"], diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css index 3d806d1394..9db5fc45d9 100644 --- a/browser/themes/shared/preferences/preferences.css +++ b/browser/themes/shared/preferences/preferences.css @@ -474,18 +474,23 @@ richlistitem[selected] .actionsMenu:focus-visible { width: 16px; } -#homeContentsGroup [data-subcategory] { +#homeContentsGroup > [data-subcategory] { margin-top: 14px; } -#homeContentsGroup [data-subcategory] .section-checkbox { +#homeContentsGroup > [data-subcategory] .section-checkbox { font-weight: var(--font-weight-bold); } -#homeContentsGroup [data-subcategory] > vbox menulist { +#homeContentsGroup > [data-subcategory] > vbox menulist { margin-block: 0; } +/* Align fix for prefs that have a text link in the headline */ +#homeContentsGroup > [data-subcategory] > hbox { + align-items: last baseline; +} + #homeContentsGroup .checkbox-label { margin-inline-end: var(--space-small); } @@ -583,6 +588,12 @@ a[is="moz-support-link"]:not(.sidebar-footer-link) { pointer-events: none; } +html|label[disabled] { + /* This matches XUL checkbox.css - but for HTML labels for HTML inputs we + * need to do this ourselves. */ + opacity: 0.4; +} + #showUpdateHistory { margin-inline-start: 0; } diff --git a/browser/themes/shared/sanitizeDialog_v2.css b/browser/themes/shared/sanitizeDialog_v2.css index 40c8aed88b..9f5df748f4 100644 --- a/browser/themes/shared/sanitizeDialog_v2.css +++ b/browser/themes/shared/sanitizeDialog_v2.css @@ -9,6 +9,14 @@ white-space: pre-wrap; } +/* Add padding to the left to create space between + the duration choicemenu (#sanitizeDurationChoice) + and the label +*/ +#sanitizeDurationSuffixLabel { + margin-inline-start: var(--space-small); +} + /* Hide the duration dropdown suffix label if it's empty. Otherwise it takes up a little space, causing the end of the dropdown to not be aligned with the warning box. */ diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css index 204df115be..9a27b891c6 100644 --- a/browser/themes/shared/tabs.css +++ b/browser/themes/shared/tabs.css @@ -54,6 +54,17 @@ color-scheme: unset; background: var(--tabpanel-background-color); + &[pendingpaint] { + background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png); + background-repeat: no-repeat; + background-position: center center; + background-size: 30px; + } + + browser:is([blank], [pendingpaint]) { + opacity: 0; + } + browser[type=content] { color-scheme: env(-moz-content-preferred-color-scheme); } @@ -76,7 +87,17 @@ } } +.closing-tabs-spacer { + pointer-events: none; + + #tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > & { + transition: width .15s ease-out; + } +} + .tabbrowser-tab { + --tab-label-mask-size: 2em; + appearance: none; background-color: transparent; color: inherit; @@ -194,72 +215,80 @@ } } -@media (prefers-reduced-motion: reduce) { - .tab-throbber[busy] { +.tab-throbber { + &:not([busy]) { + display: none; + } + + @media (prefers-reduced-motion: reduce) { background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); background-position: center; background-repeat: no-repeat; -moz-context-properties: fill; fill: currentColor; opacity: 0.4; - } - .tab-throbber[progress] { - opacity: 0.8; + &[progress] { + opacity: 0.8; + } } -} -@media (prefers-reduced-motion: no-preference) { - :root[sessionrestored] .tab-throbber { - &[busy] { - position: relative; - overflow: hidden; - - &::before { - content: ""; - position: absolute; - background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); - background-position: left center; - background-repeat: no-repeat; - width: 480px; - height: 100%; - animation: tab-throbber-animation 1.05s steps(30) infinite; - -moz-context-properties: fill; - - /* XXX: It would be nice to transition between the "connecting" color and the - "loading" color (see the `.tab-throbber[progress]::before` rule below); - however, that currently forces main thread painting. When this is fixed - (after WebRender lands), we can do something like - `transition: fill 0.333s, opacity 0.333s;` */ - - fill: currentColor; - opacity: 0.7; + @media (prefers-reduced-motion: no-preference) { + :root[sessionrestored] & { + &[busy] { + position: relative; + overflow: hidden; + + &::before { + content: ""; + position: absolute; + background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); + background-position: left center; + background-repeat: no-repeat; + width: 480px; + height: 100%; + animation: tab-throbber-animation 1.05s steps(30) infinite; + -moz-context-properties: fill; + + /* XXX: It would be nice to transition between the "connecting" color and the + "loading" color (see the `[progress]::before` rule below); + however, that currently forces main thread painting. When this is fixed + (after WebRender lands), we can do something like + `transition: fill 0.333s, opacity 0.333s;` */ + + fill: currentColor; + opacity: 0.7; + } + + &:-moz-locale-dir(rtl)::before { + animation-name: tab-throbber-animation-rtl; + } } - &:-moz-locale-dir(rtl)::before { - animation-name: tab-throbber-animation-rtl; + &[progress]::before { + fill: var(--tab-loading-fill); + opacity: 1; } - } - &[progress]::before { - fill: var(--tab-loading-fill); - opacity: 1; - } - - #TabsToolbar[brighttext] &[progress]:not([selected])::before { - fill: var(--lwt-tab-loading-fill-inactive, #84c1ff); + #TabsToolbar[brighttext] &[progress]:not([selected])::before { + fill: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } } } +} - @keyframes tab-throbber-animation { - 0% { transform: translateX(0); } - 100% { transform: translateX(-100%); } - } +@keyframes tab-throbber-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } +} - @keyframes tab-throbber-animation-rtl { - 0% { transform: translateX(0); } - 100% { transform: translateX(100%); } - } +@keyframes tab-throbber-animation-rtl { + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } +} + +.tab-icon-pending:is(:not([pendingicon]), [busy], [pinned]) { + display: none; } :root { @@ -279,6 +308,11 @@ -moz-context-properties: fill; fill: currentColor; + /* Apply crisp rendering for favicons at exactly 2dppx resolution */ + @media (resolution: 2dppx) { + image-rendering: -moz-crisp-edges; + } + &:not([src]), &:-moz-broken { content: url("chrome://global/skin/icons/defaultFavicon.svg"); @@ -288,6 +322,22 @@ animation: var(--tab-sharing-icon-animation); animation-delay: -1.5s; } + + &[selected]:not([src], [pinned], [crashed], [pictureinpicture]), + &:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), + &[busy] { + display: none; + } +} + +.tab-sharing-icon-overlay, +.tab-icon-overlay { + display: none; +} + +.tab-sharing-icon-overlay[sharing]:not([selected]), +.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [crashed]) { + display: revert; } .tab-sharing-icon-overlay { @@ -375,8 +425,36 @@ } } +.tab-label-container { + overflow: hidden; + + #tabbrowser-tabs:not([secondarytext-unsupported]) & { + height: 2.7em; + } + + &[pinned] { + width: 0; + } + + &[textoverflow] { + &[labeldirection=ltr]:not([pinned]), + &:not([labeldirection], [pinned]):-moz-locale-dir(ltr) { + direction: ltr; + mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size)); + } + + &[labeldirection=rtl]:not([pinned]), + &:not([labeldirection], [pinned]):-moz-locale-dir(rtl) { + direction: rtl; + mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size)); + } + } +} + .tab-label { margin-inline: 0; + line-height: 1.7; /* override 'normal' in case of fallback math fonts with huge metrics */ + white-space: nowrap; } .tab-close-button { @@ -387,6 +465,11 @@ padding: 6px; border-radius: var(--tab-border-radius); list-style-image: url(chrome://global/skin/icons/close-12.svg); + + &[pinned], + #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > &:not([selected]) { + display: none; + } } /* The following rulesets allow showing more of the tab title */ @@ -401,15 +484,24 @@ } -#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { - height: 2.7em; -} - .tab-secondary-label { font-size: .75em; + margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */ opacity: .8; - #tabbrowser-tabs[secondarytext-unsupported] & { + #tabbrowser-tabs[secondarytext-unsupported] &, + :root[uidensity=compact] &, + &:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), + &:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, + &[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, + &[activemedia-blocked] > .tab-icon-sound-playing-label, + &[muted] > .tab-icon-sound-playing-label, + &[pictureinpicture] > .tab-icon-sound-playing-label, + &[pictureinpicture] > .tab-icon-sound-muted-label, + &:not([pictureinpicture]) > .tab-icon-sound-pip-label, + &:not([muted]) > .tab-icon-sound-muted-label, + &:not([showtooltip]) > .tab-icon-sound-tooltip-label, + &[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) { display: none; } @@ -490,8 +582,7 @@ /* Pinned tabs */ .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), -#firefox-view-button[attention] { +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px); background-position: center bottom 6.5px; background-size: 4px 4px; diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css index 5700814351..21a6d216ed 100644 --- a/browser/themes/shared/toolbarbutton-icons.css +++ b/browser/themes/shared/toolbarbutton-icons.css @@ -114,13 +114,9 @@ position: relative; } -#nav-bar-customization-target :where(#reload-button, #stop-button) > .toolbarbutton-icon { - padding: calc(var(--toolbarbutton-inner-padding) + 1px) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 1px ) !important; /* The animation is 18px but the other icons are 16px, lower it by 1px so it is vertically centered */ -} - #reload-button > .toolbarbutton-animatable-box, #stop-button > .toolbarbutton-animatable-box { - top: calc(50% - 9px); /* Vertically center the 20px tall animatable image, which is 1px higher than other icons */ + top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */ width: 20px; /* Width of each frame within the SVG sprite */ height: 20px; /* Height of each frame within the SVG sprite */ } @@ -466,3 +462,9 @@ toolbarbutton.bookmark-item { #firefox-view-button { list-style-image: url("chrome://browser/skin/firefox-view.svg"); } + +#content-analysis-indicator { + -moz-context-properties: fill, stroke; + stroke: var(--toolbarbutton-icon-fill); + list-style-image: url("chrome://global/skin/icons/content-analysis.svg"); +} diff --git a/browser/themes/shared/translations/panel.css b/browser/themes/shared/translations/panel.css index 988dbadb4b..716ec02def 100644 --- a/browser/themes/shared/translations/panel.css +++ b/browser/themes/shared/translations/panel.css @@ -63,11 +63,19 @@ h1.translations-panel-header-wrapper { /* The default styling is to dim the default, but here override it so that it still uses the primary color. */ -.translations-panel-footer > button[default][disabled="true"] { +.translations-panel-button-group > button[default][disabled="true"] { color: var(--button-primary-color); background-color: var(--button-primary-bgcolor); } +#select-translations-panel-footer { + display: flex; + flex: 1; + flex-wrap: wrap; + justify-content: space-between; + gap: var(--space-small); +} + #full-page-translations-panel-translate-hint-action { appearance: none; background-color: var(--button-bgcolor); @@ -117,37 +125,44 @@ h1.translations-panel-header-wrapper { padding: 12px; } -.select-translations-panel-button { - align-items: center; - justify-content: center; - margin-inline: 0; -} - .select-translations-panel-content { padding: var(--arrowpanel-padding); padding-block: 4px; } .select-translations-panel-copy-button { + list-style-image: url(chrome://global/skin/icons/edit-copy.svg); background-color: transparent; - font: message-box; - font-weight: var(--font-weight-bold); + -moz-context-properties: fill; + fill: currentColor; + margin: 0; - &::before { - content: url(chrome://global/skin/icons/edit-copy.svg); - fill: currentColor; - margin-inline-end: 5px; - -moz-context-properties: fill; + > .button-box { + gap: var(--space-xsmall); + } + + &.copied { + list-style-image: url(chrome://global/skin/icons/check.svg); } } +#select-translations-panel-copy-button { + justify-content: flex-start; +} + +#select-translations-panel-footer-button-group { + flex: 1; + justify-content: flex-end; +} + .select-translations-panel-header { padding: var(--arrowpanel-padding); text-align: initial; } -.select-translations-panel-label { - margin-block: var(--arrowpanel-padding) 6px; +.select-translations-panel-label, +.select-translations-panel-message-bar { + margin-block: 0 6px; } #select-translations-panel-lang-selection { @@ -156,7 +171,7 @@ h1.translations-panel-header-wrapper { .select-translations-panel-text-area { height: 8em; - resize: none; + resize: vertical; &:disabled { color: var(--panel-disabled-color); diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css index c06342fd98..4362c19d5d 100644 --- a/browser/themes/shared/urlbarView.css +++ b/browser/themes/shared/urlbarView.css @@ -52,6 +52,10 @@ --urlbarView-labeled-row-label-top: calc(-1.27em - 2px); --urlbarView-labeled-tip-margin-top-extra: 8px; + --urlbarView-action-button-background-color: light-dark(white, #1C1B22); + --urlbarView-action-button-hover-color: light-dark(#5B5B66, var(--buttons-destructive-color)); + --urlbarView-action-button-selected-color: light-dark(#1C1B22, var(--urlbarView-action-button-background-color)); + &:-moz-locale-dir(rtl) { --urlbarView-action-slide-in-distance: -200px; } @@ -1027,3 +1031,43 @@ background: var(--urlbarView-highlight-background); color: var(--urlbarView-highlight-color); } + +.urlbarView-row:has(.urlbarView-actions-container:not(:empty)) { + flex-direction: column; + align-items: flex-start; +} + +.urlbarView-actions-container { + margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)); + margin-block-end: var(--urlbarView-item-block-padding); +} + +.urlbarView-action-btn { + font-size: smaller; + color: var(--toolbar-field-focus-color); + border-radius: var(--toolbarbutton-border-radius); + border: 1px solid transparent; + padding: .4em .6em; + display: inline-flex; + align-items: center; + background-color: var(--urlbarView-action-button-background-color); + box-shadow: 0 0px 4px rgba(0, 0, 0, 0.23); +} + +.urlbarView-action-btn img { + width: 16px; + height: 16px; + margin-inline-end: .4em; + -moz-context-properties: fill, fill-opacity; +} + +.urlbarView-action-btn:hover { + color: var(--urlbarView-result-button-hover-color); + background-color: var(--urlbarView-action-button-hover-color); +} + +.urlbarView-action-btn[selected] { + color: light-dark(var(--urlbarView-result-button-hover-color), var(--toolbar-field-focus-color)); + background-color: var(--urlbarView-action-button-selected-color); + border-color: light-dark(transparent, white); +} -- cgit v1.2.3