implement basic devtools panel.onSearch interface and navigation between case in/sensitive finding

Author: zendive

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "console.diff(...)",
   "description": "Compare in-memory objects and see the result inside devtools panel with a set of console.diff functions.",
-  "version": "2.1",
+  "version": "3.0.0",
   "manifest_version": 3,
   "minimum_chrome_version": "64.0",
   "devtools_page": "src/jsdiff-devtools.html",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsdiff",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "![jsdiff](./src/img/panel-icon64.png) --- Chrome devtools extension intended to display result of in-memory object comparisons with the help of dedicated commands invoked via console.",
   "private": true,
   "directories": {

src/js/bundle/jsdiff-panel.js

@@ -138,7 +138,7 @@ function jsdiff_devtools_extension_api() {
   });
 
   console.debug(
-    '%c✚ console.diff',
+    '%c✚ console.diff()',
     `
       font-weight: 700;
       color: #000;

src/js/jsdiff-devtools.js

@@ -1,4 +1,4 @@
-(async () => {
+(() => {
   window.addEventListener('message', (e) => {
     if (
       typeof e.data === 'object' &&

src/js/jsdiff-proxy.js

@@ -1,47 +1,123 @@
 type TSearchCommands = 'performSearch' | 'nextSearchResult' | 'cancelSearch';
-interface ISearchOptions {
-  el: HTMLElement;
+
+export interface ISearchOptions {
   cmd: TSearchCommands;
   query: string | null;
 }
-const searchState = {
-  lastCmd: '',
-  currentEl: 0,
+
+interface ISearchState {
+  foundEls: HTMLElement[];
+  query: string;
+  currentIndex: number;
+  clear: () => void;
+}
+
+const searchState: ISearchState = {
+  foundEls: [],
+  query: '',
+  currentIndex: -1,
+  clear() {
+    this.foundEls.splice(0);
+    this.query = '';
+    this.currentIndex = -1;
+  },
 };
 
-function highlightElements(container: HTMLElement, query: string): void {
-  const childNodes = container.childNodes;
+const CLASS_FOUND = 'jsdiff-found';
+const CLASS_FOUND_THIS = 'jsdiff-found-this';
+const uppercasePattern = /\p{Lu}/u; // 'u' flag enables Unicode matching
+
+function hasUppercaseCharacter(str: string): boolean {
+  for (let n = 0, N = str.length; n < N; n++) {
+    if (uppercasePattern.test(str.charAt(n))) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function highlightElements(
+  container: HTMLElement,
+  query: string,
+  foundEls: HTMLElement[]
+): void {
+  const containerNodes = container.childNodes as NodeListOf<HTMLElement>;
+
+  if (containerNodes.length) {
+    const firstChild = containerNodes[0];
+
+    if (containerNodes.length === 1 && firstChild.nodeType === Node.TEXT_NODE) {
+      const text = firstChild.textContent || firstChild.innerText;
+      const found = hasUppercaseCharacter(query)
+        ? text.includes(query) // case-sensitive
+        : text.toLocaleLowerCase().includes(query); // case-insensitive
 
-  for (let n = 0, N = childNodes.length; n < N; n++) {
-    const child = childNodes[n];
-    if (child.nodeType === Node.ELEMENT_NODE) {
-      const element = child as HTMLElement;
-      const text = element.textContent || element.innerText;
-      if (text.includes(query)) {
-        element.classList.add('found');
+      if (found) {
+        container.classList.add('jsdiff-found');
+        foundEls.push(container);
+      }
+    } else {
+      for (let n = 0, N = containerNodes.length; n < N; n++) {
+        const child = containerNodes[n];
+
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          highlightElements(child, query, foundEls); // recursion
+        }
       }
-      highlightElements(element, query); // recursion
     }
   }
 }
 
-function clearHighlight(container: HTMLElement) {
-  const allFound = container.querySelectorAll('.found');
+function clearHighlight(container: HTMLElement): void {
+  const allFound = container.querySelectorAll(`.${CLASS_FOUND}`);
 
-  for (let n = 0, N = allFound.length; n < N; n++) {
-    allFound[n].classList.remove('found', 'foundThis');
+  for (let n = allFound.length - 1; n >= 0; n--) {
+    allFound[n].classList.remove(CLASS_FOUND, CLASS_FOUND_THIS);
   }
 }
 
-export function searchQueryInDom({ el, cmd, query }: ISearchOptions) {
+function highlightCurrentResult(searchState: ISearchState): void {
+  searchState.currentIndex++;
+  searchState.currentIndex %= searchState.foundEls.length;
+
+  const el = searchState.foundEls[searchState.currentIndex];
+  el.classList.add(CLASS_FOUND_THIS);
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'nearest',
+    inline: 'nearest',
+  });
+}
+
+export function searchQueryInDom(
+  el: HTMLElement,
+  { cmd, query }: ISearchOptions
+): void {
   query = (typeof query === 'string' && query.trim()) || '';
-  console.log('🔦', cmd, query);
 
-  if ('performSearch' === cmd && query) {
-    highlightElements(el, query);
-  } else if ('nextSearchResult' === cmd) {
-    // TODO: ...
+  // console.log('🔦', cmd, query);
+
+  if ('performSearch' === cmd) {
+    searchState.query = query;
+
+    if (!query) {
+      searchState.clear();
+      clearHighlight(el);
+    }
+  } else if ('nextSearchResult' === cmd && searchState.query) {
+    clearHighlight(el);
+    searchState.foundEls.splice(0);
+    highlightElements(el, searchState.query, searchState.foundEls);
+
+    if (searchState.foundEls.length) {
+      highlightCurrentResult(searchState);
+    } else {
+      searchState.clear();
+      clearHighlight(el);
+    }
   } else if ('cancelSearch' === cmd) {
+    searchState.clear();
     clearHighlight(el);
   }
 }

src/js/view/api/search.ts

@@ -0,0 +1,3 @@
+export function hasValue(o: unknown): boolean {
+  return undefined !== o && null !== o;
+}

src/js/view/api/toolkit.ts

@@ -2,4 +2,4 @@ import { createApp } from 'vue';
 import Panel from './panel.vue';
 
 const app = createApp(Panel);
-app.mount('#app');
+app.mount('#jsdiff-app');