Merge remote-tracking branch 'upstream/master'

Author: liamwhite

assets/css/views/tags.css

@@ -40,7 +40,7 @@
     Uncomment 'Courier New' below to test it.
   */
   font-weight: bold;
-  font-family: /* "Courier New", */ "Consolas", "Droid Sans Mono", "Noto Sans Mono", monospace;
+  font-family: /* "Courier New" */ "Consolas", "DejaVu Sans Mono", "Droid Sans Mono", "Noto Sans Mono", monospace;
   background: var(--autocomplete-background);
 
   /* Borders */

assets/eslint.config.js

@@ -294,7 +294,7 @@ export default tsEslint.config(
         'error',
         {
           // Custom `expectStuff()` functions must also count as assertions.
-          assertFunctionNames: ['expect*', '*.expect*'],
+          assertFunctionNames: ['expect*', '*.expect*', 'assert*'],
         },
       ],
     },

assets/js/autocomplete/__tests__/context.ts

@@ -6,7 +6,7 @@ import { fireEvent } from '@testing-library/dom';
 import { assertNotNull } from '../../utils/assert';
 import { TextInputElement } from '../input';
 import store from '../../utils/store';
-import { GetTagSuggestionsResponse } from 'autocomplete/client';
+import { GetTagSuggestionsResponse, TagSuggestion } from 'autocomplete/client';
 
 /**
  * A reusable test environment for autocompletion tests. Note that it does no
@@ -44,27 +44,30 @@ export class TestContext {
       }
 
       const url = new URL(request.url);
-      if (url.searchParams.get('term')?.toLowerCase() !== 'mar') {
-        const suggestions: GetTagSuggestionsResponse = { suggestions: [] };
-        return JSON.stringify(suggestions);
-      }
+      const term = url.searchParams.get('term');
+
+      const termLower = assertNotNull(term).toLowerCase();
+
+      const fakeSuggestions: TagSuggestion[] = [
+        {
+          alias: 'marvelous',
+          canonical: 'beautiful',
+          images: 30,
+        },
+        {
+          canonical: 'mare',
+          images: 20,
+        },
+        {
+          canonical: 'market',
+          images: 10,
+        },
+      ];
 
       const suggestions: GetTagSuggestionsResponse = {
-        suggestions: [
-          {
-            alias: 'marvelous',
-            canonical: 'beautiful',
-            images: 30,
-          },
-          {
-            canonical: 'mare',
-            images: 20,
-          },
-          {
-            canonical: 'market',
-            images: 10,
-          },
-        ],
+        suggestions: fakeSuggestions.filter(suggestion =>
+          (suggestion.alias || suggestion.canonical).startsWith(termLower),
+        ),
       };
 
       return JSON.stringify(suggestions);

assets/js/autocomplete/__tests__/server-side-completions/debouncing.spec.ts

@@ -0,0 +1,71 @@
+import { init } from '../context';
+
+it('ignores the autocompletion results if Escape was pressed', async () => {
+  const ctx = await init();
+
+  // First request for the local autocomplete index was done
+  expect(fetch).toHaveBeenCalledTimes(1);
+
+  await Promise.all([ctx.setInput('mar'), ctx.keyDown('Escape')]);
+
+  // The input must be empty because the user typed `mar` and pressed `Escape` right after that
+  ctx.expectUi().toMatchInlineSnapshot(`
+    {
+      "input": "mar<>",
+      "suggestions": [],
+    }
+  `);
+
+  // No new requests must've been sent because the input was debounced early
+  expect(fetch).toHaveBeenCalledTimes(1);
+
+  await ctx.setInput('mar');
+
+  ctx.expectUi().toMatchInlineSnapshot(`
+    {
+      "input": "mar<>",
+      "suggestions": [
+        "marvelous → beautiful  30",
+        "mare  20",
+        "market  10",
+      ],
+    }
+  `);
+
+  // Second request for the server-side suggestions.
+  expect(fetch).toHaveBeenCalledTimes(2);
+
+  ctx.setInput('mare');
+
+  // After 300 milliseconds the debounce threshold is over, and the server-side
+  // completions request is issued.
+  vi.advanceTimersByTime(300);
+
+  await ctx.keyDown('Escape');
+
+  expect(fetch).toHaveBeenCalledTimes(3);
+
+  ctx.expectUi().toMatchInlineSnapshot(`
+    {
+      "input": "mare<>",
+      "suggestions": [],
+    }
+  `);
+
+  ctx.setInput('mare');
+
+  // Make sure that the user gets the results immediately without any debouncing (0 ms)
+  await vi.advanceTimersByTimeAsync(0);
+
+  ctx.expectUi().toMatchInlineSnapshot(`
+    {
+      "input": "mare<>",
+      "suggestions": [
+        "mare  20",
+      ],
+    }
+  `);
+
+  // The results must come from the cache, so no new fetch calls must have been made
+  expect(fetch).toHaveBeenCalledTimes(3);
+});

assets/js/autocomplete/__tests__/server-side-completions.spec.ts renamed to assets/js/autocomplete/__tests__/server-side-completions/smoke.spec.ts

@@ -1,4 +1,4 @@
-import { init } from './context';
+import { init } from '../context';
 
 it('requests server-side autocomplete if local autocomplete returns no results', async () => {
   const ctx = await init();

assets/js/autocomplete/index.ts

@@ -229,18 +229,23 @@ class Autocomplete {
       // We use this method instead of the `focusout` event because this way it's
       // easier to work in the developer tools when you want to inspect the element.
       // When you inspect it, a `focusout` happens.
-      this.popup.hide();
+      this.hidePopup('The user clicked away');
       this.input = null;
     }
   }
 
+  hidePopup(reason: string) {
+    this.serverSideTagSuggestions.abortLastSchedule(`[Autocomplete] Popup was hidden. ${reason}`);
+    this.popup.hide();
+  }
+
   onKeyDown(event: KeyboardEvent) {
     if (!this.isActive() || this.input.element !== event.target) {
       return;
     }
     if ((event.key === ',' || event.code === 'Enter') && this.input.type === 'single-tag') {
-      // Coma means the end of input for the current tag in single-tag mode.
-      this.popup.hide();
+      // Comma/Enter mean the end of input for the current tag in single-tag mode.
+      this.hidePopup(`The user accepted the existing input via key: '${event.key}', code: '${event.code}'`);
       return;
     }
 
@@ -265,7 +270,7 @@ class Autocomplete {
         return;
       }
       case 'Escape': {
-        this.popup.hide();
+        this.hidePopup('User pressed "Escape"');
         return;
       }
       case 'ArrowLeft':
@@ -340,7 +345,14 @@ class Autocomplete {
     // brief moment of silence for the user without the popup before they type
     // something else, otherwise we'd show some more completions for the current term.
     this.input.element.focus();
-    this.popup.hide();
+
+    // Technically no server-side suggestion request can be in flight at this point.
+    // If the user managed to accept a suggestion, it means the user already got
+    // presented with the results of auto-completions, so there is nothing in-flight.
+    //
+    // Although, we don't make this a hard assertion just in case, to make sure this
+    // code is tolerant to any bugs in the described assumption.
+    this.hidePopup('The user accepted the existing suggestion');
   }
 
   updateInputWithSelectedValue(this: ActiveAutocomplete, suggestion: Suggestion) {

assets/js/burger.ts

@@ -53,19 +53,24 @@ export function setupBurgerMenu() {
 
   copyUserLinksTo(burger);
 
-  toggle.addEventListener('click', event => {
-    event.stopPropagation();
-    event.preventDefault();
+  document.addEventListener('click', event => {
+    if (!(event.target instanceof Node)) {
+      return;
+    }
 
-    if (content.classList.contains('open')) {
-      close(burger, content, body, root);
-    } else {
-      open(burger, content, body, root);
+    if (toggle.contains(event.target)) {
+      event.preventDefault();
+
+      if (content.classList.contains('open')) {
+        close(burger, content, body, root);
+      } else {
+        open(burger, content, body, root);
+      }
+
+      return;
     }
-  });
 
-  content.addEventListener('click', () => {
-    if (content.classList.contains('open')) {
+    if (content.contains(event.target) && content.classList.contains('open')) {
       close(burger, content, body, root);
     }
   });

assets/js/interactions.js

@@ -19,7 +19,13 @@ const endpoints = {
 
 const spoilerDownvoteMsg = 'Neigh! - Remove spoilered tags from your filters to downvote from thumbnails';
 
-/* Quick helper function to less verbosely iterate a QSA */
+/**
+ * Quick helper function to less verbosely iterate a QSA
+ *
+ * @param {string} id
+ * @param {string} selector
+ * @param {(node: HTMLElement) => void} cb
+ */
 function onImage(id, selector, cb) {
   [].forEach.call(document.querySelectorAll(`${selector}[data-image-id="${id}"]`), cb);
 }
@@ -145,14 +151,6 @@ function loadInteractions() {
 
       icon.setAttribute('title', spoilerDownvoteMsg);
       a.classList.add('disabled');
-      a.addEventListener(
-        'click',
-        event => {
-          event.stopPropagation();
-          event.preventDefault();
-        },
-        true,
-      );
     });
   });
 }
@@ -163,6 +161,10 @@ const targets = {
     interact('vote', imageId, 'DELETE').then(() => resetVoted(imageId));
   },
   '.interaction--downvote.active'(imageId) {
+    if (window.booru.imagesWithDownvotingDisabled.includes(imageId)) {
+      return;
+    }
+
     interact('vote', imageId, 'DELETE').then(() => resetVoted(imageId));
   },
   '.interaction--fave.active'(imageId) {
@@ -180,6 +182,10 @@ const targets = {
     });
   },
   '.interaction--downvote:not(.active)'(imageId) {
+    if (window.booru.imagesWithDownvotingDisabled.includes(imageId)) {
+      return;
+    }
+
     interact('vote', imageId, 'POST', { up: false }).then(() => {
       resetVoted(imageId);
       showDownvoted(imageId);

assets/js/utils/__tests__/suggestion-view.spec.ts

@@ -61,7 +61,16 @@ describe('Suggestions', () => {
       [popup, input] = mockBaseSuggestionsPopup();
 
       expect(document.querySelector('.autocomplete')).toBeInstanceOf(HTMLElement);
-      expect(popup.isHidden).toBe(false);
+      assert(popup.isHidden);
+    });
+
+    it('should hide the popup when there are no suggestions to show', () => {
+      [popup, input] = mockBaseSuggestionsPopup();
+
+      popup.setSuggestions({ history: [], tags: [] });
+      popup.showForElement(input);
+
+      assert(popup.isHidden);
     });
 
     it('should render suggestions', () => {

assets/js/utils/suggestions-view.ts

@@ -321,6 +321,13 @@ export class SuggestionsPopupComponent {
   }
 
   showForElement(targetElement: HTMLElement) {
+    if (this.items.length === 0) {
+      // Hide the popup because there are no suggestions to show. We have to do it
+      // explicitly, because a border is still rendered even for an empty popup.
+      this.hide();
+      return;
+    }
+
     this.container.style.position = 'absolute';
     this.container.style.left = `${targetElement.offsetLeft}px`;