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

@@ -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);
  }

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,
  });
  }
 }