Firefox: Small Cosmetic Changes (#34)

* 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

Co-authored-by: Alex Simons <[email protected]>

CHANGELOG.md

@@ -3,6 +3,17 @@ Changelog
 
 # Unreleased
 
+# 9.0.1 
+## Firefox: Small Cosmetic Changes
+
+- Removes extra *Rias* folder.
+- Changes ordering of switches
+- Reduces size of switches
+- Adds small changes to dropdown menu on idle state
+- Changes animation from *bouncing* to *heartbeat*
+- Brightens switch labels
+- Switch labels are now themed
+
 # 9.0.0 [Astolfo, Maika, Rias, & Rei]
 
 ## 4 New Themes

firefoxThemes/manifest.json

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

firefoxThemes/package.json

@@ -11,6 +11,6 @@
     "start": "web-ext run --source-dir ."
   },
   "dependencies": {
-    "web-ext": "^5.4.1"
+    "web-ext": "^6.1.0"
   }
 }

firefoxThemes/popup/index.html

@@ -21,16 +21,16 @@ <h1>Doki Theme</h1>
 </select>
 <div class="settings-container">
   <form class="settings">
-    <label for="backgroundType">Secondary Background</label><br>
-    <label class="switch">
-      <input id="backgroundType" type="checkbox">
-      <span class="slider round"></span>
-    </label><br><br>
     <label for="hideSearch">Search Widget</label><br>
     <label class="switch">
       <input id="hideSearch" type="checkbox">
       <span class="slider round"></span>
-    </label><br/><br>
+    </label><br/><br/>
+    <label for="backgroundType">Secondary Background</label><br>
+    <label class="switch">
+      <input id="backgroundType" type="checkbox">
+      <span class="slider round"></span>
+    </label><br/><br/>
     <label for="darkMode">Dark Mode</label><br>
     <label class="switch">
       <input id="darkMode" type="checkbox">

firefoxThemes/popup/popup.css

@@ -28,20 +28,47 @@ h1 {
 }
 
 /*Logo Styles*/
-@keyframes bounce {
-  from {
-    top: 0.5em;
+@keyframes heartbeat {
+  0% {
+    transform: scale(1.5);
   }
-  to {
-    top: 2.5em;
+  10%{
+    transform:scale(1);
+  }
+  15%{
+    transform:scale(1.5);
+  }
+  25% {
+    transform:scale(1);
+  }
+  30% {
+    transform:scale(1.5);
+  }
+  45% {
+    transform:scale(1);
+  }
+  50% {
+    transform:scale(1.5);
+  }
+  80%{
+    transform:scale(1);
+  }
+  90%{
+    transform:scale(1.5);
+  }
+  95%{
+    transform:scale(1);
+  }
+  100%{
+    transform:scale(1.5);
   }
 }
 
 img {
   position: relative;
-  margin: 1em auto;
+  margin: 1em auto 0 auto;
   max-width: 30%;
-  animation: bounce 1.2s ease-in-out infinite alternate;
+  animation: heartbeat 6s linear infinite;
 }
 
 /*Waifu Option Styles*/
@@ -57,6 +84,7 @@ select {
   margin: 2.5em auto 1rem auto;
   width: calc(140px + 10vw);
   font-size: 14px;
+  border-radius: 50px;
 }
 
 .settings-container {
@@ -67,15 +95,12 @@ form > label > input {
   margin-bottom: 1rem;
 }
 
-.settings {
-}
-
 .switch {
   margin-top: 0.5rem;
   position: relative;
   display: inline-block;
-  width: 60px;
-  height: 34px;
+  width: 54px;
+  height: 28px;
 }
 
 .switch input {
@@ -99,8 +124,8 @@ form > label > input {
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
+  height: 20px;
+  width: 20px;
   left: 4px;
   bottom: 4px;
   background-color: #a73035;
@@ -122,6 +147,13 @@ input:checked + .slider:before {
   transform: translateX(26px);
 }
 
+/*Switch labels*/
+label[for="backgroundType"],
+label[for="darkMode"],
+label[for="hideSearch"]
+{
+  color:#bbb;
+}
 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;

firefoxThemes/popup/popup.js

@@ -47,7 +47,13 @@ input:checked + .slider {
 
 input:focus + .slider {
   box-shadow: 0 0 1px ${colors.accentColor}44;
-
+}
+label[for="backgroundType"],
+label[for="darkMode"],
+label[for="hideSearch"]
+{
+  color:${colors.infoForeground};
+}
         `
   const styleSheet = document.createElement("style");
   styleSheet.innerText = styles;
@@ -85,7 +91,7 @@ const setDarkMode = async () => {
     const newTheme = Object.values(waifuThemes.themes)
       .find(dokiTheme =>
         dokiTheme.displayName === currentTheme.displayName &&
-      dokiTheme.id !== currentThemeId) || currentTheme
+        dokiTheme.id !== currentThemeId) || currentTheme
     const newThemeId = newTheme.id;
     setCss(newTheme);
     await browser.storage.local.set({currentThemeId: newThemeId})