chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/ui/visual_logging/LoggingDriver.test.ts

@@ -43,12 +43,12 @@ describe('LoggingDriver', () => {
   });
 
   function addLoggableElements() {
-    const parent = document.createElement('div') as HTMLElement;
+    const parent = document.createElement('div');
     parent.id = 'parent';
     parent.setAttribute('jslog', 'TreeItem; track: hover');
     parent.style.width = '300px';
     parent.style.height = '300px';
-    const element = document.createElement('div') as HTMLElement;
+    const element = document.createElement('div');
     element.id = 'element';
     element.setAttribute('jslog', 'TreeItem; context:42; track: click, keydown, hover, drag, resize, change');
     element.style.width = '300px';
@@ -84,7 +84,7 @@ describe('LoggingDriver', () => {
 
   it('does not log impressions when parent hidden', async () => {
     addLoggableElements();
-    const parent = document.getElementById('parent') as HTMLElement;
+    const parent = document.getElementById('parent')!;
     parent.style.height = '0';
     await VisualLoggingTesting.LoggingDriver.startLogging({processingThrottler: throttler});
     sinon.assert.notCalled(recordImpression);
@@ -106,7 +106,7 @@ describe('LoggingDriver', () => {
 
   it('logs impressions on scroll', async () => {
     addLoggableElements();
-    const parent = document.getElementById('parent') as HTMLElement;
+    const parent = document.getElementById('parent')!;
     parent.style.marginTop = '2000px';
     await VisualLoggingTesting.LoggingDriver.startLogging({processingThrottler: throttler});
 
@@ -136,7 +136,7 @@ describe('LoggingDriver', () => {
   });
 
   it('logs impressions on mutation in shadow DOM', async () => {
-    const parent = document.createElement('div') as HTMLElement;
+    const parent = document.createElement('div');
     renderElementIntoDOM(parent);
     const shadow = parent.attachShadow({mode: 'open'});
     const shadowContent = document.createElement('div');
@@ -147,6 +147,36 @@ describe('LoggingDriver', () => {
     await assertImpressionRecordedDeferred();
   });
 
+  it('does not log impressions for content in closed details element but does when opened', async () => {
+    await VisualLoggingTesting.LoggingDriver.startLogging({processingThrottler: throttler});
+
+    const details = document.createElement('details');
+    details.style.width = '100px';
+    details.style.height = '100px';
+    details.innerHTML = '<div id="details-content" jslog="TreeItem" style="width: 100px; height: 100px;"></div>';
+    renderElementIntoDOM(details);
+
+    let [work] = await expectCalled(throttle);
+    await work();
+    // This will fail with the bug, as an impression will be recorded.
+    sinon.assert.notCalled(recordImpression);
+
+    throttle.resetHistory();
+    recordImpression.resetHistory();
+
+    details.open = true;
+    // Opening details will trigger mutation observer.
+    [work] = await expectCalled(throttle);
+    await work();
+    sinon.assert.calledOnce(recordImpression);
+    assert.sameDeepMembers(recordImpression.firstCall.firstArg.impressions, [{
+                             id: getVeId('#details-content'),
+                             type: 1,
+                             width: 100,
+                             height: 100,
+                           }]);
+  });
+
   it('logs impressions on mutation in additional document', async () => {
     const iframe = document.createElement('iframe');
     renderElementIntoDOM(iframe);
@@ -178,7 +208,7 @@ describe('LoggingDriver', () => {
   });
 
   it('hashes a string context', async () => {
-    const element = document.createElement('div') as HTMLElement;
+    const element = document.createElement('div');
     element.setAttribute('jslog', 'TreeItem; track: hover; context: foobar');
     element.style.width = '300px';
     element.style.height = '300px';
@@ -197,7 +227,7 @@ describe('LoggingDriver', () => {
         'recordClick',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.click();
 
     await expectCalled(recordClick);
@@ -211,7 +241,7 @@ describe('LoggingDriver', () => {
         'recordClick',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new MouseEvent('contextmenu'));
 
     await expectCalled(recordClick);
@@ -225,7 +255,7 @@ describe('LoggingDriver', () => {
         'recordClick',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new MouseEvent('auxclick'));
 
     await expectCalled(recordClick);
@@ -239,7 +269,7 @@ describe('LoggingDriver', () => {
         'recordClick',
     );
 
-    const parent = document.getElementById('parent') as HTMLElement;
+    const parent = document.getElementById('parent')!;
     parent.click();
 
     await new Promise(resolve => setTimeout(resolve, 0));
@@ -248,7 +278,7 @@ describe('LoggingDriver', () => {
 
   it('does not log click on double click', async () => {
     addLoggableElements();
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.setAttribute('jslog', 'TreeItem; context:42; track: click, dblclick');
     await VisualLoggingTesting.LoggingDriver.startLogging({clickLogThrottler: throttler});
     const recordClick = sinon.stub(
@@ -269,7 +299,7 @@ describe('LoggingDriver', () => {
 
   it('does not log click on parent when clicked on child', async () => {
     addLoggableElements();
-    const parent = document.getElementById('parent') as HTMLElement;
+    const parent = document.getElementById('parent')!;
     parent.setAttribute('jslog', 'TreeItem; track: click');
     await VisualLoggingTesting.LoggingDriver.startLogging({clickLogThrottler: throttler});
     const recordClick = sinon.stub(
@@ -277,7 +307,7 @@ describe('LoggingDriver', () => {
         'recordClick',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.click();
     const [logging] = await expectCalled(throttle);
     sinon.assert.notCalled(recordClick);
@@ -288,7 +318,7 @@ describe('LoggingDriver', () => {
   });
 
   const logsSelectOptions = (event: Event) => async () => {
-    const parent = document.createElement('div') as HTMLElement;
+    const parent = document.createElement('div');
     parent.innerHTML = `
       <select jslog="TreeItem; context: 0" id="select" style="width: 30px; height: 20px">
         <option jslog="TreeItem; context: 1">1</option>
@@ -332,7 +362,7 @@ describe('LoggingDriver', () => {
   it('logs impressions on select options on F4', logsSelectOptions(new KeyboardEvent('keydown', {code: 'F4'})));
 
   it('logs option click on select change', async () => {
-    const parent = document.createElement('div') as HTMLElement;
+    const parent = document.createElement('div');
     parent.innerHTML = `
       <select jslog="TreeItem; context: 0" id="select">
         <option jslog="TreeItem; context: 1; track: click">1</option>
@@ -364,7 +394,7 @@ describe('LoggingDriver', () => {
         'recordKeyDown',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new KeyboardEvent('keydown', {key: 'a'}));
     element.dispatchEvent(new KeyboardEvent('keydown', {key: 'b'}));
     const [logging] = await expectCalled(throttle);
@@ -378,7 +408,7 @@ describe('LoggingDriver', () => {
   it('logs keydown for specific codes', async () => {
     addLoggableElements();
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.setAttribute('jslog', 'TreeItem; context:42; track: keydown: KeyA|KeyB');
     await VisualLoggingTesting.LoggingDriver.startLogging({keyboardLogThrottler: throttler});
     const recordKeyDown = sinon.stub(
@@ -413,7 +443,7 @@ describe('LoggingDriver', () => {
         'recordChange',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new Event('change'));
     sinon.assert.calledOnce(recordChange);
   });
@@ -426,7 +456,7 @@ describe('LoggingDriver', () => {
         'recordChange',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new InputEvent('input', {inputType: 'insertText'}));
     await new Promise(resolve => setTimeout(resolve, 0));
     sinon.assert.notCalled(recordChange);
@@ -454,7 +484,7 @@ describe('LoggingDriver', () => {
         'recordChange',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new InputEvent('input', {inputType: 'insertText'}));
     element.dispatchEvent(new Event('focusout'));
     await expectCalled(recordChange);
@@ -468,8 +498,8 @@ describe('LoggingDriver', () => {
         'recordChange',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
-    const parent = document.getElementById('parent') as HTMLElement;
+    const element = document.getElementById('element')!;
+    const parent = document.getElementById('parent')!;
     element.dispatchEvent(new InputEvent('input', {inputType: 'insertText'}));
     throttle.callsArg(0);
     parent.appendChild(element.cloneNode());
@@ -484,7 +514,7 @@ describe('LoggingDriver', () => {
         'recordChange',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new InputEvent('input', {inputType: 'insertText'}));
     throttle.callsArg(0);
     element.style.width = '400px';
@@ -499,7 +529,7 @@ describe('LoggingDriver', () => {
         'recordChange',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new Event('focusout'));
     await new Promise(resolve => setTimeout(resolve, 0));
     assert.isFalse(recordChange.calledOnce);
@@ -588,7 +618,7 @@ describe('LoggingDriver', () => {
         'recordHover',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new MouseEvent('mouseover'));
     const [logging] = await expectCalled(throttle);
     sinon.assert.notCalled(recordHover);
@@ -604,7 +634,7 @@ describe('LoggingDriver', () => {
         'recordHover',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new MouseEvent('mouseover'));
     await expectCalled(throttle);
     sinon.assert.notCalled(recordHover);
@@ -621,8 +651,8 @@ describe('LoggingDriver', () => {
         'recordHover',
     );
 
-    const parent = document.getElementById('parent') as HTMLElement;
-    const element = document.getElementById('element') as HTMLElement;
+    const parent = document.getElementById('parent')!;
+    const element = document.getElementById('element')!;
     parent.dispatchEvent(new MouseEvent('mouseover'));
     await expectCalled(throttle);
 
@@ -642,7 +672,7 @@ describe('LoggingDriver', () => {
         'recordDrag',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new MouseEvent('pointerdown'));
     assert.exists(dragLogThrottler.process);
     sinon.assert.notCalled(recordDrag);
@@ -661,7 +691,7 @@ describe('LoggingDriver', () => {
         'recordDrag',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new MouseEvent('pointerdown'));
     assert.exists(dragLogThrottler.process);
     sinon.assert.notCalled(recordDrag);
@@ -680,7 +710,7 @@ describe('LoggingDriver', () => {
         'recordDrag',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.dispatchEvent(new MouseEvent('pointerdown', {screenX: 0, screenY: 0}));
 
     await expectCalled(throttle);
@@ -700,7 +730,7 @@ describe('LoggingDriver', () => {
         'recordResize',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
 
     element.style.height = '400px';
     const [logging] = await expectCall(throttle, {callCount: 2});
@@ -717,7 +747,7 @@ describe('LoggingDriver', () => {
         'recordResize',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.style.height = '301px';
     sinon.assert.notCalled(recordResize);
   });
@@ -730,7 +760,7 @@ describe('LoggingDriver', () => {
         'recordResize',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
 
     element.style.display = 'none';
     const [logging] = await expectCall(throttle, {callCount: 2});
@@ -754,7 +784,7 @@ describe('LoggingDriver', () => {
 
   it('throttles resize per element', async () => {
     addLoggableElements();
-    const element1 = document.getElementById('element') as HTMLElement;
+    const element1 = document.getElementById('element')!;
     const element2 = element1.cloneNode() as HTMLElement;
     document.getElementById('parent')?.appendChild(element2);
     await VisualLoggingTesting.LoggingDriver.startLogging({resizeLogThrottler: throttler});
@@ -782,7 +812,7 @@ describe('LoggingDriver', () => {
 
   it('only logs resize of the outer element', async () => {
     addLoggableElements();
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     const child = document.createElement('div');
     child.setAttribute('jslog', 'TreeItem; track: resize');
     child.style.width = '100%';
@@ -807,7 +837,7 @@ describe('LoggingDriver', () => {
 
   it('does not log resize intial impressions due to visibility change', async () => {
     addLoggableElements();
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.style.display = 'none';
 
     await VisualLoggingTesting.LoggingDriver.startLogging(
@@ -830,7 +860,7 @@ describe('LoggingDriver', () => {
 
   it('properly handles the switch between visible elements', async () => {
     addLoggableElements();
-    const element1 = document.getElementById('element') as HTMLElement;
+    const element1 = document.getElementById('element')!;
     const child = document.createElement('div');
     child.id = 'child';
     child.setAttribute('jslog', 'TreeItem; track: resize');
@@ -877,8 +907,8 @@ describe('LoggingDriver', () => {
         'recordResize',
     );
 
-    const element = document.getElementById('element') as HTMLElement;
-    const parent = document.getElementById('parent') as HTMLElement;
+    const element = document.getElementById('element')!;
+    const parent = document.getElementById('parent')!;
 
     parent.removeChild(element);
     const [logging] = await expectCall(throttle, {callCount: 2});
@@ -911,8 +941,8 @@ describe('LoggingDriver', () => {
     );
     recordImpression.resetHistory();
 
-    const element = document.getElementById('element') as HTMLElement;
-    const parent = document.getElementById('parent') as HTMLElement;
+    const element = document.getElementById('element')!;
+    const parent = document.getElementById('parent')!;
 
     parent.removeChild(element);
     parent.appendChild(element.cloneNode());
@@ -929,7 +959,7 @@ describe('LoggingDriver', () => {
 
   it('logs keydown, then resize, then impressions', async () => {
     addLoggableElements();
-    const element = document.getElementById('element') as HTMLElement;
+    const element = document.getElementById('element')!;
     element.setAttribute('jslog', 'TreeItem; context:42; track: keydown: KeyA, resize');
     const keyboardLogThrottler = new Common.Throttler.Throttler(100);
     const resizeLogThrottler = new Common.Throttler.Throttler(100);
@@ -949,7 +979,7 @@ describe('LoggingDriver', () => {
     recordImpression.resetHistory();
     throttle.callsArg(0);
 
-    const parent = document.getElementById('parent') as HTMLElement;
+    const parent = document.getElementById('parent')!;
 
     parent.removeChild(element);
     parent.appendChild(element.cloneNode());

package/front_end/ui/visual_logging/LoggingDriver.ts

@@ -138,7 +138,7 @@ const viewportRectFor = (element: Element): DOMRect => {
   return viewportRect;
 };
 
-async function process(): Promise<void> {
+export async function process(): Promise<void> {
   if (document.hidden) {
     return;
   }
@@ -153,7 +153,8 @@ async function process(): Promise<void> {
     if (!loggingState.impressionLogged) {
       const overlap = visibleOverlap(element, viewportRectFor(element));
       const visibleSelectOption = element.tagName === 'OPTION' && loggingState.parent?.selectOpen;
-      const visible = overlap && (!parent || loggingState.parent?.impressionLogged);
+      const visible = overlap && element.checkVisibility({checkVisibilityCSS: true}) &&
+          (!parent || loggingState.parent?.impressionLogged);
       if (visible || visibleSelectOption) {
         if (overlap) {
           loggingState.size = overlap;

package/front_end/ui/visual_logging/LoggingState.ts

@@ -65,9 +65,11 @@ export function registerParentProvider(name: string, provider: ParentProvider):
   parentProviders.set(name, provider);
 }
 
-const parentMap = new WeakMap<Element, Element>();
-registerParentProvider('mapped', (e: Element) => parentMap.get(e));
+/** MUST NOT BE EXPORTED */
+const PARENT = Symbol('veParent');
+type ElementWithParent = Element&{[PARENT]?: Element};
+registerParentProvider('mapped', (e: ElementWithParent) => e[PARENT]);
 
-export function setMappedParent(element: Element, parent: Element): void {
-  parentMap.set(element, parent);
+export function setMappedParent(element: ElementWithParent, parent: Element): void {
+  element[PARENT] = parent;
 }

package/front_end/ui/visual_logging/README.md

@@ -202,9 +202,7 @@ structure look like. To do that, run
 setVeDebuggingEnabled(true);
 ```
 
-in DevTools on DevTools. This will add red outline to each visual element and
-will show the details of logging config for an element and all its ancestors on
-hover.
+in DevTools on DevTools. This will show the details of logging config for an element and all its ancestors on hover.
 
 ![Visual Element debugging in DevTools on DevTools](visual_logging_debugging.png)
 

package/front_end/ui/visual_logging/visual_logging.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Debugging from './Debugging.js';
 import type * as LoggableModule from './Loggable.js';
 import * as LoggingConfig from './LoggingConfig.js';
 import * as LoggingDriver from './LoggingDriver.js';
@@ -39,6 +40,13 @@ export async function isUnderInspection(origin?: string): Promise<boolean> {
   return [431010711, -1313957874, -1093325535].includes(context);
 }
 
+export function setHighlightedVe(veKey: string|null): void {
+  Debugging.setHighlightedVe(veKey);
+  if (veKey) {
+    void LoggingDriver.process();
+  }
+}
+
 /**
  * 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
@@ -49,6 +57,7 @@ export async function isUnderInspection(origin?: string): Promise<boolean> {
 export const action = LoggingConfig.makeConfigStringBuilder.bind(null, 'Action');
 export const adorner = LoggingConfig.makeConfigStringBuilder.bind(null, 'Adorner');
 export const animationClip = LoggingConfig.makeConfigStringBuilder.bind(null, 'AnimationClip');
+export const badge = LoggingConfig.makeConfigStringBuilder.bind(null, 'Badge');
 export const bezierCurveEditor = LoggingConfig.makeConfigStringBuilder.bind(null, 'BezierCurveEditor');
 export const bezierPresetCategory = LoggingConfig.makeConfigStringBuilder.bind(null, 'BezierPresetCategory');
 export const breakpointMarker = LoggingConfig.makeConfigStringBuilder.bind(null, 'BreakpointMarker');

package/inspector_overlay/css_grid_label_helpers.ts

@@ -375,10 +375,10 @@ export function normalizePositionData(config: NormalizePositionDataConfig, bound
 /**
  * Places the grid row and column number labels on the overlay.
  *
- * @param {HTMLElement} container Where to append the labels
- * @param {GridPositionNormalizedData} data The grid line number data
- * @param {DOMMatrix=} writingModeMatrix The transformation matrix in case a vertical writing-mode is applied, to map label positions
- * @param {string=} writingMode The current writing-mode value
+ * @param container Where to append the labels
+ * @param data The grid line number data
+ * @param writingModeMatrix The transformation matrix in case a vertical writing-mode is applied, to map label positions
+ * @param writingMode The current writing-mode value
  */
 export function drawGridLineNumbers(
     container: HTMLElement, data: GridPositionNormalizedData, canvasSize: CanvasSize, emulationScaleFactor: number,

package/inspector_overlay/highlight_flex_common.ts

@@ -735,7 +735,7 @@ function segmentToPath(segment: [Position, Position]): PathCommands {
 /**
  * Transform a path array (as returned by the backend) that corresponds to a rectangle into a quad.
  * @param commands
- * @return The quad object
+ * @returns The quad object
  */
 function rectPathToQuad(commands: PathCommands): Quad {
   return {
@@ -841,7 +841,7 @@ export function growQuadToEdgesOf(innerQuad: Quad, outerQuad: Quad, horizontally
  * Return the x/y intersection of the 2 segments
  * @param segment1
  * @param segment2
- * @return the point where the segments intersect
+ * @returns the point where the segments intersect
  */
 export function intersectSegments([p1, p2]: Position[], [p3, p4]: Position[]): Position {
   const x = (((p1.x * p2.y - p1.y * p2.x) * (p3.x - p4.x)) - ((p1.x - p2.x) * (p3.x * p4.y - p3.y * p4.x))) /

package/inspector_overlay/loadCSS.rollup.js

@@ -9,8 +9,8 @@ module.exports = function loadCSS() {
   return {
     name: 'loadCSS',
     /**
-     * @param {!Object} code
-     * @param {string} id
+     * @param code
+     * @param id
      */
     transform(code, id) {
       if (id.endsWith('.css')) {

package/inspector_overlay/main.ts

@@ -6,7 +6,6 @@
 import commonStyle from './common.css';
 import {adoptStyleSheet} from './common.js';
 import {gridStyle} from './highlight_grid_common.js';
-import {DistancesOverlay} from './tool_distances.js';
 // @ts-expect-error Importing CSS is handled in Rollup.
 import highlightGridStyle from './tool_grid.css';
 // @ts-expect-error Importing CSS is handled in Rollup.
@@ -41,7 +40,6 @@ gridStyleSheet.replaceSync(gridStyle);
 
 const highlightOverlay = new HighlightOverlay(window, [highlightStyle, gridStyleSheet]);
 const persistentOverlay = new PersistentOverlay(window, [highlightGridStyle, gridStyleSheet]);
-const distancesOverlay = new DistancesOverlay(window);
 const pausedOverlay = new PausedOverlay(window, pausedStyle);
 const screenshotOverlay = new ScreenshotOverlay(window, screenshotStyle);
 const sourceOrderOverlay = new SourceOrderOverlay(window, sourceOrderStyle);
@@ -49,7 +47,6 @@ const viewportSizeOverlay = new ViewportSizeOverlay(window);
 const windowControlsOverlay = new WindowControlsOverlay(window, [wcoStyle]);
 
 interface Overlays {
-  distances: DistancesOverlay;
   highlight: HighlightOverlay;
   persistent: PersistentOverlay;
   paused: PausedOverlay;
@@ -63,7 +60,6 @@ type PlatformName = string;
 
 // Key in this object is the name the backend refers to a particular overlay by.
 const overlays: Overlays = {
-  distances: distancesOverlay,
   highlight: highlightOverlay,
   persistent: persistentOverlay,
   paused: pausedOverlay,

package/inspector_overlay/tool_highlight.css

@@ -183,7 +183,7 @@ body {
 .element-description {
   flex: 1 1;
   font-weight: bold;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   word-break: break-all;
 }
 

package/inspector_overlay/tool_highlight.ts

@@ -415,8 +415,8 @@ const gridBackgroundColor = 'rgba(255, 255, 255, 0.8)';
 
 /**
  * Determine the layout type of the highlighted element based on the config.
- * @param {Object} elementInfo The element information, part of the config object passed to drawHighlight
- * @return {String|null} The layout type of the object, or null if none was found
+ * @param elementInfo The element information, part of the config object passed to drawHighlight
+ * @returns The layout type of the object, or null if none was found
  */
 function getElementLayoutType(elementInfo: ElementInfo): string|null {
   if (elementInfo.layoutObjectName?.endsWith('Grid')) {
@@ -592,11 +592,11 @@ export function createElementDescription(elementInfo: ElementInfo, colorFormat:
 }
 
 /**
- * @param {Object} elementInfo The highlight config object passed to drawHighlight
- * @param {String} colorFormat
- * @param {Object} bounds
- * @param {number} canvasWidth
- * @param {number} canvasHeight
+ * @param elementInfo The highlight config object passed to drawHighlight
+ * @param colorFormat
+ * @param bounds
+ * @param canvasWidth
+ * @param canvasHeight
  */
 function drawElementTitle(
     elementInfo: ElementInfo, colorFormat: string, bounds: Bounds, canvasWidth: number, canvasHeight: number) {