chrome-devtools-frontend 1.0.999279 → 1.0.1000679

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -131,12 +131,6 @@ const UIStrings = {
   occurrencesS: 'Occurrences: {PH1}',
   /**
   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
-  *@example {10ms} PH1
-  *@example {100.0} PH2
-  */
-  sFfps: '{PH1} ~ {PH2} fps',
-  /**
-  *@description Text in Timeline Flame Chart Data Provider of the Performance panel
   */
   idleFrame: 'Idle Frame',
   /**
@@ -1005,9 +999,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     } else if (type === EntryType.Frame) {
       const frame = (this.entryData[entryIndex] as TimelineModel.TimelineFrameModel.TimelineFrame);
-      time = i18nString(
-          UIStrings.sFfps,
-          {PH1: i18n.TimeUtilities.preciseMillisToString(frame.duration, 1), PH2: (1000 / frame.duration).toFixed(0)});
+      time = i18n.TimeUtilities.preciseMillisToString(frame.duration, 1);
 
       if (frame.idle) {
         title = i18nString(UIStrings.idleFrame);

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -161,7 +161,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private readonly groupBySetting: Common.Settings.Setting<any>;
   private searchableView!: UI.SearchableView.SearchableView;
-  private urlToColorCache?: Map<string, string>;
+  private urlToColorCache?: Map<Platform.DevToolsPath.UrlString, string>;
   private needsResizeToPreferredHeights?: boolean;
   private selectedSearchResult?: number;
   private searchRegex?: RegExp;

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -12,7 +12,6 @@ import timelineHistoryManagerStyles from './timelineHistoryManager.css.js';
 import type {PerformanceModel} from './PerformanceModel.js';
 import {
   TimelineEventOverviewCPUActivity,
-  TimelineEventOverviewFrames,
   TimelineEventOverviewNetwork,
   TimelineEventOverviewResponsiveness,
 } from './TimelineEventOverview.js';
@@ -86,7 +85,6 @@ export class TimelineHistoryManager {
 
     this.allOverviews = [
       {constructor: TimelineEventOverviewResponsiveness, height: 3},
-      {constructor: TimelineEventOverviewFrames, height: 16},
       {constructor: TimelineEventOverviewCPUActivity, height: 20},
       {constructor: TimelineEventOverviewNetwork, height: 8},
     ];

package/front_end/panels/timeline/TimelineLoader.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -95,7 +96,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     return loader;
   }
 
-  static loadFromURL(url: string, client: Client): TimelineLoader {
+  static loadFromURL(url: Platform.DevToolsPath.UrlString, client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
     Host.ResourceLoader.loadAsStream(url, null, loader);
     return loader;

package/front_end/panels/timeline/TimelinePanel.ts

@@ -60,7 +60,6 @@ import type {TimelineEventOverview} from './TimelineEventOverview.js';
 import {
   TimelineEventOverviewCoverage,
   TimelineEventOverviewCPUActivity,
-  TimelineEventOverviewFrames,
   TimelineEventOverviewInput,
   TimelineEventOverviewMemory,
   TimelineEventOverviewNetwork,
@@ -696,7 +695,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.createFileSelector();
   }
 
-  loadFromURL(url: string): void {
+  loadFromURL(url: Platform.DevToolsPath.UrlString): void {
     if (this.state !== State.Idle) {
       return;
     }
@@ -710,7 +709,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (Root.Runtime.experiments.isEnabled('inputEventsOnTimelineOverview')) {
       this.overviewControls.push(new TimelineEventOverviewInput());
     }
-    this.overviewControls.push(new TimelineEventOverviewFrames());
     this.overviewControls.push(new TimelineEventOverviewCPUActivity());
     this.overviewControls.push(new TimelineEventOverviewNetwork());
     if (this.showScreenshotsSetting.get() && this.performanceModel &&
@@ -1251,7 +1249,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     const item = items[0];
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.PerfPanelTraceImported);
     if (item.kind === 'string') {
-      const url = dataTransfer.getData('text/uri-list');
+      const url = dataTransfer.getData('text/uri-list') as Platform.DevToolsPath.UrlString;
       if (new Common.ParsedURL.ParsedURL(url).isValid) {
         this.loadFromURL(url);
       }
@@ -1494,7 +1492,7 @@ export class LoadTimelineHandler implements Common.QueryParamHandler.QueryParamH
 
   handleQueryParam(value: string): void {
     void UI.ViewManager.ViewManager.instance().showView('timeline').then(() => {
-      TimelinePanel.instance().loadFromURL(window.decodeURIComponent(value));
+      TimelinePanel.instance().loadFromURL(window.decodeURIComponent(value) as Platform.DevToolsPath.UrlString);
     });
   }
 }

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -756,9 +756,9 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
   }
 
   private beautifyDomainName(this: AggregatedTimelineTreeView, name: string): string {
-    if (AggregatedTimelineTreeView.isExtensionInternalURL(name)) {
+    if (AggregatedTimelineTreeView.isExtensionInternalURL(name as Platform.DevToolsPath.UrlString)) {
       name = i18nString(UIStrings.chromeExtensionsOverhead);
-    } else if (AggregatedTimelineTreeView.isV8NativeURL(name)) {
+    } else if (AggregatedTimelineTreeView.isV8NativeURL(name as Platform.DevToolsPath.UrlString)) {
       name = i18nString(UIStrings.vRuntime);
     } else if (name.startsWith('chrome-extension')) {
       name = this.executionContextNamesByOrigin.get(name) || name;
@@ -949,11 +949,11 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     contextMenu.appendApplicableItems(frame.ownerNode);
   }
 
-  private static isExtensionInternalURL(url: string): boolean {
+  private static isExtensionInternalURL(url: Platform.DevToolsPath.UrlString): boolean {
     return url.startsWith(AggregatedTimelineTreeView.extensionInternalPrefix);
   }
 
-  private static isV8NativeURL(url: string): boolean {
+  private static isV8NativeURL(url: Platform.DevToolsPath.UrlString): boolean {
     return url.startsWith(AggregatedTimelineTreeView.v8NativePrefix);
   }
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1069,10 +1069,6 @@ const UIStrings = {
   */
   frame: 'Frame',
   /**
-  *@description Text in Timeline Event Overview of the Performance panel
-  */
-  fps: 'FPS',
-  /**
   *@description Text in Timeline UIUtils of the Performance panel
   */
   cpuTime: 'CPU time',
@@ -1477,7 +1473,7 @@ export class TimelineUIUtils {
     }
   }
 
-  static eventURL(event: SDK.TracingModel.Event): string|null {
+  static eventURL(event: SDK.TracingModel.Event): Platform.DevToolsPath.UrlString|null {
     const data = event.args['data'] || event.args['beginData'];
     const url = data && data.url;
     if (url) {
@@ -1486,7 +1482,7 @@ export class TimelineUIUtils {
     const stackTrace = data && data['stackTrace'];
     const frame = stackTrace && stackTrace.length && stackTrace[0] ||
         TimelineModel.TimelineModel.TimelineData.forEvent(event).topFrame();
-    return frame && frame.url || null;
+    return frame && frame.url as Platform.DevToolsPath.UrlString || null;
   }
 
   static eventStyle(event: SDK.TracingModel.Event): TimelineRecordStyle {
@@ -1537,7 +1533,7 @@ export class TimelineUIUtils {
   static eventColorByProduct(
       model: TimelineModel.TimelineModel.TimelineModelImpl, urlToColorCache: Map<string, string>,
       event: SDK.TracingModel.Event): string {
-    const url = TimelineUIUtils.eventURL(event) || '';
+    const url = TimelineUIUtils.eventURL(event) || Platform.DevToolsPath.EmptyUrlString;
     let color = urlToColorCache.get(url);
     if (color) {
       return color;
@@ -3089,8 +3085,6 @@ export class TimelineUIUtils {
 
     const duration = TimelineUIUtils.frameDuration(frame);
     contentHelper.appendElementRow(i18nString(UIStrings.duration), duration, frame.hasWarnings());
-    const durationInMillis = frame.endTime - frame.startTime;
-    contentHelper.appendTextRow(i18nString(UIStrings.fps), Math.floor(1000 / durationInMillis));
     contentHelper.appendTextRow(i18nString(UIStrings.cpuTime), i18n.TimeUtilities.millisToString(frame.cpuTime, true));
     if (filmStripFrame) {
       const filmStripPreview = document.createElement('div');

package/front_end/panels/timeline/timeline-legacy.ts

@@ -74,9 +74,6 @@ Timeline.TimelineEventOverviewResponsiveness = TimelineModule.TimelineEventOverv
 /** @constructor */
 Timeline.TimelineFilmStripOverview = TimelineModule.TimelineEventOverview.TimelineFilmStripOverview;
 
-/** @constructor */
-Timeline.TimelineEventOverviewFrames = TimelineModule.TimelineEventOverview.TimelineEventOverviewFrames;
-
 /** @constructor */
 Timeline.TimelineEventOverviewMemory = TimelineModule.TimelineEventOverview.TimelineEventOverviewMemory;
 

package/front_end/panels/timeline/timelinePanel.css

@@ -111,11 +111,6 @@
   flex-basis: 8px;
 }
 
-#timeline-overview-framerate {
-  flex-basis: 16px;
-  margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
-}
-
 #timeline-overview-filmstrip {
   flex-basis: 30px;
 }
@@ -124,7 +119,6 @@
   flex-basis: 20px;
 }
 
-#timeline-overview-framerate::before,
 #timeline-overview-network::before,
 #timeline-overview-cpu-activity::before {
   content: "";

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -84,6 +84,12 @@ const UIStrings = {
   */
   supportsResidentKeys: 'Supports resident keys',
   /**
+  *@description Label for checkbox that toggles large blob support on virtual authenticators. Large blobs are opaque data associated
+  * with a WebAuthn credential that a website can store, like an SSH certificate or a symmetric encryption key.
+  * See https://w3c.github.io/webauthn/#sctn-large-blob-extension
+  */
+  supportsLargeBlob: 'Supports large blob',
+  /**
   *@description Text to add something
   */
   add: 'Add',
@@ -244,10 +250,12 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   #protocolSelect: HTMLSelectElement|undefined;
   #transportSelect: HTMLSelectElement|undefined;
   #residentKeyCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
-  #residentKeyCheckbox: HTMLInputElement|undefined;
+  residentKeyCheckbox: HTMLInputElement|undefined;
   #userVerificationCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
   #userVerificationCheckbox: HTMLInputElement|undefined;
-  #addAuthenticatorButton: HTMLButtonElement|undefined;
+  #largeBlobCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
+  largeBlobCheckbox: HTMLInputElement|undefined;
+  addAuthenticatorButton: HTMLButtonElement|undefined;
   #isEnabling?: Promise<void>;
 
   constructor() {
@@ -475,13 +483,18 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   }
 
   #updateNewAuthenticatorSectionOptions(): void {
-    if (!this.#protocolSelect || !this.#residentKeyCheckbox || !this.#userVerificationCheckbox) {
+    if (!this.#protocolSelect || !this.residentKeyCheckbox || !this.#userVerificationCheckbox ||
+        !this.largeBlobCheckbox) {
       return;
     }
 
     if (this.#protocolSelect.value === Protocol.WebAuthn.AuthenticatorProtocol.Ctap2) {
-      this.#residentKeyCheckbox.disabled = false;
+      this.residentKeyCheckbox.disabled = false;
       this.#userVerificationCheckbox.disabled = false;
+      this.largeBlobCheckbox.disabled = !this.residentKeyCheckbox.checked;
+      if (this.largeBlobCheckbox.disabled) {
+        this.largeBlobCheckbox.checked = false;
+      }
       this.#updateEnabledTransportOptions([
         Protocol.WebAuthn.AuthenticatorTransport.Usb,
         Protocol.WebAuthn.AuthenticatorTransport.Ble,
@@ -491,10 +504,12 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
         Protocol.WebAuthn.AuthenticatorTransport.Internal,
       ]);
     } else {
-      this.#residentKeyCheckbox.checked = false;
-      this.#residentKeyCheckbox.disabled = true;
+      this.residentKeyCheckbox.checked = false;
+      this.residentKeyCheckbox.disabled = true;
       this.#userVerificationCheckbox.checked = false;
       this.#userVerificationCheckbox.disabled = true;
+      this.largeBlobCheckbox.checked = false;
+      this.largeBlobCheckbox.disabled = true;
       this.#updateEnabledTransportOptions([
         Protocol.WebAuthn.AuthenticatorTransport.Usb,
         Protocol.WebAuthn.AuthenticatorTransport.Ble,
@@ -524,6 +539,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     const transportGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
     const residentKeyGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
     const userVerificationGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
+    const largeBlobGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
     const addButtonGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
 
     const protocolSelectTitle = UI.UIUtils.createLabel(i18nString(UIStrings.protocol), 'authenticator-option-label');
@@ -551,9 +567,9 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     this.#residentKeyCheckboxLabel = UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.supportsResidentKeys), false);
     this.#residentKeyCheckboxLabel.textElement.classList.add('authenticator-option-label');
     residentKeyGroup.appendChild(this.#residentKeyCheckboxLabel.textElement);
-    this.#residentKeyCheckbox = this.#residentKeyCheckboxLabel.checkboxElement;
-    this.#residentKeyCheckbox.checked = false;
-    this.#residentKeyCheckbox.classList.add('authenticator-option-checkbox');
+    this.residentKeyCheckbox = this.#residentKeyCheckboxLabel.checkboxElement;
+    this.residentKeyCheckbox.checked = false;
+    this.residentKeyCheckbox.classList.add('authenticator-option-checkbox');
     residentKeyGroup.appendChild(this.#residentKeyCheckboxLabel);
 
     this.#userVerificationCheckboxLabel = UI.UIUtils.CheckboxLabel.create('Supports user verification', false);
@@ -564,17 +580,29 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     this.#userVerificationCheckbox.classList.add('authenticator-option-checkbox');
     userVerificationGroup.appendChild(this.#userVerificationCheckboxLabel);
 
-    this.#addAuthenticatorButton =
+    this.#largeBlobCheckboxLabel = UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.supportsLargeBlob), false);
+    this.#largeBlobCheckboxLabel.textElement.classList.add('authenticator-option-label');
+    largeBlobGroup.appendChild(this.#largeBlobCheckboxLabel.textElement);
+    this.largeBlobCheckbox = this.#largeBlobCheckboxLabel.checkboxElement;
+    this.largeBlobCheckbox.checked = false;
+    this.largeBlobCheckbox.classList.add('authenticator-option-checkbox');
+    this.largeBlobCheckbox.name = 'large-blob-checkbox';
+    largeBlobGroup.appendChild(this.#largeBlobCheckboxLabel);
+
+    this.addAuthenticatorButton =
         UI.UIUtils.createTextButton(i18nString(UIStrings.add), this.#handleAddAuthenticatorButton.bind(this), '');
     addButtonGroup.createChild('div', 'authenticator-option-label');
-    addButtonGroup.appendChild(this.#addAuthenticatorButton);
+    addButtonGroup.appendChild(this.addAuthenticatorButton);
     const addAuthenticatorTitle = UI.UIUtils.createLabel(i18nString(UIStrings.addAuthenticator), '');
-    UI.ARIAUtils.bindLabelToControl(addAuthenticatorTitle, this.#addAuthenticatorButton);
+    UI.ARIAUtils.bindLabelToControl(addAuthenticatorTitle, this.addAuthenticatorButton);
 
     this.#updateNewAuthenticatorSectionOptions();
     if (this.#protocolSelect) {
       this.#protocolSelect.addEventListener('change', this.#updateNewAuthenticatorSectionOptions.bind(this));
     }
+    if (this.residentKeyCheckbox) {
+      this.residentKeyCheckbox.addEventListener('change', this.#updateNewAuthenticatorSectionOptions.bind(this));
+    }
   }
 
   async #handleAddAuthenticatorButton(): Promise<void> {
@@ -702,6 +730,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     const protocolField = sectionFields.createChild('div', 'authenticator-field');
     const transportField = sectionFields.createChild('div', 'authenticator-field');
     const srkField = sectionFields.createChild('div', 'authenticator-field');
+    const slbField = sectionFields.createChild('div', 'authenticator-field');
     const suvField = sectionFields.createChild('div', 'authenticator-field');
 
     uuidField.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.uuid), 'authenticator-option-label'));
@@ -709,6 +738,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     transportField.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.transport), 'authenticator-option-label'));
     srkField.appendChild(
         UI.UIUtils.createLabel(i18nString(UIStrings.supportsResidentKeys), 'authenticator-option-label'));
+    slbField.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.supportsLargeBlob), 'authenticator-option-label'));
     suvField.appendChild(
         UI.UIUtils.createLabel(i18nString(UIStrings.supportsUserVerification), 'authenticator-option-label'));
 
@@ -717,6 +747,8 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     transportField.createChild('div', 'authenticator-field-value').textContent = options.transport;
     srkField.createChild('div', 'authenticator-field-value').textContent =
         options.hasResidentKey ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
+    slbField.createChild('div', 'authenticator-field-value').textContent =
+        options.hasLargeBlob ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
     suvField.createChild('div', 'authenticator-field-value').textContent =
         options.hasUserVerification ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
   }
@@ -779,18 +811,20 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
   #createOptionsFromCurrentInputs(): Protocol.WebAuthn.VirtualAuthenticatorOptions {
     // TODO(crbug.com/1034663): Add optionality for isUserVerified param.
-    if (!this.#protocolSelect || !this.#transportSelect || !this.#residentKeyCheckbox ||
-        !this.#userVerificationCheckbox) {
+    if (!this.#protocolSelect || !this.#transportSelect || !this.residentKeyCheckbox ||
+        !this.#userVerificationCheckbox || !this.largeBlobCheckbox) {
       throw new Error('Unable to create options from current inputs');
     }
 
     return {
       protocol: this.#protocolSelect.options[this.#protocolSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorProtocol,
+      ctap2Version: Protocol.WebAuthn.Ctap2Version.Ctap2_1,
       transport: this.#transportSelect.options[this.#transportSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorTransport,
-      hasResidentKey: this.#residentKeyCheckbox.checked,
+      hasResidentKey: this.residentKeyCheckbox.checked,
       hasUserVerification: this.#userVerificationCheckbox.checked,
+      hasLargeBlob: this.largeBlobCheckbox.checked,
       automaticPresenceSimulation: true,
       isUserVerified: true,
     };

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.999279"
+  "version": "1.0.1000679"
 }

package/scripts/eslint_rules/lib/enforce_bound_render_for_schedule_render.js

@@ -0,0 +1,110 @@
+// 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.
+'use strict';
+
+function goToClassDeclaration(node) {
+  if (!node) {
+    return null;
+  }
+
+  if (node.type === 'ClassDeclaration') {
+    return node;
+  }
+
+  return goToClassDeclaration(node.parent);
+}
+
+function isMemberExpressionOnThis(memberExpression) {
+  if (!memberExpression) {
+    return false;
+  }
+
+  if (memberExpression.object.type === 'ThisExpression') {
+    // Take into `a.this.bind()` case into account
+    // `this` must be the last object in the `MemberExpression` chain
+    return !memberExpression.object.object;
+  }
+
+  return isMemberExpressionOnThis(memberExpression.object);
+}
+
+// Whether the right hand side of property definition is `this.xxx.yyy.bind(this);`
+function isPropertyDefinitionViaBindCallToThis(propertyDefinition) {
+  if (propertyDefinition.value.type !== 'CallExpression' ||
+      propertyDefinition.value.callee.type !== 'MemberExpression') {
+    return false;
+  }
+
+  const isCalleeObjectThis = isMemberExpressionOnThis(propertyDefinition.value.callee);
+  // Whether the CallExpression is on a property of `this` (this.xxx.yyy.bind)
+  if (!isCalleeObjectThis) {
+    return false;
+  }
+
+  const isItBindCall = propertyDefinition.value.callee.property.name === 'bind';
+  // Whether the CallExpression is a `bind` call on a property of `this`
+  if (!isItBindCall) {
+    return false;
+  }
+
+  const callArgument = propertyDefinition.value.arguments[0];
+  // Call argument to `bind` is not `this`
+  if (!callArgument || callArgument.type !== 'ThisExpression') {
+    return false;
+  }
+
+  return true;
+}
+
+// Whether the property definition is arrow function like `#render = () => {}`
+function isPropertyDefinitionViaArrowFunction(propertyDefinition) {
+  return propertyDefinition.value.type === 'ArrowFunctionExpression';
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce render method to be bound while calling scheduleRender',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: []  // no options
+  },
+  create: function(context) {
+    return {
+      CallExpression(node) {
+        // Calls in the form of `ScheduledRender.scheduleRender`
+        const isScheduleRenderCall = node.callee.type === 'MemberExpression' &&
+            node.callee.object?.property?.name === 'ScheduledRender' && node.callee.property?.name === 'scheduleRender';
+        if (!isScheduleRenderCall) {
+          return;
+        }
+
+        const callbackArgument = node.arguments[1];
+        // Whether the second argument points to a property of `this`
+        // like `ScheduledRender.scheduleRender(<any>, this.<any>)
+        if (callbackArgument.type !== 'MemberExpression' || callbackArgument.object.type !== 'ThisExpression') {
+          return;
+        }
+
+        const containingClassForTheCall = goToClassDeclaration(node);
+        // Only care about the calls in custom components
+        if (!containingClassForTheCall.superClass || containingClassForTheCall.superClass.name !== 'HTMLElement') {
+          return;
+        }
+
+        const calledMethod = callbackArgument.property;
+        // Check whether the called method is bound (it should be 'PropertyDefinition')
+        const propertyDefinition = containingClassForTheCall.body.body.find(
+            bodyNode => bodyNode.type === 'PropertyDefinition' && bodyNode.key.name === calledMethod.name);
+        if (!propertyDefinition ||
+            (!isPropertyDefinitionViaArrowFunction(propertyDefinition) &&
+             !isPropertyDefinitionViaBindCallToThis(propertyDefinition))) {
+          context.report({node, message: 'Bind `render` method of `scheduleRender` to `this` in components'});
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/tests/enforce_bound_render_for_schedule_render_test.js

@@ -0,0 +1,74 @@
+// 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.
+'use strict';
+
+const rule = require('../lib/enforce_bound_render_for_schedule_render.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+  parser: require.resolve('@typescript-eslint/parser'),
+});
+
+ruleTester.run('enforce_bound_render_for_schedule_render', rule, {
+  valid: [
+    {
+      code: `
+      class Component extends HTMLElement {
+        #boundRender = this.#render.bind(this);
+        get data(data) {
+          this.data = data;
+          void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+        }
+
+        #render() {}
+      }
+      `,
+      filename: 'front_end/ui/components/foo/Foo.ts',
+    },
+    {
+      code: `
+      class Component extends HTMLElement {
+        get data(data) {
+          this.data = data;
+          void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+        }
+
+        #render = () => {};
+      }
+      `,
+      filename: 'front_end/ui/components/foo/Foo.ts',
+    },
+    {
+      code: `
+      class Renderer {
+        render() {
+        }
+      }
+
+      class Component extends HTMLElement {
+        #renderer = new Renderer();
+        #boundRender = this.#renderer.render.bind(this);
+        get data(data) {
+          this.data = data;
+          void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+        }
+      }
+      `,
+      filename: 'front_end/ui/components/foo/Foo.ts',
+    },
+  ],
+  invalid: [
+    {
+      code: `class Component extends HTMLElement {
+        get data(data) {
+          this.data = data;
+          void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+        }
+
+        #render() {}
+      }`,
+      filename: 'front_end/components/test.ts',
+      errors: [{message: 'Bind `render` method of `scheduleRender` to `this` in components'}],
+    },
+  ]
+});

package/scripts/reformat-clang-js-ts.js

@@ -0,0 +1,60 @@
+// Copyright 2022 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.
+
+/**
+ * Run this script to re-format all .js and .ts files found
+ * node scripts/reformat-clang-js-ts.js --directory=front_end
+ * The script starts in the given directory and recursively finds all `.js` and `.ts` files to reformat.
+  * Any `.clang-format` with `DisableFormat: true` is respected; those
+  * directories will not be used.
+**/
+
+const fs = require('fs');
+const path = require('path');
+const childProcess = require('child_process');
+
+const yargs = require('yargs')
+                  .option('dry-run', {
+                    type: 'boolean',
+                    default: false,
+                    desc: 'Logs which files will be formatted, but doesn\'t write to disk',
+                  })
+                  .option('directory', {type: 'string', demandOption: true, desc: 'The starting directory to run in.'})
+                  .strict()
+                  .argv;
+
+const startingDirectory = path.join(process.cwd(), yargs.directory);
+
+const filesToFormat = [];
+function processDirectory(dir) {
+  const contents = fs.readdirSync(dir);
+
+  if (contents.includes('.clang-format')) {
+    const clangFormatConfig = fs.readFileSync(path.join(dir, '.clang-format'), 'utf8');
+    if (clangFormatConfig.includes('DisableFormat: true')) {
+      return;
+    }
+  }
+  for (const item of contents) {
+    const fullPath = path.join(dir, item);
+    if (fs.lstatSync(fullPath).isDirectory()) {
+      processDirectory(fullPath);
+    } else if (['.ts', '.js'].includes(path.extname(fullPath))) {
+      filesToFormat.push(fullPath);
+    }
+  }
+}
+
+processDirectory(startingDirectory);
+filesToFormat.forEach((file, index) => {
+  console.log(`Formatting ${index + 1}/${filesToFormat.length}`, path.relative(process.cwd(), file));
+
+  if (yargs.dryRun) {
+    return;
+  }
+  const out = String(childProcess.execSync(`clang-format -i ${file}`));
+  if (out.trim() !== '') {
+    console.log(out);
+  }
+});