Merge pull request #22 from Rayquaza01/feature

Merge Feature Branch for 1.2.0

BUILD.md

@@ -1,4 +1,4 @@
-# Building Quick Tab Switcher 1.1.0
+# Building Quick Tab Switcher 1.1.1
 
 System details:
  * Fedora 38
@@ -9,15 +9,15 @@ System details:
 
 # Building Complete Extension
 
-The source code is in `./src`. It is written in TypeScript and compiled and bundled using Parcel. "webextension-polyfill-ts" is included from the npm package.
+The source code is in `./src`. It is written in TypeScript and compiled and bundled using webpack. "webextension-polyfill" is included from the npm package.
 
 Run
 ```shell
 npm install
 npm run build:production
 npm run build:extension
 ```
-The built extension will be in `./dist` and the zipped version in `./web-ext-artifacts/quick_tab_switcher-1.1.0.zip`
+The built extension will be in `./dist` and the zipped version in `./web-ext-artifacts/quick_tab_switcher-1.1.1.zip`
 
 # Live Testing Version
 

CHANGELOG.md

@@ -1,5 +1,9 @@
-v1.0.1 - 2020-10-29
- * Convert extension to TypeScript
- * Extension now bundled with Parcel
- * Fix issue where using the arrow keys would scroll extra
- * Moved help page to a PDF
+v1.1.1 Changes
+<ul>
+<li>Fix toolbar icon not changing in dark mode</li>
+<li>Added option to automatically use theme based on system preferences (<a href="https://github.com/Rayquaza01/quick-tab-switch/issues/17">#17</a>)</li>
+<li>Added option to automatically focus search bar when opening the popup (<a href="https://github.com/Rayquaza01/quick-tab-switch/issues/18">#18</a>)</li>
+<li>[Backend] Build script using webpack instead of parcel</li>
+</ul>
+
+**Full Changelog**: <a href="https://github.com/Rayquaza01/quick-tab-switch/compare/v1.0.1...v1.1.1">v1.0.1...v1.1.1</a>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quick-tab-switcher",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {

src/OptionsInterface.ts

@@ -9,14 +9,20 @@ export enum Themes {
     DARK = "dark"
 }
 
+export enum SortModes {
+    DEFAULT = "default",
+    LAST_ACCESSED = "lastAccessed"
+}
+
 export interface OptionsInterface {
     shortcut: string;
     searchMode: SearchModes;
     caseSensitivity: boolean;
     theme: Themes;
     showDead: boolean;
     maxDead: number;
-    autofocusSearch: boolean
+    autofocusSearch: boolean;
+    sortMode: SortModes;
 }
 
 export class Options implements OptionsInterface {
@@ -27,6 +33,7 @@ export class Options implements OptionsInterface {
     showDead: boolean;
     maxDead: number;
     autofocusSearch: boolean;
+    sortMode: SortModes;
 
     constructor(obj: Partial<OptionsInterface>) {
         this.shortcut = obj.shortcut ?? "Ctrl+Shift+B";
@@ -36,5 +43,6 @@ export class Options implements OptionsInterface {
         this.showDead = obj.showDead ?? false;
         this.maxDead = obj.maxDead ?? 5;
         this.autofocusSearch = obj.autofocusSearch ?? false;
+        this.sortMode = obj.sortMode ?? SortModes.DEFAULT;
     }
 }

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Quick Tab Switcher",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A quick tab switcher for Firefox",
   "browser_specific_settings": {
     "gecko": {

src/options/index.ts

@@ -1,6 +1,6 @@
 require("./index.css");
 import browser from "webextension-polyfill";
-import { Options, SearchModes, Themes } from "../OptionsInterface";
+import { Options, SearchModes, SortModes, Themes } from "../OptionsInterface";
 
 const shortcut = document.querySelector("#shortcut") as HTMLInputElement;
 const searchMode = document.querySelector("#searchMode") as HTMLSelectElement;
@@ -9,6 +9,7 @@ const showDead = document.querySelector("#showDead") as HTMLSelectElement;
 const maxDead = document.querySelector("#maxDead") as HTMLInputElement;
 const theme = document.querySelector("#theme") as HTMLSelectElement;
 const autofocusSearch = document.querySelector("#autofocusSearch") as HTMLSelectElement;
+const sortMode = document.querySelector("#sortMode") as HTMLSelectElement;
 
 /** Loads from storage onto page */
 async function load() {
@@ -20,6 +21,7 @@ async function load() {
     showDead.value = res.showDead.toString();
     maxDead.value = res.maxDead.toString();
     autofocusSearch.value = res.autofocusSearch.toString();
+    sortMode.value = res.sortMode;
 }
 
 /** Saves from form on page to storage */
@@ -31,7 +33,8 @@ function save() {
         theme: theme.value as Themes,
         showDead: showDead.value === "true",
         maxDead: Number(maxDead.value),
-        autofocusSearch: autofocusSearch.value === "true"
+        autofocusSearch: autofocusSearch.value === "true",
+        sortMode: sortMode.value as SortModes
     });
 
     browser.storage.local.set(opt);

src/options/options.html

@@ -45,13 +45,19 @@ <h3>Recently Closed Tabs</h3>
           </div>
         </div>
         <h3>UI</h3>
-        <div>
+        <div class="option">
             Colorscheme:
             <select id="theme">
                 <option value="system">Follow System</option>
                 <option value="light">Light</option>
                 <option value="dark">Dark</option>
             </select>
+
+            Sort Tabs
+            <select id="sortMode">
+              <option value="default">Tab Order</option>
+              <option value="lastAccessed">Last Accessed</option>
+            </select>
         </div>
     </body>
 </html>

src/popup/index.ts

@@ -2,7 +2,7 @@ require("./index.css");
 import browser, { Tabs } from "webextension-polyfill";
 import { TabElement } from "./TabElement";
 import { TabList } from "./TabList";
-import { Options, Themes } from "../OptionsInterface";
+import { Options, SortModes, Themes } from "../OptionsInterface";
 
 /** List of tabs on the page */
 let tabList: TabList;
@@ -146,23 +146,27 @@ function filter(): void {
 }
 
 async function main(): Promise<void> {
+    // get options
+    const res = new Options(await browser.storage.local.get());
+
     // hide overlay if in focus
     if (document.hasFocus()) {
         overlay.style.display = "none";
     }
 
     // get tabs
     const tabs = await browser.tabs.query({ currentWindow: true });
+    if (res.sortMode === SortModes.LAST_ACCESSED) {
+        tabs.sort((a, b) => {
+            // sort based on last accessed key for tabs
+            // typecast used since ts says lastAccessed could be undefined,
+            // but according to the docs, this isn't true!
+            return (b.lastAccessed as number) - (a.lastAccessed as number);
+        });
+    }
     // create html elements from tab query
     let tabEles = tabs.map(createTabs);
 
-    // get options
-    const res = new Options(await browser.storage.local.get());
-
-    if (res.autofocusSearch) {
-        search.focus();
-    }
-
     if (res.showDead) {
         // get recently closed, with limit or unlimited if maxDead is 0
         const recentlyClosed = await browser.sessions.getRecentlyClosed(
@@ -198,6 +202,11 @@ async function main(): Promise<void> {
     }
 
     tabList = new TabList(tabEles, res.searchMode, res.caseSensitivity);
+
+    if (res.autofocusSearch) {
+        search.focus();
+        tabList.getActive().setActive = false;
+    }
 }
 
 // keyboard event

webpack.config.js

@@ -61,7 +61,8 @@ module.exports = {
                 //    toType: "dir"
                 //},
                 { from: "node_modules/webextension-polyfill/dist/browser-polyfill.min.js" },
-                { from: "node_modules/webextension-polyfill/dist/browser-polyfill.min.js.map" }
+                { from: "node_modules/webextension-polyfill/dist/browser-polyfill.min.js.map" },
+                { from: "src/help.pdf" }
             ]
         })
     ],