Firefox: Text selection, Carets, & Scrollbars (#63)

* 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

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

CHANGELOG.md

@@ -2,6 +2,16 @@ Changelog
 ---
 
 # Unreleased
+# 13.1.0 [Scrollbars & Text Selection]
+
+- Scrollbar, text selection, & caret are now themed! [#59](https://github.com/doki-theme/doki-theme-web/issues/59)
+- Fix `Random` mode
+- Add shortcut to *options page* by clicking on **Doki Heart** beat
+- Update styles in *popup menu*
+- Fix switches in *popup menu* not disabling properly for both secondary and dark
+- Fixes *popup menu* not changing to appropriate theme color when selected
+- Custom checkboxes in *options page*
+- *Options page* now changes with current Doki Theme
 
 # 13.0.0 [NekoPara OneeSan Vol.]
 

CONTRIBUTING.md

@@ -83,7 +83,7 @@ yarn
 
 ### Set up build source
 
-Navigate to the root of the `buildSource` directory and run the following command.
+Navigate to the `buildSource` directory and run the following command.
 
 ```shell
 yarn
@@ -116,8 +116,8 @@ the Doki Theme Suite. (**NOTE** you can't run `buildThemes` only I can, sorry!)
 
 ### Web specifics
 
-There two files that ar important, they can be found in `buildSrc/assets/templates`. Those filesare the  `*.template`,
-which is the template for the common CSS that used for all themes.
+There are two files of importance. They can be found in `buildSrc/assets/templates`. The files, `*.template`, are
+the templates for common CSS that used for all themes.
 
 These templates are evaluated as part of the theme building process. When you run this command in the `buildSrc`
 directory:
@@ -132,13 +132,13 @@ This will:
 - Create the tab images for the chrome themes
 - Build the `DokiThemeDefinitions.ts` for both the `masterExtension` and Firefox extension.
 
-Sometimes a particular theme has something that is just a bit off. Thankfully there is a way to fix small one off
+Sometimes a particular theme has something that is just a bit off. Thankfully, there is a way to fix small one-off
 issues.
 
 In the `buildAssets/themes/definitions` directory lives all the chrome definitions. These are used to override the
 defaults provided by the `masterThemes`
 
-Here is an example that overrides:
+Here is an example that overrides the following:
 
 - The background placement
 - Search bar text color
@@ -162,7 +162,7 @@ Here is an example that overrides:
 }
 ```
 
-Once changes are made you can run the command below inside the `buildSrc` directory.
+Once changes are made, you can run the command below inside the `buildSrc` directory.
 
 ```shell
 yarn buildDefinitions
@@ -196,13 +196,13 @@ This part is mostly automated, for the most part. There is only one script you'l
 ### Application specific templates
 
 Once you have a new master theme definitions merged into the default branch, it's now time to generate the application
-specific templates, which allow us to control individual theme specific settings.
+specific templates, which allows us to control individual theme specific settings.
 
 You'll want to edit the function used by `buildApplicationTemplate`
 and `appName` [defined here](https://github.com/doki-theme/doki-master-theme/blob/596bbe7b258c65e485257a14887ee9b4e0e8b659/buildSrc/AppThemeTemplateGenerator.ts#L79)
 in your `masterThemes` directory.
 
-In the case of this plugin the `buildApplicationsTemplate` should use the `chromeTemplate` and `appName` should
+In the case of this plugin, the `buildApplicationsTemplate` should use the `chromeTemplate` and `appName` should
 be `chrome`.
 
 We need run the `generateTemplates` script. Which will walk the master theme definitions and create the new templates in

buildSrc/assets/templates/firefox.theme.template.json

@@ -27,7 +27,6 @@
     "toolbar_field_border_focus": "&accentColor&",
     "toolbar_field_highlight": "&selectionBackground&",
     "toolbar_field_highlight_text": "&selectionForeground&",
-    "toolbar_field_separator": "&borderColor&",
     "toolbar_field_text": "&infoForeground&",
     "toolbar_field_text_focus": "&accentColor&",
     "toolbar_text": "&accentColor&",

firefoxThemes/content_scripts/scrollbar.js

@@ -0,0 +1,25 @@
+async function getColorDefinition() {
+  const storage = await browser.storage.local.get(["waifuThemes", "currentThemeId"]);
+  const themes = storage.waifuThemes.themes;
+
+  const currentTheme = themes[storage.currentThemeId];
+
+  const {colors} = currentTheme.definition;
+
+  return colors;
+}
+
+async function applyScrollbar() {
+  const {accentColor} = await getColorDefinition();
+  const style = `:root{
+  scrollbar-color: ${accentColor} rgba(0, 0, 0, 0) !important;
+  scrollbar-width: thin !important;
+}`;
+  const styleText = document.createTextNode(style);
+  const styleTag = document.createElement('style');
+  styleTag.id = 'doki_scrollbar';
+  styleTag.append(styleText);
+  document.head.append(styleTag);
+}
+
+applyScrollbar();

firefoxThemes/content_scripts/textSelect.js

@@ -0,0 +1,30 @@
+async function getColorDefinition() {
+  const storage = await browser.storage.local.get(["waifuThemes", "currentThemeId"]);
+  const themes = storage.waifuThemes.themes;
+
+  const currentTheme = themes[storage.currentThemeId];
+
+  const {colors} = currentTheme.definition;
+
+  return colors;
+}
+
+async function applyTextSelection() {
+  const {accentColor, selectionForeground, selectionBackground} = await getColorDefinition();
+  const style = `:root{
+  caret-color: ${accentColor} !important; 
+}
+::selection{
+  color: ${selectionForeground} !important;
+  background-color: ${selectionBackground} !important;
+}
+`;
+  /*Add style to HTML document*/
+  const styleText = document.createTextNode(style);
+  const styleTag = document.createElement('style');
+  styleTag.id = 'doki_selection';
+  styleTag.append(styleText);
+  document.head.append(styleTag);
+}
+
+applyTextSelection();

firefoxThemes/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Doki Theme for Firefox",
   "short_name": "Doki Theme",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "description": "A theme collection of girls from various anime, manga, and visual novels series.",
   "manifest_version": 2,
   "icons": {
@@ -13,7 +13,8 @@
     "tabs",
     "activeTab",
     "search",
-    "storage"
+    "storage",
+    "<all_urls>"
   ],
   "options_ui": {
     "page": "options/options.html",

firefoxThemes/options/option.css

@@ -0,0 +1,58 @@
+* {
+  color: var(--foreground-color);
+}
+
+html, body {
+  font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
+  font-size: 100%;
+  margin: 0;
+  padding: 1rem;
+  height: 500px;
+  background-color: var(--header-color);
+  color: var(--foreground-color);
+}
+
+section {
+  position: relative;
+  margin-top: 2em;
+}
+
+h1 {
+  text-align: center;
+}
+
+label {
+  color: var(--foreground-color);
+}
+
+/*Custom Checkbox*/
+span {
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2pt solid var(--checkbox-border-color,#00000070);
+  border-radius: 3px;
+}
+
+span:hover {
+  border: 2pt solid #666879;
+}
+
+span:active {
+  background-color: #9999;
+  border: 2pt solid #888888;
+}
+
+.checked {
+  background-color: var(--checkbox-color, red);
+}
+
+.checked::after {
+  content: "♥";
+  position: relative;
+  bottom: 50%;
+  font-weight: bold;
+  color: var(--checkmark-color, white);
+  text-shadow: 1pt 1pt 2pt black;
+}

firefoxThemes/options/options.html

@@ -1,27 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
+  <meta charset="utf-8"/>
   <title>Doki Theme Options</title>
-  <style>
-    html, body {
-      font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
-      font-size: 100%;
-      margin: 0;
-      padding: 1rem;
-      height: 500px;
-    }
-  </style>
-</head>
 
+  <script src="options.js" defer></script>
+  <link rel="stylesheet" href="option.css"/>
+</head>
 <body>
-
-  <div class="options-container">
-    <label>
-      Load New Tab on start
-      <input type="checkbox" id="loadOnStart" />
-    </label>
-  </div>
-  <script src="options.js"></script>
+<div class="options-container">
+  <section>
+    <span id="loadOnStart" role="checkbox"></span>
+    <label for="loadOnStart">Load New Tab on new window</label>
+  </section>
+  <section>
+    <span id="textSelection" class="checked" role="checkbox"></span>
+    <label for="textSelection">Text Selection</label>
+  </section>
+  <section>
+    <span id="scrollbar" class="checked" role="checkbox"></span>
+    <label for="scrollbar">Scrollbar</label>
+  </section>
+</div>
 </body>
 </html>

firefoxThemes/options/options.js

@@ -1,44 +1,47 @@
+/*DOM Elements*/
 const loadOnStartCheckbox = document.querySelector("#loadOnStart");
-
+const textSelectionCheckbox = document.querySelector("#textSelection");
+const scrollbarCheckbox = document.querySelector("#scrollbar");
+const root = document.querySelector(':root');
 /*Set color of options menu based on theme*/
 function setCss(chosenTheme) {
-  if (!chosenTheme) return
-  const { colors } = chosenTheme.definition
-  const styles = `
-body, html {
-  background-color: ${colors.headerColor};
-  color: ${colors.foregroundColor};
-}
-
-* {
-  background-color: ${colors.baseBackground};
- color: ${colors.foregroundColor};
+  if (!chosenTheme) return;
+  const {colors} = chosenTheme.definition;
+  root.style.setProperty('--checkbox-color',colors.accentColor);
+  root.style.setProperty('--foreground-color',colors.foregroundColor);
+  root.style.setProperty('--checkbox-border-color',colors.foregroundColor+70);
+  root.style.setProperty('--header-color',colors.headerColor);
+  root.style.setProperty('--checkmark-color',colors.classNameColor);
 }
 
-input:checked {
-  background-color: ${colors.accentColor}44;
+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])
+    });
 }
 
-label[for="loadOnStart"]
-{
-  color:${colors.foregroundColor};
-}
-        `
-  const styleSheet = document.createElement("style");
-  styleSheet.innerText = styles;
-  document.head.appendChild(styleSheet)
-}
-
-browser.storage.local.get(['loadOnStart', 'waifuThemes', 'currentThemeId'])
-  .then((storage) => {
-    loadOnStartCheckbox.checked = !!storage.loadOnStart;
-    setCss(storage.waifuThemes.themes[storage.currentThemeId])
+const onChangeCheckEvents = async (e) => {
+  changeCheckboxState(e);
+  await browser.runtime.sendMessage({
+    optionName: e.target.id,
+    optionValue: e.target.className
   });
-
-const onLoadSwitchChange = async () => {
-  await browser.storage.local.set({
-    loadOnStart: loadOnStartCheckbox.checked,
-  })
 };
+/*Initialize checkbox state*/
+function initCheckbox(el,state){
+  el.className = state ? 'checked': '';
+}
+/*Changes checkbox state*/
+function changeCheckboxState(e){
+  const el = e.target;
+  el.className = el.className !== 'checked' ? "checked":'';
+}
 
-loadOnStartCheckbox.addEventListener('change', onLoadSwitchChange, true)
+initContent();
+loadOnStartCheckbox.addEventListener('click', onChangeCheckEvents, true);
+textSelectionCheckbox.addEventListener('click', onChangeCheckEvents, true);
+scrollbarCheckbox.addEventListener('click', onChangeCheckEvents, true);

firefoxThemes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doki-theme-firefox",
-  "version": "12.2.0",
+  "version": "13.1.0",
   "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/index.html

@@ -12,7 +12,7 @@
 <header class="popup-header">
   <h1>Doki Theme</h1>
 </header>
-<img alt="doki theme's inspirational logo" src="images/symbol.png"/>
+<img id="doki_heart" alt="doki theme's inspirational logo" src="images/symbol.png"/>
 <label for="waifus"></label>
 <select id="waifus" name="waifus">
   <option value="none">&hearts; Choose a waifu &hearts;</option>