Remove bridge files in elements/

R=changhaohan@chromium.org,jacktfranklin@chromium.org

Bug: 1011811
Change-Id: Ie40dbd8508fa1b4281767b8fd775ca7a19a81e17
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2545167
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

all_devtools_modules.gni

@@ -132,31 +132,25 @@ all_typescript_module_sources = [
   "elements/ColorSwatchPopoverIcon.js",
   "elements/ComputedStyleModel.js",
   "elements/ComputedStyleProperty.js",
-  "elements/ComputedStyleProperty_bridge.js",
   "elements/ComputedStyleTrace.js",
-  "elements/ComputedStyleTrace_bridge.js",
   "elements/ComputedStyleWidget.js",
   "elements/DOMLinkifier.js",
   "elements/DOMPath.js",
   "elements/ElementStatePaneWidget.js",
   "elements/ElementsBreadcrumbs.js",
   "elements/ElementsBreadcrumbsUtils.js",
-  "elements/ElementsBreadcrumbs_bridge.js",
   "elements/ElementsPanel.js",
   "elements/ElementsPanelLink.js",
-  "elements/ElementsPanelLink_bridge.js",
   "elements/ElementsSidebarPane.js",
   "elements/ElementsTreeElement.js",
   "elements/ElementsTreeElementHighlighter.js",
   "elements/ElementsTreeOutline.js",
   "elements/EventListenersWidget.js",
   "elements/Icon.js",
-  "elements/Icon_bridge.js",
   "elements/ImagePreviewPopover.js",
   "elements/InspectElementModeController.js",
   "elements/LayoutPane.js",
   "elements/LayoutPaneUtils.js",
-  "elements/LayoutPane_bridge.js",
   "elements/LayoutSidebarPane.js",
   "elements/MarkerDecorator.js",
   "elements/MetricsSidebarPane.js",

devtools_grd_files.gni

@@ -515,31 +515,25 @@ grd_files_debug_sources = [
   "front_end/elements/ColorSwatchPopoverIcon.js",
   "front_end/elements/ComputedStyleModel.js",
   "front_end/elements/ComputedStyleProperty.js",
-  "front_end/elements/ComputedStyleProperty_bridge.js",
   "front_end/elements/ComputedStyleTrace.js",
-  "front_end/elements/ComputedStyleTrace_bridge.js",
   "front_end/elements/ComputedStyleWidget.js",
   "front_end/elements/DOMLinkifier.js",
   "front_end/elements/DOMPath.js",
   "front_end/elements/ElementStatePaneWidget.js",
   "front_end/elements/ElementsBreadcrumbs.js",
   "front_end/elements/ElementsBreadcrumbsUtils.js",
-  "front_end/elements/ElementsBreadcrumbs_bridge.js",
   "front_end/elements/ElementsPanel.js",
   "front_end/elements/ElementsPanelLink.js",
-  "front_end/elements/ElementsPanelLink_bridge.js",
   "front_end/elements/ElementsSidebarPane.js",
   "front_end/elements/ElementsTreeElement.js",
   "front_end/elements/ElementsTreeElementHighlighter.js",
   "front_end/elements/ElementsTreeOutline.js",
   "front_end/elements/EventListenersWidget.js",
   "front_end/elements/Icon.js",
-  "front_end/elements/Icon_bridge.js",
   "front_end/elements/ImagePreviewPopover.js",
   "front_end/elements/InspectElementModeController.js",
   "front_end/elements/LayoutPane.js",
   "front_end/elements/LayoutPaneUtils.js",
-  "front_end/elements/LayoutPane_bridge.js",
   "front_end/elements/LayoutSidebarPane.js",
   "front_end/elements/MarkerDecorator.js",
   "front_end/elements/MetricsSidebarPane.js",

front_end/elements/BUILD.gn

@@ -14,31 +14,25 @@ devtools_module("elements") {
     "ColorSwatchPopoverIcon.js",
     "ComputedStyleModel.js",
     "ComputedStyleProperty.ts",
-    "ComputedStyleProperty_bridge.js",
     "ComputedStyleTrace.ts",
-    "ComputedStyleTrace_bridge.js",
     "ComputedStyleWidget.js",
     "DOMLinkifier.js",
     "DOMPath.js",
     "ElementStatePaneWidget.js",
     "ElementsBreadcrumbs.ts",
     "ElementsBreadcrumbsUtils.ts",
-    "ElementsBreadcrumbs_bridge.js",
     "ElementsPanel.js",
     "ElementsPanelLink.ts",
-    "ElementsPanelLink_bridge.js",
     "ElementsSidebarPane.js",
     "ElementsTreeElement.js",
     "ElementsTreeElementHighlighter.js",
     "ElementsTreeOutline.js",
     "EventListenersWidget.js",
     "Icon.ts",
-    "Icon_bridge.js",
     "ImagePreviewPopover.js",
     "InspectElementModeController.js",
     "LayoutPane.ts",
     "LayoutPaneUtils.ts",
-    "LayoutPane_bridge.js",
     "LayoutSidebarPane.js",
     "MarkerDecorator.js",
     "MetricsSidebarPane.js",

front_end/elements/ComputedStyleProperty_bridge.js

@@ -1,36 +0,0 @@
-// Copyright 2020 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.
-
-/**
-* WARNING: do not modify this file by hand!
-* it was automatically generated by the bridge generator
-* if you made changes to the source code and need to update this file, run:
-*  npm run generate-bridge-file front_end/elements/ComputedStyleProperty.ts
-*/
-
-import './ComputedStyleProperty.js';
-/**
-* @typedef {{
-* inherited:boolean,
-* traceable:boolean,
-* onNavigateToSource:function(!Event=):void,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let ComputedStylePropertyData;
-// eslint-disable-next-line no-unused-vars
-export class ComputedStylePropertyClosureInterface extends HTMLElement {
-  /**
-  * @param {!ComputedStylePropertyData} data
-  */
-  set data(data) {
-  }
-}
-/**
-* @return {!ComputedStylePropertyClosureInterface}
-*/
-export function createComputedStyleProperty() {
-  return /** @type {!ComputedStylePropertyClosureInterface} */ (
-      document.createElement('devtools-computed-style-property'));
-}

front_end/elements/ComputedStyleTrace_bridge.js

@@ -1,35 +0,0 @@
-// Copyright 2020 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.
-
-/**
-* WARNING: do not modify this file by hand!
-* it was automatically generated by the bridge generator
-* if you made changes to the source code and need to update this file, run:
-*  npm run generate-bridge-file front_end/elements/ComputedStyleTrace.ts
-*/
-
-import './ComputedStyleTrace.js';
-/**
-* @typedef {{
-* selector:string,
-* active:boolean,
-* onNavigateToSource:function(!Event=):void,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let ComputedStyleTraceData;
-// eslint-disable-next-line no-unused-vars
-export class ComputedStyleTraceClosureInterface extends HTMLElement {
-  /**
-  * @param {!ComputedStyleTraceData} data
-  */
-  set data(data) {
-  }
-}
-/**
-* @return {!ComputedStyleTraceClosureInterface}
-*/
-export function createComputedStyleTrace() {
-  return /** @type {!ComputedStyleTraceClosureInterface} */ (document.createElement('devtools-computed-style-trace'));
-}

front_end/elements/ComputedStyleWidget.js

@@ -34,8 +34,8 @@ import * as SDK from '../sdk/sdk.js';
 import * as UI from '../ui/ui.js';
 
 import {ComputedStyle, ComputedStyleModel, Events} from './ComputedStyleModel.js';  // eslint-disable-line no-unused-vars
-import {ComputedStylePropertyClosureInterface, ComputedStylePropertyData, createComputedStyleProperty} from './ComputedStyleProperty_bridge.js';  // eslint-disable-line no-unused-vars
-import {createComputedStyleTrace} from './ComputedStyleTrace_bridge.js';
+import {ComputedStyleProperty} from './ComputedStyleProperty.js';
+import {ComputedStyleTrace} from './ComputedStyleTrace.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import {categorizePropertyName, Category, DefaultCategoryOrder} from './PropertyNameCategories.js';  // eslint-disable-line no-unused-vars
@@ -47,7 +47,7 @@ import {IdleCallbackManager, StylePropertiesSection, StylesSidebarPane, StylesSi
  * @param {string} propertyValue
  */
 const createPropertyElement = (node, propertyName, propertyValue) => {
-  const propertyElement = createComputedStyleProperty();
+  const propertyElement = new ComputedStyleProperty();
 
   const renderer = new StylesSidebarPropertyRenderer(null, node, propertyName, propertyValue);
   renderer.setColorHandler(processComputedColor);
@@ -71,7 +71,7 @@ const createPropertyElement = (node, propertyName, propertyValue) => {
  * @param {!Components.Linkifier.Linkifier} linkifier
  */
 const createTraceElement = (node, property, isPropertyOverloaded, matchedStyles, linkifier) => {
-  const trace = createComputedStyleTrace();
+  const trace = new ComputedStyleTrace();
 
   const renderer = new StylesSidebarPropertyRenderer(null, node, property.name, /** @type {string} */ (property.value));
   renderer.setColorHandler(processColor);

front_end/elements/ElementsBreadcrumbs.ts

@@ -9,6 +9,7 @@ import * as LitHtml from '../third_party/lit-html/lit-html.js';
 import {crumbsToRender, DOMNode, NodeSelectedEvent, UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
 
 import type {NodeTextData} from './NodeText.js';
+export {DOMNode};
 
 export interface ElementsBreadcrumbsData {
   selectedNode: DOMNode|null;

front_end/elements/ElementsBreadcrumbs_bridge.js

@@ -1,51 +0,0 @@
-// Copyright 2020 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.
-
-/**
-* WARNING: do not modify this file by hand!
-* it was automatically generated by the bridge generator
-* if you made changes to the source code and need to update this file, run:
-*  npm run generate-bridge-file front_end/elements/ElementsBreadcrumbs.ts
-*/
-
-import './ElementsBreadcrumbs.js';
-/**
-* @typedef {{
-* selectedNode:?DOMNode,
-* crumbs:!Array.<!DOMNode>,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let ElementsBreadcrumbsData;
-/**
-* @typedef {{
-* parentNode:?DOMNode,
-* id:number,
-* nodeType:number,
-* pseudoType:(string|undefined),
-* shadowRootType:?string,
-* nodeName:string,
-* nodeNameNicelyCased:string,
-* legacyDomNode:*,
-* highlightNode:function():void,
-* clearHighlight:function():void,
-* getAttribute:function(string):(string|undefined),
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let DOMNode;
-// eslint-disable-next-line no-unused-vars
-export class ElementsBreadcrumbsClosureInterface extends HTMLElement {
-  /**
-  * @param {!ElementsBreadcrumbsData} data
-  */
-  set data(data) {
-  }
-}
-/**
-* @return {!ElementsBreadcrumbsClosureInterface}
-*/
-export function createElementsBreadcrumbs() {
-  return /** @type {!ElementsBreadcrumbsClosureInterface} */ (document.createElement('devtools-elements-breadcrumbs'));
-}

front_end/elements/ElementsPanel.js

@@ -37,8 +37,8 @@ import * as SDK from '../sdk/sdk.js';
 import * as UI from '../ui/ui.js';
 
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
-import {createElementsBreadcrumbs, DOMNode} from './ElementsBreadcrumbs_bridge.js';  // eslint-disable-line no-unused-vars
-import {ElementsTreeElement} from './ElementsTreeElement.js';  // eslint-disable-line no-unused-vars
+import {DOMNode, ElementsBreadcrumbs} from './ElementsBreadcrumbs.js';  // eslint-disable-line no-unused-vars
+import {ElementsTreeElement} from './ElementsTreeElement.js';           // eslint-disable-line no-unused-vars
 import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.js';
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import {MarkerDecorator} from './MarkerDecorator.js';  // eslint-disable-line no-unused-vars
@@ -109,7 +109,7 @@ export class ElementsPanel extends UI.Panel.Panel {
 
     crumbsContainer.id = 'elements-crumbs';
 
-    this._breadcrumbs = createElementsBreadcrumbs();
+    this._breadcrumbs = new ElementsBreadcrumbs();
     this._breadcrumbs.addEventListener('node-selected', /** @param {!Event} event */ event => {
       this._crumbNodeSelected(/** @type {?} */ (event));
     });

front_end/elements/ElementsPanelLink_bridge.js

@@ -1,35 +0,0 @@
-// Copyright 2020 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.
-
-/**
-* WARNING: do not modify this file by hand!
-* it was automatically generated by the bridge generator
-* if you made changes to the source code and need to update this file, run:
-*  npm run generate-bridge-file front_end/elements/ElementsPanelLink.ts
-*/
-
-import './ElementsPanelLink.js';
-/**
-* @typedef {{
-* onElementRevealIconClick:function(!Event=):void,
-* onElementRevealIconMouseEnter:function(!Event=):void,
-* onElementRevealIconMouseLeave:function(!Event=):void,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let ElementsPanelLinkData;
-// eslint-disable-next-line no-unused-vars
-export class ElementsPanelLinkClosureInterface extends HTMLElement {
-  /**
-  * @param {!ElementsPanelLinkData} data
-  */
-  set data(data) {
-  }
-}
-/**
-* @return {!ElementsPanelLinkClosureInterface}
-*/
-export function createElementsPanelLink() {
-  return /** @type {!ElementsPanelLinkClosureInterface} */ (document.createElement('devtools-elements-panel-link'));
-}

front_end/elements/Icon.ts

@@ -18,7 +18,7 @@ export interface IconWithName {
   height?: string;
 }
 
-type IconData = IconWithPath|IconWithName;
+export type IconData = IconWithPath|IconWithName;
 
 const isString = (value: string|undefined): value is string => value !== undefined;
 

front_end/elements/Icon_bridge.js

@@ -1,57 +0,0 @@
-// Copyright 2020 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.
-
-/**
-* WARNING: do not modify this file by hand!
-* it was automatically generated by the bridge generator
-* if you made changes to the source code and need to update this file, run:
-*  npm run generate-bridge-file front_end/elements/Icon.ts
-*/
-
-import './Icon.js';
-/**
-* @typedef {IconWithPath|IconWithName}
-*/
-// @ts-ignore we export this for Closure not TS
-export let IconData;
-/**
-* @typedef {{
-* iconPath:string,
-* color:string,
-* width:(string|undefined),
-* height:(string|undefined),
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let IconWithPath;
-/**
-* @typedef {{
-* iconName:string,
-* color:string,
-* width:(string|undefined),
-* height:(string|undefined),
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let IconWithName;
-// eslint-disable-next-line no-unused-vars
-export class IconClosureInterface extends HTMLElement {
-  /**
-  * @return {!IconData}
-  */
-  get data() {
-    throw new Error('Not implemented in _bridge.js');
-  }
-  /**
-  * @param {!IconData} data
-  */
-  set data(data) {
-  }
-}
-/**
-* @return {!IconClosureInterface}
-*/
-export function createIcon() {
-  return /** @type {!IconClosureInterface} */ (document.createElement('devtools-icon'));
-}

front_end/elements/LayoutPane.ts

@@ -12,6 +12,8 @@ import {BooleanSetting, EnumSetting, LayoutElement, Setting, SettingType} from '
 
 import type {NodeTextData} from './NodeText.js';
 
+export {LayoutElement};
+
 const {render, html} = LitHtml;
 const ls = Common.ls;
 const getStyleSheets = ComponentHelpers.GetStylesheet.getStyleSheets;

front_end/elements/LayoutPane_bridge.js

@@ -1,102 +0,0 @@
-// Copyright 2020 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.
-
-/**
-* WARNING: do not modify this file by hand!
-* it was automatically generated by the bridge generator
-* if you made changes to the source code and need to update this file, run:
-*  npm run generate-bridge-file front_end/elements/LayoutPane.ts
-*/
-
-import './LayoutPane.js';
-/**
-* @typedef {{
-* settings:!Array.<!Setting>,
-* gridElements:!Array.<!LayoutElement>,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let LayoutPaneData;
-/**
-* @typedef {EnumSetting|BooleanSetting}
-*/
-// @ts-ignore we export this for Closure not TS
-export let Setting;
-/**
-* @typedef {{
-* id:number,
-* color:string,
-* name:string,
-* domId:(string|undefined),
-* domClasses:(!Array.<string>|undefined),
-* enabled:boolean,
-* reveal:function():void,
-* toggle:function(boolean):void,
-* setColor:function(string):void,
-* highlight:function():void,
-* hideHighlight:function():void,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let LayoutElement;
-/**
-* @typedef {{
-* name:string,
-* type:!SettingType,
-* title:string,
-* options:!Array.<!EnumSettingOption>,
-* value:string,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let EnumSetting;
-/**
-* @typedef {{
-* name:string,
-* type:!SettingType,
-* title:string,
-* options:!Array.<!BooleanSettingOption>,
-* value:boolean,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let BooleanSetting;
-/**
-* @enum {string}
-*/
-// @ts-ignore we export this for Closure not TS
-export let SettingType = {
-  BOOLEAN: 'boolean',
-  ENUM: 'enum',
-};
-/**
-* @typedef {{
-* title:string,
-* value:string,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let EnumSettingOption;
-/**
-* @typedef {{
-* title:string,
-* value:boolean,
-* }}
-*/
-// @ts-ignore we export this for Closure not TS
-export let BooleanSettingOption;
-// eslint-disable-next-line no-unused-vars
-export class LayoutPaneClosureInterface extends HTMLElement {
-  /**
-  * @param {!LayoutPaneData} data
-  */
-  set data(data) {
-  }
-}
-/**
-* @return {!LayoutPaneClosureInterface}
-*/
-export function createLayoutPane() {
-  return /** @type {!LayoutPaneClosureInterface} */ (document.createElement('devtools-layout-pane'));
-}

front_end/elements/LayoutSidebarPane.js

@@ -8,7 +8,7 @@ import * as SDK from '../sdk/sdk.js';
 import * as UI from '../ui/ui.js';
 
 import {ElementsPanel} from './ElementsPanel.js';
-import {createLayoutPane, LayoutElement} from './LayoutPane_bridge.js';  // eslint-disable-line no-unused-vars
+import {LayoutElement, LayoutPane} from './LayoutPane.js';  // eslint-disable-line no-unused-vars
 
 /**
  * @param {!Array<!SDK.DOMModel.DOMNode>} nodes
@@ -57,7 +57,7 @@ const gridNodesToElements = nodes => {
 export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
   constructor() {
     super(true /* isWebComponent */);
-    this._layoutPane = createLayoutPane();
+    this._layoutPane = new LayoutPane();
     this.contentElement.appendChild(this._layoutPane);
     this._settings = ['showGridLineLabels', 'showGridTrackSizes', 'showGridAreas', 'extendGridLines'];
     this._uaShadowDOMSetting = Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM');
@@ -112,7 +112,7 @@ export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
       const setting = Common.Settings.Settings.instance().moduleSetting(settingName);
       const settingValue = setting.get();
       const mappedSetting = {
-        type: /** @type {string} */ (setting.type()),
+        type: /** @type {*} */ (setting.type()),
         name: setting.name,
         title: setting.title(),
       };

front_end/elements/StylesSidebarPane.js

@@ -41,7 +41,7 @@ import {ComputedStyleModel} from './ComputedStyleModel.js';
 import {findIcon} from './CSSPropertyIconResolver.js';
 import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
-import * as Icon from './Icon_bridge.js';
+import {Icon} from './Icon.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
 import {Context, StylePropertyTreeElement} from './StylePropertyTreeElement.js';  // eslint-disable-line no-unused-vars
@@ -2796,7 +2796,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         if (!iconInfo) {
           continue;
         }
-        const icon = Icon.createIcon();
+        const icon = new Icon();
         const width = '12.5px';
         const height = '12.5px';
         icon.data = {

front_end/elements/elements.ts

@@ -39,14 +39,14 @@ import * as DOMPath from './DOMPath.js';
 import * as ElementsBreadcrumbs from './ElementsBreadcrumbs.js';
 import * as ElementsBreadcrumbsUtils from './ElementsBreadcrumbsUtils.js';
 import * as ElementsPanel from './ElementsPanel.js';
-import * as ElementsPanelLink from './ElementsPanelLink_bridge.js';
+import * as ElementsPanelLink from './ElementsPanelLink.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 EventListenersWidget from './EventListenersWidget.js';
-import * as Icon from './Icon_bridge.js';
+import * as Icon from './Icon.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
 import * as LayoutPane from './LayoutPane.js';
 import * as LayoutPaneUtils from './LayoutPaneUtils.js';

front_end/issues/IssuesPane.js

@@ -211,7 +211,7 @@ class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     const frameCell = /** @type {!HTMLElement} */ (document.createElement('td'));
     frameCell.classList.add('affected-resource-cell');
     if (frame) {
-      const icon = Elements.Icon.createIcon();
+      const icon = new Elements.Icon.Icon();
       icon.data = {iconName: 'elements_panel_icon', color: 'var(--issue-link)', width: '16px', height: '16px'};
       icon.classList.add('link', 'elements-panel');
       icon.onclick = async () => {
@@ -247,7 +247,7 @@ class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     let filename = url ? extractShortPath(url) : '';
     const requestCell = /** @type {!HTMLElement} */ (document.createElement('td'));
     requestCell.classList.add('affected-resource-cell');
-    const icon = Elements.Icon.createIcon();
+    const icon = new Elements.Icon.Icon();
     icon.data = {iconName: 'network_panel_icon', color: 'var(--issue-link)', width: '16px', height: '16px'};
     icon.classList.add('network-panel');
     requestCell.appendChild(icon);
@@ -319,7 +319,7 @@ class AffectedElementsView extends AffectedResourcesView {
     const anchorElement = await Common.Linkifier.Linkifier.linkify(deferredDOMNode);
     anchorElement.textContent = nodeName;
     anchorElement.addEventListener('click', this._sendTelemetry);
-    anchorElement.addEventListener('keydown', event => {
+    anchorElement.addEventListener('keydown', /** @param {!Event} event */ event => {
       if (isEnterKey(event)) {
         this._sendTelemetry();
       }
@@ -446,7 +446,7 @@ class AffectedDirectivesView extends AffectedResourcesView {
    * @param {!SDK.IssuesModel.IssuesModel} model
    */
   _appendBlockedElement(element, nodeId, model) {
-    const elementsPanelLinkComponent = Elements.ElementsPanelLink.createElementsPanelLink();
+    const elementsPanelLinkComponent = new Elements.ElementsPanelLink.ElementsPanelLink();
     if (nodeId) {
       const violatingNodeId = nodeId;
       UI.Tooltip.Tooltip.install(
@@ -1186,7 +1186,7 @@ class IssueView extends UI.TreeOutline.TreeElement {
   _appendHeader() {
     const header = document.createElement('div');
     header.classList.add('header');
-    const icon = Elements.Icon.createIcon();
+    const icon = new Elements.Icon.Icon();
     icon.data = {iconName: 'breaking_change_icon', color: '', width: '16px', height: '16px'};
     icon.classList.add('breaking-change');
     this._aggregatedIssuesCount = /** @type {!HTMLElement} */ (document.createElement('span'));
@@ -1266,7 +1266,7 @@ class IssueView extends UI.TreeOutline.TreeElement {
       const link = UI.Fragment.html
       `<a class="link devtools-link" role="link" tabindex="0" href=${description.link}>${
           ls`Learn more: ${description.linkTitle}`}</a>`;
-      const linkIcon = Elements.Icon.createIcon();
+      const linkIcon = new Elements.Icon.Icon();
       linkIcon.data = {iconName: 'link_icon', color: 'var(--issue-link)', width: '16px', height: '16px'};
       linkIcon.classList.add('link-icon');
       link.prepend(linkIcon);
@@ -1393,7 +1393,7 @@ export class IssuesPaneImpl extends UI.Widget.VBox {
     rightToolbar.appendSeparator();
     const toolbarWarnings = document.createElement('div');
     toolbarWarnings.classList.add('toolbar-warnings');
-    const breakingChangeIcon = Elements.Icon.createIcon();
+    const breakingChangeIcon = new Elements.Icon.Icon();
     breakingChangeIcon.data = {iconName: 'breaking_change_icon', color: '', width: '16px', height: '16px'};
     breakingChangeIcon.classList.add('breaking-change');
     toolbarWarnings.appendChild(breakingChangeIcon);