update to version 1.1.6

Author: Universumgames

TODOs.md

@@ -22,11 +22,12 @@
 -   ✅ Versioning
 -   ✅ Added Option to Combine Data at Import
 -   ✅ implemented hiding currently focused tab and switching to tab to the right (workaround for Firefox restriction)
--   ❌ search function
+-   ✅ search function
 -   ✅ context menu additions:
     -   ✅ expand/collapse selected folder
     -   ✅ show/hide selected item
     -   ✅ cascade expand/collapse (expand/collapse all subfolders)
+    -   ✅ search option
 -   ❌ using user installed theme as color values (firefox themes are not suited for this)
 -   ❌ Drag and Drop links into sidebar or something similar
 -   ❌ (cloud sync maybe)
@@ -36,18 +37,18 @@
 
 <small>Fixed Bug: ✅ <br> Known but not yet fixed bug: ❌</small>
 
--   ✅ 🕷️ bug when moving folder into root directory
+-   ✅ bug when moving folder into root directory
 -   ✅ warnings in sorting.ts l 10ff.
--   ✅ 🕷️ folder couldn't be deleted if it wasn't empty
--   ✅ 🕷️ "new Folder" input prompt was able to be outside of viewport and couldn't be seen
--   ✅ 🕷️ "new folder" input prompt wasn't focused when button was clicked
+-   ✅ folder couldn't be deleted if it wasn't empty
+-   ✅ "new Folder" input prompt was able to be outside of viewport and couldn't be seen
+-   ✅ "new folder" input prompt wasn't focused when button was clicked
 -   ✅ Placeholder text for renaming items/folders now to original name
 -   ✅ "Adding folder" couldn't be canceled with escape like the rename functionalities
 -   ✅ when update is installed two "HowTo" pages open up
 -   ✅ items and folders could be deleted when moved into itself/same parent directory
--   ❌ 🕷️ glitching when opening/closing folders and sites are still loading
--   ❌ 🕷️ when combining data at import the "Pinned Tab" and "Other" folder appear twice
--   ❌ fav icon data is stored with each page and not in "global" storage --> huge memory increase
+-   ❌ glitching when opening/closing folders and sites are still loading
+-   ❌ when combining data at import the "Pinned Tab" and "Other" folder appear twice
+-   ❌ fav icon data is stored with each page, should be stored in "global" storage --> increase memory efficiency
 
 ## Other ToDos
 

Updatelog.md

@@ -1,3 +1,11 @@
+Update 1.1.6:
+
+-   new features:
+    -   searching elements by name, id or url is possible
+    -   added VERY basic keyboard accessibility
+-   bugfixes:
+    -   ✅ 🕷️ elements couldn't be moved to one parent directory
+
 Update 1.1.5:
 
 -   new features:

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "eclipseTab",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "developer": {
         "name": "UniversumGames",
         "url": "https://universegame.de/"

package.json

@@ -1,11 +1,12 @@
 {
     "name": "eclipseTabs",
-    "version": "1.1.0",
+    "version": "1.1.6",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+        "lint": "vue-cli-service lint",
+        "debug": "vue-cli-service build --watch"
     },
     "repository": {
         "type": "git",

src/App.vue

@@ -8,7 +8,7 @@ import { Vue } from "vue-class-component"
 import { createEmptyData } from "./scripts/dataHandler/adder"
 import { getDataStructFromFirefox, saveDataInFirefox } from "./scripts/dataHandler/getter"
 import { updateTabs, updateTabsOnStartUp } from "./scripts/dataHandler/updater"
-import { getManifest, getTheme, registerListener, startupHandler } from "./scripts/firefoxHandler"
+import { getManifest, getTheme, registerListener, startupHandler } from "./scripts/browserHandler"
 import { ColorScheme, FirefoxTheme, tabStructData } from "./scripts/interfaces"
 import * as tabHelper from "./scripts/tabHelper"
 
@@ -101,7 +101,7 @@ export default class App extends Vue {
 
     async save() {
         await saveDataInFirefox(JSON.parse(JSON.stringify(this.eclipseData)))
-        console.log(this.eclipseData)
+        console.log("Data: ", this.eclipseData)
     }
 
     displayHowTo() {

src/assets/style/list.css

@@ -105,6 +105,16 @@
     overflow-x: hidden;
 }
 
-.element:hover {
+.element:hover,
+.element:focus {
     background-color: var(--item-bg-hover-color);
 }
+
+#addFolderNameInputContainer,
+#searchInput {
+    margin: 2ch;
+}
+
+.highlighted {
+    background-color: var(--highlighted-bg-color);
+}

src/assets/style/style.css

@@ -26,6 +26,7 @@ body {
     --button-background-hover: var(--folder-arrow-color);
     --folder-arrow-color: #f98604;
     --element-hover-color: var(--context-bg-color);
+    --highlighted-bg-color: var(--folder-arrow-color);
 }
 
 .lightmode {
@@ -41,6 +42,7 @@ body {
     --button-background-hover: var(--folder-arrow-color);
     --folder-arrow-color: #f98604;
     --element-hover-color: var(--context-bg-color);
+    --highlighted-bg-color: var(--folder-arrow-color);
 }
 
 .closed {
@@ -66,10 +68,6 @@ h3 {
     display: none;
 }
 
-#addFolderNameInputContainer {
-    margin: 2ch;
-}
-
 .noEvents {
     pointer-events: none;
 }

src/components/Bottom.vue

@@ -5,7 +5,9 @@
                 id="addFolder"
                 class="bottomElement"
                 @click="addFolderClick"
+                @keyup.enter="addFolderClick"
                 title="Need order? Create a new folder, name it and move it to andy subdirectory you want"
+                tabindex="0"
             >
                 <object
                     class="bottomElementPic noEvents"
@@ -19,7 +21,9 @@
                 id="exportData"
                 class="bottomElement"
                 @click="exportClick"
+                @keyup.enter="exportClick"
                 title="You create a backup from time to time, especially before updating the addon. Click this and the corresponding json will be displayed in a new tab"
+                tabindex="0"
             >
                 <object class="bottomElementPic noEvents" :data="coloredSVGPath + 'export.svg'" filename="export.svg" type="image/svg+xml"></object>
             </span>
@@ -28,16 +32,20 @@
                 id="importData"
                 class="bottomElement"
                 @click="importClick"
+                @keyup.enter="importClick"
                 title="Old data got deleted or you transferred your exported data from an other pc to this one? Click here to import your json data"
+                tabindex="0"
             >
                 <object class="bottomElementPic noEvents" :data="coloredSVGPath + 'import.svg'" filename="import.svg" type="image/svg+xml"></object>
             </span>
             <span
                 id="moveElements"
                 class="bottomElement"
                 @click="moveClick"
+                @keyup.enter="moveClick"
                 ref="moveBtn"
                 title="Not happy with the order? Use this to change the view so you can properly change the order of your folders or items"
+                tabindex="0"
             >
                 <object class="bottomElementPic noEvents" :data="coloredSVGPath + 'move.svg'" filename="move.svg" type="image/svg+xml"></object>
             </span>

src/components/ContextMenu.vue

@@ -7,6 +7,7 @@
                     Collapse All
                 </div>
                 <div class="contextElement" id="contextMenu_generic_expandAll" @click="this.contextMenu_generic_expandAll_handler">Expand All</div>
+                <div class="contextElement" id="contextMenu_generic_search" @click="this.contextMenu_generic_search_handler">Search</div>
             </div>
             <div ref="contextMenu_folder" id="contextMenu_folder" class="disabled">
                 <div class="contextElement" id="contextMenu_folder_rename" @click="this.contextMenu_folder_rename_handler">Rename Folder</div>
@@ -48,7 +49,8 @@ import { pinnedFolderID, unorderedFolderID } from "@/scripts/dataHandler/definit
         collapseAll: Object,
         expandAll: Object,
         contextMenuTargetChange: Object,
-        contextDataChange: Object
+        contextDataChange: Object,
+        search: null
     }
 })
 export default class ContextMenu extends Vue {
@@ -121,6 +123,10 @@ export default class ContextMenu extends Vue {
         this.$emit("expandAll")
     }
 
+    async contextMenu_generic_search_handler() {
+        this.$emit("search")
+    }
+
     async contextMenu_folder_rename_handler() {
         this.menuDataChangeEmit({
             targetElementID: this.targetID!,

src/components/Folder.vue

@@ -1,6 +1,14 @@
 <template>
     <div ref="container">
-        <div ref="dropContainer" :folderID="folderData.folderID" :index="folderData.index" class="element">
+        <div
+            ref="dropContainer"
+            :folderID="folderData.folderID"
+            :index="folderData.index"
+            :class="'element' + ' ' + (this.containedInSearchResult() ? 'highlighted' : '')"
+            tabindex="0"
+            @click="this.folderClick"
+            @keyup.enter="this.folderClick"
+        >
             <!--Dropdown icon-->
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -32,6 +40,7 @@
                     :htmlTarget="this.htmlTarget"
                     :targetElement="this.targetElement"
                     :contextData="this.contextData"
+                    :searchResults="this.searchResults"
                     v-on:save="this.save"
                     v-on:targetElementChange="this.targetElementChangePassOn"
                     v-on:renameEnd="this.renameEnd"
@@ -47,6 +56,7 @@
                     :htmlTarget="this.htmlTarget"
                     :targetElement="this.targetElement"
                     :contextData="this.contextData"
+                    :searchResults="this.searchResults"
                     v-on:save="save"
                     v-on:targetElementChange="this.targetElementChangePassOn"
                     v-on:move="this.movePassOn"
@@ -89,7 +99,8 @@ import { getFolderJSONObjectByID } from "@/scripts/dataHandler/getter"
         targetElement: Object,
         contextData: Object,
         tier: Number,
-        allreload: Function
+        allreload: Function,
+        searchResults: Array
     }
 })
 export default class Folder extends Vue {
@@ -101,6 +112,7 @@ export default class Folder extends Vue {
     contextData!: ContextMenuData
     tier: number = 0
     allreload!: Function
+    searchResults!: elementData[]
 
     icon!: HTMLElement
     renameInput!: HTMLElement
@@ -131,8 +143,6 @@ export default class Folder extends Vue {
             this.dropContainer.addEventListener("dragenter", this.dragenter_handler)
             this.dropContainer.addEventListener("dragleave", this.dragleave_handler)
         }
-        //on click
-        this.dropContainer.onclick = this.folderClick
 
         this.dropContainer.setAttribute("folderID", this.folderData.folderID)
 
@@ -187,6 +197,13 @@ export default class Folder extends Vue {
         return this.eclipseData.mode == Mode.Move
     }
 
+    containedInSearchResult(): boolean {
+        for (const element of this.searchResults) {
+            if ("folderID" in element && (element as folderData).folderID == this.folderData.folderID) return true
+        }
+        return false
+    }
+
     sendTargetElementChange() {
         this.$emit("targetElementChange", this.folderData, this.parentFolder)
     }