From 36c1d26d80e8b23e1579218d6942b68606d7d150 Mon Sep 17 00:00:00 2001 From: Mike Conley Date: Thu, 18 Mar 2021 20:00:02 +0000 Subject: [PATCH] Bug 1697624 - Apply more Proton styles to PopupNotifications. r=desktop-theme-reviewers,harry In particular, this makes it so that Proton PopupNotifications: * Are ~400px wide (but use an em value for system font flexibility) * Use a slightly larger font on macOS * Have a 16px padding, regardless of platform * Has 16px of space between each popupnotificationcontent, and before the popup-notification-checkbox. * Sets a default font-weight on the WebRTC permission panel label when a single device label is listed Differential Revision: https://phabricator.services.mozilla.com/D108518 --- browser/themes/shared/browser.inc.css | 30 +++++++++++++++---- toolkit/themes/linux/global/global.css | 7 ++++- toolkit/themes/osx/global/global.css | 1 - toolkit/themes/shared/global.inc.css | 12 ++++++++ .../themes/shared/popupnotification.inc.css | 9 ++++-- toolkit/themes/windows/global/global.css | 7 ++++- 6 files changed, 56 insertions(+), 10 deletions(-) diff --git a/browser/themes/shared/browser.inc.css b/browser/themes/shared/browser.inc.css index c079a47be4b0..a317f89b16d3 100644 --- a/browser/themes/shared/browser.inc.css +++ b/browser/themes/shared/browser.inc.css @@ -838,11 +838,6 @@ menupopup::part(drop-indicator) { background-color: rgb(0,62,170); } -.webRTC-selectDevice-label { - margin-top: 6px; - font-weight: 600; -} - .webRTC-selectDevice-selector-container { display: flex; align-items: center; @@ -853,6 +848,11 @@ menupopup::part(drop-indicator) { } @supports not -moz-bool-pref("browser.proton.doorhangers.enabled") { +.webRTC-selectDevice-label { + margin-top: 6px; + font-weight: 600; +} + #webRTC-selectCamera-icon, #webRTC-selectMicrophone-icon { display: none; @@ -860,6 +860,18 @@ menupopup::part(drop-indicator) { } /** END not Proton **/ @supports -moz-bool-pref("browser.proton.doorhangers.enabled") { +popupnotificationcontent { + margin-block-start: 8px; +} + +.popup-notification-checkbox { + margin-block: 8px; +} + +.popup-notification-body-container { + padding-block-end: 0; +} + #webRTC-selectCamera-label, #webRTC-selectMicrophone-label { display: none; @@ -868,6 +880,7 @@ menupopup::part(drop-indicator) { .webRTC-selectDevice-icon { -moz-context-properties: fill; fill: currentColor; + margin-inline-end: 6px; } #webRTC-selectCamera-icon { @@ -877,6 +890,13 @@ menupopup::part(drop-indicator) { #webRTC-selectMicrophone-icon { list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); } + +.popup-notification-body description, +.popup-notification-body label, +.popup-notification-body checkbox { + margin-inline-start: 0; +} + } /** END Proton **/ #tab-notification-deck { diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css index 0e0f842d217f..e72025dcd43f 100644 --- a/toolkit/themes/linux/global/global.css +++ b/toolkit/themes/linux/global/global.css @@ -22,7 +22,6 @@ --arrowpanel-background: var(--default-arrowpanel-background); --arrowpanel-color: var(--default-arrowpanel-color); --arrowpanel-border-color: var(--default-arrowpanel-border-color); - --arrowpanel-padding: 10px; --panel-disabled-color: GrayText; --panel-description-color: GrayText; /* ::::: Styles ::::: */ @@ -33,6 +32,12 @@ font: message-box; } +@supports not -moz-bool-pref("browser.proton.enabled") { +:root { + --arrowpanel-padding: 10px; +} +} /** END not Proton **/ + /* ::::: Alert icons :::::*/ .message-icon { diff --git a/toolkit/themes/osx/global/global.css b/toolkit/themes/osx/global/global.css index d48057d131a8..57c6e2423e22 100644 --- a/toolkit/themes/osx/global/global.css +++ b/toolkit/themes/osx/global/global.css @@ -6,7 +6,6 @@ :root { /* ::::: Variables ::::: */ - --arrowpanel-padding: 16px; --default-arrowpanel-background: #fff; --default-arrowpanel-color: hsl(0,0%,10%); --default-arrowpanel-border-color: hsla(210,4%,10%,.05); diff --git a/toolkit/themes/shared/global.inc.css b/toolkit/themes/shared/global.inc.css index 43ac3e69c3bd..d0def268aee5 100644 --- a/toolkit/themes/shared/global.inc.css +++ b/toolkit/themes/shared/global.inc.css @@ -11,6 +11,18 @@ @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); +:root { + /* ::::: Variables ::::: */ + --arrowpanel-padding: 16px; + --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding))); +} + +@supports not -moz-bool-pref("browser.proton.doorhangers.enabled") { +:root { + --popup-notification-body-width: 25em; +} +} /** END not Proton **/ + /* Lightweight theme roots */ :root[lwtheme-image]:-moz-lwtheme-darktext { diff --git a/toolkit/themes/shared/popupnotification.inc.css b/toolkit/themes/shared/popupnotification.inc.css index 4c98a01664a8..4fec6d06143c 100644 --- a/toolkit/themes/shared/popupnotification.inc.css +++ b/toolkit/themes/shared/popupnotification.inc.css @@ -7,7 +7,8 @@ .popup-notification-header-container, .popup-notification-footer-container { display: flex; - max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + 25em); + /** Padding + Icon width + border-radius + popup-notification-body-width **/ + max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + var(--popup-notification-body-width)); } .popup-notification-body-container { @@ -21,7 +22,7 @@ } .popup-notification-body { - width: 25em; + width: var(--popup-notification-body-width); } .popup-notification-closebutton { @@ -110,6 +111,10 @@ /** PopupNotifications **/ @supports -moz-bool-pref("browser.proton.doorhangers.enabled") { +popupnotification { + font: caption; +} + .panel-footer { justify-content: flex-end; margin-inline: 16px; diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css index 3e26b559efd5..894b18beb2f7 100644 --- a/toolkit/themes/windows/global/global.css +++ b/toolkit/themes/windows/global/global.css @@ -10,7 +10,6 @@ :root { /* ::::: Variables ::::: */ - --arrowpanel-padding: 10px; --default-arrowpanel-background: Field; --default-arrowpanel-color: FieldText; --default-arrowpanel-border-color: ThreeDShadow; @@ -26,6 +25,12 @@ font: message-box; } +@supports not -moz-bool-pref("browser.proton.enabled") { +:root { + --arrowpanel-padding: 10px; +} +} /** END not Proton **/ + @supports -moz-bool-pref("browser.proton.contextmenus.enabled") { @media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) { :root {