Small cleanup for ElementsTreeElement

This is one of a few cleanup efforts to pave the way for better
integrating squiggly line into ElementsTreeElement, including extracting functions that do not rely on the instance, and making functions more modular and testable.

Bug: None
Change-Id: I11ea69a5c408197028de7cb90f35ebceeed3d990
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6276551
Reviewed-by: Eric Leese <[email protected]>
Auto-Submit: Changhao Han <[email protected]>
Commit-Queue: Changhao Han <[email protected]>

Author: hanselfmu-chromium

front_end/panels/elements/BUILD.gn

@@ -163,6 +163,7 @@ ts_library("unittests") {
     "DOMLinkifier.test.ts",
     "ElementStatePaneWidget.test.ts",
     "ElementsPanel.test.ts",
+    "ElementsTreeElement.test.ts",
     "ElementsTreeElementHighlighter.test.ts",
     "ElementsTreeOutline.test.ts",
     "InspectElementModeController.test.ts",
@@ -180,6 +181,7 @@ ts_library("unittests") {
 
   deps = [
     ":bundle",
+    "../../models/text_utils:bundle",
     "../../testing",
     "./components:unittests",
   ]

front_end/panels/elements/ElementsTreeElement.test.ts

@@ -0,0 +1,42 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+
+import * as Elements from './elements.js';
+
+describe('ElementsTreeElement', () => {
+  describe('convertUnicodeCharsToHTMLEntities', () => {
+    it('converts unicode characters to HTML entities', () => {
+      const input = '\u2002\u2002This string has spaces\xA0\xA0and other\u202Aunicode characters\u200A.';
+      const expected = {
+        text: '  This string has spaces  and other‪unicode characters .',
+        entityRanges: [
+          new TextUtils.TextRange.SourceRange(0, 6),
+          new TextUtils.TextRange.SourceRange(6, 6),
+          new TextUtils.TextRange.SourceRange(34, 6),
+          new TextUtils.TextRange.SourceRange(40, 6),
+          new TextUtils.TextRange.SourceRange(55, 8),
+          new TextUtils.TextRange.SourceRange(81, 8),
+        ],
+      };
+
+      const result = Elements.ElementsTreeElement.convertUnicodeCharsToHTMLEntities(input);
+      assert.strictEqual(result.text, expected.text);
+      assert.deepEqual(result.entityRanges, expected.entityRanges);
+    });
+
+    it('returns the original string if no unicode characters are present', () => {
+      const input = 'ThisStringHasNoWhitespace';
+      const expected = {
+        text: 'ThisStringHasNoWhitespace',
+        entityRanges: [],
+      };
+
+      const result = Elements.ElementsTreeElement.convertUnicodeCharsToHTMLEntities(input);
+      assert.strictEqual(result.text, expected.text);
+      assert.deepEqual(result.entityRanges, expected.entityRanges);
+    });
+  });
+});

front_end/panels/elements/ElementsTreeElement.ts

@@ -283,12 +283,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.gutterContainer = this.contentElement.createChild('div', 'gutter-container');
     this.gutterContainer.addEventListener('click', this.showContextMenu.bind(this));
     const gutterMenuIcon = new IconButton.Icon.Icon();
-    gutterMenuIcon.data = {
-      color: 'var(--icon-default)',
-      iconName: 'dots-horizontal',
-      height: '16px',
-      width: '16px',
-    };
+    gutterMenuIcon.name = 'dots-horizontal';
     this.gutterContainer.append(gutterMenuIcon);
     this.decorationsElement = this.gutterContainer.createChild('div', 'hidden');
 
@@ -1138,7 +1133,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const initialValue = this.convertWhitespaceToEntities(maybeInitialValue).text;
+    const initialValue = convertUnicodeCharsToHTMLEntities(maybeInitialValue).text;
     this.htmlEditElement = document.createElement('div');
     this.htmlEditElement.className = 'source-code elements-tree-editor';
 
@@ -1613,7 +1608,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     let additionalHighlightOffset = 0;
 
     function setValueWithEntities(this: ElementsTreeElement, element: Element, value: string): void {
-      const result = this.convertWhitespaceToEntities(value);
+      const result = convertUnicodeCharsToHTMLEntities(value);
       highlightCount = result.entityRanges.length;
       value = result.text.replace(closingPunctuationRegex, (match, replaceOffset) => {
         while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
@@ -1827,30 +1822,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private convertWhitespaceToEntities(text: string): {
-    text: string,
-    entityRanges: TextUtils.TextRange.SourceRange[],
-  } {
-    let result = '';
-    let lastIndexAfterEntity = 0;
-    const entityRanges = [];
-    const charToEntity = MappedCharToEntity;
-    for (let i = 0, size = text.length; i < size; ++i) {
-      const char = text.charAt(i);
-      if (charToEntity.has(char)) {
-        result += text.substring(lastIndexAfterEntity, i);
-        const entityValue = '&' + charToEntity.get(char) + ';';
-        entityRanges.push(new TextUtils.TextRange.SourceRange(result.length, entityValue.length));
-        result += entityValue;
-        lastIndexAfterEntity = i + 1;
-      }
-    }
-    if (result) {
-      result += text.substring(lastIndexAfterEntity);
-    }
-    return {text: result || text, entityRanges};
-  }
-
   private nodeTitleInfo(updateRecord: UpdateRecord|null): DocumentFragment {
     const node = this.nodeInternal;
     const titleDOM = document.createDocumentFragment();
@@ -1912,7 +1883,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           if (!firstChild) {
             throw new Error('ElementsTreeElement._nodeTitleInfo expects node.firstChild to be defined.');
           }
-          const result = this.convertWhitespaceToEntities(firstChild.nodeValue());
+          const result = convertUnicodeCharsToHTMLEntities(firstChild.nodeValue());
           textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
           UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           UI.UIUtils.createTextChild(titleDOM, '\u200B');
@@ -1952,7 +1923,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');
           textNodeElement.setAttribute(
               'jslog', `${VisualLogging.value('text-node').track({change: true, dblclick: true})}`);
-          const result = this.convertWhitespaceToEntities(node.nodeValue());
+          const result = convertUnicodeCharsToHTMLEntities(node.nodeValue());
           textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
           UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           UI.UIUtils.createTextChild(titleDOM, '"');
@@ -2555,6 +2526,31 @@ export function adornerComparator(adornerA: Adorners.Adorner.Adorner, adornerB:
   }
   return compareCategories;
 }
+
+export function convertUnicodeCharsToHTMLEntities(text: string): {
+  text: string,
+  entityRanges: TextUtils.TextRange.SourceRange[],
+} {
+  let result = '';
+  let lastIndexAfterEntity = 0;
+  const entityRanges = [];
+  const charToEntity = MappedCharToEntity;
+  for (let i = 0, size = text.length; i < size; ++i) {
+    const char = text.charAt(i);
+    if (charToEntity.has(char)) {
+      result += text.substring(lastIndexAfterEntity, i);
+      const entityValue = '&' + charToEntity.get(char) + ';';
+      entityRanges.push(new TextUtils.TextRange.SourceRange(result.length, entityValue.length));
+      result += entityValue;
+      lastIndexAfterEntity = i + 1;
+    }
+  }
+  if (result) {
+    result += text.substring(lastIndexAfterEntity);
+  }
+  return {text: result || text, entityRanges};
+}
+
 export interface EditorHandles {
   commit: () => void;
   cancel: () => void;

front_end/panels/elements/elementsTreeOutline.css

@@ -312,6 +312,8 @@ select {
   visibility: hidden;
   position: relative;
   left: -1px;
+  width: 16px;
+  height: 16px;
 }
 
 .elements-disclosure li.selected .gutter-container:not(.has-decorations) > devtools-icon {