Primary/Secondary FireFox Backgrounds (#25)

* reformat code * Added toggle switch * Able to update state with background type * Initializing the theme toggle switch * Able to switch between backgrounds * Added primary backgrounds * Able to show hide search widget * Updated changelog and bumped version to v8.1.0
doki-theme · Feb 25, 2021 · fddf3d1 · fddf3d1
1 parent a1abb4a
commit fddf3d1
Show file tree

Hide file tree

Showing 137 changed files with 485 additions and 464 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,13 @@ Changelog
 
 # Unreleased
 
+# 8.1.0
+
+## FireFox
+
+- Added support for [Primary and Secondary Backgrounds](https://github.com/doki-theme/doki-theme-web/issues/21)
+- Added the ability to show/hide the new tab search widget.
+
 # 8.0.0
 
 ## 4 New Themes

diff --git a/buildAssets/templates/manifest.template.json b/buildAssets/templates/manifest.template.json
@@ -1,6 +1,6 @@
 {
   "name": "The Doki Theme",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "Anime based themes for your chrome browser!",
   "theme": {
     "images": {

diff --git a/buildSrc/src/BuildThemes.ts b/buildSrc/src/BuildThemes.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import {
   ChromeDokiThemeDefinition,
-  DokiThemeDefinitions, FireFoxTheme,
+  DokiThemeDefinitions,
+  FireFoxTheme,
   ManifestTemplate,
   MasterDokiThemeDefinition,
   StringDictonary
@@ -725,10 +726,11 @@ preBuild()
         .then(() => {
           // copy asset to directory
           const storageShedPath = path.resolve(repoDirectory, '..', 'storage-shed', 'doki', 'backgrounds', 'chrome')
-          const highResTheme = [
+          const highResThemes = [
             path.resolve(storageShedPath, 'hi-res', stickers.secondary && stickers.secondary.name || 'not_real'),
             path.resolve(storageShedPath, 'hi-res', stickers.default.name),
-          ].filter(hiResWaifu => fs.existsSync(hiResWaifu))[0];
+          ].filter(hiResWaifu => fs.existsSync(hiResWaifu));
+          const highResTheme = highResThemes[0];
           if (highResTheme) {
             const highResThemeDirectory = path.resolve(hiResGeneratedThemesDirectory, themeDirectoryName);
             return (fs.existsSync(highResThemeDirectory) ?
@@ -752,11 +754,13 @@ preBuild()
 
                       // copy high res image to firefox
                       const highResFireFoxBackgroundDirectory = path.resolve(firefoxThemeDirectory, 'images');
-                      const highResFireFox = path.resolve(highResFireFoxBackgroundDirectory, path.basename(highResTheme));
-                      fs.copyFileSync(
-                        highResTheme,
-                        highResFireFox
-                      )
+                      highResThemes.forEach(hiResTheme => {
+                        const highResFireFox = path.resolve(highResFireFoxBackgroundDirectory, path.basename(hiResTheme));
+                        fs.copyFileSync(
+                          hiResTheme,
+                          highResFireFox
+                        )
+                      });
 
                       resolve()
                     }
@@ -781,12 +785,22 @@ preBuild()
 
           // back fill any firefox images that don't have
           // high res.
-          const lowResFirefoxPath = path.resolve
-          (getBackgroundDirectory(firefoxThemeDirectory),
-            backgroundName)
-          if (!fs.existsSync(lowResFirefoxPath)) {
-            fs.copyFileSync(src, lowResFirefoxPath)
-          }
+          const bkNames = Object.values(stickers)
+            .map(sticker => sticker.name)
+          bkNames.forEach(bkName => {
+            const chromeLowerRes = path.resolve(repoDirectory, '..', 'storage-shed', 'doki', 'backgrounds', 'chrome',
+              bkName);
+            const lowResFallback = fs.existsSync(chromeLowerRes) ?
+              chromeLowerRes : path.resolve(repoDirectory, '..', 'doki-theme-assets', 'backgrounds', bkName);
+
+            const lowResFirefoxPath = path.resolve(
+              getBackgroundDirectory(firefoxThemeDirectory),
+              bkName
+            )
+            if (!fs.existsSync(lowResFirefoxPath)) {
+              fs.copyFileSync(lowResFallback, lowResFirefoxPath)
+            }
+          })
         })
         .catch(() => {
           // skipping asset copies
@@ -798,7 +812,7 @@ preBuild()
       // write things for firefox extension
       const dokiThemeDefinitions = dokiThemes.map(dokiTheme => {
         const dokiDefinition = dokiTheme.definition;
-        const defaultSticker = getDefaultSticker(getStickers(dokiDefinition, dokiTheme));
+        const stickers = getStickers(dokiDefinition, dokiTheme);
         const relativeFireFoxAssetPath = `${FIRE_FOX_EXTENSION_ASSET_DIRECTORY}/${
           getFireFoxThemeAssetDirectory(dokiDefinition)
         }`
@@ -810,9 +824,16 @@ preBuild()
               'ui',
               'icons'
             ]),
-            imagePath: `${relativeFireFoxAssetPath}/images/${
-              defaultSticker.name
-            }`,
+            backgrounds: {
+              primary: `${relativeFireFoxAssetPath}/images/${
+                stickers.default.name
+              }`,
+              ...(stickers.secondary ? {
+                secondary: `${relativeFireFoxAssetPath}/images/${
+                  stickers.secondary.name
+                }`
+              } : {})
+            },
             jsonPath: `${relativeFireFoxAssetPath}/theme.json`,
           },
           colors: dokiDefinition.colors,

diff --git a/chromeThemes/Aqua's Theme/manifest.json b/chromeThemes/Aqua's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Aqua",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Aqua from KonoSuba",
   "theme": {
     "images": {

diff --git a/chromeThemes/Asuna Dark's Theme/manifest.json b/chromeThemes/Asuna Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Asuna Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Asuna from Sword Art Online",
   "theme": {
     "images": {

diff --git a/chromeThemes/Asuna Light's Theme/manifest.json b/chromeThemes/Asuna Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Asuna Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Asuna from Sword Art Online",
   "theme": {
     "images": {

diff --git a/chromeThemes/Beatrice's Theme/manifest.json b/chromeThemes/Beatrice's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Beatrice",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Beatrice from Re Zero",
   "theme": {
     "images": {

diff --git a/chromeThemes/Darkness Dark's Theme/manifest.json b/chromeThemes/Darkness Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Darkness Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Darkness from KonoSuba",
   "theme": {
     "images": {

diff --git a/chromeThemes/Darkness Light's Theme/manifest.json b/chromeThemes/Darkness Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Darkness Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Darkness from KonoSuba",
   "theme": {
     "images": {

diff --git a/chromeThemes/Echidna's Theme/manifest.json b/chromeThemes/Echidna's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Echidna",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Echidna from Re Zero",
   "theme": {
     "images": {

diff --git a/chromeThemes/Emilia Dark's Theme/manifest.json b/chromeThemes/Emilia Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Emilia Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Emilia from Re Zero",
   "theme": {
     "images": {

diff --git a/chromeThemes/Emilia Light's Theme/manifest.json b/chromeThemes/Emilia Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Emilia Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Emilia from Re Zero",
   "theme": {
     "images": {

diff --git a/chromeThemes/Hatsune Miku's Theme/manifest.json b/chromeThemes/Hatsune Miku's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Hatsune Miku",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Miku from Miscellaneous",
   "theme": {
     "images": {

diff --git a/chromeThemes/Ishtar Dark's Theme/manifest.json b/chromeThemes/Ishtar Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Ishtar Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Ishtar from Fate",
   "theme": {
     "images": {

diff --git a/chromeThemes/Ishtar Light's Theme/manifest.json b/chromeThemes/Ishtar Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Ishtar Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Ishtar from Fate",
   "theme": {
     "images": {

diff --git a/chromeThemes/Kanna's Theme/manifest.json b/chromeThemes/Kanna's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Kanna",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Kanna from Miss Kobayashi's Dragon Maid",
   "theme": {
     "images": {

diff --git a/chromeThemes/Katsuragi Misato's Theme/manifest.json b/chromeThemes/Katsuragi Misato's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Katsuragi Misato",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Misato from Evangelion",
   "theme": {
     "images": {

diff --git a/chromeThemes/Konata's Theme/manifest.json b/chromeThemes/Konata's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Konata",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Konata from Lucky Star",
   "theme": {
     "images": {

diff --git a/chromeThemes/Mai Dark's Theme/manifest.json b/chromeThemes/Mai Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Mai Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Mai from Bunny Senpai",
   "theme": {
     "images": {

diff --git a/chromeThemes/Mai Light's Theme/manifest.json b/chromeThemes/Mai Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Mai Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Mai from Bunny Senpai",
   "theme": {
     "images": {

diff --git a/chromeThemes/Makise Kurisu's Theme/manifest.json b/chromeThemes/Makise Kurisu's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Makise Kurisu",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Kurisu from Steins Gate",
   "theme": {
     "images": {

diff --git a/chromeThemes/Megumin's Theme/manifest.json b/chromeThemes/Megumin's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Megumin",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Megumin from KonoSuba",
   "theme": {
     "images": {

diff --git a/chromeThemes/Mioda Ibuki Dark's Theme/manifest.json b/chromeThemes/Mioda Ibuki Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Mioda Ibuki Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Ibuki from DanganRonpa",
   "theme": {
     "images": {

diff --git a/chromeThemes/Mioda Ibuki Light's Theme/manifest.json b/chromeThemes/Mioda Ibuki Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Mioda Ibuki Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Ibuki from DanganRonpa",
   "theme": {
     "images": {

diff --git a/chromeThemes/Monika Dark's Theme/manifest.json b/chromeThemes/Monika Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Monika Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Monika from Literature Club",
   "theme": {
     "images": {

diff --git a/chromeThemes/Monika Light's Theme/manifest.json b/chromeThemes/Monika Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Monika Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Monika from Literature Club",
   "theme": {
     "images": {

diff --git a/chromeThemes/Natsuki Dark's Theme/manifest.json b/chromeThemes/Natsuki Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Natsuki Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Natsuki from Literature Club",
   "theme": {
     "images": {

diff --git a/chromeThemes/Natsuki Light's Theme/manifest.json b/chromeThemes/Natsuki Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Natsuki Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Natsuki from Literature Club",
   "theme": {
     "images": {

diff --git a/chromeThemes/Ram's Theme/manifest.json b/chromeThemes/Ram's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Ram",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Ram from Re Zero",
   "theme": {
     "images": {

diff --git a/chromeThemes/Rem's Theme/manifest.json b/chromeThemes/Rem's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Rem",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Rem from Re Zero",
   "theme": {
     "images": {

diff --git a/chromeThemes/Rias's Theme/manifest.json b/chromeThemes/Rias's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Rias",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Rias from High School DxD",
   "theme": {
     "images": {

diff --git a/chromeThemes/Rory Mercury's Theme/manifest.json b/chromeThemes/Rory Mercury's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Rory Mercury",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Rory from Gate",
   "theme": {
     "images": {

diff --git a/chromeThemes/Ryuko's Theme/manifest.json b/chromeThemes/Ryuko's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Ryuko",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Ryuko from Kill la Kill",
   "theme": {
     "images": {

diff --git a/chromeThemes/Satsuki's Theme/manifest.json b/chromeThemes/Satsuki's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Satsuki",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Satsuki from Kill la Kill",
   "theme": {
     "images": {

diff --git a/chromeThemes/Sayori Dark's Theme/manifest.json b/chromeThemes/Sayori Dark's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Sayori Dark",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Š̸̘͚̼͎̯̙̣̱̎̋̐͒a̴̖̟̠̳̤͙̟͂̂͑̐͜ỷ̵̧̨̞̠̖̠o̴̧͍̗̬̎̓͆̔͝ͅr̴̡̮̟͈͠ͅi̴̡̨͓͈̬̗̺̍́̃̇̓ from Literature Club",
   "theme": {
     "images": {

diff --git a/chromeThemes/Sayori Light's Theme/manifest.json b/chromeThemes/Sayori Light's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Sayori Light",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A light theme modeled after Sayori from Literature Club",
   "theme": {
     "images": {

diff --git a/chromeThemes/Sonoda Umi's Theme/manifest.json b/chromeThemes/Sonoda Umi's Theme/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Doki Theme: Sonoda Umi",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A dark theme modeled after Umi from Love Live",
   "theme": {
     "images": {