From 0ab0165ef8160a601d78c0afd3296bde376609a0 Mon Sep 17 00:00:00 2001 From: Lesley Norton Date: Mon, 14 Oct 2024 07:36:06 -0700 Subject: [PATCH] Fix toolbar icon in private browsing mode (#77) This PR: - A follow up PR that makes small tweaks to the tool bar icon handler to support private browsing windows where the browser chrome is dark and the extension's icon should be light. - Opportunistically fixes a small error in tabHandler.js noticed while debugging This patch was merged into an XPI and verified by QA in [FXVPN-204](https://mozilla-hub.atlassian.net/browse/FXVPN-204) --- src/background/tabHandler.js | 3 +++ src/background/toolbarIconHandler.js | 24 +++++++++++++++++++----- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/background/tabHandler.js b/src/background/tabHandler.js index 709647f..ee0eb33 100644 --- a/src/background/tabHandler.js +++ b/src/background/tabHandler.js @@ -66,6 +66,9 @@ export class TabHandler extends Component { async maybeShowIcon() { const currentTab = await Utils.getCurrentTab(); + if (!currentTab) { + return; + } if (this.extState.state !== "Enabled") { return browser.pageAction.hide(currentTab.id); } diff --git a/src/background/toolbarIconHandler.js b/src/background/toolbarIconHandler.js index 5f62358..e57b697 100644 --- a/src/background/toolbarIconHandler.js +++ b/src/background/toolbarIconHandler.js @@ -39,14 +39,27 @@ export class ToolbarIconHandler extends Component { .addEventListener("change", (e) => { this.maybeUpdateBrowserActionIcon(); }); + + browser.windows.onFocusChanged.addListener( + this.maybeUpdateBrowserActionIcon.bind(this) + ); + + browser.windows.onCreated.addListener( + this.maybeUpdateBrowserActionIcon.bind(this) + ); } - maybeUpdateBrowserActionIcon() { - const scheme = + async maybeUpdateBrowserActionIcon() { + const windowInfo = await browser.windows.getCurrent(); + if (!windowInfo) { + return; + } + + const darkMode = window.matchMedia && - !!window.matchMedia("(prefers-color-scheme: dark)").matches - ? "light" - : "dark"; + window.matchMedia("(prefers-color-scheme: dark)").matches; + + const scheme = darkMode || windowInfo.incognito ? "light" : "dark"; const status = ["Connecting", "Enabled"].includes(this.extState.state) ? "enabled" @@ -57,6 +70,7 @@ export class ToolbarIconHandler extends Component { 16: `./../assets/logos/browserAction/logo-${scheme}-${status}.svg`, 32: `./../assets/logos/browserAction/logo-${scheme}-${status}.svg`, }, + windowId: windowInfo.id, }); } }