Highlight selected elements when debugging e2e tests

As we step though the e2e test actions all elements select with `$` function in frontend will get a red border. When selecting the next element we make sure that we reset the aspect of the previous one.

Bug: 407460244
Change-Id: I7bb8b2a6653584f1c34a151ff01f47280abfbe80
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6429836
Reviewed-by: Eric Leese <[email protected]>
Commit-Queue: Liviu Rau <[email protected]>

Author: Liviu Rau

test/e2e_non_hosted/shared/frontend-helper.ts

@@ -6,6 +6,7 @@ import type * as puppeteer from 'puppeteer-core';
 
 import {AsyncScope} from '../../conductor/async-scope.js';
 import {installPageErrorHandlers} from '../../conductor/events.js';
+import {TestConfig} from '../../conductor/test_config.js';
 
 import {PageWrapper} from './page-wrapper.js';
 
@@ -26,6 +27,8 @@ type DeducedElementType<ElementType extends Element|null, Selector extends strin
     ElementType extends null ? puppeteer.NodeFor<Selector>: ElementType;
 
 export class DevToolsPage extends PageWrapper {
+  #currentHighlightedElement?: HighlightedElement;
+
   async setExperimentEnabled(experiment: string, enabled: boolean) {
     await this.evaluate(`(async () => {
       const Root = await import('./core/root/root.js');
@@ -112,9 +115,24 @@ export class DevToolsPage extends PageWrapper {
     const rootElement = root ? root : this.page;
     const element = await rootElement.$(`${handler}/${selector}`) as
         puppeteer.ElementHandle<DeducedElementType<ElementType, Selector>>;
+    await this.#maybeHighlight(element);
     return element;
   }
 
+  async #maybeHighlight(element: puppeteer.ElementHandle) {
+    if (!TestConfig.debug) {
+      return;
+    }
+    if (!element) {
+      return;
+    }
+    if (this.#currentHighlightedElement) {
+      await this.#currentHighlightedElement.reset();
+    }
+    this.#currentHighlightedElement = new HighlightedElement(element);
+    await this.#currentHighlightedElement.highlight();
+  }
+
   async performActionOnSelector(selector: string, options: {root?: puppeteer.ElementHandle}, action: Action):
       Promise<puppeteer.ElementHandle> {
     // TODO(crbug.com/1410168): we should refactor waitFor to be compatible with
@@ -296,3 +314,24 @@ export async function setupDevToolsPage(context: puppeteer.BrowserContext, setti
   await devToolsPage.setDockingSide(settings.dockingMode);
   return devToolsPage;
 }
+
+class HighlightedElement {
+  constructor(readonly element: puppeteer.ElementHandle) {
+  }
+
+  async reset() {
+    await this.element.evaluate(el => {
+      if (el instanceof HTMLElement) {
+        el.style.outline = '';
+      }
+    });
+  }
+
+  async highlight() {
+    await this.element.evaluate(el => {
+      if (el instanceof HTMLElement) {
+        el.style.outline = '2px solid red';
+      }
+    });
+  }
+}