Add local cache for history (#124)

* Remove sass compiling of SCSS, now write plain CSS * Automatically updating version in manifest files * Adding meta / titles to make HTML validation more happy * CSS reset also options and tips * Introduce history cache (local storage) * Deduplicate history in searchData * Deduplicate history in searchDatags * Simplify score for more recent visited * Fetch history always since last fetch * Fetch history always since last fetch * Add tabs to h (history) search * Cleanup displayDateAdded as its not very useful * historyIgnoreList is now contains instead of startsWith search * Fixing and improving cypress e2e tests --------- Co-authored-by: Simon Heimler <[email protected]>
Fannon · Aug 24, 2024 · 03b8146 · 03b8146
1 parent 9867746
commit 03b8146
Show file tree

Hide file tree

Showing 15 changed files with 173 additions and 213 deletions.
diff --git a/README.md b/README.md
@@ -42,9 +42,9 @@ For a list of recent changes, see [CHANGELOG.md](./CHANGELOG.md).
     - Supports AND search, e.g. search for `#github #pr` to only get results which have both tags
   - Start your query with `~`: only **bookmarks within the folder** will be returned (exact "starts with" search)
     - Supports AND search, e.g. search for `~Sites ~Blogs` to only get results which have both tags
-  - Start your query with `t ` (including space): only **tabs** will be searched.
   - Start your query with `b ` (including space): only **bookmarks** will be searched.
-  - Start your query with `h ` (including space): only **history** will be searched.
+  - Start your query with `h ` (including space): only **history** and **open tabs** will be searched.
+  - Start your query with `t ` (including space): only **open tabs** will be searched.
   - Start your query with `s ` (including space): only **search engines** will be proposed.
   - Custom Aliases:
     - The option `customSearchEngines` allows you to define your own search mode aliases
@@ -80,31 +80,27 @@ An exemplary user config can look like the following example:
 ```yaml
 searchStrategy: fuzzy
 displayVisitCounter: true
-displayDateAdded: true
+historyMaxItems: 2048 # Increase max number of browser history items to load
 ```
 
-If you have troubles with performance, here are a few options that might help. Feel free to pick & choose and tune the values to your situation:
+If you have **troubles with performance**, here are a few options that might help. Feel free to pick & choose and tune the values to your situation. In particular `historyMaxItems` and how many bookmarks you have will impact init and search performance.
+
+Here is a suggestion for low-performance machines:
 
 ```yaml
-searchStrategy: precise
-searchMinMatchCharLength: 2
-displaySearchMatchHighlight: false,
-searchMaxResults: 20
-historyMaxItems: 200
+searchStrategy: precise # Precise search is faster than fuzzy search.
+searchMinMatchCharLength: 2 # Start searching only when at least 2 characters are entered
+displaySearchMatchHighlight: false, # Not highlighting search matches improves render performance.
+searchMaxResults: 20 # Number of search results can be further limited
+historyMaxItems: 512 # Number of browser history items can be further reduced
 ```
 
-> Precise search is faster than fuzzy search.
-> Start searching only when at least 2 characters are entered
-> Highlighting search matches takes some effort, this can be disabled.
-> Number of search results can be further limited
-> Number of browser history items can be further reduced
-
 Or a more advanced example:
 
 ```yaml
 searchStrategy: precise
 historyDaysAgo: 14
-historyMaxItems: 1200
+historyMaxItems: 2048
 historyIgnoreList:
   - http://localhost
   - http://127.0.0.1

diff --git a/cypress/e2e/folders.cy.js b/cypress/e2e/folders.cy.js
@@ -19,7 +19,7 @@ describe('Folder View', () => {
         .should('have.value', '~Tools')
       cy.get('#result-list')
         .should('not.have.length', 0)
-        .find('[x-original-id=9]')
+        .find('[x-original-id=6]')
       cy.get('#result-list')
         .find('li.bookmark')
         .checkNoErrors()

diff --git a/cypress/e2e/options.cy.js b/cypress/e2e/options.cy.js
@@ -14,35 +14,35 @@ describe('Options View', () => {
       const newConfig = JSON.stringify(
         {
           displayVisitCounter: true,
-          displayDateAdded: true,
         },
         null,
         2,
       )
       cy.get('#user-config')
         .clear()
+      cy.get('#user-config')
         .should('have.value', '')
+      cy.get('#user-config')
         .type(newConfig)
       cy.get('#edit-options-save')
         .click()
-        .visit('/options.html')
+      cy.visit('/options.html')
       cy.get('#user-config')
         .should('include.value', 'displayVisitCounter')
-        .should('include.value', 'displayDateAdded')
         .checkNoErrors()
     })
     it('can save a new user config in YAML format', () => {
-      const newConfig = `displayVisitCounter: true\ndisplayDateAdded: true`
+      const newConfig = `displayVisitCounter: true\n`
       cy.get('#user-config')
         .clear()
+      cy.get('#user-config')
         .should('have.value', '')
         .type(newConfig)
       cy.get('#edit-options-save')
         .click()
-        .visit('/options.html')
+      cy.visit('/options.html')
       cy.get('#user-config')
         .should('include.value', 'displayVisitCounter')
-        .should('include.value', 'displayDateAdded')
         .checkNoErrors()
     })
   })

diff --git a/cypress/e2e/search.cy.js b/cypress/e2e/search.cy.js
@@ -1,6 +1,3 @@
-const interactionTime = 500
-const initTime = 500
-
 describe('Search View', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -42,6 +39,7 @@ describe('Search View', () => {
         })
       cy.get('#search-input')
         .type('{uparrow}')
+      // eslint-disable-next-line cypress/unsafe-to-chain-command
       cy.get('#result-list li')
         .each((el, index) => {
           if (index === 0) {
@@ -59,34 +57,36 @@ describe('Search View', () => {
       cy.get('#search-input')
         .type(`JSON`)
       cy.get('#result-list')
-        .find('[x-original-id=9]')
+      .find('[x-original-id=7]') // Bookmark item
+      cy.get('#result-list')
+      .find('[x-original-id=5]') // Tab item
+      cy.get('#result-list')
+        .find('[x-original-id=6]') // History item
+      cy.get('#result-list')
+        .find('[x-original-id=9]') // Search engine
 
-        // Check that we have a result with a title returned
-      cy.get('[x-original-id=9]')
+      // Check that we have a result with a title returned
+      cy.get('[x-original-id=7]')
         .find('.title')
         .contains('JSON')
 
-        // Check that we have a result with an URL returned
-      cy.get('[x-original-id=9]')
+      // Check that we have a result with an URL returned
+      cy.get('[x-original-id=7]')
         .find('.url')
         .contains('json')
 
-        // expect #json tag
-      cy.get('[x-original-id=9]')
+      // expect #json tag
+      cy.get('[x-original-id=7]')
         .find('span.tags')
         .contains('#json')
 
-        // expect ~Tools folder
-      cy.get('[x-original-id=9]')
+      // expect ~Tools folder
+      cy.get('[x-original-id=7]')
         .find('span.folder')
         .contains('~Tools')
 
-        // expect lastVisited badge
-      cy.get('[x-original-id=9]')
-        .find('span.last-visited')
-
-        // expect score badge
-      cy.get('[x-original-id=9]')
+      // expect score badge
+      cy.get('[x-original-id=7]')
         .find('span.score')
 
         .checkNoErrors()
@@ -98,11 +98,10 @@ describe('Search View', () => {
       cy.get('#search-approach-toggle')
       cy.get('#search-input')
         .type(`JSON`)
-        .wait(initTime)
         // Make sure we get result of all types
       cy.get('#result-list')
         .should('not.have.length', 0)
-        .find('[x-original-id=9]')
+        .find('[x-original-id=7]')
       cy.get('#result-list')
         .find('li.bookmark')
       cy.get('#result-list')
@@ -117,7 +116,6 @@ describe('Search View', () => {
       cy.get('#search-approach-toggle')
       cy.get('#search-input')
         .type(`äe指事字₽`)
-        .wait(initTime)
         // Only make sure that search doesn't crash
       cy.get('#result-list')
         .should('not.have.length', 0)
@@ -128,10 +126,10 @@ describe('Search View', () => {
   describe('Fuzzy search', () => {
     it('can switch to fuzzy search successfully', () => {
       cy.get('#search-approach-toggle')
-        .wait(interactionTime)
         .contains('PRECISE')
+      cy.get('#search-approach-toggle')
         .click()
-        .wait(interactionTime)
+      cy.get('#search-approach-toggle')
         .contains('FUZZY')
       cy.get('#search-input')
         .type(`JSON`)
@@ -141,18 +139,17 @@ describe('Search View', () => {
 
     it('can execute a fuzzy search successfully', () => {
       cy.get('#search-approach-toggle')
-        .wait(interactionTime)
         .contains('PRECISE')
+      cy.get('#search-approach-toggle')
         .click()
-        .wait(interactionTime)
+      cy.get('#search-approach-toggle')
         .contains('FUZZY')
-        .wait(interactionTime)
       cy.get('#search-input')
         .type(`JSON`)
       cy.get('li.bookmark')
       cy.get('#result-list')
         .should('not.have.length', 0)
-        .find('[x-original-id=9]')
+        .find('[x-original-id=7]')
         // Check that we have all kinds of results
       cy.get('#result-list')
         .find('li.bookmark')
@@ -168,15 +165,13 @@ describe('Search View', () => {
 
   it('can execute a precise search with non-ASCII chars successfully', () => {
     cy.get('#search-approach-toggle')
-      .wait(interactionTime)
       .contains('PRECISE')
+    cy.get('#search-approach-toggle')
       .click()
-      .wait(interactionTime)
+    cy.get('#search-approach-toggle')
       .contains('FUZZY')
-      .wait(interactionTime)
     cy.get('#search-input')
       .type(`äe指事字₽`)
-      .wait(initTime)
       // Only make sure that search doesn't crash
     cy.get('#result-list')
       .should('not.have.length', 0)
@@ -190,7 +185,7 @@ describe('Search View', () => {
       cy.get('#result-list')
         .find('li.bookmark')
       cy.get('#result-list')
-        .find('[x-original-id=9]')
+        .find('[x-original-id=7]')
       cy.get('.tab')
         .should('not.exist')
       cy.get('.history')
@@ -201,7 +196,7 @@ describe('Search View', () => {
       cy.get('#search-input')
         .type(`b JSON`)
       cy.get('#result-list')
-        .find('[x-original-id=9]')
+        .find('[x-original-id=7]')
       cy.get('.tab')
         .should('not.exist')
       cy.get('.history')
@@ -219,24 +214,24 @@ describe('Search View', () => {
       cy.get('#result-list')
         .find('li.history')
       cy.get('#result-list')
-        .find('[x-original-id=9]')
+        .find('[x-original-id=6]')
       cy.get('.tab')
         .should('not.exist')
       cy.get('.bookmark')
         .should('not.exist')
         .checkNoErrors()
     })
-    it('only the history results', () => {
+    it('only the history and tab results', () => {
       cy.get('#search-input')
         .type(`h JSON`)
       cy.get('#result-list')
-        .find('[x-original-id=9]')
-      cy.get('.tab')
-        .should('not.exist')
+        .find('[x-original-id=8]') // history
+      cy.get('#result-list')
+        .find('[x-original-id=185]') // tab
       cy.get('.bookmark')
         .should('not.exist')
       cy.get('#result-counter')
-        .contains('(3)')
+        .contains('(4)')
         .checkNoErrors()
     })
   })

diff --git a/cypress/e2e/tags.cy.js b/cypress/e2e/tags.cy.js
@@ -19,7 +19,7 @@ describe('Tag View', () => {
         .should('have.value', '#json')
       cy.get('#result-list')
         .should('not.have.length', 0)
-        .find('[x-original-id=9]')
+        .find('[x-original-id=7]')
       cy.get('#result-list')
         .find('li.bookmark')
         .checkNoErrors()