chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/elements/components/CSSPropertyDocsView.ts

@@ -7,6 +7,7 @@ import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import {html, nothing, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -14,20 +15,190 @@ import CSSPropertyDocsViewStyles from './cssPropertyDocsView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text for button that redirects to CSS property documentation.
+   * @description Text for button that redirects to CSS property documentation.
    */
   learnMore: 'Learn more',
   /**
-   *@description Text for a checkbox to turn off the CSS property documentation.
+   * @description Text for a checkbox to turn off the CSS property documentation.
    */
   dontShow: 'Don\'t show',
+  /**
+   * @description Text indicating that the CSS property has limited availability across major browsers.
+   */
+  limitedAvailability: 'Limited availability across major browsers',
+  /**
+   * @description Text indicating that the CSS property has limited availability across major browsers, with a list of unsupported browsers.
+   * @example {Firefox} PH1
+   * @example {Safari on iOS} PH1
+   * @example {Chrome, Firefox on Android, or Safari} PH1
+   */
+  limitedAvailabilityInBrowsers: 'Limited availability across major browsers (not fully implemented in {PH1})',
+  /**
+   * @description Text to display a combination of browser name and platform name.
+   * @example {Safari} PH1
+   * @example {iOS} PH2
+   */
+  browserOnPlatform: '{PH1} on {PH2}',
+  /**
+   * @description Text indicating that the CSS property is newly available across major browsers since a certain time.
+   * @example {September 2015} PH1
+   */
+  newlyAvailableSince: 'Newly available across major browsers (`Baseline` since {PH1})',
+  /**
+   * @description Text indicating that the CSS property is widely available across major browsers since a certain time.
+   * @example {September 2015} PH1
+   * @example {an unknown date} PH1
+   */
+  widelyAvailableSince: 'Widely available across major browsers (`Baseline` since {PH1})',
+  /**
+   * @description Text indicating that a specific date is not known.
+   */
+  unknownDate: 'an unknown date',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSPropertyDocsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-interface CSSProperty {
+const BASELINE_HIGH_AVAILABILITY_ICON =
+    '../../../Images/baseline-high-availability.svg' as Platform.DevToolsPath.RawPathString;
+const BASELINE_LOW_AVAILABILITY_ICON =
+    '../../../Images/baseline-low-availability.svg' as Platform.DevToolsPath.RawPathString;
+const BASELINE_LIMITED_AVAILABILITY_ICON =
+    '../../../Images/baseline-limited-availability.svg' as Platform.DevToolsPath.RawPathString;
+
+const getBaselineIconPath = (baseline: Baseline): Platform.DevToolsPath.UrlString => {
+  let relativePath: string;
+  switch (baseline.status) {
+    case BaselineStatus.HIGH:
+      relativePath = BASELINE_HIGH_AVAILABILITY_ICON;
+      break;
+    case BaselineStatus.LOW:
+      relativePath = BASELINE_LOW_AVAILABILITY_ICON;
+      break;
+    default:
+      relativePath = BASELINE_LIMITED_AVAILABILITY_ICON;
+  }
+  return new URL(relativePath, import.meta.url).toString() as Platform.DevToolsPath.UrlString;
+};
+
+const enum BrowserId {
+  C = 'C',
+  CA = 'CA',
+  E = 'E',
+  FF = 'FF',
+  FFA = 'FFA',
+  S = 'S',
+  SM = 'SM',
+}
+const allBrowserIds = new Set<BrowserId>(
+    [BrowserId.C, BrowserId.CA, BrowserId.E, BrowserId.FF, BrowserId.FFA, BrowserId.S, BrowserId.SM]);
+const enum BrowserPlatform {
+  DESKTOP = 'desktop',
+  ANDROID = 'Android',
+  MACOS = 'macOS',
+  IOS = 'iOS',
+}
+const browserIdToNameAndPlatform = new Map([
+  [BrowserId.C, {name: 'Chrome', platform: BrowserPlatform.DESKTOP}],
+  [BrowserId.CA, {name: 'Chrome', platform: BrowserPlatform.ANDROID}],
+  [BrowserId.E, {name: 'Edge', platform: BrowserPlatform.DESKTOP}],
+  [BrowserId.FF, {name: 'Firefox', platform: BrowserPlatform.DESKTOP}],
+  [BrowserId.FFA, {name: 'Firefox', platform: BrowserPlatform.ANDROID}],
+  [BrowserId.S, {name: 'Safari', platform: BrowserPlatform.MACOS}],
+  [BrowserId.SM, {name: 'Safari', platform: BrowserPlatform.IOS}],
+]);
+
+function formatBrowserList(browserNames: Map<string, BrowserPlatform[]>): string {
+  const formatter = new Intl.ListFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+    style: 'long',
+    type: 'disjunction',
+  });
+  return formatter.format(browserNames.entries().map(
+      ([name, platforms]) => platforms.length !== 1 || platforms[0] === BrowserPlatform.DESKTOP ?
+          name :
+          i18nString(UIStrings.browserOnPlatform, {PH1: name, PH2: platforms[0]})));
+}
+
+const formatBaselineDate = (date?: string): string => {
+  if (!date) {
+    return i18nString(UIStrings.unknownDate);
+  }
+  const parsedDate = new Date(date);
+  const formatter = new Intl.DateTimeFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+    month: 'long',
+    year: 'numeric',
+  });
+  return formatter.format(parsedDate);
+};
+
+const getBaselineMissingBrowsers = (browsers: string[]): Map<string, BrowserPlatform[]> => {
+  const browserIds = browsers.map(v => v.replace(/\d*$/, ''));
+  const missingBrowserIds = allBrowserIds.difference(new Set(browserIds));
+  const missingBrowsers = new Map();
+  for (const id of missingBrowserIds) {
+    const browserInfo = browserIdToNameAndPlatform.get(id);
+    if (browserInfo) {
+      const {name, platform} = browserInfo;
+      missingBrowsers.set(name, [...(missingBrowsers.get(name) ?? []), platform]);
+    }
+  }
+  return missingBrowsers;
+};
+
+const getBaselineText = (baseline: Baseline, browsers?: string[]): string => {
+  if (baseline.status === BaselineStatus.LIMITED) {
+    const missingBrowsers = browsers && getBaselineMissingBrowsers(browsers);
+    if (missingBrowsers) {
+      return i18nString(UIStrings.limitedAvailabilityInBrowsers, {PH1: formatBrowserList(missingBrowsers)});
+    }
+    return i18nString(UIStrings.limitedAvailability);
+  }
+
+  if (baseline.status === BaselineStatus.LOW) {
+    return i18nString(UIStrings.newlyAvailableSince, {PH1: formatBaselineDate(baseline.baseline_low_date)});
+  }
+  return i18nString(UIStrings.widelyAvailableSince, {PH1: formatBaselineDate(baseline.baseline_high_date)});
+};
+
+export const enum BaselineStatus {
+  LIMITED = 'false',
+  LOW = 'low',
+  HIGH = 'high',
+}
+
+/**
+ * An object containing Baseline (https://web.dev/baseline,
+ * https://web-platform-dx.github.io/web-features/) information about the feature's browser
+ * compatibility.
+ */
+interface Baseline {
+  /**
+   * The Baseline status of the feature:
+   * - `"false"` — limited availability across major browsers
+   * - `"low"` — newly available across major browsers
+   * - `"high"` — widely available across major browsers
+   */
+  status: BaselineStatus;
+  /**
+   * A date in the format `YYYY-MM-DD` representing when the feature became newly available,
+   * or `undefined` if it hasn't yet reached that status.
+   */
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  baseline_low_date?: string;
+  /**
+   * A date in the format `YYYY-MM-DD` representing when the feature became widely available,
+   * or `undefined` if it hasn't yet reached that status.
+   *
+   * The widely available date is always 30 months after the newly available date.
+   */
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  baseline_high_date?: string;
+}
+
+export interface CSSProperty {
   name: string;
   description?: string;
+  baseline?: Baseline;
+  browsers?: string[];
   references?: Array<{
     name: string,
     url: string,
@@ -52,8 +223,8 @@ export class CSSPropertyDocsView extends HTMLElement {
   }
 
   #render(): void {
-    const description = this.#cssProperty.description;
-    const link = this.#cssProperty.references?.[0].url;
+    const {description, references, baseline, browsers} = this.#cssProperty;
+    const link = references?.[0].url;
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -65,6 +236,18 @@ export class CSSPropertyDocsView extends HTMLElement {
             ${description}
           </div>
         ` : nothing}
+        ${baseline ? html`
+          <div id="baseline" class="docs-popup-section">
+            <img
+              id="baseline-icon"
+              src=${getBaselineIconPath(baseline)}
+              role="presentation"
+            >
+            <span>
+              ${getBaselineText(baseline, browsers)}
+            </span>
+          </div>
+        ` : nothing}
         ${link ? html`
           <div class="docs-popup-section footer">
             <x-link

package/front_end/panels/elements/components/CSSPropertyIconResolver.test.ts

@@ -853,7 +853,7 @@ describe('CSSPropertyIconResolver', () => {
       assert.deepEqual(
           ElementsComponents.CSSPropertyIconResolver.findIcon(
               `flex-wrap: ${test.style['flex-wrap']}`, mapFromStyle(test.style)),
-          ElementsComponents.CSSPropertyIconResolver.roateFlexWrapIcon(test.iconName, test.expected),
+          ElementsComponents.CSSPropertyIconResolver.rotateFlexWrapIcon(test.iconName, test.expected),
           `Test flex-wrap(${JSON.stringify(test.style)}) failed.`);
     }
   });

package/front_end/panels/elements/components/CSSPropertyIconResolver.ts

@@ -262,7 +262,7 @@ function gridAlignSelfIcon(iconName: string): (parentStyles: ComputedStyles) =>
   return getIcon;
 }
 
-export function roateFlexWrapIcon(iconName: string, direction: PhysicalDirection): IconInfo {
+export function rotateFlexWrapIcon(iconName: string, direction: PhysicalDirection): IconInfo {
   return {
     iconName,
     rotate: direction === PhysicalDirection.BOTTOM_TO_TOP || direction === PhysicalDirection.TOP_TO_BOTTOM ? 90 : 0,
@@ -275,7 +275,7 @@ function flexWrapIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
     const computedFlexDirection = computedStyles.get('flex-direction') || 'row';
-    return roateFlexWrapIcon(iconName, directions[computedFlexDirection]);
+    return rotateFlexWrapIcon(iconName, directions[computedFlexDirection]);
   }
   return getIcon;
 }

package/front_end/panels/elements/components/CSSVariableValueView.ts

@@ -11,19 +11,19 @@ import cssVariableValueViewStyles from './cssVariableValueView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text for a link from custom property to its defining registration
+   * @description Text for a link from custom property to its defining registration
    */
   registeredPropertyLinkTitle: 'View registered property',
   /**
-   *@description Error message for a property value that failed to parse because it had an incorrect type. The message
+   * @description Error message for a property value that failed to parse because it had an incorrect type. The message
    * is shown in a popover when hovering the property value. The `type` placeholder will be rendered as an HTML element
    * to apply some styling (color and monospace font)
-   *@example {<color>} type
+   * @example {<color>} type
    */
   invalidPropertyValue: 'Invalid property value, expected type {type}',
   /**
-   *@description Text displayed in a tooltip shown when hovering over a var() CSS function in the Styles pane when the custom property in this function does not exist. The parameter is the name of the property.
-   *@example {--my-custom-property-name} PH1
+   * @description Text displayed in a tooltip shown when hovering over a var() CSS function in the Styles pane when the custom property in this function does not exist. The parameter is the name of the property.
+   * @example {--my-custom-property-name} PH1
    */
   sIsNotDefined: '{PH1} is not defined',
 } as const;

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -272,16 +272,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
         ?disabled=${disabled}
         aria-label=${tooltipString}
         title=${tooltipString}>
-        <devtools-icon .data=${{
-          iconName: 'triangle-' + direction,
-          color: 'var(--sys-color-on-surface)',
-          width: '12px',
-          height: '10px',
-        }}>
+        <devtools-icon name=${'triangle-' + direction} style="width: var(--sys-size-6); height: 10px;">
         </devtools-icon>
       </button>
       `;
-        // clang-format on
+    // clang-format on
   }
 
   #render(): void {

package/front_end/panels/elements/components/ElementsTreeExpandButton.ts

@@ -13,7 +13,7 @@ import elementsTreeExpandButtonStyles from './elementsTreeExpandButton.css.js';
 
 const UIStrings = {
   /**
-   *@description Aria label for a button expanding collapsed subtree
+   * @description Aria label for a button expanding collapsed subtree
    */
   expand: 'Expand',
 } as const;

package/front_end/panels/elements/components/QueryContainer.ts

@@ -118,10 +118,7 @@ export class QueryContainer extends HTMLElement {
       <span class="queried-size-details">
         (${this.#queriedSizeDetails.queryAxis}
         <devtools-icon
-          class=${axisIconClasses} .data=${{
-            iconName: 'width',
-            color: 'var(--icon-default)',
-          }}></devtools-icon>
+          class=${axisIconClasses} name="width"></devtools-icon>
         ) ${areBothAxesQueried && this.#queriedSizeDetails.width ? ' width: ' : Lit.nothing}
         ${this.#queriedSizeDetails.width || Lit.nothing}
         ${areBothAxesQueried && this.#queriedSizeDetails.height ? ' height: ' : Lit.nothing}

package/front_end/panels/elements/components/components.ts

@@ -15,8 +15,6 @@ import * as ElementsBreadcrumbs from './ElementsBreadcrumbs.js';
 import * as ElementsBreadcrumbsUtils from './ElementsBreadcrumbsUtils.js';
 import * as ElementsTreeExpandButton from './ElementsTreeExpandButton.js';
 import * as Helper from './Helper.js';
-import * as LayoutPane from './LayoutPane.js';
-import * as LayoutPaneUtils from './LayoutPaneUtils.js';
 import * as QueryContainer from './QueryContainer.js';
 import * as StylePropertyEditor from './StylePropertyEditor.js';
 
@@ -34,8 +32,6 @@ export {
   ElementsBreadcrumbsUtils,
   ElementsTreeExpandButton,
   Helper,
-  LayoutPane,
-  LayoutPaneUtils,
   QueryContainer,
   StylePropertyEditor,
 };

package/front_end/panels/elements/components/cssPropertyDocsView.css

@@ -5,7 +5,7 @@
  */
 
 .docs-popup-wrapper {
-  max-width: 350px;
+  max-width: 420px;
   font-size: 12px;
   line-height: 1.4;
 }
@@ -30,3 +30,14 @@
   display: flex;
   justify-content: space-between;
 }
+
+#baseline {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+#baseline-icon {
+  width: 18px;
+  height: 18px;
+}

package/front_end/panels/elements/components/cssVariableValueView.css

@@ -8,6 +8,7 @@
   max-width: 232px;
   font-size: 12px;
   line-height: 1.4;
+  word-break: break-all;
 }
 
 .monospace {

package/front_end/panels/elements/domLinkifier.css

@@ -4,50 +4,51 @@
  * found in the LICENSE file.
  */
 
-:host,
-.widget {
-  display: inline;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    display: inline;
+  }
 
-.node-link {
-  cursor: pointer;
-  display: inline;
-  pointer-events: auto;
-  outline-offset: 2px;
+  .node-link {
+    cursor: pointer;
+    display: inline;
+    pointer-events: auto;
+    outline-offset: 2px;
 
-  /* If the element has lots of classes, don't let the label get too wide */
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: min(100%, 550px);
+    /* If the element has lots of classes, don't let the label get too wide */
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: min(100%, 550px);
 
-  &:focus-visible {
-    outline-width: unset;
-  }
+    &:focus-visible {
+      outline-width: unset;
+    }
 
-  &.dynamic-link:hover {
-    text-decoration: underline;
+    &.dynamic-link:hover {
+      text-decoration: underline;
+    }
   }
-}
 
-.node-link.disabled {
-  .node-label-name,
-  .node-label-class,
-  .node-label-pseudo,
-  .node-label-name .dynamic-link,
-  .node-label-id {
-    color: var(--sys-color-state-disabled);
+  .node-link.disabled {
+    .node-label-name,
+    .node-label-class,
+    .node-label-pseudo,
+    .node-label-name .dynamic-link,
+    .node-label-id {
+      color: var(--sys-color-state-disabled);
+    }
   }
-}
 
-.node-label-name {
-  color: var(--sys-color-token-tag);
+  .node-label-name {
+    color: var(--sys-color-token-tag);
 
-  .dynamic-link & {
-    color: var(--text-link);
+    .dynamic-link & {
+      color: var(--text-link);
+    }
   }
-}
 
-.node-label-class,
-.node-label-pseudo {
-  color: var(--sys-color-token-attribute);
+  .node-label-class,
+  .node-label-pseudo {
+    color: var(--sys-color-token-attribute);
+  }
 }

package/front_end/panels/elements/elementStatePaneWidget.css

@@ -3,49 +3,50 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-
-.styles-element-state-pane {
-  overflow: hidden;
-  padding-left: 2px;
-  background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
-  margin-top: 0;
-  padding-bottom: 2px;
-}
-
-.styles-element-state-pane > .page-state-checkbox {
-  margin-block: 6px;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.styles-element-state-pane .section-header {
-  margin: 8px 4px 6px;
-  color: var(--color-text-secondary);
-}
-
-.styles-element-state-pane > table {
-  width: 100%;
-  border-spacing: 0;
-}
-
-.styles-element-state-pane td {
-  padding: 0;
-}
-
-.pseudo-states-container {
-  display: grid;
-  column-gap: 12px;
-  grid-template-columns: repeat(2, 1fr);
-  grid-auto-flow: row;
-}
-
-.pseudo-states-container.specific-pseudo-states {
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 4px;
-}
-
-.force-specific-element-header:focus {
-  background-color: var(--sys-color-state-hover-on-subtle);
+@scope to (devtools-widget > *) {
+  .styles-element-state-pane {
+    overflow: hidden;
+    padding-left: 2px;
+    background-color: var(--sys-color-cdt-base-container);
+    border-bottom: 1px solid var(--sys-color-divider);
+    margin-top: 0;
+    padding-bottom: 2px;
+  }
+
+  .styles-element-state-pane > .page-state-checkbox {
+    margin-block: 6px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .styles-element-state-pane .section-header {
+    margin: 8px 4px 6px;
+    color: var(--color-text-secondary);
+  }
+
+  .styles-element-state-pane > table {
+    width: 100%;
+    border-spacing: 0;
+  }
+
+  .styles-element-state-pane td {
+    padding: 0;
+  }
+
+  .pseudo-states-container {
+    display: grid;
+    column-gap: 12px;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-flow: row;
+  }
+
+  .pseudo-states-container.specific-pseudo-states {
+    grid-template-columns: repeat(2, 1fr);
+    margin-bottom: 4px;
+  }
+
+  .force-specific-element-header:focus {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
 }

package/front_end/panels/elements/elements-meta.ts

@@ -8,7 +8,6 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type * as ElementsComponents from './components/components.js';
 import type * as Elements from './elements.js';
 
 const UIStrings = {
@@ -89,7 +88,7 @@ const UIStrings = {
    */
   selectAnElementInThePageTo: 'Select an element in the page to inspect it',
   /**
-   *@description Title/tooltip of an action in the elements panel to add a new style rule.
+   * @description Title/tooltip of an action in the elements panel to add a new style rule.
    */
   newStyleRule: 'New Style Rule',
   /**
@@ -164,7 +163,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/elements-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 let loadedElementsModule: (typeof Elements|undefined);
-let loadedElementsComponentsModule: (typeof ElementsComponents|undefined);
 
 async function loadElementsModule(): Promise<typeof Elements> {
   if (!loadedElementsModule) {
@@ -172,12 +170,6 @@ async function loadElementsModule(): Promise<typeof Elements> {
   }
   return loadedElementsModule;
 }
-async function loadElementsComponentsModule(): Promise<typeof ElementsComponents> {
-  if (!loadedElementsComponentsModule) {
-    loadedElementsComponentsModule = await import('./components/components.js');
-  }
-  return loadedElementsComponentsModule;
-}
 function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (elementsModule: typeof Elements) => T[]): T[] {
   if (loadedElementsModule === undefined) {
     return [];
@@ -225,7 +217,6 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showEventListeners),
   title: i18nLazyString(UIStrings.eventListeners),
   order: 5,
-  hasToolbar: true,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   async loadView() {
     const Elements = await loadElementsModule();
@@ -268,8 +259,8 @@ UI.ViewManager.registerViewExtension({
   order: 4,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   async loadView() {
-    const ElementsComponents = await loadElementsComponentsModule();
-    return ElementsComponents.LayoutPane.LayoutPane.instance().wrapper as UI.Widget.Widget;
+    const Elements = await loadElementsModule();
+    return Elements.LayoutPane.LayoutPane.instance();
   },
 });
 
@@ -695,7 +686,7 @@ UI.UIUtils.registerRenderer({
   },
   async loadRenderer() {
     const Elements = await loadElementsModule();
-    return Elements.ElementsTreeOutline.Renderer.instance();
+    return Elements.ElementsTreeOutlineRenderer.Renderer.instance();
   },
 });
 

package/front_end/panels/elements/elements.ts

@@ -26,7 +26,6 @@ import './CSSRuleValidator.js';
 import './ElementsPanel.js';
 import './ClassesPaneWidget.js';
 import './ElementStatePaneWidget.js';
-import './ElementsTreeElementHighlighter.js';
 import './AccessibilityTreeUtils.js';
 import './AccessibilityTreeView.js';
 
@@ -44,11 +43,12 @@ import * as ElementsPanel from './ElementsPanel.js';
 import * as ElementsSidebarPane from './ElementsSidebarPane.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
 import * as ElementsTreeElement from './ElementsTreeElement.js';
-import * as ElementsTreeElementHighlighter from './ElementsTreeElementHighlighter.js';
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
+import * as ElementsTreeOutlineRenderer from './ElementsTreeOutlineRenderer.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
 import * as LayersWidget from './LayersWidget.js';
+import * as LayoutPane from './LayoutPane.js';
 import * as MarkerDecorator from './MarkerDecorator.js';
 import * as MetricsSidebarPane from './MetricsSidebarPane.js';
 import * as NodeStackTraceWidget from './NodeStackTraceWidget.js';
@@ -79,11 +79,12 @@ export {
   ElementsSidebarPane,
   ElementStatePaneWidget,
   ElementsTreeElement,
-  ElementsTreeElementHighlighter,
   ElementsTreeOutline,
+  ElementsTreeOutlineRenderer,
   EventListenersWidget,
   InspectElementModeController,
   LayersWidget,
+  LayoutPane,
   MarkerDecorator,
   MetricsSidebarPane,
   NodeStackTraceWidget,