[VE] Inspection support

See cl/705822975 for the counterpart

Bug: 383991864
Change-Id: I529d7b5b667605b464e75c44f8ca5240727668b2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6093863
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/entrypoints/main/MainImpl.ts

@@ -611,9 +611,40 @@ export class MainImpl {
     this.#resolveReadyForTestPromise();
     // Asynchronously run the extensions.
     window.setTimeout(this.#lateInitialization.bind(this), 100);
+    await this.#maybeInstallVeInspectionBinding();
+
     MainImpl.timeEnd('Main._initializeTarget');
   }
 
+  async #maybeInstallVeInspectionBinding(): Promise<void> {
+    const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const url = primaryPageTarget?.targetInfo()?.url;
+    const origin = url ? Common.ParsedURL.ParsedURL.extractOrigin(url as Platform.DevToolsPath.UrlString) : undefined;
+
+    const binding = '__devtools_ve_inspection_binding__';
+    if (primaryPageTarget && await VisualLogging.isUnderInspection(origin)) {
+      const runtimeModel = primaryPageTarget.model(SDK.RuntimeModel.RuntimeModel);
+      await runtimeModel?.addBinding({name: binding});
+      runtimeModel?.addEventListener(SDK.RuntimeModel.Events.BindingCalled, event => {
+        if (event.data.name === binding) {
+          VisualLogging.setVeDebuggingEnabled(event.data.payload === 'true', (query: string) => {
+            VisualLogging.setVeDebuggingEnabled(false);
+            void runtimeModel?.defaultExecutionContext()?.evaluate(
+                {
+                  expression: `window.inspect(${JSON.stringify(query)})`,
+                  includeCommandLineAPI: false,
+                  silent: true,
+                  returnByValue: false,
+                  generatePreview: false,
+                },
+                /* userGesture */ false,
+                /* awaitPromise */ false);
+          });
+        }
+      });
+    }
+  }
+
   // TODO(crbug.com/350668580) Move this to AISettingsTab once the setting is only available
   // there and not in the general settings screen anymore.
   // The ConsoleInsightsEnabledSetting represents the toggle/checkbox allowing the user to turn the feature on/off.

front_end/ui/visual_logging/Debugging.test.ts

@@ -5,15 +5,6 @@
 import * as VisualLogging from './visual_logging-testing.js';
 
 describe('LoggingDriver', () => {
-  it('marks loggable elements for debugging', async () => {
-    // @ts-ignore
-    globalThis.setVeDebuggingEnabled(true);
-    const element = document.createElement('div');
-    VisualLogging.LoggingState.getOrCreateLoggingState(element, {ve: 1});
-    VisualLogging.Debugging.processForDebugging(element);
-    assert.strictEqual(element.style.outline, 'red solid 1px');
-  });
-
   it('builds a debug string', () => {
     assert.strictEqual(VisualLogging.Debugging.debugString({ve: 1}), 'TreeItem');
     assert.strictEqual(VisualLogging.Debugging.debugString({ve: 1, context: '42'}), 'TreeItem; context: 42');

front_end/ui/visual_logging/Debugging.ts

@@ -10,21 +10,28 @@ import {getLoggingState, type LoggingState} from './LoggingState.js';
 
 let veDebuggingEnabled = false;
 let debugPopover: HTMLElement|null = null;
+let hightlightedElement: HTMLElement|null = null;
 const nonDomDebugElements = new WeakMap<Loggable, HTMLElement>();
+let onInspect: ((query: string) => void)|undefined = undefined;
 
-function setVeDebuggingEnabled(enabled: boolean): void {
+export function setVeDebuggingEnabled(enabled: boolean, inpsect?: (query: string) => void): void {
   veDebuggingEnabled = enabled;
   if (enabled && !debugPopover) {
     debugPopover = document.createElement('div');
     debugPopover.classList.add('ve-debug');
     debugPopover.style.position = 'absolute';
-    debugPopover.style.bottom = '100px';
-    debugPopover.style.left = '100px';
-    debugPopover.style.background = 'black';
-    debugPopover.style.color = 'white';
+    debugPopover.style.background = 'var(--sys-color-cdt-base-container)';
+    debugPopover.style.borderRadius = '2px';
+    debugPopover.style.padding = '8px';
+    debugPopover.style.boxShadow = 'var(--drop-shadow)';
     debugPopover.style.zIndex = '100000';
     document.body.appendChild(debugPopover);
   }
+  onInspect = inpsect;
+  if (!enabled && hightlightedElement) {
+    hightlightedElement.style.backgroundColor = '';
+    hightlightedElement.style.outline = '';
+  }
 }
 
 // @ts-ignore
@@ -35,40 +42,62 @@ export function processForDebugging(loggable: Loggable): void {
   if (!veDebuggingEnabled || !loggingState || loggingState.processedForDebugging) {
     return;
   }
-  if (loggable instanceof Element) {
+  if (loggable instanceof HTMLElement) {
     processElementForDebugging(loggable, loggingState);
   } else {
     processNonDomLoggableForDebugging(loggable, loggingState);
   }
 }
 
-function showDebugPopover(content: string): void {
+function showDebugPopover(content: string, rect?: DOMRect): void {
   if (!debugPopover) {
     return;
   }
+  if (rect) {
+    debugPopover.style.left = `${rect.left}px`;
+    debugPopover.style.top = `${rect.bottom + 8}px`;
+  }
   debugPopover.style.display = 'block';
-  debugPopover.innerHTML = content;
+  debugPopover.textContent = content;
 }
 
-function processElementForDebugging(element: Element, loggingState: LoggingState): void {
+function processElementForDebugging(element: HTMLElement, loggingState: LoggingState): void {
   if (element.tagName === 'OPTION') {
     if (loggingState.parent?.selectOpen && debugPopover) {
       debugPopover.innerHTML += '<br>' + debugString(loggingState.config);
       loggingState.processedForDebugging = true;
     }
   } else {
-    (element as HTMLElement).style.outline = 'solid 1px red';
+    element.addEventListener('mousedown', event => {
+      if (event.currentTarget === hightlightedElement && onInspect && debugPopover && veDebuggingEnabled) {
+        onInspect(debugPopover.textContent || '');
+        event.stopImmediatePropagation();
+        event.preventDefault();
+      }
+    }, {capture: true});
     element.addEventListener('mouseenter', () => {
+      if (!veDebuggingEnabled) {
+        return;
+      }
+      if (hightlightedElement) {
+        hightlightedElement.style.backgroundColor = '';
+        hightlightedElement.style.outline = '';
+      }
+      element.style.backgroundColor = '#A7C3E4';
+      element.style.outline = 'dashed 1px #7327C6';
+      hightlightedElement = element;
       assertNotNullOrUndefined(debugPopover);
       const pathToRoot = [loggingState];
       let ancestor = loggingState.parent;
       while (ancestor) {
-        pathToRoot.push(ancestor);
+        pathToRoot.unshift(ancestor);
         ancestor = ancestor.parent;
       }
-      showDebugPopover(pathToRoot.map(s => debugString(s.config)).join('<br>'));
+      showDebugPopover(pathToRoot.map(s => elementKey(s.config)).join(' > '), element.getBoundingClientRect());
     }, {capture: true});
     element.addEventListener('mouseleave', () => {
+      element.style.backgroundColor = '';
+      element.style.outline = '';
       assertNotNullOrUndefined(debugPopover);
       debugPopover.style.display = 'none';
     }, {capture: true});
@@ -305,6 +334,10 @@ function processNonDomLoggableForDebugging(loggable: Loggable, loggingState: Log
   }
 }
 
+function elementKey(config: LoggingConfig): string {
+  return `${VisualElements[config.ve]}${config.context ? `: ${config.context}` : ''}`;
+}
+
 export function debugString(config: LoggingConfig): string {
   const components = [VisualElements[config.ve]];
   if (config.context) {

front_end/ui/visual_logging/LoggingEvents.ts

@@ -152,7 +152,7 @@ function contextFromKeyCodes(event: Event): string|undefined {
   return components.join('-');
 }
 
-async function contextAsNumber(context: string|undefined): Promise<number|undefined> {
+export async function contextAsNumber(context: string|undefined): Promise<number|undefined> {
   if (typeof context === 'undefined') {
     return undefined;
   }

front_end/ui/visual_logging/visual_logging.ts

@@ -9,7 +9,7 @@ import * as LoggingEvents from './LoggingEvents.js';
 import * as NonDomState from './NonDomState.js';
 
 export type Loggable = LoggableModule.Loggable;
-export {setVeDebugLoggingEnabled, DebugLoggingFormat} from './Debugging.js';
+export {setVeDebugLoggingEnabled, DebugLoggingFormat, setVeDebuggingEnabled} from './Debugging.js';
 export {startLogging, stopLogging, addDocument} from './LoggingDriver.js';
 export {logImpressions} from './LoggingEvents.js';
 export const logClick = (loggable: Loggable, event: Event, options: {doubleClick?: boolean} = {}): void =>
@@ -28,6 +28,17 @@ export function registerLoggable(loggable: Loggable, config: string, parent: Log
   void LoggingDriver.scheduleProcessing();
 }
 
+export async function isUnderInspection(origin?: string): Promise<boolean> {
+  if (!origin) {
+    return false;
+  }
+  const context = await LoggingEvents.contextAsNumber(origin);
+  if (!context) {
+    return false;
+  }
+  return [431010711, -1313957874, -1093325535].includes(context);
+}
+
 /**
  * Action visual elements are either buttons or menu items that trigger a given action. Use the
  * context to differentiate between different actions, and make sure that buttons and menu items