chrome-devtools-frontend 1.0.998281 → 1.0.999791

package/front_end/panels/timeline/TimelinePanel.ts

@@ -57,7 +57,15 @@ import {Events, PerformanceModel} from './PerformanceModel.js';
 import type {Client} from './TimelineController.js';
 import {TimelineController} from './TimelineController.js';
 import type {TimelineEventOverview} from './TimelineEventOverview.js';
-import {TimelineEventOverviewCoverage, TimelineEventOverviewCPUActivity, TimelineEventOverviewFrames, TimelineEventOverviewInput, TimelineEventOverviewMemory, TimelineEventOverviewNetwork, TimelineEventOverviewResponsiveness, TimelineFilmStripOverview} from './TimelineEventOverview.js';
+import {
+  TimelineEventOverviewCoverage,
+  TimelineEventOverviewCPUActivity,
+  TimelineEventOverviewInput,
+  TimelineEventOverviewMemory,
+  TimelineEventOverviewNetwork,
+  TimelineEventOverviewResponsiveness,
+  TimelineFilmStripOverview,
+} from './TimelineEventOverview.js';
 import {TimelineFlameChartView} from './TimelineFlameChartView.js';
 import {TimelineHistoryManager} from './TimelineHistoryManager.js';
 import {TimelineLoader} from './TimelineLoader.js';
@@ -701,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 &&

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',
@@ -1682,8 +1678,7 @@ export class TimelineUIUtils {
     }
   }
 
-  static async buildDetailsTextForTraceEvent(event: SDK.TracingModel.Event, target: SDK.Target.Target|null):
-      Promise<string|null> {
+  static async buildDetailsTextForTraceEvent(event: SDK.TracingModel.Event): Promise<string|null> {
     const recordType = TimelineModel.TimelineModel.RecordType;
     let detailsText;
     const eventData = event.args['data'];
@@ -1696,9 +1691,9 @@ export class TimelineUIUtils {
         break;
       }
       case recordType.FunctionCall:
-        if (eventData) {
-          detailsText =
-              await linkifyLocationAsText(eventData['scriptId'], eventData['lineNumber'], eventData['columnNumber']);
+        if (eventData && eventData['url'] && eventData['lineNumber'] !== undefined &&
+            eventData['columnNumber'] !== undefined) {
+          detailsText = eventData.url + ':' + (eventData.lineNumber + 1) + ':' + (eventData.columnNumber + 1);
         }
         break;
       case recordType.JSFrame:
@@ -1804,33 +1799,13 @@ export class TimelineUIUtils {
 
     return detailsText;
 
-    async function linkifyLocationAsText(
-        scriptId: Protocol.Runtime.ScriptId, lineNumber: number, columnNumber: number): Promise<string|null> {
-      const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
-      if (!target || target.isDisposed() || !scriptId || !debuggerModel) {
-        return null;
-      }
-      const rawLocation = debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber);
-      if (!rawLocation) {
-        return null;
-      }
-      const uiLocation =
-          await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
-              rawLocation);
-      return uiLocation ? uiLocation.linkText(false /* skipTrim*/, true /* showColumnNumber*/) : null;
-    }
-
     async function linkifyTopCallFrameAsText(): Promise<string|null> {
       const frame = TimelineModel.TimelineModel.TimelineData.forEvent(event).topFrame();
       if (!frame) {
         return null;
       }
-      let text: string|(string | null) =
-          await linkifyLocationAsText(frame.scriptId, frame.lineNumber, frame.columnNumber);
-      if (!text) {
-        text = frame.url + ':' + (frame.lineNumber + 1) + ':' + (frame.columnNumber + 1);
-      }
-      return text;
+
+      return frame.url + ':' + (frame.lineNumber + 1) + ':' + (frame.columnNumber + 1);
     }
   }
 
@@ -1859,7 +1834,7 @@ export class TimelineUIUtils {
       case recordType.WebSocketSendHandshakeRequest:
       case recordType.WebSocketReceiveHandshakeResponse:
       case recordType.WebSocketDestroy: {
-        detailsText = await TimelineUIUtils.buildDetailsTextForTraceEvent(event, target);
+        detailsText = await TimelineUIUtils.buildDetailsTextForTraceEvent(event);
         break;
       }
 
@@ -3110,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/web_audio/graph_visualizer/GraphView.ts

@@ -6,7 +6,9 @@ import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
 
 import {EdgeTypes, EdgeView, generateEdgePortIdsByData} from './EdgeView.js';
-import type {NodeCreationData, NodeParamConnectionData, NodeParamDisconnectionData, NodesConnectionData, NodesDisconnectionData, NodesDisconnectionDataWithDestination, ParamCreationData} from './GraphStyle.js';
+import type {
+  NodeCreationData, NodeParamConnectionData, NodeParamDisconnectionData, NodesConnectionData, NodesDisconnectionData,
+  NodesDisconnectionDataWithDestination, ParamCreationData} from './GraphStyle.js';
 import {NodeLabelGenerator, NodeView} from './NodeView.js';
 
 // A class that tracks all the nodes and edges of an audio graph.

package/front_end/panels/web_audio/graph_visualizer/NodeRendererUtility.ts

@@ -3,7 +3,14 @@
 // found in the LICENSE file.
 
 import type {Point, Size} from './GraphStyle.js';
-import {AudioParamRadius, InputPortRadius, LeftSideTopPadding, TotalInputPortHeight, TotalOutputPortHeight, TotalParamPortHeight} from './GraphStyle.js';
+import {
+  AudioParamRadius,
+  InputPortRadius,
+  LeftSideTopPadding,
+  TotalInputPortHeight,
+  TotalOutputPortHeight,
+  TotalParamPortHeight,
+} from './GraphStyle.js';
 
 /**
  * Calculate the x, y value of input port.

package/front_end/panels/web_audio/graph_visualizer/NodeView.ts

@@ -5,7 +5,19 @@
 import * as UI from '../../../ui/legacy/legacy.js';
 
 import type {NodeCreationData, NodeLayout, Port} from './GraphStyle.js';
-import {BottomPaddingWithoutParam, BottomPaddingWithParam, LeftMarginOfText, LeftSideTopPadding, NodeLabelFontStyle, ParamLabelFontStyle, PortTypes, RightMarginOfText, TotalInputPortHeight, TotalOutputPortHeight, TotalParamPortHeight} from './GraphStyle.js';
+import {
+  BottomPaddingWithoutParam,
+  BottomPaddingWithParam,
+  LeftMarginOfText,
+  LeftSideTopPadding,
+  NodeLabelFontStyle,
+  ParamLabelFontStyle,
+  PortTypes,
+  RightMarginOfText,
+  TotalInputPortHeight,
+  TotalOutputPortHeight,
+  TotalParamPortHeight,
+} from './GraphStyle.js';
 import {calculateInputPortXY, calculateOutputPortXY, calculateParamPortXY} from './NodeRendererUtility.js';
 
 // A class that represents a node of a graph, consisting of the information needed to layout the

package/front_end/panels/web_audio/web_audio.ts

@@ -7,7 +7,14 @@ import * as AudioContextSelector from './AudioContextSelector.js';
 import * as WebAudioModel from './WebAudioModel.js';
 import * as WebAudioView from './WebAudioView.js';
 
-export {EdgeView, GraphManager, GraphStyle, GraphView, NodeRendererUtility, NodeView} from './graph_visualizer/graph_visualizer.js';
+export {
+  EdgeView,
+  GraphManager,
+  GraphStyle,
+  GraphView,
+  NodeRendererUtility,
+  NodeView,
+} from './graph_visualizer/graph_visualizer.js';
 export {
   AudioContextContentBuilder,
   AudioContextSelector,

package/front_end/ui/components/buttons/button.css

@@ -27,8 +27,21 @@
 }
 
 button {
+  /*
+    --override-button-no-right-border-radius decides
+    whether button has border radius on the right or not.
+
+    It works as a boolean variable:
+    * If it is 1, `--button-has-right-border-radius` becomes a 0 multiplier
+    for the border-radius-top-right and border-radius-bottom-right properties.
+    * If it is not set or 0, it becomes a 1 multiplier
+    for the same properties which means they'll continue to have the given
+    border radius.
+  */
+  --button-has-right-border-radius: calc(1 - var(--override-button-no-right-border-radius, 0));
+
   align-items: center;
-  border-radius: 4px;
+  border-radius: 4px calc(var(--button-has-right-border-radius) * 4px) calc(var(--button-has-right-border-radius) * 4px) 4px;
   display: inline-flex;
   font-family: inherit;
   font-size: 12px;
@@ -42,7 +55,7 @@ button {
 
 button.small {
   height: 18px;
-  border-radius: 2px;
+  border-radius: 2px calc(var(--button-has-right-border-radius) * 2px) calc(var(--button-has-right-border-radius) * 2px) 2px;
 }
 
 button:focus-visible {
@@ -52,7 +65,7 @@ button:focus-visible {
 button.toolbar,
 button.round {
   background: transparent;
-  border-radius: 2px;
+  border-radius: 2px calc(var(--button-has-right-border-radius) * 2px) calc(var(--button-has-right-border-radius) * 2px) 2px;
   border: none;
   height: 24px;
   width: 24px;

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -16,7 +16,15 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 import {addColumnVisibilityCheckboxes, addSortableColumnItems} from './DataGridContextMenuUtils.js';
 import type {CellPosition, Column, Row, SortState} from './DataGridUtils.js';
-import {calculateColumnWidthPercentageFromWeighting, calculateFirstFocusableCell, getCellTitleFromCellContent, getRowEntryForColumnId, handleArrowKeyNavigation, renderCellValue, SortDirection} from './DataGridUtils.js';
+import {
+  calculateColumnWidthPercentageFromWeighting,
+  calculateFirstFocusableCell,
+  getCellTitleFromCellContent,
+  getRowEntryForColumnId,
+  handleArrowKeyNavigation,
+  renderCellValue,
+  SortDirection,
+} from './DataGridUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {

package/front_end/ui/components/docs/button/basic.ts

@@ -33,6 +33,16 @@ primaryButton.title = 'Custom title';
 primaryButton.onclick = () => alert('clicked');
 appendButton(primaryButton);
 
+const primaryButtonWithoutRightBorderRadius = new Buttons.Button.Button();
+primaryButtonWithoutRightBorderRadius.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+};
+primaryButtonWithoutRightBorderRadius.style.setProperty('--override-button-no-right-border-radius', '1');
+primaryButtonWithoutRightBorderRadius.innerText = 'No right border radius';
+primaryButtonWithoutRightBorderRadius.title = 'Custom title';
+primaryButtonWithoutRightBorderRadius.onclick = () => alert('clicked');
+appendButton(primaryButtonWithoutRightBorderRadius);
+
 // Primary (forced active)
 const forcedActive = new Buttons.Button.Button();
 forcedActive.data = {

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts

@@ -9,13 +9,21 @@ import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
 
 const {render, html} = LitHtml;
 
-import type {AddressInputChangedEvent, HistoryNavigationEvent, LinearMemoryNavigatorData, PageNavigationEvent} from './LinearMemoryNavigator.js';
+import type {
+  AddressInputChangedEvent, HistoryNavigationEvent, LinearMemoryNavigatorData, PageNavigationEvent} from
+  './LinearMemoryNavigator.js';
 import {Mode, Navigation, LinearMemoryNavigator} from './LinearMemoryNavigator.js';
-import type {EndiannessChangedEvent, LinearMemoryValueInterpreterData, ValueTypeToggledEvent} from './LinearMemoryValueInterpreter.js';
+import type {
+  EndiannessChangedEvent, LinearMemoryValueInterpreterData, ValueTypeToggledEvent} from
+  './LinearMemoryValueInterpreter.js';
 import {LinearMemoryValueInterpreter} from './LinearMemoryValueInterpreter.js';
 import type {ByteSelectedEvent, LinearMemoryViewerData, ResizeEvent} from './LinearMemoryViewer.js';
 import type {ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
-import {VALUE_INTEPRETER_MAX_NUM_BYTES, Endianness, getDefaultValueTypeMapping} from './ValueInterpreterDisplayUtils.js';
+import {
+  VALUE_INTEPRETER_MAX_NUM_BYTES,
+  Endianness,
+  getDefaultValueTypeMapping,
+} from './ValueInterpreterDisplayUtils.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {LinearMemoryViewer} from './LinearMemoryViewer.js';

package/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts

@@ -9,7 +9,18 @@ import * as ComponentHelpers from '../helpers/helpers.js';
 import * as IconButton from '../icon_button/icon_button.js';
 
 import valueInterpreterDisplayStyles from './valueInterpreterDisplay.css.js';
-import {Endianness, format, getDefaultValueTypeMapping, getPointerAddress, isNumber, isPointer, isValidMode, VALUE_TYPE_MODE_LIST, ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
+import {
+  Endianness,
+  format,
+  getDefaultValueTypeMapping,
+  getPointerAddress,
+  isNumber,
+  isPointer,
+  isValidMode,
+  VALUE_TYPE_MODE_LIST,
+  ValueType,
+  ValueTypeMode,
+} from './ValueInterpreterDisplayUtils.js';
 
 const UIStrings = {
   /**

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -11,7 +11,13 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 import treeOutlineStyles from './treeOutline.css.js';
 
 import type {TreeNodeId, TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
-import {findNextNodeForTreeOutlineKeyboardNavigation, getNodeChildren, getPathToTreeNode, isExpandableNode, trackDOMNodeToTreeNode} from './TreeOutlineUtils.js';
+import {
+  findNextNodeForTreeOutlineKeyboardNavigation,
+  getNodeChildren,
+  getPathToTreeNode,
+  isExpandableNode,
+  trackDOMNodeToTreeNode,
+} from './TreeOutlineUtils.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
@@ -95,16 +101,15 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    */
   #nodeIdPendingFocus: TreeNodeId|null = null;
   #selectedTreeNode: TreeNode<TreeNodeDataType>|null = null;
-  #defaultRenderer =
-      (node: TreeNode<TreeNodeDataType>, _state: {isExpanded: boolean}): LitHtml.TemplateResult => {
-        if (typeof node.treeNodeData !== 'string') {
-          console.warn(`The default TreeOutline renderer simply stringifies its given value. You passed in ${
-              JSON.stringify(
-                  node.treeNodeData, null,
-                  2)}. Consider providing a different defaultRenderer that can handle nodes of this type.`);
-        }
-        return LitHtml.html`${String(node.treeNodeData)}`;
-      };
+  #defaultRenderer = (node: TreeNode<TreeNodeDataType>, _state: {isExpanded: boolean}): LitHtml.TemplateResult => {
+    if (typeof node.treeNodeData !== 'string') {
+      console.warn(`The default TreeOutline renderer simply stringifies its given value. You passed in ${
+          JSON.stringify(
+              node.treeNodeData, null,
+              2)}. Consider providing a different defaultRenderer that can handle nodes of this type.`);
+    }
+    return LitHtml.html`${String(node.treeNodeData)}`;
+  };
   #nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
 
   /**

package/front_end/ui/legacy/ActionRegistration.ts

@@ -212,6 +212,7 @@ export const ActionCategory = {
   SETTINGS: 'Settings',
   DEBUGGER: 'Debugger',
   SOURCES: 'Sources',
+  RENDERING: 'Rendering',
 };
 
 type ActionCategory = typeof ActionCategory[keyof typeof ActionCategory];

package/front_end/ui/legacy/Fragment.ts

@@ -66,8 +66,8 @@ export class Fragment {
 
     const template = document.createElement('template');
     template.innerHTML = html;
-    const walker = template.ownerDocument.createTreeWalker(
-        template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null);
+    const walker =
+        template.ownerDocument.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null);
     let valueIndex = 0;
     const emptyTextNodes = [];
     const binds: Bind[] = [];

package/front_end/ui/legacy/Toolbar.ts

@@ -1084,6 +1084,10 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
     super.applyEnabledState(enabled);
     this.inputElement.disabled = !enabled;
   }
+
+  setIndeterminate(indeterminate: boolean): void {
+    this.inputElement.indeterminate = indeterminate;
+  }
 }
 
 export class ToolbarSettingCheckbox extends ToolbarCheckbox {

package/front_end/ui/legacy/ViewManager.ts

@@ -15,7 +15,18 @@ import type {ToolbarItem} from './Toolbar.js';
 import {Toolbar, ToolbarMenuButton} from './Toolbar.js';
 import {createTextChild} from './UIUtils.js';
 import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
-import {getRegisteredLocationResolvers, getRegisteredViewExtensions, maybeRemoveViewExtension, registerLocationResolver, registerViewExtension, ViewLocationCategoryValues, ViewLocationValues, ViewPersistence, type ViewRegistration, resetViewRegistration} from './ViewRegistration.js';
+import {
+  getRegisteredLocationResolvers,
+  getRegisteredViewExtensions,
+  maybeRemoveViewExtension,
+  registerLocationResolver,
+  registerViewExtension,
+  ViewLocationCategoryValues,
+  ViewLocationValues,
+  ViewPersistence,
+  type ViewRegistration,
+  resetViewRegistration,
+} from './ViewRegistration.js';
 import type {Widget, WidgetElement} from './Widget.js';
 import {VBox} from './Widget.js';
 import viewContainersStyles from './viewContainers.css.legacy.js';

package/front_end/ui/legacy/XLink.ts

@@ -13,7 +13,12 @@ import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu, Provider} from './ContextMenu.js';
 import {html} from './Fragment.js';
 import {Tooltip} from './Tooltip.js';
-import {addReferrerToURLIfNecessary, copyLinkAddressLabel, MaxLengthForDisplayedURLs, openLinkExternallyLabel} from './UIUtils.js';
+import {
+  addReferrerToURLIfNecessary,
+  copyLinkAddressLabel,
+  MaxLengthForDisplayedURLs,
+  openLinkExternallyLabel,
+} from './UIUtils.js';
 import {XElement} from './XElement.js';
 
 export class XLink extends XElement {

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -7,7 +7,14 @@ import * as LitHtml from '../../../lit-html/lit-html.js';
 import cssAngleStyles from './cssAngle.css.js';
 
 import type {Angle} from './CSSAngleUtils.js';
-import {AngleUnit, convertAngleUnit, getNewAngleFromEvent, getNextUnit, parseText, roundAngleByUnit} from './CSSAngleUtils.js';
+import {
+  AngleUnit,
+  convertAngleUnit,
+  getNewAngleFromEvent,
+  getNextUnit,
+  parseText,
+  roundAngleByUnit,
+} from './CSSAngleUtils.js';
 import {ValueChangedEvent} from './InlineEditorUtils.js';
 
 import type {CSSAngleEditorData} from './CSSAngleEditor.js';

package/front_end/ui/legacy/components/inline_editor/CSSAngleEditor.ts

@@ -8,7 +8,13 @@ import * as LitHtml from '../../../lit-html/lit-html.js';
 import cssAngleEditorStyles from './cssAngleEditor.css.js';
 
 import type {Angle} from './CSSAngleUtils.js';
-import {AngleUnit, get2DTranslationsForAngle, getAngleFromRadians, getNewAngleFromEvent, getRadiansFromAngle} from './CSSAngleUtils.js';
+import {
+  AngleUnit,
+  get2DTranslationsForAngle,
+  getAngleFromRadians,
+  getNewAngleFromEvent,
+  getRadiansFromAngle,
+} from './CSSAngleUtils.js';
 
 const {render, html} = LitHtml;
 const styleMap = LitHtml.Directives.styleMap;

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.998281"
+  "version": "1.0.999791"
 }

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);
+  }
+});