Refactor touch scan behavior (#1442)

* Remove scanAltText, exclude selector based on pointer event

* input and textarea don't work

* Update text-scanner.js

* Prevent touch scan on input or text area

* Update text-source-range.js

* lint

* Prevent exclude .tag and .gloss-link from website

* exclude inflection

* lint

* lint

* refactor

* allow scan input text when tapping on same position

* allow scan hyperlink on tap

Author: khaitruong922

ext/data/schemas/options-schema.json

@@ -462,7 +462,6 @@
                                     "hideDelay",
                                     "length",
                                     "deepDomScan",
-                                    "scanAltText",
                                     "popupNestingMaxDepth",
                                     "enablePopupSearch",
                                     "enableOnPopupExpressions",
@@ -716,10 +715,6 @@
                                         "type": "boolean",
                                         "default": false
                                     },
-                                    "scanAltText": {
-                                        "type": "boolean",
-                                        "default": true
-                                    },
                                     "popupNestingMaxDepth": {
                                         "type": "integer",
                                         "minimum": 0,

ext/js/app/frontend.js

@@ -513,7 +513,6 @@ export class Frontend {
             matchTypePrefix: scanningOptions.matchTypePrefix,
             preventMiddleMouse,
             sentenceParsingOptions,
-            scanAltText: scanningOptions.scanAltText,
             scanWithoutMousemove: scanningOptions.scanWithoutMousemove,
             scanResolution: scanningOptions.scanResolution,
         });
@@ -525,6 +524,7 @@ export class Frontend {
                 excludeSelectors.push('.source-text', '.source-text *');
             }
             this._textScanner.excludeSelector = excludeSelectors.join(',');
+            this._textScanner.touchEventExcludeSelector = 'gloss-link, gloss-link *, tag, tag *, inflection';
         }
 
         this._updateContentScale();

ext/js/data/options-util.js

@@ -563,6 +563,7 @@ export class OptionsUtil {
             this._updateVersion49,
             this._updateVersion50,
             this._updateVersion51,
+            this._updateVersion52,
         ];
         /* eslint-enable @typescript-eslint/unbound-method */
         if (typeof targetVersion === 'number' && targetVersion < result.length) {
@@ -1487,6 +1488,16 @@ export class OptionsUtil {
         }
     }
 
+    /**
+     * - Remove scanning.scanAltText
+     * @type {import('options-util').UpdateFunction}
+     */
+    async _updateVersion52(options) {
+        for (const profile of options.profiles) {
+            delete profile.options.scanning.scanAltText;
+        }
+    }
+
     /**
      * @param {string} url
      * @returns {Promise<chrome.tabs.Tab>}

ext/js/display/display.js

@@ -464,7 +464,6 @@ export class Display extends EventDispatcher {
                 preventMiddleMouse: scanningOptions.preventMiddleMouse.onSearchQuery,
                 matchTypePrefix: false,
                 sentenceParsingOptions,
-                scanAltText: scanningOptions.scanAltText,
                 scanWithoutMousemove: scanningOptions.scanWithoutMousemove,
                 scanResolution: scanningOptions.scanResolution,
             },
@@ -1994,6 +1993,7 @@ export class Display extends EventDispatcher {
             });
             this._contentTextScanner.includeSelector = '.click-scannable,.click-scannable *';
             this._contentTextScanner.excludeSelector = '.scan-disable,.scan-disable *';
+            this._contentTextScanner.touchEventExcludeSelector = null;
             this._contentTextScanner.prepare();
             this._contentTextScanner.on('clear', this._onContentTextScannerClear.bind(this));
             this._contentTextScanner.on('searchSuccess', this._onContentTextScannerSearchSuccess.bind(this));
@@ -2033,7 +2033,6 @@ export class Display extends EventDispatcher {
             layoutAwareScan: scanningOptions.layoutAwareScan,
             preventMiddleMouse: false,
             sentenceParsingOptions,
-            scanAltText: scanningOptions.scanAltText,
         });
 
         this._contentTextScanner.setEnabled(true);

ext/js/language/text-scanner.js

@@ -72,6 +72,8 @@ export class TextScanner extends EventDispatcher {
         /** @type {?string} */
         this._excludeSelector = null;
         /** @type {?string} */
+        this._touchExcludeSelector = null;
+        /** @type {?string} */
         this._language = null;
 
         /** @type {?import('text-scanner').InputInfo} */
@@ -124,8 +126,6 @@ export class TextScanner extends EventDispatcher {
         this._sentenceBackwardQuoteMap = new Map();
         /** @type {import('text-scanner').InputConfig[]} */
         this._inputs = [];
-        /** @type {boolean} */
-        this._scanAltText = true;
 
         /** @type {boolean} */
         this._enabled = false;
@@ -198,6 +198,15 @@ export class TextScanner extends EventDispatcher {
         this._excludeSelector = value;
     }
 
+    /** @type {?string} */
+    get touchEventExcludeSelector() {
+        return this._touchExcludeSelector;
+    }
+
+    set touchEventExcludeSelector(value) {
+        this._touchExcludeSelector = value;
+    }
+
     /** @type {?string} */
     get language() { return this._language; }
     set language(value) { this._language = value; }
@@ -257,7 +266,6 @@ export class TextScanner extends EventDispatcher {
         preventMiddleMouse,
         sentenceParsingOptions,
         matchTypePrefix,
-        scanAltText,
         scanWithoutMousemove,
         scanResolution,
     }) {
@@ -294,9 +302,6 @@ export class TextScanner extends EventDispatcher {
         if (typeof matchTypePrefix === 'boolean') {
             this._matchTypePrefix = matchTypePrefix;
         }
-        if (typeof scanAltText === 'boolean') {
-            this._scanAltText = scanAltText;
-        }
         if (typeof scanWithoutMousemove === 'boolean') {
             this._scanWithoutMousemove = scanWithoutMousemove;
         }
@@ -348,9 +353,9 @@ export class TextScanner extends EventDispatcher {
         clonedTextSource.setEndOffset(length, false, layoutAwareScan);
 
         const includeSelector = this._includeSelector;
-        const excludeSelector = this._excludeSelector;
+        const excludeSelector = this._getExcludeSelectorForPointerType(pointerType);
         if (includeSelector !== null || excludeSelector !== null) {
-            this._constrainTextSource(clonedTextSource, includeSelector, excludeSelector, layoutAwareScan, pointerType);
+            this._constrainTextSource(clonedTextSource, includeSelector, excludeSelector, layoutAwareScan);
         }
 
         return clonedTextSource.text();
@@ -460,8 +465,17 @@ export class TextScanner extends EventDispatcher {
     async _search(textSource, searchTerms, searchKanji, inputInfo, showEmpty = false) {
         try {
             const isAltText = textSource instanceof TextSourceElement;
-            if (isAltText && !this._scanAltText) {
-                return;
+            if (inputInfo.pointerType === 'touch') {
+                if (isAltText) {
+                    return;
+                }
+                const {imposterSourceElement, rangeStartOffset} = textSource;
+                if (imposterSourceElement instanceof HTMLTextAreaElement || imposterSourceElement instanceof HTMLInputElement) {
+                    const isFocused = imposterSourceElement === document.activeElement;
+                    if (!isFocused || imposterSourceElement.selectionStart !== rangeStartOffset) {
+                        return;
+                    }
+                }
             }
 
             const inputInfoDetail = inputInfo.detail;
@@ -1637,11 +1651,9 @@ export class TextScanner extends EventDispatcher {
      * @param {?string} includeSelector
      * @param {?string} excludeSelector
      * @param {boolean} layoutAwareScan
-     * @param {import('input').PointerType | undefined} pointerType
      */
-    _constrainTextSource(textSource, includeSelector, excludeSelector, layoutAwareScan, pointerType) {
+    _constrainTextSource(textSource, includeSelector, excludeSelector, layoutAwareScan) {
         let length = textSource.text().length;
-        excludeSelector = this._createExcludeSelectorForPointerType(excludeSelector, pointerType);
 
         while (length > 0) {
             const nodes = textSource.getNodesInRange();
@@ -1658,17 +1670,14 @@ export class TextScanner extends EventDispatcher {
     }
 
     /**
-     * @param {?string} excludeSelector
      * @param {import('input').PointerType | undefined} pointerType
      * @returns {?string}
      */
-    _createExcludeSelectorForPointerType(excludeSelector, pointerType) {
+    _getExcludeSelectorForPointerType(pointerType) {
         if (pointerType === 'touch') {
-            // Avoid trigger search with tapping on popup link, tag and inflection.
-            const popupClickableSelector = '.gloss-link, .gloss-link *, .tag, .tag *, .inflection';
-            return excludeSelector ? `${excludeSelector},${popupClickableSelector}` : popupClickableSelector;
+            return this._excludeSelector ? `${this._excludeSelector},${this.touchEventExcludeSelector}` : this.touchEventExcludeSelector;
         }
-        return excludeSelector;
+        return this._excludeSelector;
     }
 
     /**

ext/settings.html

@@ -477,15 +477,6 @@ <h1>Yomitan Settings</h1>
                 <label class="toggle"><input type="checkbox" data-setting="scanning.deepDomScan"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
-        <div class="settings-item"><div class="settings-item-inner">
-            <div class="settings-item-left">
-                <div class="settings-item-label">Scan alt text</div>
-                <div class="settings-item-description">Scan text that is used for image and button descriptions.</div>
-            </div>
-            <div class="settings-item-right">
-                <label class="toggle"><input type="checkbox" data-setting="scanning.scanAltText"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-            </div>
-        </div></div>
         <div class="settings-item advanced-only">
             <div class="settings-item-inner">
                 <div class="settings-item-left">

test/options-util.test.js

@@ -348,7 +348,6 @@ function createProfileOptionsUpdatedTestData1() {
             hidePopupOnCursorExit: false,
             hidePopupOnCursorExitDelay: 0,
             normalizeCssZoom: true,
-            scanAltText: true,
             preventMiddleMouse: {
                 onWebPages: false,
                 onPopupPages: false,
@@ -645,7 +644,7 @@ function createOptionsUpdatedTestData1() {
             },
         ],
         profileCurrent: 0,
-        version: 51,
+        version: 52,
         global: {
             database: {
                 prefixWildcardsSupported: false,

types/ext/settings.d.ts

@@ -197,7 +197,6 @@ export type ScanningOptions = {
     hidePopupOnCursorExit: boolean;
     hidePopupOnCursorExitDelay: number;
     normalizeCssZoom: boolean;
-    scanAltText: boolean;
     scanWithoutMousemove: boolean;
     scanResolution: string;
 };

types/ext/text-scanner.d.ts

@@ -41,7 +41,6 @@ export type Options = {
     preventMiddleMouse?: boolean;
     matchTypePrefix?: boolean;
     sentenceParsingOptions?: SentenceParsingOptions;
-    scanAltText?: boolean;
     scanWithoutMousemove?: boolean;
     scanResolution?: string;
 };