Firefox: Mixed Mode Themed Favicon Issue

CHANGELOG.md

@@ -2,6 +2,13 @@ Changelog
 ---
 
 # Unreleased
+# 15.0.1 [Firefox: theming bug fixes]
+- Fix tabs not being randomized when creating tabs rapidly in mixed mode.
+- Fixes text selection & scrollbar not loading appropriately with their individual tab in mixed mode.
+- Fixes text selection & scrollbar not loading appropriately with their individual tab in mixed mode.
+- Appropriate theme for *options page* for each tab loads correctly in mixed mode.
+- Fixes initialization of mixed mode in new window, if the last option chosen was mixed mode.
+- Mitigates favicon & other theming components to stay themed in mixed mode.
 
 # 15.0.0 [Only for Onii-chan] 
 

firefoxThemes/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Doki Theme for Firefox",
   "short_name": "Doki Theme",
-  "version": "15.0.0",
+  "version": "15.0.1",
   "description": "A theme collection of girls from various anime, manga, and visual novels series.",
   "manifest_version": 2,
   "icons": {

firefoxThemes/modules/modes/mix.js

@@ -36,7 +36,15 @@ function keepLastTab(tabs) {
   }
   return lastTabs;
 }
-
+/*Remove themes that did not make it to the mixedTab list.
+* This is primarily used to mitigate speedy tab creations*/
+async function purgeGlitchedTabs(newTab){
+  const {mixedTabs} = await browser.storage.local.get(["mixedTabs"]);
+  const tabs = await browser.tabs.query({});
+  const glitchyTabs = tabs.filter(tab => !(!!mixedTabs.get(tab.id)) && tab.id !== newTab.id);
+  const glitchyTabIDs = glitchyTabs.map(tab => tab.id);
+  browser.tabs.remove(glitchyTabIDs);
+}
 /*EVENT: When a new tab is created add a random theme to it*/
 function MixTabCreated(tab) {
   if (tab.title === "New Tab") {
@@ -50,38 +58,33 @@ function MixTabCreated(tab) {
 
 /*EVENT: Set the theme for the current active tab*/
 function MixTabActivated(activeInfo) {
-  browser.storage.local.get(["waifuThemes", "mixedTabs"])
+  browser.storage.local.get(["waifuThemes"])
     .then((storage) => {
-      const currentThemeId = storage.mixedTabs.get(activeInfo.tabId);
+      const currentThemeId = mixList.get(activeInfo.tabId);
       if (currentThemeId) {
         loadTheme(storage.waifuThemes.themes, currentThemeId);
+        browser.storage.local.set({currentThemeId});
       }
     });
 }
-
+//Maintain a local list of all mixed tabs
+let mixList = new Map();
 /*EVENT: When a tab is closed delete the saved data for it*/
 function MixTabClosed(tabId) {
-  browser.storage.local.get()
-    .then((storage) => {
-      storage.mixedTabs.delete(tabId);
-      browser.storage.local.set({mixedTabs: storage.mixedTabs});
-    });
+  mixList.delete(tabId);
+  browser.storage.local.set({mixedTabs: mixList});
 }
 
 /*Updates the new tab with a new waifu theme*/
 function MixedUpdate(tab, themeId, themes) {
-  browser.storage.local.get(["mixedTabs"])
-    .then((storage) => {
-      storage.mixedTabs.set(tab.id, themeId);//Adds the created tab to the list of mixed tabs
-      browser.storage.local.set({currentThemeId: themeId, mixedTabs: storage.mixedTabs});
-      //Update the tab with theme
-      browser.tabs.update(tab.id, {
-        loadReplace: true,
-        url: themes[themeId].page
-      });
-      //Load browser theme
-      loadTheme(themes, themeId);
-    });
+  mixList.set(tab.id, themeId);//Adds the created tab to the list of mixed tabs
+  browser.storage.local.set({currentThemeId: themeId, mixedTabs: mixList});
+  //Load browser theme
+  loadTheme(themes, themeId);
+  //Purge glitchy tabs
+  setTimeout(()=>{
+    purgeGlitchedTabs(tab);
+  },3000);
 }
 
 /*Cleans up all things relating to the Mixed tab option*/
@@ -108,6 +111,7 @@ function setupMixedUpdate(msg) {
         .then((storage) => {
           if (!storage.mixedTabs) {
             storage.mixedTabs = new Map();//Create a new mixed tab list
+            mixList = new Map();
           }
           //Activate event listeners
           browser.tabs.onCreated.addListener(MixTabCreated);//When a tab is created
@@ -130,6 +134,7 @@ function setupMixedUpdate(msg) {
             } else {
               browser.storage.local.set({currentThemeId, mixedTabs: storage.mixedTabs});
             }
+            mixList = storage.mixedTabs;
             //Initialize first (and only) new tab with the default theme
             loadTheme(themes, currentThemeId);
           }

firefoxThemes/modules/utils/themes/browser.js

@@ -1,4 +1,5 @@
 import {themeExtensionIconInToolBar} from "./logo.js";
+import {getRandomThemeId} from "../random.js";
 
 
 /*Set the browser theme for chosen waifu*/
@@ -10,5 +11,20 @@ async function loadTheme(themes, themeId) {
   const themeJSON = await res.json();
   browser.theme.update(themeJSON);
 }
+/*Retrieve the appropriate theme*/
+async function getCurrentTheme(themes,themeId,mixedTabs){
+  console.group("Page");
+  if(mixedTabs){
+    const tab = await browser.tabs.getCurrent();
+    themeId = mixedTabs.get(tab.id);
+    if(!themeId){
+      themeId = getRandomThemeId(themes);
+      mixedTabs.set(tab.id,themeId);
+      browser.storage.local.set({mixedTabs});
+      loadTheme(themes,themeId);
+    }
+  }
+  return themes[themeId];
+}
 
-export {loadTheme};
+export {loadTheme,getCurrentTheme};

firefoxThemes/options/options.js

@@ -14,14 +14,17 @@ function setCss(chosenTheme) {
   root.style.setProperty('--checkmark-color',colors.classNameColor);
 }
 
-function initContent() {
-  browser.storage.local.get(['loadOnStart', 'textSelection', 'scrollbar', 'waifuThemes', 'currentThemeId'])
-    .then((storage) => {
-      initCheckbox(loadOnStartCheckbox,!!storage.loadOnStart);
-      initCheckbox(textSelectionCheckbox,!!storage.textSelection);
-      initCheckbox(scrollbarCheckbox,!!storage.scrollbar);
-      setCss(storage.waifuThemes.themes[storage.currentThemeId])
-    });
+async function initContent() {
+  const storage = await browser.storage.local.get(['loadOnStart', 'textSelection', 'scrollbar', 'waifuThemes', 'currentThemeId','mixedTabs'])
+  initCheckbox(loadOnStartCheckbox,!!storage.loadOnStart);
+  initCheckbox(textSelectionCheckbox,!!storage.textSelection);
+  initCheckbox(scrollbarCheckbox,!!storage.scrollbar);
+  let themeId = storage.currentThemeId;
+  if(storage.mixedTabs){
+    const tab = await browser.tabs.getCurrent();
+    themeId = storage.mixedTabs.get(tab.id);
+  }
+  setCss(storage.waifuThemes.themes[themeId]);
 }
 
 const onChangeCheckEvents = async (e) => {

firefoxThemes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doki-theme-firefox",
-  "version": "15.0.0",
+  "version": "15.0.1",
   "description": "A theme collection of girls from various anime, manga, and visual novels series.",
   "main": "index.js",
   "repository": "https://github.com/doki-theme/doki-theme-web",

firefoxThemes/resources.js

@@ -40,26 +40,27 @@ class Theme {
 }
 
 /*Initialize Local Storage & custom new tab page*/
-function startStorage() {
-  browser.storage.local.get(["currentThemeId", "loadOnStart", "textSelection", "scrollbar"])
-    .then((storage) => {
-      const initStorage = {
-        waifuThemes: new WaifuThemes(),
-      };
-      //Retrieve all themes if none exists in local storage
-      browser.storage.local.set(initStorage);
-      //Load browser theme
-      if (storage.currentThemeId) {
-        loadTheme(initStorage.waifuThemes.themes, storage.currentThemeId);
-      }
-      if (storage.loadOnStart) {
-        //When the browser first opens, redirect to custom new tab page
-        browser.tabs.update({loadReplace: true, url: "waifus/index.html"});
-      }
-      // Register all styles from option page
-      updateOptions({optionName: "textSelection", optionValue: !!!storage.textSelection});
-      updateOptions({optionName: "scrollbar", optionValue: !!!storage.scrollbar});
-    });
+async function startStorage() {
+  const storage = await browser.storage.local.get(["currentThemeId", "loadOnStart", "textSelection", "scrollbar","mixedTabs"]);
+  const initStorage = {
+    waifuThemes: new WaifuThemes(),
+  };
+  //Retrieve all themes if none exists in local storage
+  browser.storage.local.set(initStorage);
+  //Load browser theme
+  if (storage.mixedTabs){
+    const tab = await browser.tabs.getCurrent();
+    loadTheme(initStorage.waifuThemes.themes, storage.mixedTabs.get(tab.id));
+  }else if (storage.currentThemeId) {
+    loadTheme(initStorage.waifuThemes.themes, storage.currentThemeId);
+  }
+  if (storage.loadOnStart) {
+    //When the browser first opens, redirect to custom new tab page
+    browser.tabs.update({loadReplace: true, url: "waifus/index.html"});
+  }
+  // Register all styles from option page
+  updateOptions({optionName: "textSelection", optionValue: !!!storage.textSelection});
+  updateOptions({optionName: "scrollbar", optionValue: !!!storage.scrollbar});
 }
 
 /*Update all new tabs with new waifu theme*/

firefoxThemes/waifus/index.html

@@ -7,12 +7,8 @@
     <link href="doki.png" rel="icon" type="image/png">
   <!--Styles for new tab page-->
     <link href="tab.css" rel="stylesheet">
-    <!--Search Capabilities-->
-    <script type="module" src="tab.js" defer></script>
-    <!--Adds/Removes Waifu-->
-    <script src="waifu.js" defer></script>
   <!--Load Themed Favicon-->
-  <script type="module" src="faviconLoader.js" defer></script>
+  <script type="module" src="themeLoader.js" async></script>
 </head>
 <body>
 </body>

firefoxThemes/waifus/tab.js

@@ -69,30 +69,26 @@ function displayWidget() {
 `;
 }
 
-function applyTabListeners() {
-  browser.storage.local.get(["showWidget", "waifuThemes", "currentThemeId"])
-    .then((storage) => {
-      const currentTheme = storage.waifuThemes.themes[storage.currentThemeId] ||
-        storage.waifuThemes.themes["19b65ec8-133c-4655-a77b-13623d8e97d3"]; // Ryuko Dark
-      const root = document.querySelector(':root');
-      root.style.setProperty('--accent-color', currentTheme.definition.colors.accentColor);
-      root.style.setProperty('--base-background-color', currentTheme.definition.colors.baseBackground);
+function applyTabListeners(storage) {
+    const currentTheme = storage.currentTheme;
+    const root = document.querySelector(':root');
+    root.style.setProperty('--accent-color', currentTheme.definition.colors.accentColor);
+    root.style.setProperty('--base-background-color', currentTheme.definition.colors.baseBackground);
 
-      if (storage.showWidget === undefined || storage.showWidget) {
-        displayWidget();
-        // set themed icons
-        setThemedSearchInputIcon(currentTheme);
-        setThemedAboutIcon(currentTheme);
+    if (storage.showWidget === undefined || storage.showWidget) {
+      displayWidget();
+      // set themed icons
+      setThemedSearchInputIcon(currentTheme);
+      setThemedAboutIcon(currentTheme);
 
-        /*---Event Listeners---*/
-        const input = document.querySelector("input[type='search']");
-        input.addEventListener("input", searchQuery, true);
-        input.addEventListener("keydown", keyConfirm, true);
+      /*---Event Listeners---*/
+      const input = document.querySelector("input[type='search']");
+      input.addEventListener("input", searchQuery, true);
+      input.addEventListener("keydown", keyConfirm, true);
 
-        const searchButton = document.querySelector(".search-button");
-        searchButton.addEventListener("click", confirmSearch, false);
-      }
-    });
+      const searchButton = document.querySelector(".search-button");
+      searchButton.addEventListener("click", confirmSearch, false);
+    }
 }
 
-applyTabListeners();
+export {applyTabListeners};

firefoxThemes/waifus/themeLoader.js

@@ -0,0 +1,40 @@
+import {buildSVG, svgToPng} from "../modules/utils/themes/logo.js";
+import {getCurrentTheme} from "../modules/utils/themes/browser.js";
+import {applyTheme} from "./waifu.js";
+import {applyTabListeners} from "./tab.js";
+
+function setThemedFavicon(currentTheme) {
+  const faviconOptions = {width: 32, height: 32};
+  const faviconSVG = buildSVG(currentTheme, faviconOptions);
+  svgToPng(faviconSVG, faviconOptions, (imgData) => {
+    let link = document.querySelector("link[rel~='icon']");
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    link.href = imgData;
+  });
+}
+
+async function startTheming() {
+  const storage = await browser.storage.local.get(["currentThemeId","waifuThemes","mixedTabs","backgroundType","showWidget"]);
+  storage.currentTheme = await getCurrentTheme(storage.waifuThemes.themes,storage.currentThemeId,storage.mixedTabs);
+  applyTheme(storage);
+  applyTabListeners(storage);
+  setThemedFavicon(storage.currentTheme);
+  if(storage.mixedTabs){
+    //Makes sure the mixedTab list has the same amount of tabs as the amount currently opened tabs
+    const tabs = await browser.tabs.query({});
+    const tabIDs = tabs.map(tab=>tab.id);
+
+    for(const key of storage.mixedTabs.keys()){
+      if(!tabIDs.includes(key)){
+        storage.mixedTabs.delete(key);
+      }
+    }
+    browser.storage.local.set({mixedTabs:storage.mixedTabs});
+  }
+}
+
+startTheming();

firefoxThemes/waifus/waifu.js

@@ -21,9 +21,8 @@ function getSecondaryAnchoring(theme) {
 
 /*Prepares the Waifu to be displayed on webpage*/
 function getWaifu(storage) {
-  const themes = storage.waifuThemes.themes;
   //Retrieve path to the image file
-  const currentTheme = themes[storage.currentThemeId];
+  const currentTheme = storage.currentTheme;
 
   const primaryBackgroundRelativeUrl = currentTheme.backgrounds.primary;
   const isPrimaryBackground = !storage.backgroundType;
@@ -54,13 +53,9 @@ function loadDokiTheme(storage) {
 }
 
 /*Apply Theme */
-function applyTheme() {
-  browser.storage.local.get(["waifuThemes", "currentThemeId", "backgroundType"])
-    .then((storage) => {
-      if (Object.keys(storage.waifuThemes.themes).includes(storage.currentThemeId)) {
-        loadDokiTheme(storage);
-      }
-    });
+function applyTheme(storage) {
+    if (Object.keys(storage.waifuThemes.themes).includes(storage.currentThemeId)) {
+      loadDokiTheme(storage);
+    }
 }
-
-applyTheme();
+export {applyTheme};