Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 14:55:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out 2 changesets (bug 1690333, bug 1699250) for mochitest failures on test_notificationbox.xhtml.

Browse Source 
Backed out changeset d6780d34ca05 (bug 1690333)
Backed out changeset 50cc5db86f1e (bug 1699250)
This commit is contained in:
Cosmin Sabou 2021-03-27 23:58:04 +02:00
parent ce67801c64
commit 4618d0a607
33 changed files with 325 additions and 777 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
browser/actors/AboutNewTabParent.jsm
View File

@ -32,13 +32,6 @@ XPCOMUtils.defineLazyPreferenceGetter(
false
);
XPCOMUtils.defineLazyPreferenceGetter(
this,
"PROTON_INFOBARS_ENABLED",
"browser.proton.infobars.enabled",
false
);
class AboutNewTabParent extends JSWindowActorParent {
async receiveMessage(message) {
switch (message.name) {
@ -162,9 +155,7 @@ var DefaultBrowserNotification = {
let iconPixels = win.devicePixelRatio > 1 ? "64" : "32";
let iconURL = "chrome://branding/content/icon" + iconPixels + ".png";
const priority = PROTON_INFOBARS_ENABLED
? win.gNotificationBox.PRIORITY_SYSTEM
: win.gNotificationBox.PRIORITY_INFO_MEDIUM;
const priority = win.gNotificationBox.PRIORITY_INFO_MEDIUM;
let callback = this._onNotificationEvent.bind(this);
this._notification = gBrowser
.getNotificationBox(browser)
@ -174,9 +165,7 @@ var DefaultBrowserNotification = {
iconURL,
priority,
buttons,
callback,
null,
["browser/defaultBrowserNotification.ftl"]
callback
);
},

1
browser/app/profile/firefox.js
View File

@ -846,6 +846,7 @@ pref("browser.preferences.experimental", false);
pref("browser.preferences.experimental.hidden", false);
pref("browser.preferences.defaultPerformanceSettings.enabled", true);
pref("browser.proton.enabled", false);
pref("browser.proton.toolbar.version", 0);
// Backspace and Shift+Backspace behavior

16
browser/base/content/browser.js
View File

@ -396,7 +396,7 @@ XPCOMUtils.defineLazyGetter(this, "gHighPriorityNotificationBox", () => {
return new MozElements.NotificationBox(element => {
element.classList.add("global-notificationbox");
element.setAttribute("notificationside", "top");
if (gProtonInfobarsEnabled) {
if (Services.prefs.getBoolPref("browser.proton.infobars.enabled", false)) {
// With Proton enabled all notification boxes are at the top, built into the browser chrome.
let tabNotifications = document.getElementById("tab-notification-deck");
gNavToolbox.insertBefore(element, tabNotifications);
@ -408,7 +408,7 @@ XPCOMUtils.defineLazyGetter(this, "gHighPriorityNotificationBox", () => {
// Regular notification bars shown at the bottom of the window.
XPCOMUtils.defineLazyGetter(this, "gNotificationBox", () => {
return gProtonInfobarsEnabled
return Services.prefs.getBoolPref("browser.proton.infobars.enabled", false)
? gHighPriorityNotificationBox
: new MozElements.NotificationBox(element => {
element.classList.add("global-notificationbox");
@ -587,14 +587,6 @@ XPCOMUtils.defineLazyPreferenceGetter(
}
);
/* Temporary pref while the Proton infobars work stabilizes. */
XPCOMUtils.defineLazyPreferenceGetter(
this,
"gProtonInfobarsEnabled",
"browser.proton.infobars.enabled",
false
);
/* Temporary pref while the dust settles around the updated tooltip design
for tabs and bookmarks toolbar. This will eventually be removed and
browser.proton.enabled will be used instead. */
@ -1055,9 +1047,7 @@ const gStoragePressureObserver = {
null,
gHighPriorityNotificationBox.PRIORITY_WARNING_HIGH,
buttons,
null,
null,
["branding/brand.ftl", "browser/preferences/preferences.ftl"]
null
);
// This seems to be necessary to get the buttons to display correctly

8
browser/base/content/tabbrowser.js
View File

@ -826,7 +826,9 @@
if (!browser._notificationBox) {
browser._notificationBox = new MozElements.NotificationBox(element => {
element.setAttribute("notificationside", "top");
if (gProtonInfobarsEnabled) {
if (
Services.prefs.getBoolPref("browser.proton.infobars.enabled", false)
) {
element.setAttribute(
"name",
`tab-notification-box-${this._nextNotificationBoxId++}`
@ -1112,7 +1114,9 @@
this._appendStatusPanel();
if (gProtonInfobarsEnabled) {
if (
Services.prefs.getBoolPref("browser.proton.infobars.enabled", false)
) {
this._updateVisibleNotificationBox(newBrowser);
}

5
browser/components/aboutlogins/AboutLoginsParent.jsm
View File

@ -733,10 +733,7 @@ var AboutLogins = {
id,
iconURL,
notificationBox[priority],
buttons,
null,
null,
["browser/aboutLogins.ftl"]
buttons
);
}
},

16
browser/components/newtab/lib/InfoBar.jsm
View File

@ -13,11 +13,6 @@ XPCOMUtils.defineLazyModuleGetters(this, {
Services: "resource://gre/modules/Services.jsm",
});
const FTL_PATHS = [
"browser/newtab/asrouter.ftl",
"browser/defaultBrowserNotification.ftl",
];
class InfoBarNotification {
constructor(message, dispatch) {
this._dispatch = dispatch;
@ -50,9 +45,7 @@ class InfoBarNotification {
content.icon || "chrome://branding/content/icon64.png",
notificationContainer.PRIORITY_INFO_MEDIUM,
content.buttons.map(b => this.formatButtonConfig(b)),
this.infobarCallback,
null,
FTL_PATHS
this.infobarCallback
);
this.addImpression();
@ -138,9 +131,10 @@ const InfoBar = {
},
maybeInsertFTL(win) {
for (let filepath of FTL_PATHS) {
win.MozXULElement.insertFTLIfNeeded(filepath);
}
win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
win.MozXULElement.insertFTLIfNeeded(
"browser/defaultBrowserNotification.ftl"
);
},
showInfoBarMessage(browser, message, dispatch) {

22
browser/components/protections/content/protections.css
View File

@ -855,7 +855,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
#monitor-breaches-link,
#monitor-partial-breaches-link {
color: inherit;
color: var(--in-content-selected-text);
outline: none;
text-decoration: none;
width: 157.267px;
@ -1002,22 +1002,9 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
border: 1px solid transparent;
border-radius: 2px;
text-decoration: none;
color: var(--in-content-primary-button-text-color);
font-weight: 600;
color: var(--in-content-selected-text);
}
@supports not -moz-bool-pref("browser.proton.enabled") {
#manage-protections,
#sign-up-for-monitor-link,
#get-proxy-extension-link,
#get-vpn-link,
#vpn-banner-link,
.monitor-partial-breaches-link-wrapper,
.monitor-breaches-link-wrapper {
font-weight: inherit;
}
} /** END !proton **/
#manage-protections:active,
#sign-up-for-monitor-link:active,
#get-proxy-extension-link:active,
@ -1046,9 +1033,8 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
#monitor-partial-breaches-link:focus,
.monitor-block > a:focus,
#monitor-breaches-link:focus {
outline: 2px solid var(--in-content-focus-outline-color);
outline-offset: 2px;
-moz-outline-radius: 6px;
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
outline: none;
}
.monitor-card.loading::after,

4
browser/modules/ContentCrashHandlers.jsm
View File

@ -461,9 +461,7 @@ var TabCrashHandler = {
closeAllNotifications();
}
},
null,
"browser/browser.ftl"
}
);
let existingItem = this.notificationsMap.get(childID);

2
browser/themes/shared/blockedSite.css
View File

@ -8,7 +8,7 @@
--in-content-page-background: #A4000F;
--in-content-page-color: white;
--in-content-text-color: white;
--in-content-primary-button-text-color: black;
--in-content-selected-text: black;
--in-content-button-background: transparent;
--in-content-button-background-hover: #5a0002;
--in-content-button-background-active: #3e0200;

2
browser/themes/shared/browser.inc.css
View File

@ -944,5 +944,5 @@ popupnotificationcontent {
} /** END Proton **/
#tab-notification-deck {
display: block;
display: flex;
}

4
layout/base/PresShell.cpp
View File

@ -33,7 +33,6 @@
#include "mozilla/Sprintf.h"
#include "mozilla/StaticAnalysisFunctions.h"
#include "mozilla/StaticPrefs_apz.h"
#include "mozilla/StaticPrefs_browser.h"
#include "mozilla/StaticPrefs_dom.h"
#include "mozilla/StaticPrefs_font.h"
#include "mozilla/StaticPrefs_layout.h"
@ -5318,8 +5317,7 @@ nscolor PresShell::GetDefaultBackgroundColorToDraw() {
doc->PrefersColorScheme(Document::IgnoreRFP::Yes) ==
StylePrefersColorScheme::Dark) {
// Use --in-content-page-background for prefers-color-scheme: dark.
return StaticPrefs::browser_proton_enabled() ? NS_RGB(0x1C, 0x1B, 0x22)
: NS_RGB(0x2A, 0x2A, 0x2E);
return NS_RGB(0x2A, 0x2A, 0x2E);
}
return backgroundColor;

7
layout/style/res/plaintext.css
View File

@ -21,16 +21,9 @@ html:not([dir]) pre { /* Not a UA sheet, so doesn't use :-moz-has-dir-attr */
@media (prefers-color-scheme: dark) {
:root {
/* in-content-page-{color, background} for dark theme. */
background: rgb(28,27,34);
color: rgb(251,251,254);
}
@supports not -moz-bool-pref("browser.proton.enabled") {
:root {
background: #2a2a2e;
color: rgb(249, 249, 250);
}
} /** END !proton **/
}
}

6
modules/libpref/init/StaticPrefList.yaml
View File

@ -1115,12 +1115,6 @@
value: false
mirror: always
# Enable Proton restyle. Requires restart.
- name: browser.proton.enabled
type: bool
value: false
mirror: always
# Blocked plugin content
- name: browser.safebrowsing.blockedURIs.enabled
type: bool

2
toolkit/components/aboutperformance/content/aboutPerformance.css
View File

@ -202,7 +202,7 @@ td {
#dispatch-tbody > tr[selected] > td {
background-color: var(--in-content-item-selected);
color: var(--in-content-item-selected-text);
color: var(--in-content-selected-text);
}
#dispatch-tbody > tr:hover {
background-color: var(--in-content-item-hover);

2
toolkit/components/aboutprocesses/content/aboutProcesses.css
View File

@ -117,7 +117,7 @@ td:first-child {
tr[selected] > td {
background-color: var(--in-content-item-selected);
color: var(--in-content-item-selected-text);
color: var(--in-content-selected-text);
}
#process-tbody > tr:hover {
background-color: var(--in-content-item-hover);

1
toolkit/components/certviewer/content/components/certificate-section.css
View File

@ -57,7 +57,6 @@ h1 {
.certificate-tab:focus-visible {
z-index: 1;
outline: 2px solid var(--in-content-focus-outline-color);
}
.tab:hover {

9
toolkit/components/printing/content/print.css
View File

@ -12,6 +12,7 @@ body {
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
background: var(--in-content-box-background);
}
body[loading] #print {
@ -115,6 +116,7 @@ input[type="number"],
input[type="text"] {
padding: 2px;
padding-inline-start: 4px;
outline: none !important;
}
.toggle-group-label {
@ -239,6 +241,13 @@ input[type="text"] {
content: url("chrome://global/content/portrait.svg");
}
select:invalid,
input[type="text"]:invalid,
input[type="number"]:invalid {
border: 1px solid #D70022;
box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
}
.error-message {
font-size: 12px;
color: #D70022;

2
toolkit/components/printing/content/toggle-group.css
View File

@ -63,7 +63,7 @@
.toggle-group-input:enabled:checked + .toggle-group-label {
background-color: var(--in-content-primary-button-background);
color: var(--in-content-primary-button-text-color);
color: var(--in-content-selected-text);
}
.toggle-group-input:enabled:checked + .toggle-group-label:hover {

1
toolkit/content/customElements.js
View File

@ -838,7 +838,6 @@
["button-group", "chrome://global/content/elements/named-deck.js"],
["findbar", "chrome://global/content/elements/findbar.js"],
["menulist", "chrome://global/content/elements/menulist.js"],
["message-bar", "chrome://global/content/elements/message-bar.js"],
["named-deck", "chrome://global/content/elements/named-deck.js"],
["named-deck-button", "chrome://global/content/elements/named-deck.js"],
["search-textbox", "chrome://global/content/elements/search-textbox.js"],

2
toolkit/content/jar.mn
View File

@ -83,8 +83,6 @@ toolkit.jar:
content/global/elements/findbar.js (widgets/findbar.js)
content/global/elements/editor.js (widgets/editor.js)
content/global/elements/general.js (widgets/general.js)
content/global/elements/message-bar.css (widgets/message-bar.css)
content/global/elements/message-bar.js (widgets/message-bar.js)
content/global/elements/menu.js (widgets/menu.js)
content/global/elements/menupopup.js (widgets/menupopup.js)
content/global/elements/moz-input-box.js (widgets/moz-input-box.js)

84
toolkit/content/widgets/message-bar.js
View File

@ -1,84 +0,0 @@
/* 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/. */
"use strict";
// This is loaded into chrome windows with the subscript loader. Wrap in
// a block to prevent accidentally leaking globals onto `window`.
{
class MessageBarElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
const content = this.constructor.template.content.cloneNode(true);
shadowRoot.append(content);
this.closeButton.addEventListener("click", () => this.dismiss(), {
once: true,
});
}
disconnectedCallback() {
this.dispatchEvent(new CustomEvent("message-bar:close"));
}
get closeButton() {
return this.shadowRoot.querySelector("button.close");
}
static get template() {
const template = document.createElement("template");
const commonStyles = document.createElement("link");
commonStyles.rel = "stylesheet";
commonStyles.href = "chrome://global/skin/in-content/common.css";
const messageBarStyles = document.createElement("link");
messageBarStyles.rel = "stylesheet";
messageBarStyles.href =
"chrome://global/content/elements/message-bar.css";
template.content.append(commonStyles, messageBarStyles);
// A container for the entire message bar content,
// most of the css rules needed to provide the
// expected message bar layout is applied on this
// element.
const container = document.createElement("div");
container.classList.add("container");
template.content.append(container);
const icon = document.createElement("span");
icon.classList.add("icon");
container.append(icon);
const barcontent = document.createElement("span");
barcontent.classList.add("content");
barcontent.append(document.createElement("slot"));
container.append(barcontent);
const spacer = document.createElement("span");
spacer.classList.add("spacer");
container.append(spacer);
const closeIcon = document.createElement("button");
closeIcon.classList.add("close", "ghost-button");
container.append(closeIcon);
Object.defineProperty(this, "template", {
value: template,
});
return template;
}
dismiss() {
this.dispatchEvent(new CustomEvent("message-bar:user-dismissed"));
this.close();
}
close() {
this.remove();
}
}
customElements.define("message-bar", MessageBarElement);
}

322
toolkit/content/widgets/notificationbox.js
View File

@ -28,19 +28,13 @@
get stack() {
if (!this._stack) {
let stack;
stack = document.createXULElement(
this.protonInfobarsEnabled ? "vbox" : "legacy-stack"
);
let stack = document.createXULElement("legacy-stack");
stack._notificationBox = this;
stack.className = "notificationbox-stack";
if (!this.protonInfobarsEnabled) {
stack.appendChild(document.createXULElement("spacer"));
}
stack.appendChild(document.createXULElement("spacer"));
stack.addEventListener("transitionend", event => {
if (
(event.target.localName == "notification" ||
event.target.localName == "notification-message") &&
event.target.localName == "notification" &&
event.propertyName == "margin-top"
) {
this._finishAnimation();
@ -64,9 +58,7 @@
}
var closedNotification = this._closedNotification;
var notifications = this.stack.getElementsByTagName(
this.protonInfobarsEnabled ? "notification-message" : "notification"
);
var notifications = this.stack.getElementsByTagName("notification");
return Array.prototype.filter.call(
notifications,
n => n != closedNotification
@ -148,11 +140,10 @@
aPriority,
aButtons,
aEventCallback,
aNotificationIs,
aFtlFilePaths
aNotificationIs
) {
if (
aPriority < this.PRIORITY_SYSTEM ||
aPriority < this.PRIORITY_INFO_LOW ||
aPriority > this.PRIORITY_CRITICAL_HIGH
) {
throw new Error("Invalid notification priority " + aPriority);
@ -172,24 +163,10 @@
MozXULElement.insertFTLIfNeeded("toolkit/global/notification.ftl");
// Create the Custom Element and connect it to the document immediately.
var newitem;
if (this.protonInfobarsEnabled) {
if (!customElements.get("notification-message")) {
// There's some weird timing stuff when this element is created at
// script load time, we don't need it until now anyway so be lazy.
createNotificationMessageElement();
}
newitem = document.createElement("notification-message");
newitem.setAttribute("message-bar-type", "infobar");
if (aFtlFilePaths) {
newitem.addFtl(aFtlFilePaths);
}
} else {
newitem = document.createXULElement(
"notification",
aNotificationIs ? { is: aNotificationIs } : {}
);
}
var newitem = document.createXULElement(
"notification",
aNotificationIs ? { is: aNotificationIs } : {}
);
this.stack.insertBefore(newitem, insertPos);
// Custom notification classes may not have the messageText property.
@ -207,20 +184,65 @@
}
}
newitem.setAttribute("value", aValue);
if (aImage && !this.protonInfobarsEnabled) {
if (aImage) {
newitem.messageImage.setAttribute("src", aImage);
}
newitem.eventCallback = aEventCallback;
if (aButtons) {
newitem.setButtons(aButtons);
for (var b = 0; b < aButtons.length; b++) {
let button = aButtons[b];
let buttonElem;
let link = button.link;
let localeId = button["l10n-id"];
if (!link && button.supportPage) {
link =
Services.urlFormatter.formatURLPref("app.support.baseURL") +
button.supportPage;
if (!button.label && !localeId) {
localeId = "notification-learnmore-default-label";
}
}
if (link) {
buttonElem = document.createXULElement("label", {
is: "text-link",
});
buttonElem.setAttribute("href", link);
buttonElem.classList.add("notification-link");
} else {
buttonElem = document.createXULElement(
"button",
button.is ? { is: button.is } : {}
);
buttonElem.classList.add("notification-button");
if (button.primary) {
buttonElem.classList.add("primary");
}
}
if (localeId) {
buttonElem.setAttribute("data-l10n-id", localeId);
} else {
buttonElem.setAttribute(link ? "value" : "label", button.label);
if (typeof button.accessKey == "string") {
buttonElem.setAttribute("accesskey", button.accessKey);
}
}
if (link) {
newitem.messageText.appendChild(buttonElem);
} else {
newitem.messageDetails.appendChild(buttonElem);
}
buttonElem.buttonInfo = button;
}
}
newitem.priority = aPriority;
if (aPriority == this.PRIORITY_SYSTEM) {
newitem.setAttribute("type", "system");
} else if (aPriority >= this.PRIORITY_CRITICAL_LOW) {
if (aPriority >= this.PRIORITY_CRITICAL_LOW) {
newitem.setAttribute("type", "critical");
} else if (aPriority <= this.PRIORITY_INFO_HIGH) {
newitem.setAttribute("type", "info");
@ -249,10 +271,7 @@
if (!aItem.parentNode) {
return;
}
if (this.protonInfobarsEnabled) {
this.currentNotification = aItem;
this.removeCurrentNotification(aSkipAnimation);
} else if (aItem == this.currentNotification) {
if (aItem == this.currentNotification) {
this.removeCurrentNotification(aSkipAnimation);
} else if (aItem != this._closedNotification) {
this._removeNotificationElement(aItem);
@ -317,11 +336,7 @@
_showNotification(aNotification, aSlideIn, aSkipAnimation) {
this._finishAnimation();
let { marginTop, marginBottom } = getComputedStyle(aNotification);
var height =
aNotification.getBoundingClientRect().height +
parseInt(marginTop, 10) +
parseInt(marginBottom, 10);
var height = aNotification.getBoundingClientRect().height;
var skipAnimation =
aSkipAnimation || height == 0 || !this._allowAnimation;
aNotification.classList.toggle("animated", !skipAnimation);
@ -365,18 +380,10 @@
}
}
}
get protonInfobarsEnabled() {
return Services.prefs.getBoolPref(
"browser.proton.infobars.enabled",
false
);
}
};
// These are defined on the instance prototype for backwards compatibility.
Object.assign(MozElements.NotificationBox.prototype, {
PRIORITY_SYSTEM: 0,
PRIORITY_INFO_LOW: 1,
PRIORITY_INFO_MEDIUM: 2,
PRIORITY_INFO_HIGH: 3,
@ -434,57 +441,6 @@
}
}
setButtons(aButtons) {
for (let button of aButtons) {
let buttonElem;
let link = button.link;
let localeId = button["l10n-id"];
if (!link && button.supportPage) {
link =
Services.urlFormatter.formatURLPref("app.support.baseURL") +
button.supportPage;
if (!button.label && !localeId) {
localeId = "notification-learnmore-default-label";
}
}
if (link) {
buttonElem = document.createXULElement("label", {
is: "text-link",
});
buttonElem.setAttribute("href", link);
buttonElem.classList.add("notification-link");
} else {
buttonElem = document.createXULElement(
"button",
button.is ? { is: button.is } : {}
);
buttonElem.classList.add("notification-button");
if (button.primary) {
buttonElem.classList.add("primary");
}
}
if (localeId) {
buttonElem.setAttribute("data-l10n-id", localeId);
} else {
buttonElem.setAttribute(link ? "value" : "label", button.label);
if (typeof button.accessKey == "string") {
buttonElem.setAttribute("accesskey", button.accessKey);
}
}
if (link) {
this.messageText.appendChild(buttonElem);
} else {
this.messageDetails.appendChild(buttonElem);
}
buttonElem.buttonInfo = button;
}
}
get control() {
return this.closest(".notificationbox-stack")._notificationBox;
}
@ -546,159 +502,7 @@
}
}
}
get protonInfobarsEnabled() {
return Services.prefs.getBoolPref(
"browser.proton.infobars.enabled",
false
);
}
};
customElements.define("notification", MozElements.Notification);
function createNotificationMessageElement() {
// Get a reference to MessageBarElement from a created element so the import
// gets handled automatically if needed.
class NotificationMessage extends document.createElement("message-bar")
.constructor {
connectedCallback() {
this.toggleAttribute("dismissable", true);
this.closeButton.classList.add("notification-close");
this.shadowRoot.querySelector(".container").classList.add("infobar");
let messageContent = this.shadowRoot.querySelector(".content");
messageContent.classList.add("notification-content");
// Remove the <slot>, API surface is `set label()` and `setButtons()`.
messageContent.textContent = "";
this.messageText = document.createElement("span");
this.messageText.classList.add("notification-message");
this.buttonContainer = document.createElement("span");
this.buttonContainer.classList.add("notification-button-container");
messageContent.append(this.messageText, this.buttonContainer);
this.shadowRoot.addEventListener("click", this);
}
disconnectedCallback() {
if (this.eventCallback) {
this.eventCallback("disconnected");
}
}
close() {
this.closest(
".notificationbox-stack"
)._notificationBox.removeNotification(this);
}
addFtl(filepaths) {
for (let filepath of filepaths) {
let link = document.createElement("link");
link.setAttribute("rel", "localization");
link.href = filepath;
this.shadowRoot.append(link);
}
document.l10n.connectRoot(this.shadowRoot);
}
_insertNotificationFtl() {
if (!this._insertedNotificationFtl) {
this._insertedNotificationFtl = true;
this.addFtl(["toolkit/global/notification.ftl"]);
}
}
handleEvent(e) {
if (e.type == "click" && "buttonInfo" in e.target) {
let { buttonInfo } = e.target;
let { callback, popup } = buttonInfo;
if (callback) {
if (!callback(this, buttonInfo, e.target, e)) {
this.close();
}
e.stopPropagation();
} else if (popup) {
document
.getElementById(popup)
.openPopup(
e.originalTarget,
"after_start",
0,
0,
false,
false,
e
);
e.stopPropagation();
}
}
}
set label(value) {
this.messageText.textContent = value;
}
setButtons(buttons) {
this._buttons = buttons;
for (let button of buttons) {
let link = button.link;
let localeId = button["l10n-id"];
if (!link && button.supportPage) {
link =
Services.urlFormatter.formatURLPref("app.support.baseURL") +
button.supportPage;
if (!button.label && !localeId) {
localeId = "notification-learnmore-default-label";
}
this._insertNotificationFtl();
}
let buttonElem;
if (link) {
buttonElem = document.createXULElement("label", {
is: "text-link",
});
buttonElem.setAttribute("href", link);
buttonElem.classList.add("notification-link");
} else {
buttonElem = document.createXULElement(
"button",
button.is ? { is: button.is } : {}
);
buttonElem.classList.add("notification-button", "small");
if (button.primary) {
buttonElem.classList.add("primary");
}
}
if (localeId) {
document.l10n.setAttributes(buttonElem, localeId);
} else {
buttonElem.textContent = button.label;
if (typeof button.accessKey == "string") {
buttonElem.setAttribute("accesskey", button.accessKey);
}
}
if (link) {
this.messageText.append(new Text(" "), buttonElem);
} else {
this.buttonContainer.appendChild(buttonElem);
}
buttonElem.buttonInfo = button;
}
}
dismiss() {
if (this.eventCallback) {
this.eventCallback("dismissed");
}
super.dismiss();
}
}
customElements.define("notification-message", NotificationMessage);
}
}

10
toolkit/mozapps/extensions/content/aboutaddons.css
View File

@ -309,12 +309,6 @@ addon-card[expanded] .update-postponed-bar + .addon-card-message {
text-decoration: none;
}
.addon-name-link:-moz-focusring {
/* Since the parent is overflow:hidden to ellipsize the regular outline is hidden. */
outline-offset: -1px;
outline-width: 1px;
}
.addon-badge {
display: inline-block;
margin-inline-end: 8px;
@ -451,7 +445,9 @@ recommended-addon-card .addon-description:not(:empty) {
}
.discopane-notice-content {
padding-block: 6px;
align-items: center;
display: flex;
width: 100%;
}
.discopane-notice-content > span {

8
toolkit/mozapps/extensions/content/aboutaddons.html
View File

@ -25,6 +25,7 @@
<!-- Defer scripts so all the templates are loaded by the time they run. -->
<script defer src="chrome://mozapps/content/extensions/aboutaddonsCommon.js"></script>
<script defer src="chrome://mozapps/content/extensions/message-bar.js"></script>
<script defer src="chrome://mozapps/content/extensions/abuse-reports.js"></script>
<script defer src="chrome://mozapps/content/extensions/shortcuts.js"></script>
<script defer src="chrome://mozapps/content/extensions/drag-drop-addon-installer.js"></script>
@ -200,7 +201,7 @@
<h3 class="disco-addon-name"></h3>
<span class="disco-addon-author"><a data-l10n-name="author" target="_blank"></a></span>
</div>
<button class="disco-cta-button" action="install-addon"></button>
<button class="disco-cta-button primary" action="install-addon"></button>
<button class="disco-cta-button" data-l10n-id="manage-addon-button" action="manage-addon"></button>
</template>
@ -330,10 +331,7 @@
<message-bar class="discopane-notice" dismissable>
<div class="discopane-notice-content">
<span data-l10n-id="discopane-notice-recommendations"></span>
<a is="support-link"
support-page="personalized-addons"
data-l10n-id="discopane-notice-learn-more"
action="notice-learn-more"></a>
<button data-l10n-id="discopane-notice-learn-more" action="notice-learn-more"></button>
</div>
</message-bar>
</template>

78
toolkit/mozapps/extensions/content/aboutaddons.js
View File

@ -5,7 +5,7 @@
/* import-globals-from aboutaddonsCommon.js */
/* import-globals-from abuse-reports.js */
/* import-globals-from view-controller.js */
/* global MozXULElement, windowRoot */
/* global MozXULElement, MessageBarStackElement, windowRoot */
"use strict";
@ -1239,77 +1239,6 @@ class SearchAddons extends HTMLElement {
}
customElements.define("search-addons", SearchAddons);
class MessageBarStackElement extends HTMLElement {
constructor() {
super();
this._observer = null;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.append(this.constructor.template.content.cloneNode(true));
}
connectedCallback() {
// Close any message bar that should be allowed based on the
// maximum number of message bars.
this.closeMessageBars();
// Observe mutations to close older bars when new ones have been
// added.
this._observer = new MutationObserver(() => {
this._observer.disconnect();
this.closeMessageBars();
this._observer.observe(this, { childList: true });
});
this._observer.observe(this, { childList: true });
}
disconnectedCallback() {
this._observer.disconnect();
this._observer = null;
}
closeMessageBars() {
const { maxMessageBarCount } = this;
if (maxMessageBarCount > 1) {
// Remove the older message bars if the stack reached the
// maximum number of message bars allowed.
while (this.childElementCount > maxMessageBarCount) {
this.firstElementChild.remove();
}
}
}
get maxMessageBarCount() {
return parseInt(this.getAttribute("max-message-bar-count"), 10);
}
static get template() {
const template = document.createElement("template");
const style = document.createElement("style");
// Render the stack in the reverse order if the stack has the
// reverse attribute set.
style.textContent = `
:host {
display: block;
}
:host([reverse]) > slot {
display: flex;
flex-direction: column-reverse;
}
`;
template.content.append(style);
template.content.append(document.createElement("slot"));
Object.defineProperty(this, "template", {
value: template,
});
return template;
}
}
customElements.define("message-bar-stack", MessageBarStackElement);
class GlobalWarnings extends MessageBarStackElement {
constructor() {
super();
@ -4452,6 +4381,7 @@ class TaarMessageBar extends HTMLElement {
e.type == "click" &&
e.target.getAttribute("action") == "notice-learn-more"
) {
// The element is a button but opens a URL, so record as link.
AMTelemetry.recordLinkEvent({
object: "aboutAddons",
value: "disconotice",
@ -4459,6 +4389,10 @@ class TaarMessageBar extends HTMLElement {
view: getTelemetryViewName(this),
},
});
windowRoot.ownerGlobal.openTrustedLinkIn(
SUPPORT_URL + "personalized-addons",
"tab"
);
} else if (e.type == "message-bar:user-dismissed") {
Services.prefs.setBoolPref(PREF_RECOMMENDATION_HIDE_NOTICE, true);
}

197
toolkit/content/widgets/message-bar.css → toolkit/mozapps/extensions/content/message-bar.css
View File

@ -12,35 +12,38 @@
--close-icon-size: 32px;
}
:host([message-bar-type=infobar]) {
--close-icon-size: 24px;
}
/* MessageBar colors by message type */
/* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */
:host {
--message-bar-background-color: var(--in-content-box-info-background);
--message-bar-text-color: var(--in-content-text-color);
/* Colors used by default, and for [type=generic] message bars.*/
background-color: var(--in-content-box-info-background);
color: var(--in-content-text-color);
--message-bar-icon-url: var(--info-icon-url);
/* The default values of --in-content-button* are sufficient, even for dark themes */
}
:host([type=warning]:not([message-bar-type=infobar])) {
--message-bar-background-color: var(--yellow-50);
--message-bar-text-color: var(--yellow-90);
:host([type=warning]) {
background-color: var(--yellow-50);
color: var(--yellow-90);
--message-bar-icon-url: var(--warn-icon-url);
--in-content-button-background: var(--yellow-60);
--in-content-button-background-hover: var(--yellow-70);
--in-content-button-background-active: var(--yellow-80);
}
:host([type=warning]) {
--message-bar-icon-url: var(--warn-icon-url);
:host([type=warning]) ::slotted(button:enabled:hover),
:host([type=warning]) ::slotted(button:enabled:hover),
:host([type=warning]) .close:enabled:hover,
:host([type=warning]) .close:enabled:hover:active {
/* common.css sets color: inherit !important... */
color: white !important;
}
:host([type=success]:not([message-bar-type=infobar])) {
--message-bar-background-color: var(--green-50);
--message-bar-text-color: var(--green-90);
:host([type=success]) {
background-color: var(--green-50);
color: var(--green-90);
--message-bar-icon-url: var(--success-icon-url);
--in-content-button-background: var(--green-60);
@ -48,18 +51,15 @@
--in-content-button-background-active: var(--green-80);
}
:host([type=error]:not([message-bar-type=infobar])) {
--message-bar-background-color: var(--red-60);
--message-bar-text-color: #ffffff;
:host([type=error]) {
background-color: var(--red-60);
color: #ffffff;
--message-bar-icon-url: var(--error-icon-url);
--in-content-button-background: var(--red-70);
--in-content-button-background-hover: var(--red-80);
--in-content-button-background-active: var(--red-90);
}
:host([type=error]),
:host([type=critical]) {
--message-bar-icon-url: var(--error-icon-url);
}
:host {
border-radius: 4px;
@ -78,12 +78,12 @@
/* MessageBar Grid Layout */
.container {
background: var(--message-bar-background-color);
color: var(--message-bar-text-color);
background: inherit;
color: inherit;
padding: 4px 8px;
position: relative;
padding: 8px;
min-height: 32px;
border-radius: 4px;
display: flex;
@ -97,7 +97,7 @@
.content {
margin: 0 4px;
display: inline-block;
display: flex;
/* Ensure that the message bar content is vertically aligned. */
align-items: center;
/* Ensure that the message bar content is wrapped. */
@ -144,150 +144,7 @@
width: var(--close-icon-size);
height: var(--close-icon-size);
margin: 0;
margin-inline-end: 4px;
padding: 0;
flex-shrink: 0;
}
@supports -moz-bool-pref("browser.proton.infobars.enabled") {
@media not (prefers-contrast) {
.container.infobar {
box-shadow: 0 1px 2px rgba(58, 57, 68, 0.1);
background: var(--in-content-page-background);
}
}
.close {
fill: var(--in-content-icon-color);
}
@media (prefers-color-scheme: dark) {
.container.infobar {
background: rgb(66,65,77);
}
}
:host([message-bar-type=infobar]:first-of-type) {
margin-top: 4px;
}
:host([message-bar-type=infobar]) {
margin: 0 4px 4px;
}
.container.infobar {
/* Don't let lwthemes set a text-shadow. */
text-shadow: none;
padding: 0;
}
.container.infobar::before {
content: "";
display: block;
width: 2px;
position: absolute;
background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
top: 0;
inset-inline-start: 0;
height: 100%;
border-start-start-radius: 4px;
border-end-start-radius: 4px;
}
.container.infobar {
align-items: flex-start;
}
/* Infobars styling. */
.notification-content {
margin: 0;
margin-inline-start: 8px;
}
.notification-message {
min-height: 16px; /* min-height: 32px with block padding */
padding-block: 8px;
margin-inline-end: 20px;
}
.notification-button-container,
.notification-message {
display: inline-block;
vertical-align: middle;
}
.close {
margin: 4px 8px;
background-size: 16px;
}
.notification-button {
margin: 4px;
/* This is supposed to be 6px but then the buttons are 26px tall by default
* on Windows. Drop it down to 4px (with the 1px border) */
padding-block: 3px;
}
.notification-button:first-of-type {
/* When the buttons wrap to their own line we want to match the 8px on the message. */
margin-inline-start: 0;
}
strong {
font-weight: 600;
}
.text-link:hover {
cursor: pointer;
}
.infobar > .icon {
padding: 0;
margin: 8px 0;
}
.infobar > .icon,
:host([type=system]) .notification-content {
margin-inline-start: 16px;
}
:host([type=system]) .icon {
display: none;
}
:host([type=info]) .icon {
color: rgb(128,235,255);
}
:host([type=warning]) .icon {
color: rgb(255,164,54);
}
:host([type=critical]) .icon {
color: rgb(226,40,80);
}
@media (prefers-color-scheme: dark) {
:host([type=info]) .icon {
color: rgb(0,221,255);
}
:host([type=warning]) .icon {
color: rgb(255,189,79);
}
:host([type=critical]) .icon {
color: rgb(255,154,162);
}
}
}
@supports not -moz-bool-pref("browser.proton.infobars.enabled") {
:host {
/* Colors used by default, and for [type=generic] message bars.*/
background-color: var(--in-content-box-info-background);
color: var(--in-content-text-color);
}
.container {
padding: 8px;
min-height: 32px;
}
.close {
margin-inline-end: 4px;
}
}

148
toolkit/mozapps/extensions/content/message-bar.js Normal file
View File

@ -0,0 +1,148 @@
/* 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/. */
/* eslint max-len: ["error", 80] */
"use strict";
class MessageBarStackElement extends HTMLElement {
constructor() {
super();
this._observer = null;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.append(this.constructor.template.content.cloneNode(true));
}
connectedCallback() {
// Close any message bar that should be allowed based on the
// maximum number of message bars.
this.closeMessageBars();
// Observe mutations to close older bars when new ones have been
// added.
this._observer = new MutationObserver(() => {
this._observer.disconnect();
this.closeMessageBars();
this._observer.observe(this, { childList: true });
});
this._observer.observe(this, { childList: true });
}
disconnectedCallback() {
this._observer.disconnect();
this._observer = null;
}
closeMessageBars() {
const { maxMessageBarCount } = this;
if (maxMessageBarCount > 1) {
// Remove the older message bars if the stack reached the
// maximum number of message bars allowed.
while (this.childElementCount > maxMessageBarCount) {
this.firstElementChild.remove();
}
}
}
get maxMessageBarCount() {
return parseInt(this.getAttribute("max-message-bar-count"), 10);
}
static get template() {
const template = document.createElement("template");
const style = document.createElement("style");
// Render the stack in the reverse order if the stack has the
// reverse attribute set.
style.textContent = `
:host {
display: block;
}
:host([reverse]) > slot {
display: flex;
flex-direction: column-reverse;
}
`;
template.content.append(style);
template.content.append(document.createElement("slot"));
Object.defineProperty(this, "template", {
value: template,
});
return template;
}
}
class MessageBarElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
const content = this.constructor.template.content.cloneNode(true);
shadowRoot.append(content);
this.closeButton.addEventListener(
"click",
() => {
this.dispatchEvent(new CustomEvent("message-bar:user-dismissed"));
this.remove();
},
{
once: true,
}
);
}
disconnectedCallback() {
this.dispatchEvent(new CustomEvent("message-bar:close"));
}
get closeButton() {
return this.shadowRoot.querySelector("button.close");
}
static get template() {
const template = document.createElement("template");
const style = document.createElement("style");
style.textContent = `
@import "chrome://global/skin/in-content/common.css";
@import "chrome://mozapps/content/extensions/message-bar.css";
`;
template.content.append(style);
// A container for the entire message bar content,
// most of the css rules needed to provide the
// expected message bar layout is applied on this
// element.
const container = document.createElement("div");
container.setAttribute("class", "container");
template.content.append(container);
const icon = document.createElement("span");
icon.setAttribute("class", "icon");
container.append(icon);
const barcontent = document.createElement("span");
barcontent.setAttribute("class", "content");
barcontent.append(document.createElement("slot"));
container.append(barcontent);
const spacer = document.createElement("span");
spacer.classList.add("spacer");
container.append(spacer);
const closeIcon = document.createElement("button");
closeIcon.setAttribute("class", "close");
container.append(closeIcon);
Object.defineProperty(this, "template", {
value: template,
});
return template;
}
}
customElements.define("message-bar", MessageBarElement);
customElements.define("message-bar-stack", MessageBarStackElement);

2
toolkit/mozapps/extensions/jar.mn
View File

@ -21,6 +21,8 @@ toolkit.jar:
content/mozapps/extensions/firefox-compact-dark.svg (content/firefox-compact-dark.svg)
content/mozapps/extensions/firefox-compact-light.svg (content/firefox-compact-light.svg)
content/mozapps/extensions/firefox-alpenglow.svg (content/firefox-alpenglow.svg)
content/mozapps/extensions/message-bar.css (content/message-bar.css)
content/mozapps/extensions/message-bar.js (content/message-bar.js)
content/mozapps/extensions/panel-list.css (content/panel-list.css)
content/mozapps/extensions/panel-item.css (content/panel-item.css)
content/mozapps/extensions/rating-star.css (content/rating-star.css)

2
toolkit/themes/osx/global/in-content/common.css
View File

@ -35,6 +35,8 @@ xul|*.radio-icon {
}
xul|*.text-link:-moz-focusring {
color: var(--in-content-link-highlight);
text-decoration: underline;
box-shadow: none;
}

106
toolkit/themes/shared/in-content/common.inc.css
View File

@ -6,20 +6,18 @@
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
:host,
:root {
--in-content-page-color: #0c0c0d;
--in-content-page-background: #fff;
--in-content-text-color: var(--grey-90);
--in-content-deemphasized-text: var(--grey-60);
--in-content-selected-text: #fff;
--in-content-box-background: #fff;
--in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
--in-content-box-border-color: var(--grey-90-a30);
--in-content-box-info-background: #f0f0f4;
--in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
--in-content-item-selected: #0a84ff;
--in-content-item-selected-text: #fff;
--in-content-icon-color: rgb(91,91,102);
--in-content-accent-color: #0a84ff;
--in-content-accent-color-active: #0060df;
--in-content-border-hover: var(--grey-90-a50);
@ -33,7 +31,6 @@
--in-content-button-background: rgba(207, 207, 216, 0.33);
--in-content-button-background-hover: rgba(207, 207, 216, 0.66);
--in-content-button-background-active: rgba(207, 207, 216, 1);
--in-content-primary-button-text-color: rgb(255,255,255);
--in-content-primary-button-background: #0061e0;
--in-content-primary-button-background-hover: #0250bb;
--in-content-primary-button-background-active: #053e94;
@ -105,7 +102,6 @@
}
@supports not -moz-bool-pref("browser.proton.enabled") {
:host,
:root {
--in-content-page-background: #f9f9fa;
--in-content-box-info-background: var(--grey-20);
@ -126,32 +122,24 @@
}
@media (prefers-color-scheme: dark) {
:host,
:root {
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
--in-content-page-background: rgb(28,27,34);
--in-content-page-color: rgb(251,251,254);
--in-content-text-color: var(--in-content-page-color);
--in-content-deemphasized-text: rgb(191,191,201);
--in-content-page-background: #2A2A2E;
--in-content-page-color: rgb(249, 249, 250);
--in-content-text-color: var(--in-content-page-color);
--in-content-deemphasized-text: var(--grey-40);
--in-content-box-background: #202023;
--in-content-box-background-odd: rgba(249,249,250,0.05);
--in-content-box-info-background: rgba(249,249,250,0.15);
--in-content-border-color: rgba(249,249,250,0.2);
--in-content-border-hover: rgba(249,249,250,0.3);
--in-content-border-invalid: rgb(255,132,139);
--in-content-box-border-color: rgba(249,249,250,0.2);
--in-content-button-background: rgb(43,42,51);
--in-content-button-background-hover: rgb(82,82,94);
--in-content-button-background-active: rgb(91,91,102);
--in-content-icon-color: rgb(251,251,254);
--in-content-primary-button-text-color: rgb(21,20,26);
--in-content-primary-button-background: rgb(0,221,255);
--in-content-primary-button-background-hover: rgb(128,235,255);
--in-content-primary-button-background-active: rgb(170,242,255);
--in-content-button-background: rgba(249,249,250,0.1);
--in-content-button-background-hover: rgba(249,249,250,0.15);
--in-content-button-background-active: rgba(249,249,250,0.2);
--in-content-danger-button-background: #ff848b;
--in-content-danger-button-background-hover: #ffbdc5;
@ -162,12 +150,12 @@
--in-content-table-header-background: #002b57;
--in-content-dialog-header-background: rgba(249,249,250,0.05);
--in-content-accent-color: var(--in-content-primary-button-background);
--in-content-accent-color-active: var(--in-content-primary-button-background-hover);
--in-content-link-color: var(--in-content-primary-button-background);
--in-content-link-color-hover: var(--in-content-primary-button-background-hover);
--in-content-link-color-active: var(--in-content-primary-button-background-active);
--in-content-link-color-visited: var(--in-content-link-color);
--in-content-accent-color: var(--blue-40);
--in-content-accent-color-active: var(--blue-50);
--in-content-link-color: var(--blue-40);
--in-content-link-color-hover: var(--blue-50);
--in-content-link-color-active: var(--blue-60);
--in-content-link-color-visited: var(--blue-40);
--card-outline-color: var(--grey-60);
@ -177,33 +165,6 @@
}
}
@supports not -moz-bool-pref("browser.proton.enabled") {
@media (prefers-color-scheme: dark) {
:host,
:root {
--in-content-page-background: #2A2A2E;
--in-content-page-color: rgb(249, 249, 250);
--in-content-deemphasized-text: var(--grey-40);
--in-content-button-background: rgba(249,249,250,0.1);
--in-content-button-background-hover: rgba(249,249,250,0.15);
--in-content-button-background-active: rgba(249,249,250,0.2);
--in-content-primary-button-text-color: rgb(255,255,255);
--in-content-primary-button-background: var(--blue-60);
--in-content-primary-button-background-hover: var(--blue-70);
--in-content-primary-button-background-active: var(--blue-80);
--in-content-accent-color: var(--blue-40);
--in-content-accent-color-active: var(--blue-50);
--in-content-link-color: var(--blue-40);
--in-content-link-color-hover: var(--blue-50);
--in-content-link-color-active: var(--blue-60);
--in-content-link-color-visited: var(--blue-40);
}
}
}
:root {
font: message-box;
appearance: none;
@ -415,7 +376,7 @@ html|button[type="submit"],
xul|button[default],
button.primary {
background-color: var(--in-content-primary-button-background);
color: var(--in-content-primary-button-text-color) !important;
color: var(--in-content-selected-text) !important;
}
html|button[autofocus]:enabled:hover,
@ -453,16 +414,6 @@ html|button.ghost-button:enabled:hover:active {
background-color: var(--in-content-button-background-hover);
}
@supports -moz-bool-pref("browser.proton.enabled") {
html|button.ghost-button:enabled:hover {
background-color: var(--in-content-button-background-hover);
}
html|button.ghost-button:enabled:hover:active {
background-color: var(--in-content-button-background-active);
}
}
html|input[type="color"] {
padding: 6px;
width: 50px;
@ -517,7 +468,7 @@ xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuacti
xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
color: var(--in-content-item-selected-text);
color: var(--in-content-selected-text);
background-color: var(--in-content-item-selected);
}
@ -623,13 +574,6 @@ html|a:hover:active,
text-decoration: none;
}
html|a:-moz-focusring,
.text-link:-moz-focusring {
outline: 2px solid var(--in-content-focus-outline-color);
outline-offset: 1px;
-moz-outline-radius: 2px;
}
/* Checkboxes and radio buttons */
xul|checkbox {
@ -668,8 +612,8 @@ xul|checkbox[checked] > xul|*.checkbox-check,
html|input[type="checkbox"]:checked {
-moz-context-properties: fill;
fill: currentColor;
color: var(--in-content-primary-button-text-color);
background-color: var(--in-content-primary-button-background);
color: white;
background-color: var(--blue-60);
border-color: transparent;
/* Style the button also when printing with "Print Backgrounds" unchecked */
@ -686,12 +630,12 @@ html|input[type="checkbox"]:checked {
xul|checkbox:not([disabled="true"])[checked]:hover > xul|*.checkbox-check,
html|input[type="checkbox"]:enabled:checked:hover {
background-color: var(--in-content-primary-button-background-hover);
background-color: var(--blue-70);
}
xul|checkbox:not([disabled="true"])[checked]:hover:active > xul|*.checkbox-check,
html|input[type="checkbox"]:enabled:checked:hover:active {
background-color: var(--in-content-primary-button-background-active);
background-color: var(--blue-80);
}
xul|richlistitem > xul|*.checkbox-check {
@ -738,8 +682,8 @@ html|input[type="radio"]:checked,
xul|*.radio-check[selected] {
-moz-context-properties: fill;
fill: currentColor;
color: var(--in-content-primary-button-text-color);
background-color: var(--in-content-primary-button-background);
color: white;
background-color: var(--blue-60);
border-color: transparent;
/* Style the button also when printing with "Print Backgrounds" unchecked */
@ -756,12 +700,12 @@ xul|*.radio-check[selected] {
html|input[type="radio"]:enabled:checked:hover,
xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
background-color: var(--in-content-primary-button-background-hover);
background-color: var(--blue-70);
}
html|input[type="radio"]:enabled:checked:hover:active,
xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
background-color: var(--in-content-primary-button-background-active);
background-color: var(--blue-80);
}
xul|*.radio-label-box {
@ -1090,7 +1034,7 @@ xul|treechildren::-moz-tree-row {
xul|treechildren::-moz-tree-cell-text(selected),
xul|treechildren::-moz-tree-twisty(selected),
xul|treechildren::-moz-tree-image(selected) {
color: var(--in-content-item-selected-text);
color: var(--in-content-selected-text);
}
/* Message bars */

2
toolkit/themes/shared/in-content/info-pages.css
View File

@ -161,7 +161,7 @@ thead th {
th {
background-color: var(--in-content-table-header-background);
color: rgb(255,255,255);
color: var(--in-content-selected-text);
}
th.column {

5
toolkit/themes/shared/in-content/toggle-button.css
View File

@ -19,6 +19,7 @@ input[type="checkbox"].toggle-button {
appearance: none;
padding: 0;
margin: 0;
outline: 0;
border: var(--button-border-width) solid var(--border-color);
height: var(--button-height);
width: var(--button-width);
@ -34,6 +35,10 @@ input[type="checkbox"].toggle-button:enabled:active {
background: var(--in-content-button-background-active);
border-color: var(--border-color);
}
input[type="checkbox"].toggle-button:focus {
outline: 2px solid var(--in-content-focus-outline-color);
outline-offset: var(--in-content-focus-outline-offset);
}
input[type="checkbox"].toggle-button:checked {
background: var(--in-content-primary-button-background);

11
toolkit/themes/shared/notification.css
View File

@ -3,7 +3,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html "http://www.w3.org/1999/xhtml";
.notificationbox-stack {
/* Prevent the animation from overlapping the navigation toolbar */
@ -14,13 +13,8 @@
/* Create a stacking context for the box-shadow */
position: relative;
z-index: 1;
}
@supports not -moz-bool-pref("browser.proton.enabled") {
.notificationbox-stack[notificationside="top"] {
box-shadow: 0 3px 10px -7px #00000080;
}
}
notification {
min-height: 40px;
@ -54,7 +48,6 @@ notification[type="info"]:-moz-lwtheme-brighttext {
--notification-button-background-active: rgba(249,249,250,.3);
}
html|notification-message.animated,
notification.animated {
transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function);
}
@ -192,8 +185,8 @@ notification[type="critical"] > hbox > .messageImage {
}
@supports -moz-bool-pref("browser.proton.infobars.enabled") {
.notificationbox-stack {
background-color: var(--toolbar-bgcolor);
.notificationbox-stack,
notification {
width: 100%;
}
}