chrome-devtools-frontend 1.0.998787 → 1.0.1000057

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/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/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.998787"
+  "version": "1.0.1000057"
 }

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