зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1668857 - Unify styling for description text for panels using new `--panel-description-color` variable. r=ntim,extension-reviewers,zombie
Differential Revision: https://phabricator.services.mozilla.com/D92658
This commit is contained in:
Родитель
9ef274dfd2
Коммит
403273ad07
|
@ -25,14 +25,12 @@
|
|||
}
|
||||
|
||||
#protections-popup {
|
||||
--protections-popup-description-color: #737373;
|
||||
--protections-popup-switch-off-background: #f9f9fa;
|
||||
--protections-popup-switch-off-hover-background: #c9c9ca;
|
||||
--protections-popup-switch-off-active-background: #b1b1b2;
|
||||
}
|
||||
|
||||
:root[lwt-popup-brighttext] #protections-popup {
|
||||
--protections-popup-description-color: #f9f9fa;
|
||||
--protections-popup-switch-off-background: #5c5c61;
|
||||
--protections-popup-switch-off-hover-background: #6d6d71;
|
||||
--protections-popup-switch-off-active-background: #737379;
|
||||
|
@ -166,8 +164,7 @@
|
|||
}
|
||||
#identity-popup-security-httpsonlymode-info {
|
||||
font-size: 0.85em;
|
||||
/* Temporary, will fix that with bug 1668857 */
|
||||
opacity: 0.65;
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
.identity-popup-connection-secure.upgraded {
|
||||
|
@ -343,7 +340,7 @@
|
|||
|
||||
#identity-popup-permissions-content > description,
|
||||
#protections-popup-content > description {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
/* This element needs the pre-wrap because we add newlines to it in the code. */
|
||||
|
@ -547,7 +544,7 @@ description#identity-popup-content-verifier,
|
|||
|
||||
.protections-popup-empty-label {
|
||||
margin-inline-start: 0;
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
.protections-popup-trackersView-empty-image {
|
||||
|
@ -563,7 +560,7 @@ description#identity-popup-content-verifier,
|
|||
}
|
||||
|
||||
.protections-popup-cookiesView-list-header {
|
||||
color: var(--protections-popup-description-color);
|
||||
color: var(--panel-description-color);
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
|
@ -652,7 +649,7 @@ description#identity-popup-content-verifier,
|
|||
margin: 4.85em 7.25em;
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
color: var(--protections-popup-description-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
#protections-popup-content {
|
||||
|
@ -665,7 +662,7 @@ description#identity-popup-content-verifier,
|
|||
#protections-popup-not-found-section-header {
|
||||
margin: 0;
|
||||
padding: var(--vertical-section-padding) var(--horizontal-padding);
|
||||
color: var(--protections-popup-description-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
#tracking-protection-container > tooltip {
|
||||
|
@ -705,8 +702,8 @@ description#identity-popup-content-verifier,
|
|||
}
|
||||
|
||||
.protections-popup-category.notFound {
|
||||
color: var(--panel-disabled-color);
|
||||
fill: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
fill: var(--panel-description-color);
|
||||
}
|
||||
|
||||
.protections-popup-category.notFound:hover {
|
||||
|
@ -809,7 +806,7 @@ description#identity-popup-content-verifier,
|
|||
}
|
||||
|
||||
.identity-popup-permission-state-label {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
#protections-popup[hasException] .protections-popup-category-state-label {
|
||||
|
@ -1034,12 +1031,12 @@ description#identity-popup-content-verifier,
|
|||
}
|
||||
|
||||
#protections-popup-trackers-blocked-counter-description {
|
||||
color: var(--protections-popup-description-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
#protections-popup-footer-protection-type-label {
|
||||
margin-inline-end: var(--horizontal-padding);
|
||||
color: var(--protections-popup-description-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
.protections-popup-description {
|
||||
|
|
|
@ -811,7 +811,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
|
|||
}
|
||||
|
||||
#fxa-menu-header-description {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
#fxa-menu-avatar {
|
||||
|
@ -934,7 +934,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
|
|||
}
|
||||
|
||||
.PanelUI-remotetabs-notabsforclient-label {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
/* This margin is to line this label up with the labels in toolbarbuttons. */
|
||||
margin-inline-start: 28px;
|
||||
}
|
||||
|
@ -990,7 +990,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
|
|||
}
|
||||
|
||||
.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
/* Collapse the non-active vboxes in the remotetabs deck to use only the
|
||||
|
@ -1305,7 +1305,7 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
|
|||
}
|
||||
|
||||
.subview-subheader {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
panelview .toolbarbutton-1 {
|
||||
|
@ -1618,7 +1618,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
|
|||
}
|
||||
|
||||
#PanelUI-panic-actionlist-main-label {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
@ -1789,7 +1789,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
|
|||
}
|
||||
|
||||
.subviewbutton.download > .toolbarbutton-text > .status-text {
|
||||
color: var(--panel-disabled-color);
|
||||
color: var(--panel-description-color);
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
|
@ -2294,7 +2294,7 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
|
|||
#PanelUI-profiler-content-description {
|
||||
margin: 4px 15px;
|
||||
font-size: 12px;
|
||||
opacity: 0.75;
|
||||
color: var(--panel-description-color);
|
||||
}
|
||||
|
||||
#PanelUI-profiler-content-recording {
|
||||
|
|
|
@ -74,6 +74,12 @@ add_task(async function test_popup_styling(browser, accDoc) {
|
|||
"Popup text color should have been themed"
|
||||
);
|
||||
|
||||
Assert.equal(
|
||||
arrowContentComputedStyle.getPropertyValue("--panel-description-color"),
|
||||
`rgba(${hexToRGB(POPUP_TEXT_COLOR).join(", ")}, 0.65)`,
|
||||
"Popup text description color should have been themed"
|
||||
);
|
||||
|
||||
// Ensure popup border color was set properly
|
||||
if (AppConstants.platform == "macosx") {
|
||||
Assert.ok(
|
||||
|
|
|
@ -71,10 +71,12 @@ const toolkitVariableMap = [
|
|||
lwtProperty: "popup_text",
|
||||
processColor(rgbaChannels, element) {
|
||||
const disabledColorVariable = "--panel-disabled-color";
|
||||
const descriptionColorVariable = "--panel-description-color";
|
||||
|
||||
if (!rgbaChannels) {
|
||||
element.removeAttribute("lwt-popup-brighttext");
|
||||
element.style.removeProperty(disabledColorVariable);
|
||||
element.style.removeProperty(descriptionColorVariable);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
@ -90,6 +92,10 @@ const toolkitVariableMap = [
|
|||
disabledColorVariable,
|
||||
`rgba(${r}, ${g}, ${b}, 0.5)`
|
||||
);
|
||||
element.style.setProperty(
|
||||
descriptionColorVariable,
|
||||
`rgba(${r}, ${g}, ${b}, 0.65)`
|
||||
);
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
||||
},
|
||||
},
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
--arrowpanel-border-color: var(--default-arrowpanel-border-color);
|
||||
--arrowpanel-padding: 10px;
|
||||
--panel-disabled-color: GrayText;
|
||||
--panel-description-color: GrayText;
|
||||
/* ::::: Styles ::::: */
|
||||
appearance: auto;
|
||||
-moz-default-appearance: dialog;
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
--arrowpanel-border-color: var(--default-arrowpanel-border-color);
|
||||
--arrowpanel-border-radius: 3.5px;
|
||||
--panel-disabled-color: GrayText;
|
||||
--panel-description-color: hsl(0,0%,50%);
|
||||
|
||||
--focus-ring-box-shadow: 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring;
|
||||
/* ::::: Styles ::::: */
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
--arrowpanel-color: var(--default-arrowpanel-color);
|
||||
--arrowpanel-border-color: var(--default-arrowpanel-border-color);
|
||||
--panel-disabled-color: GrayText;
|
||||
--panel-description-color: GrayText;
|
||||
/* ::::: Styles ::::: */
|
||||
background-color: -moz-Dialog;
|
||||
color: -moz-DialogText;
|
||||
|
|
Загрузка…
Ссылка в новой задаче