merge: refactor into master

Frewacom · Oct 26, 2020 · 5a2ca53 · 5a2ca53
2 parents 9223eef + bb49ec4
commit 5a2ca53
Show file tree

Hide file tree

Showing 44 changed files with 4,635 additions and 2,482 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 /artifacts
 /daemon/
 /dist
+.eslintcache
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Pywalfox",
-    "version": "2.0.4",
+    "version": "2.0.5",
     "description": "Dyanmic theming of the browser using your pywal colors",
     "browser_specific_settings": {
         "gecko": {
@@ -36,42 +36,42 @@
         "fetch_pywal_colors": {
             "description": "Fetches your Pywal colors and updates your browser theme",
             "suggested_key": {
-              "default": "Ctrl+Shift+F",
-              "mac": "MacCtrl+Shift+F"
+              "default": "Ctrl+Alt+F",
+              "mac": "MacCtrl+Alt+F"
             }
         },
         "disable_theme": {
             "description": "Disables the Pywalfox theme",
             "suggested_key": {
-              "default": "Ctrl+Shift+R",
-              "mac": "MacCtrl+Shift+R"
+              "default": "Ctrl+Alt+R",
+              "mac": "MacCtrl+Alt+R"
             }
         },
         "enable_dark_mode": {
             "description": "Enables the Pywalfox Dark mode",
             "suggested_key": {
-              "default": "Ctrl+Shift+D",
-              "mac": "MacCtrl+Shift+D"
+              "default": "Ctrl+Alt+D",
+              "mac": "MacCtrl+Alt+D"
             }
         },
         "enable_light_mode": {
             "description": "Enables the Pywalfox Light mode",
             "suggested_key": {
-              "default": "Ctrl+Shift+L",
-              "mac": "MacCtrl+Shift+L"
+              "default": "Ctrl+Alt+L",
+              "mac": "MacCtrl+Alt+L"
             }
         },
         "enable_auto_mode": {
             "description": "Enables the Pywalfox Auto mode",
             "suggested_key": {
-              "default": "Ctrl+Shift+A",
-              "mac": "MacCtrl+Shift+A"
+              "default": "Ctrl+Alt+A",
+              "mac": "MacCtrl+Alt+A"
             }
         },
         "_execute_browser_action": {
             "suggested_key": {
-              "default": "Ctrl+Shift+P",
-              "mac": "MacCtrl+Shift+P"
+              "default": "Ctrl+Alt+P",
+              "mac": "MacCtrl+Alt+P"
             }
         }
     },

diff --git a/src/ui/settings.html → extension/ui/settings.html b/src/ui/settings.html → extension/ui/settings.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Pywalfox - Settings</title>
-    <link rel="stylesheet" href="./bundle.min.css">
+    <link rel="stylesheet" href="../dist/styles.bundle.css">
   </head>
   <body>
     <div class="wrapper">
@@ -15,10 +15,10 @@
             <h1 id="logo">Pywalfox<span id="version"></span></h1>
           </div>
           <div class="box" id="header-buttons">
-            <button class="btn btn-default btn-header margin-right-sm" id="disable">Disable theme</button>
+            <button class="btn btn-header margin-right-sm" id="disable">Disable theme</button>
             <button class="btn btn-primary btn-header" id="fetch">Fetch Pywal colors</button>
             <div class="separator"></div>
-            <button class="btn btn-default btn-header dialog-arrow" id="theme-select"></button>
+            <button class="btn btn-header dialog-arrow" id="theme-select"></button>
           </div>
         </div>
         <aside class="dialog" id="themepicker">
@@ -69,19 +69,33 @@ <h1 id="logo">Pywalfox<span id="version"></span></h1>
             <i icon="chevron"></i>
           </div>
           <div class="card-content column expand">
+            <div class="setting row expand space-between v-center no-highlight">
+              <div class="box column align-left">
+                <p class="setting-title">Fetch colors on startup</p>
+                <p class="setting-description">Will automatically re-fetch pywal colors from native app on Firefox startup</p>
+              </div>
+              <button class="btn btn-default btn-fixed-width" data-option="fetchOnStartup">No</button>
+            </div>
+            <!-- <div class="setting row expand space-between v-center no-highlight"> -->
+            <!--   <div class="box column align-left"> -->
+            <!--     <p class="setting-title">Darkreader integration</p> -->
+            <!--     <p class="setting-description">Use your pywal colors on all websites supported by Darkreader</p> -->
+            <!--   </div> -->
+            <!--   <button class="btn btn-default btn-fixed-width" data-option="darkreader">No</button> -->
+            <!-- </div> -->
             <div class="setting row expand space-between v-center no-highlight">
               <div class="box column align-left">
                 <p class="setting-title">Use DuckDuckGo theme?</p>
                 <p class="setting-description">Applies matching theme to all DuckDuckGo-pages</p>
               </div>
-              <button class="btn btn-darker" data-option="duckduckgo">No</button>
+              <button class="btn btn-default btn-fixed-width" data-option="duckduckgo">No</button>
             </div>
             <div class="setting row expand space-between v-center no-highlight" id="user-chrome-option">
               <div class="box column align-left">
                 <p class="setting-title">Use included userChrome.css?</p>
                 <p class="setting-description">Bold text, styled dropdown and context menus</p>
               </div>
-              <button class="btn btn-darker" data-option="userChrome" async>No</button>
+              <button class="btn btn-default btn-fixed-width" data-option="userChrome" async>No</button>
             </div>
             <div class="setting row expand space-between v-center indent no-highlight" id="font-size-option">
               <div class="box column align-left">
@@ -95,7 +109,7 @@ <h1 id="logo">Pywalfox<span id="version"></span></h1>
                 <p class="setting-title">Use included userContent.css</p>
                 <p class="setting-description">Globally hides the page scrollbar</p>
               </div>
-              <button class="btn btn-darker" data-option="userContent" async>No</button>
+              <button class="btn btn-default btn-fixed-width" data-option="userContent" async>No</button>
             </div>
             <div class="setting row expand space-between v-center no-highlight" id="auto-time-interval-option">
               <div class="box column align-left">
@@ -119,8 +133,7 @@ <h1 id="logo">Pywalfox<span id="version"></span></h1>
           </div>
           <div class="card-content card-content-header row expand v-center space-between sticky">
             <div class="box">
-              <button class="btn btn-primary btn-sm margin-right-sm" id="palette-template-save">Save palette</button>
-              <button class="btn btn-lighter btn-sm margin-right-sm" id="palette-template-current">Load from current</button>
+              <button class="btn btn-primary btn-sm margin-right-sm" id="palette-template-current">Load from current</button>
               <button class="btn btn-lighter btn-sm" id="palette-template-reset">Reset to default</button>
             </div>
             <button class="btn btn-lighter btn-sm btn-h-sm" data-help="palette-template-help">
@@ -134,6 +147,8 @@ <h3 class="card-help-title">Creating a custom palette</h3>
               The palette is a collection of Pywal colors and it is generated when "Fetch Pywal colors" is clicked.
               A custom palette template allows you to manually select which Pywal colors should be used for the
               background, text, etc.
+              <br></br>
+              Your changes are <b>persistent</b> between fetches and the current theme mode.
               <br><br>
               The easiest way to create a palette template is to select colors using the "Palette" section above and then
               click "Load from current" here to automatically grab the selected colors from the palette, thus generating
@@ -170,7 +185,6 @@ <h3 class="card-help-title">Creating a custom palette</h3>
           </div>
           <div class="card-content card-content-header row expand v-center space-between sticky">
             <div class="box">
-              <button class="btn btn-primary btn-sm margin-right-sm" id="theme-template-save">Save template</button>
               <button class="btn btn-lighter btn-sm" id="theme-template-reset">Reset to default</button>
             </div>
             <button class="btn btn-lighter btn-sm btn-h-sm" data-help="theme-template-help">
@@ -184,14 +198,16 @@ <h3 class="card-help-title">Creating a custom theme template</h3>
               Custom theme templates allow you to customize the color of each browser element individually by associating
               palette colors with specific elements.
               <br><br>
+              Your changes are <b>persistent</b> between fetches and the current theme mode.
+              <br><br>
               Not all elements are customizable since we are limited by the properties provided by the Theme API.<br>
               For further customization, use the included userContent and userChrome (or your own).
               <br><br>
               Please note that the light and dark mode palette templates are <b>separate</b>.
               You are always modifying the template for the currently selected theme mode.
             </p>
             <div class="box expand row v-center align-left">
-              <a class="row v-center margin-top btn btn-sm btn-flat margin-right-sm"
+              <a class="row v-center margin-top btn btn-lighter btn-sm margin-right-sm"
                  href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors"
                  target="_blank"
                  rel="noopener noreferrer">
@@ -250,6 +266,6 @@ <h3 class="card-help-title">Creating a custom theme template</h3>
         </template>
       </section>
     </div>
-    <script src="./settings.min.js"></script>
+    <script src="../dist/settings.bundle.js"></script>
   </body>
 </html>
diff --git a/src/ui/update.html → extension/ui/update.html b/src/ui/update.html → extension/ui/update.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Pywalfox - Update/install required</title>
-    <link rel="stylesheet" href="./bundle.min.css">
+    <link rel="stylesheet" href="../dist/styles.bundle.css">
   </head>
   <body>
     <div class="wrapper">
@@ -26,14 +26,18 @@ <h3 class="card-help-title">Why am I getting this?</h3>
               If you encounter bugs with the new version, refer to the open issues on GitHub (or create a new one).<br>
             </p>
             <div class="row v-center margin-top-sm">
-              <a class="row v-center btn btn-sm btn-flat margin-right-sm" href="https://github.com/frewacom/pywalfox/issues" target="_blank" rel="noopener noreferrer">
+              <a class="row v-center btn btn-sm btn-lighter margin-right-sm" href="https://github.com/frewacom/pywalfox/issues" target="_blank" rel="noopener noreferrer">
                 <i icon="external-link"></i>
                 GitHub issues
               </a>
-              <a class="row v-center btn btn-sm btn-flat" href="https://github.com/frewacom/pywalfox#installation" target="_blank" rel="noopener noreferrer">
+              <a class="row v-center btn btn-sm btn-lighter margin-right-sm" href="https://github.com/frewacom/pywalfox#installation" target="_blank" rel="noopener noreferrer">
                 <i icon="external-link"></i>
                 Installation guide
               </a>
+              <a class="row v-center btn btn-sm btn-lighter" href="https://github.com/frewacom/pywalfox#troubleshooting" target="_blank" rel="noopener noreferrer">
+                <i icon="external-link" class="icon-md"></i>
+                Troubleshooting guide
+              </a>
             </div>
           </div>
           <div class="card-content card-content-lg-padding padding-v-lg column expand">
@@ -46,15 +50,11 @@ <h3 class="card-help-title">Why am I getting this?</h3>
             </code>
             <div class="box row expand v-center margin-bottom-sm margin-top">
               <button class="btn btn-primary expand margin-right-sm" id="disable-button">Do not remind me again</button>
-              <a class="btn btn-lighter expand" href="https://github.com/frewacom/pywalfox#troubleshooting">
-                <i icon="external-link" class="icon-md"></i>
-                Troubleshooting guide
-              </a>
             </div>
           </div>
         </section>
       </main>
     </div>
-    <script src="./update.min.js"></script>
+    <script src="../dist/update.bundle.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pywalfox",
-  "version": "2.0.0",
+  "version": "2.0.5",
   "description": "Extension for dyanmic theming of your browser using your Pywal colors ",
   "repository": {
     "type": "git",
@@ -14,25 +14,40 @@
   "scripts": {
     "watch": "npx rollup -cw",
     "browser": "web-ext run",
+    "web-ext-lint": "web-ext lint",
+    "eslint": "npx eslint ./src/**/*.ts",
+    "eslint-watch": "npx esw -w --cache --color --ext .ts",
+    "eslint-fix": "npx eslint --fix ./src/**/*.ts",
+    "tests": "npx jest --verbose",
     "debug": "run-p watch browser",
-    "build": "run-s build:* lint",
+    "build": "run-s build:* tests eslint web-ext-lint",
     "build:compile": "npx rollup -c",
     "build:dist": "web-ext build",
-    "build:source": "bestzip artifacts/source.zip extension src tsconfig.json package.json yarn.lock rollup.config.js LICENSE README.md",
-    "lint": "web-ext lint"
+    "build:source": "bestzip artifacts/source.zip extension src tsconfig.json package.json yarn.lock rollup.config.js LICENSE README.md"
   },
   "devDependencies": {
     "@types/firefox-webext-browser": "^70.0.1",
     "bestzip": "^2.1.7",
+    "@types/jest": "^26.0.10",
+    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "@typescript-eslint/parser": "^3.9.1",
+    "bestzip": "^2.1.5",
+    "eslint": "7.2.0",
+    "eslint-config-airbnb-typescript": "^9.0.0",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-watch": "^7.0.0",
+    "jest": "^26.4.1",
     "npm-run-all": "^4.1.5",
     "postcss-import": "^12.0.1",
     "postcss-url": "^8.0.0",
     "rollup": "^2.10.5",
+    "rollup-plugin-analyzer": "^3.3.0",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-typescript-paths": "^1.2.2",
     "rollup-plugin-typescript2": "^0.27.1",
+    "ts-jest": "^26.2.0",
     "tslib": "^2.0.0",
     "typescript": "^3.9.3",
     "web-ext": "^4.1.0"
@@ -49,5 +64,49 @@
         "about:debugging"
       ]
     }
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "moduleNameMapper": {
+      "^@ui/(.*)$": [ "<rootDir>/src/ui/$1" ],
+      "^@pywalfox/(.*)$": [ "<rootDir>/src/$1" ],
+      "^@utils/(.*)$": [ "<rootDir>/src/utils/$1" ],
+      "^@config/(.*)$": [ "<rootDir>/src/config/$1" ],
+      "^@definitions": [ "<rootDir>/src/definitions" ],
+      "^@communication/(.*)$": [ "<rootDir>/src/communication/$1" ]
+    }
+  },
+  "eslintConfig": {
+    "extends": "airbnb-typescript/base",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "env": {
+      "es2017": true,
+      "browser": true,
+      "webextensions": true
+    },
+    "rules": {
+      "no-console": "off",
+      "no-param-reassign": "off",
+      "no-prototype-builtins": "off",
+      "class-methods-use-this": "off",
+      "object-curly-newline": "off",
+      "no-plusplus": [
+        "warn",
+        {
+          "allowForLoopAfterthoughts": true
+        }
+      ],
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/lines-between-class-members": "off",
+      "@typescript-eslint/no-unused-expressions": [
+        "warn",
+        {
+          "allowShortCircuit": true
+        }
+      ]
+    }
   }
 }