forked from mirrors/gecko-dev
5d946f3d90
Add logic to apply theme colors to Feature Callout based on where it's going to show. We can use in-content CSS properties for Firefox View and other themed system pages, but not for PDF.js, nor for any callouts we might show in the browser chrome in the future. For the browser chrome in general, we can use the lightweight theme properties directly, in the same way the chrome frontend does. But PDF.js is a special case, since although it exists in the chrome, it's meant to appear like it's in the PDF.js viewer. And the PDF.js viewer has its own theme totally independent of everything else. So this dynamically applies themes from different sources. This also fixes the bug where the PDF.js color scheme could mismatch the PDF.js viewer if the browser theme and system color scheme don't match, e.g. where system color scheme is light but a dark theme is installed, or vice versa. For PDF.js specifically, we can use the -moz-content-prefers-color-scheme media query to follow the color scheme as it exists in the PDF.js viewer page instead of the color scheme in the chrome window where the Feature Callout actually exists. It also adds or modifies some colors that were previously missing or different from the prototype, fixes the illegibility of buttons in HCM and forced colors mode, and makes some other minor color changes. Differential Revision: https://phabricator.services.mozilla.com/D173088
43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
/* 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/. */
|
|
|
|
const { FeatureCallout } = ChromeUtils.importESModule(
|
|
"resource:///modules/FeatureCallout.sys.mjs"
|
|
);
|
|
|
|
const launchFeatureTour = () => {
|
|
let callout = new FeatureCallout({
|
|
win: window,
|
|
prefName: "browser.firefox-view.feature-tour",
|
|
page: "about:firefoxview",
|
|
theme: { preset: "themed-content" },
|
|
});
|
|
callout.showFeatureCallout();
|
|
};
|
|
|
|
window.addEventListener("DOMContentLoaded", async () => {
|
|
Services.telemetry.setEventRecordingEnabled("firefoxview", true);
|
|
Services.telemetry.recordEvent("firefoxview", "entered", "firefoxview", null);
|
|
document.getElementById("recently-closed-tabs-container").onLoad();
|
|
// If Firefox View was reloaded by the user, force syncing of tabs
|
|
// to get the most up to date synced tabs.
|
|
if (
|
|
performance
|
|
.getEntriesByType("navigation")
|
|
.map(nav => nav.type)
|
|
.includes("reload")
|
|
) {
|
|
await document.getElementById("tab-pickup-container").onReload();
|
|
}
|
|
launchFeatureTour();
|
|
});
|
|
|
|
window.addEventListener("unload", () => {
|
|
const tabPickupList = document.querySelector("tab-pickup-list");
|
|
if (tabPickupList) {
|
|
tabPickupList.cleanup();
|
|
}
|
|
document.getElementById("tab-pickup-container").cleanup();
|
|
document.getElementById("recently-closed-tabs-container").cleanup();
|
|
});
|