Rename Element => LayoutElement in LayoutPane

`Element` clashes with the TypeScript built-in and the bridge generation
gets confused now we have code to tell it that `Element` is a built-in
type.

I will work on a CL that errors when generating these bridges so that
this is spotted.

Change-Id: Ie6cb79bed29803728277233b4eb7ea53a8ff7af8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2362568
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>

front_end/elements/LayoutPane.ts

@@ -6,7 +6,7 @@ import * as Common from '../common/common.js';
 import * as ComponentHelpers from '../component_helpers/component_helpers.js';
 import * as LitHtml from '../third_party/lit-html/lit-html.js';
 
-import {BooleanSetting, Element, EnumSetting, Setting, SettingType} from './LayoutPaneUtils.js';
+import {BooleanSetting, EnumSetting, LayoutElement, Setting, SettingType} from './LayoutPaneUtils.js';
 
 const {render, html} = LitHtml;
 const ls = Common.ls;
@@ -55,7 +55,7 @@ function isBooleanSetting(setting: Setting): setting is BooleanSetting {
 export class LayoutPane extends HTMLElement {
   private readonly shadow = this.attachShadow({mode: 'open'});
   private settings: Readonly<Setting[]> = [];
-  private gridElements: Readonly<Element[]> = [];
+  private gridElements: Readonly<LayoutElement[]> = [];
 
   constructor() {
     super();
@@ -65,7 +65,7 @@ export class LayoutPane extends HTMLElement {
     ];
   }
 
-  set data(data: {settings: Setting[], gridElements: Element[]}) {
+  set data(data: {settings: Setting[], gridElements: LayoutElement[]}) {
     this.settings = data.settings;
     this.gridElements = data.gridElements;
     this.render();
@@ -210,17 +210,17 @@ export class LayoutPane extends HTMLElement {
     this.dispatchEvent(new SettingChangedEvent(setting.name, event.target.value));
   }
 
-  private onElementToggle(element: Element, event: HTMLInputElementEvent) {
+  private onElementToggle(element: LayoutElement, event: HTMLInputElementEvent) {
     event.preventDefault();
     this.dispatchEvent(new OverlayChangedEvent(element.id, event.target.checked));
   }
 
-  private onElementClick(element: Element, event: HTMLInputElementEvent) {
+  private onElementClick(element: LayoutElement, event: HTMLInputElementEvent) {
     event.preventDefault();
     this.dispatchEvent(new ElementClickedEvent(element.id));
   }
 
-  private renderElement(element: Element) {
+  private renderElement(element: LayoutElement) {
     const name = this.buildElementName(element);
     const onElementToggle = this.onElementToggle.bind(this, element);
     const onElementClick = this.onElementClick.bind(this, element);
@@ -234,7 +234,7 @@ export class LayoutPane extends HTMLElement {
   </div>`;
   }
 
-  private buildElementName(element: Element) {
+  private buildElementName(element: LayoutElement) {
     const parts = [element.name];
     if (element.domId) {
       parts.push(`#${CSS.escape(element.domId)}`);

front_end/elements/LayoutPaneUtils.ts

@@ -28,7 +28,7 @@ export type BooleanSetting = BaseSetting&{options: BooleanSettingOption[], value
 export type EnumSetting = BaseSetting&{options: EnumSettingOption[], value: string};
 export type Setting = EnumSetting|BooleanSetting;
 
-export interface Element {
+export interface LayoutElement {
   id: number;
   name: string;
   domId?: string;

front_end/elements/LayoutPane_bridge.js

@@ -25,7 +25,7 @@ export let Setting;
 * }}
 */
 // @ts-ignore we export this for Closure not TS
-export let Element;
+export let LayoutElement;
 /**
 * @typedef {{
 * name:string,
@@ -75,7 +75,7 @@ export let BooleanSettingOption;
 // eslint-disable-next-line no-unused-vars
 export class LayoutPaneClosureInterface extends HTMLElement {
   /**
-  * @param {{settings: !Array.<!Setting>, gridElements: !Array.<!Element>}} data
+  * @param {{settings: !Array.<!Setting>, gridElements: !Array.<!LayoutElement>}} data
   */
   set data(data) {
   }

front_end/elements/LayoutSidebarPane.js

@@ -10,11 +10,11 @@ import * as SDK from '../sdk/sdk.js';
 import * as UI from '../ui/ui.js';
 
 import {ElementsPanel} from './ElementsPanel.js';
-import {createLayoutPane, Element} from './LayoutPane_bridge.js';  // eslint-disable-line no-unused-vars
+import {createLayoutPane, LayoutElement} from './LayoutPane_bridge.js';  // eslint-disable-line no-unused-vars
 
 /**
  * @param {!Array<!SDK.DOMModel.DOMNode>} nodes
- * @return {!Array<!Element>}
+ * @return {!Array<!LayoutElement>}
  */
 const gridNodesToElements = nodes => {
   return nodes.map(node => {