Firefox: Mixed Mode Themed Favicon Issue (#72)

* initial commit

* This is the base functionality of Doki Theme.

* Search functionality is now operable in new custom tab page;
Removes settings and logo icons from new custom tab page;
Decreases the size of doki logo in popup;
Updates Dark Ishtar theme;
Updates manifest;
Live updating when selecting a new waifu;
Adds documentation;
Removes debugs;

* New custom tab pages are now called 'Waifu Tab';
Waifus are now loaded to a Waifu Tab using JS instead of CSS. This is more convenient than making a CSS for each waifu;
Adds a new background script, resources.js. This script points to theme resources & provides utility functions for the other background script. It also provides an easier way to activate a theme without using a switch statement;
All of Firefox's New Tabs are replaced with a Waifu Tab.
Refactors code for more readability;
Adds more documentation comments for new classes & functions;

* Completes Aqua & Ishtar themes

* Adds more waifu themes to complete; 10 waifus can now be set as background

* Adds 5 more Waifu themes

* Adds 13 more waifu themes;Adds a permissions file, which explains the purpose of each permission needed to use the extension

* Change location of files

* Update Readme with Firefox section

* relocate files

* update readme

* New permission needed: Storage; Storage is used to add all waifu choices in the popup menu dynamically with less boilerplate; Refactor code;Update permissions

* Merges firefox branch; Updates CHANGELOG

* Update manifest

* Update manifest

* Can now choose a theme at random; Increase tab text brightness for megumin theme;

* Refactors code making great use of the local storage api. Instead of making a custom new tab HTML page for each theme, doki theme now reuses one HTML page to load all themes;
It is also easier to add more doki themes to the current collection;
Permissions file is updated with more clarification on the Storage section;
Updates manifest;

* Kanna's sidebar now has a theme applied to it

* Update permission of firefox branch with master

* Update manifest

* Removes XML declaration;

* Removes merge files outside of firefox folder

* The popup menu now remembers the last waifu that was set.

* Makes popup menu smaller;
Doki Theme now takes advantage of chrome_url_overrides manifest key to land on the custom New Tab. Initially, Doki Theme had its own method for transitioning which involved forcing the browser to show the new custom tab page if any of these tabs are present: about:newtab, about:privatebrowsing, or about:home;
Adds chrome_url_overrides & chrome_settings_overrides keys to manifest;
Removes unnecessary background script;
Adds two more themes for Monika: light/dark Monika joy variant;
Update names & file paths for Natsuki & Monika images;
Enhance tab_text & tab_background_text colors for some themes;
Remembers the last waifu theme chosen;
Updates PERMISSIONS.md file;

* Removes extra themes;Removes image key from all theme json

* Makes branch on par with master

* Adds other Monika & Natsuki images;
New feature 'mixed' loads a new theme per new tab created;
Adds some Documentation;
Updates DokiThemeDefinitions for Firefox;

* merge with doki-theme-chrome repo

* Adds asynchronous programming to reduce load times;

* Adds high res icons

* Update manifest to proper version formatting

* merge from master

* Removes unneeded async keywords

* update firefox build template by removing unnecessary theme_frame key

* Removes theme_frame key from new themes;

* When mix mode is activated all new tabs except the last are closed before initialization;Adds comments

* Removes empty spaces from themes;
In mix mode, tab theme info is now storage in local storage instead of temp variable;
Fix Popup menu not changing colors with the theme;

* Actually fix popup menu changing to the correct background color

* Fixes the popup menu only changing colors on New Tab pages

* Fixes popup menu color change for non-new tab pages

* Update versioning; Update Changelog

* Adds bounce animation to doki icon

* update Changelogs;Adds back .editorconfig file

* actually adds .editorconfig file

* Adds hover animation to popup menu;Fixes popup menu color change when chosen a theme normally without any modes;

* Cleans up mix mode

* Styling popup header font color.

* - Removes extra *Rias* folder.
- Changes order of switches
- Reduces size of switches
- Adds border-radius to dropdown menu
- Changes animation from bouncing to heartbeat

* yarn.lock

* Brighten switch titles

* Update Changelog

* Update manifest version to 9.0.1

* Themed switch labels

* Update Changelog

* Add option to activate/disable scrollbar & text selection themes;
Update package.json version for firefox;
Removes deprecated colors.toolbar_field_separator theme key;
Fix 'Random' mode;
Add shortcut to options page;
Add filters: hue rotation & drop shadow to doki image in popup menu;
Refactor some code;

* Make doki theme's scrollbar & text selection styles have high priority;
Simplify option labels;

* Change drop shadow of doki heartbeat to light gray;
Fix switches properly disabling for both secondary and dark (functionality);
Blurs disabled switches (appearance);
Improve performance when switching between theme variants;
Adds glow effect to unchecked enabled switches;
Code refactoring;

* Clean up CONTRIBUTING file

* Fixes URL match pattern

* Corrects issue number in CHANGELOG;

* Fixes Popup menu not changing to appropriate theme color when selected;
Reset selection when choosing Random mode;

* Update CHANGELOG

* Fixes text selection and scrollbar not changing themes when selecting a new theme while on a webpage;

* Fixes Random mode not enabling switches properly

* Instead of dynamically adding style tag to the <head>, this uses CSS variables to manipulate the styles

* Removes toolbar_field_separator from firefox build template;
Adds custom checkbox for options page;
Tightens search for chosen theme by theme name && group when initializing random mode;
Use accentColor instead of caretRow attribute for the caret color;

* Update CHANGELOG;
Options page now matches the current doki theme;
Change checkmark to a heart;
Refresh pages based on current activity;

* Possible solution to checkmark being out-of-bounds; Remove colons from label representing each checkbox

* Appropriate theme(favicon,json,action button,options page & image) for each tab loads correctly when opening tabs really quickly in mixed mode;
Fix Tabs not being randomized when opening tabs really quickly in mixed mode;
Fix text selection & scrollbar not loading appropriately with their individual tab in mixed mode;
Scripts loading the page theme is now more modular;
Fix initialization browser if the last option chosen was mix mode;

* Update Changlog and versionings

* Update changelog

* Adds missing `loadTheme` import;
Update CHANGELOG.md;

* Fix initialization, when user reopens browser;

* Error handling for undefined list during mix mode;
Removes tab creation listener for mix mode;
clean up local mix list when disabled;
rename `mixList to `mixedList`;
Replace glitchy tab algorithm to utilize the message system approach;
`getCurrentTheme` method is now synchronous;

* Rename `mixList` to `mixedList`;
clean up local mix list;

* Fixes search bar widget toggling in *Mixed Mode* reverting all tabs back to using a single theme.

Co-authored-by: Alex Simons <alexsimons9999@gmail.com>

Author: ZimCodes

CHANGELOG.md

@@ -2,6 +2,14 @@ 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 a theme, when closing and reopening a browser.
+- Mitigates favicon & other theming components to stay themed in mixed mode.
+- Fixes search bar widget toggling in *Mixed Mode* reverting all tabs back to using a single theme.
 
 # 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

@@ -1,6 +1,7 @@
 import {getRandomThemeId} from "../utils/random.js";
 import {loadTheme} from "../utils/themes/browser.js";
-
+/*Global Variables*/
+let mixedList = undefined;//Maintain a local list of all mixed tabs
 /*Separate the New Tab pages from the other types of pages*/
 function separateTabs(tabs) {
   let newTabs = [];
@@ -15,7 +16,7 @@ function separateTabs(tabs) {
   return [newTabs, otherTabs];
 }
 
-/*Add all tabs that are not a new tab into the mix collection*/
+/*Add all tabs that are not a new tab into the mix mixedQueue*/
 function addOtherTabsToMix(tabs, mixList, themes) {
   if (tabs.length > 0) {
     for (const tab of tabs) {
@@ -37,65 +38,48 @@ function keepLastTab(tabs) {
   return lastTabs;
 }
 
-/*EVENT: When a new tab is created add a random theme to it*/
-function MixTabCreated(tab) {
-  if (tab.title === "New Tab") {
-    browser.storage.local.get("waifuThemes")
-      .then((storage) => {
-        const chosenThemeId = getRandomThemeId(storage.waifuThemes.themes);
-        MixedUpdate(tab, chosenThemeId, storage.waifuThemes.themes);
-      });
-  }
-}
-
 /*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);
+      //Check if mixed mode is still active.
+      //This check is when searchbar is toggled during mix mode which disables it
+      if (!mixedList) {
+        mixTabCleanup();
+        return;
+      }
+      const currentThemeId = mixedList.get(activeInfo.tabId);
       if (currentThemeId) {
         loadTheme(storage.waifuThemes.themes, currentThemeId);
+        browser.storage.local.set({currentThemeId});
       }
     });
 }
 
 /*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});
-    });
-}
-
-/*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);
-    });
+  //Check if mixed mode is still active.
+  //This check is when searchbar is toggled during mix mode which disables it
+  if (!mixedList) {
+    mixTabCleanup();
+    return;
+  }
+  mixedList.delete(tabId);
+  browser.storage.local.set({mixedTabs: mixedList});
 }
 
 /*Cleans up all things relating to the Mixed tab option*/
 function mixTabCleanup() {
   browser.storage.local.get("mixedTabs")
     .then((storage) => {
       //Removes all listeners
-      if (browser.tabs.onCreated.hasListener(MixTabCreated)) {
-        browser.tabs.onCreated.removeListener(MixTabCreated);
+      if (browser.tabs.onCreated.hasListener(MixTabActivated)) {
         browser.tabs.onActivated.removeListener(MixTabActivated);
         browser.tabs.onRemoved.removeListener(MixTabClosed);
       }
       if (storage.mixedTabs) {
         browser.storage.local.set({mixedTabs: undefined});
+        mixedList = undefined;
       }
     });
 }
@@ -108,9 +92,9 @@ function setupMixedUpdate(msg) {
         .then((storage) => {
           if (!storage.mixedTabs) {
             storage.mixedTabs = new Map();//Create a new mixed tab list
+            mixedList = new Map();
           }
           //Activate event listeners
-          browser.tabs.onCreated.addListener(MixTabCreated);//When a tab is created
           browser.tabs.onActivated.addListener(MixTabActivated);//When the active tab has been switched
           browser.tabs.onRemoved.addListener(MixTabClosed);//When a tab has been closed
           if (tabs.length > 0) {
@@ -130,11 +114,44 @@ function setupMixedUpdate(msg) {
             } else {
               browser.storage.local.set({currentThemeId, mixedTabs: storage.mixedTabs});
             }
+            mixedList = storage.mixedTabs;
             //Initialize first (and only) new tab with the default theme
             loadTheme(themes, currentThemeId);
           }
         });
     });
 }
 
-export {setupMixedUpdate, mixTabCleanup};
+/*MESSAGE: Send a message to the page to apply theme*/
+function pageResponse(msg) {
+  if (!msg.mixMSG) return;
+  browser.storage.local.get(["currentThemeId", "waifuThemes", "backgroundType", "showWidget"]).then(storage => {
+    if (!mixedList) {
+      browser.tabs.sendMessage(msg.pageTab.id, {
+        pageMSG: true,
+        waifuThemes: storage.waifuThemes,
+        currentThemeId: storage.currentThemeId,
+        backgroundType: storage.backgroundType,
+        showWidget: storage.showWidget,
+      });
+    } else {
+      if (!mixedList.has(msg.pageTab.id)) {
+        mixedList.set(msg.pageTab.id, getRandomThemeId(storage.waifuThemes.themes));
+        browser.storage.local.set({mixedTabs: mixedList});
+      }
+      browser.tabs.sendMessage(msg.pageTab.id, {
+        pageMSG: true,
+        waifuThemes: storage.waifuThemes,
+        currentThemeId: storage.currentThemeId,
+        backgroundType: storage.backgroundType,
+        showWidget: storage.showWidget,
+        mixedTabs: mixedList,
+        pageTab: msg.pageTab
+      });
+      loadTheme(storage.waifuThemes.themes, mixedList.get(msg.pageTab.id));
+    }
+  });
+}
+
+export {setupMixedUpdate, mixTabCleanup};
+browser.runtime.onMessage.addListener(pageResponse);

firefoxThemes/modules/utils/themes/browser.js

@@ -10,5 +10,13 @@ async function loadTheme(themes, themeId) {
   const themeJSON = await res.json();
   browser.theme.update(themeJSON);
 }
+/*Retrieve the appropriate theme*/
+function getCurrentTheme(themes,themeId,mixedTabs,tab){
+  if(mixedTabs){
+    themeId = mixedTabs.get(tab.id);
+    browser.storage.local.set({currentThemeId:themeId});
+  }
+  return themes[themeId];
+}
 
-export {loadTheme};
+export {loadTheme,getCurrentTheme};

firefoxThemes/options/options.js

@@ -14,19 +14,23 @@ 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) => {
   changeCheckboxState(e);
   await browser.runtime.sendMessage({
+    resourceMSG:true,
     optionName: e.target.id,
     optionValue: e.target.className
   });

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/popup/popup.js

@@ -36,16 +36,15 @@ const setBackground = async () => {
   });
 
   const {currentThemeId} = await browser.storage.local.get(["currentThemeId"])
-  browser.runtime.sendMessage({currentThemeId});
+  browser.runtime.sendMessage({resourceMSG:true,currentThemeId});
 }
 
 const setHideWidget = async () => {
   await browser.storage.local.set({
     showWidget: showSearchSwitch.checked
   });
 
-  const {currentThemeId} = await browser.storage.local.get(["currentThemeId"])
-  browser.runtime.sendMessage({currentThemeId});
+  browser.runtime.sendMessage({resourceMSG:true,applyWidget:true});
 }
 
 /*Stores info to set dark mode switch accordingly*/
@@ -81,7 +80,7 @@ const setOpposingTheme = async () => {
     const newThemeId = newTheme.id;
     setCSS(newTheme);
     await browser.storage.local.set({currentThemeId: newThemeId});
-    browser.runtime.sendMessage({currentThemeId: newThemeId});
+    browser.runtime.sendMessage({resourceMSG:true,currentThemeId: newThemeId});
   }
 }
 
@@ -151,7 +150,7 @@ function setTheme(e) {
         setCSS(themes[chosenThemeId]);
         selectTag.value = 'none';// Reset option back to 'choose a waifu'
       }
-      browser.runtime.sendMessage({currentThemeId: chosenThemeId, mixState: currentMix});
+      browser.runtime.sendMessage({resourceMSG:true,currentThemeId: chosenThemeId, mixState: currentMix});
     });
 }
 

firefoxThemes/resources.js

@@ -3,7 +3,8 @@ import {mixedStates} from "./modules/utils/states.js";
 import {setupMixedUpdate, mixTabCleanup} from "./modules/modes/mix.js";
 import {normalUpdate} from "./modules/modes/normal.js";
 import {updateOptions} from "./modules/contentConfig.js";
-
+import {getRandomThemeId} from "./modules/utils/random.js";
+import {reloadTabs} from "./modules/utils/browser.js";
 /*---CLASSES---*/
 
 /*Class Goal: Holds theme data about all waifus*/
@@ -40,26 +41,28 @@ 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) {
+    let themeId = storage.currentThemeId || getRandomThemeId(initStorage.waifuThemes.themes);
+    updateTabs({mixState: mixedStates.RESET, currentThemeId: themeId});
+  } else if (storage.currentThemeId) {
+    let themeId = storage.currentThemeId || getRandomThemeId(initStorage.waifuThemes.themes);
+    updateTabs({currentThemeId: themeId});
+  }
+  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*/
@@ -79,15 +82,19 @@ function updateTabs(msg) {
   }
 }
 
-/*Update all theme components*/
+/*MESSAGE: Update all theme components*/
 function updateTheme(msg) {
-  if (!msg.optionName) {
+  if (!msg.resourceMSG) return;
+
+  if (msg.applyWidget) {
+    reloadTabs({title: 'New Tab'});
+  } else if (msg.optionName && msg.optionValue) {
+    updateOptions(msg);
+  } else {
     updateTabs(msg);
     for (const optionName of ['textSelection', 'scrollbar']) {
       updateOptions({optionName});
     }
-  } else {
-    updateOptions(msg);
   }
 }