chrome-devtools-frontend 1.0.995491 → 1.0.996595

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -10,20 +10,32 @@ import {StartView} from './LighthouseStartView.js';
 import {Events} from './LighthouseController.js';
 
 const UIStrings = {
+  /**
+   * @description Text displayed as the title of a panel that can be used to audit a web page with Lighthouse.
+   */
+  generateLighthouseReport: 'Generate a Lighthouse report',
   /**
    * @description Text that refers to the Lighthouse mode
    */
   mode: 'Mode',
+  /**
+   * @description Title in the Lighthouse Start View for list of categories to run during audit
+   */
+  categories: 'Categories',
+  /**
+   * @description Title in the Lighthouse Start View for list of available start plugins
+   */
+  plugins: 'Plugins',
   /**
    * @description Label for a button to start analyzing a page navigation with Lighthouse
    */
-  analyzeNavigation: 'Analyze navigation',
+  analyzeNavigation: 'Analyze page load',
   /**
    * @description Label for a button to start analyzing the current page state with Lighthouse
    */
-  analyzeSnapshot: 'Analyze snapshot',
+  analyzeSnapshot: 'Analyze page state',
   /**
-   * @description Label for a button that ends a Lighthouse timespan
+   * @description Label for a button that starts a Lighthouse mode that analyzes user interactions over a period of time.
    */
   startTimespan: 'Start timespan',
 };
@@ -35,31 +47,75 @@ export class StartViewFR extends StartView {
   protected render(): void {
     super.render();
     const fragment = UI.Fragment.Fragment.build`
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  ${i18nString(UIStrings.mode)}
-  </div>
-  <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+<form class="lighthouse-start-view-fr">
+  <header class="hbox">
+    <div class="lighthouse-logo"></div>
+    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
+    <div class="lighthouse-start-button-container">${this.startButton}</div>
+  </header>
+  <div $="help-text" class="lighthouse-help-text hidden"></div>
+  <div class="lighthouse-options hbox">
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-categories">
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
+        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
+      </div>
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">
+          <div class="lighthouse-icon-label">${i18nString(UIStrings.plugins)}</div>
+        </div>
+        <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
+      </div>
+    </div>
   </div>
+  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
+</form>
     `;
 
+    this.helpText = fragment.$('help-text');
+    this.warningText = fragment.$('warning-text');
+
+    // The previous radios are removed later and don't exist on the new fragment yet.
+    this.populateFormControls(fragment);
+
     // Populate the Lighthouse mode
     const modeFormElements = fragment.$('mode-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
 
-    const form = this.contentElement.querySelector('form');
-    form?.appendChild(fragment.element());
-    this.updateStartButton();
+    this.contentElement.textContent = '';
+    this.contentElement.append(fragment.element());
+    this.updateMode();
+  }
+
+  onResize(): void {
+    const useNarrowLayout = this.contentElement.offsetWidth < 500;
+    const useWideLayout = this.contentElement.offsetWidth > 800;
+    const headerEl = this.contentElement.querySelector('.lighthouse-start-view-fr header');
+    const optionsEl = this.contentElement.querySelector('.lighthouse-options');
+    if (headerEl) {
+      headerEl.classList.toggle('hbox', !useNarrowLayout);
+      headerEl.classList.toggle('vbox', useNarrowLayout);
+    }
+    if (optionsEl) {
+      optionsEl.classList.toggle('wide', useWideLayout);
+      optionsEl.classList.toggle('narrow', useNarrowLayout);
+    }
   }
 
-  updateStartButton(): void {
+  updateMode(): void {
     const {mode} = this.controller.getFlags();
 
-    let label: Platform.UIString.LocalizedString;
+    let buttonLabel: Platform.UIString.LocalizedString;
     let callback: () => void;
 
     if (mode === 'timespan') {
-      label = i18nString(UIStrings.startTimespan);
+      buttonLabel = i18nString(UIStrings.startTimespan);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseTimespanStart,
@@ -67,7 +123,7 @@ export class StartViewFR extends StartView {
         );
       };
     } else if (mode === 'snapshot') {
-      label = i18nString(UIStrings.analyzeSnapshot);
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseStart,
@@ -75,7 +131,7 @@ export class StartViewFR extends StartView {
         );
       };
     } else {
-      label = i18nString(UIStrings.analyzeNavigation);
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseStart,
@@ -85,16 +141,16 @@ export class StartViewFR extends StartView {
     }
 
     this.startButton = UI.UIUtils.createTextButton(
-        label,
+        buttonLabel,
         callback,
         /* className */ '',
         /* primary */ true,
     );
 
-    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
-    if (startButtonContainer) {
-      startButtonContainer.textContent = '';
-      startButtonContainer.appendChild(this.startButton);
+    const startButtonContainerEl = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainerEl) {
+      startButtonContainerEl.textContent = '';
+      startButtonContainerEl.appendChild(this.startButton);
     }
   }
 }

package/front_end/panels/lighthouse/RadioSetting.ts

@@ -5,16 +5,20 @@
 import type * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+interface RadioOption {
+  value: string;
+  label: () => Common.UIString.LocalizedString;
+  tooltip?: () => Common.UIString.LocalizedString;
+}
+
 export class RadioSetting {
   private readonly setting: Common.Settings.Setting<string>;
-  private options: {value: string, label: () => Common.UIString.LocalizedString}[];
+  private options: RadioOption[];
   element: HTMLDivElement;
   private radioElements: HTMLInputElement[];
   private ignoreChangeEvents: boolean;
   private selectedIndex: number;
-  constructor(
-      options: {value: string, label: () => Common.UIString.LocalizedString}[],
-      setting: Common.Settings.Setting<string>, description: string) {
+  constructor(options: RadioOption[], setting: Common.Settings.Setting<string>, description: string) {
     this.setting = setting;
     this.options = options;
 
@@ -32,9 +36,11 @@ export class RadioSetting {
   `;
 
       this.element.appendChild(fragment.element());
+
+      const tooltip = option.tooltip?.() || description;
       if (description) {
-        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, description);
-        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, description);
+        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, tooltip);
+        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, tooltip);
       }
       const radioElement = fragment.$('input') as HTMLInputElement;
       radioElement.addEventListener('change', this.valueChanged.bind(this));

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -5,7 +5,8 @@
  */
 /* <3 */
 
-.lighthouse-start-view {
+.lighthouse-start-view,
+.lighthouse-start-view-fr {
   font-family: Roboto, sans-serif;
   font-size: var(--font-size);
   line-height: 18px;
@@ -16,6 +17,10 @@
   --report-font-family: roboto, helvetica, arial, sans-serif;
 }
 
+.lighthouse-start-view-fr {
+  margin: 24px;
+}
+
 .lighthouse-start-view header {
   flex: 2 1;
   padding: 16px;
@@ -23,6 +28,15 @@
   justify-items: center;
 }
 
+.lighthouse-start-view-fr header {
+  display: flex;
+  font-size: 18px;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 16px;
+  margin-bottom: 16px;
+}
+
 .lighthouse-logo {
   width: 75px;
   height: 75px;
@@ -32,6 +46,11 @@
   background-image: var(--image-file-lighthouse_logo);
 }
 
+.lighthouse-start-view-fr .lighthouse-logo {
+  width: 45px;
+  height: 45px;
+}
+
 .lighthouse-start-view-text {
   margin: 0 40px;
   text-align: center;
@@ -65,6 +84,10 @@
   top: -4px;
 }
 
+.lighthouse-form-section-label .lighthouse-learn-more {
+  padding: 20px;
+}
+
 .lighthouse-radio {
   display: flex;
   align-items: center;
@@ -86,8 +109,16 @@ input[type="radio"]:focus {
   align-items: center;
 }
 
+.lighthouse-start-view-fr header.hbox .lighthouse-start-button-container {
+  margin-left: auto;
+}
+
+.lighthouse-start-view-fr header.vbox .lighthouse-title {
+  text-align: center;
+}
+
 .lighthouse-start-button-container button {
-  margin: 8px auto;
+  margin: 16px auto;
   font-family: var(--report-font-family);
   font-weight: 500;
   font-size: var(--font-size);
@@ -136,3 +167,19 @@ input[type="radio"]:focus {
   content: "⚠";
   margin-right: 10px;
 }
+
+.lighthouse-options {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+}
+
+.lighthouse-options.narrow {
+  grid-template-columns: auto;
+  grid-template-rows: auto auto auto;
+}
+
+.lighthouse-options.wide {
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto;
+}

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -572,6 +572,7 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
         valueStyle = 'number';
         break;
       case 'hidden':
+      case 'object shape':
         valueStyle = 'null';
         break;
       case 'array':

package/front_end/panels/security/SecurityPanel.ts

@@ -111,7 +111,7 @@ const UIStrings = {
   *@description Second part of the body of message to display in devtools security tab when you are viewing a page that triggered a safety tip.
   */
   ifYouBelieveThisIsShownIn:
-      'If you believe this is shown in error please visit https://bugs.chromium.org/p/chromium/issues/entry?template=Safety+Tips+Appeals.',
+      'If you believe this is shown in error please visit https://g.co/chrome/lookalike-warnings.',
   /**
   *@description Summary of a warning when the user visits a page that triggered a Safety Tip because the domain looked like another domain.
   */
@@ -126,7 +126,7 @@ const UIStrings = {
   *@description second part of body of a warning when the user visits a page that triggered a Safety Tip because the domain looked like another domain.
   */
   ifYouBelieveThisIsShownInErrorSafety:
-      'If you believe this is shown in error please visit https://bugs.chromium.org/p/chromium/issues/entry?template=Safety+Tips+Appeals.',
+      'If you believe this is shown in error please visit https://g.co/chrome/lookalike-warnings.',
   /**
   *@description Title of the devtools security tab when the page you are on triggered a safety tip.
   */

package/front_end/ui/components/diff_view/diffView.css

@@ -11,12 +11,14 @@
   font-size: var(--source-code-font-size);
   white-space: pre;
   line-height: 1.2em;
+  user-select: text;
 }
 
 .diff-line-number {
   color: var(--color-line-number);
   padding: 0 3px 0 9px;
   text-align: right;
+  user-select: none;
 }
 
 .diff-line-marker {

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

@@ -255,25 +255,36 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     return this.#selectedTreeNode;
   }
 
-  async #fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
+  async #flattenSubtree(node: TreeNodeWithChildren<TreeNodeDataType>, filter: (node: TreeNodeDataType) => FilterOption):
+      Promise<TreeNode<TreeNodeDataType>[]> {
     const children = await getNodeChildren(node);
-    if (!this.#nodeFilter) {
-      return children;
-    }
     const filteredChildren = [];
     for (const child of children) {
-      const filtering = this.#nodeFilter(child.treeNodeData);
+      const filtering = filter(child.treeNodeData);
       // We always include the selected node in the tree, regardless of its filtering status.
-      if (filtering === FilterOption.SHOW || this.#isSelectedNode(child) || child.id === this.#nodeIdPendingFocus) {
+      const toBeSelected = this.#isSelectedNode(child) || child.id === this.#nodeIdPendingFocus;
+      // If a node is already expanded we should not flatten it away.
+      const expanded = this.#nodeExpandedMap.get(child.id);
+      if (filtering === FilterOption.SHOW || toBeSelected || expanded) {
         filteredChildren.push(child);
       } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
-        const grandChildren = await this.#fetchNodeChildren(child);
+        const grandChildren = await this.#flattenSubtree(child, filter);
         filteredChildren.push(...grandChildren);
       }
     }
     return filteredChildren;
   }
 
+  async #fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
+    const children = await getNodeChildren(node);
+    const filter = this.#nodeFilter;
+    if (!filter) {
+      return children;
+    }
+    const filteredDescendants = await this.#flattenSubtree(node, filter);
+    return filteredDescendants.length ? filteredDescendants : children;
+  }
+
   #setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
     this.#nodeExpandedMap.set(node.id, newExpandedState);
   }

package/front_end/ui/legacy/Toolbar.ts

@@ -57,6 +57,10 @@ const UIStrings = {
   *@description Announced screen reader message for ToolbarSettingToggle when the setting is toggled off.
   */
   notPressed: 'not pressed',
+  /**
+  *@description Tooltip shown when the user hovers over the clear icon to empty the text input.
+  */
+  clearInput: 'Clear input',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/Toolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -701,6 +705,7 @@ export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
     }
 
     const clearButton = this.element.createChild('div', 'toolbar-input-clear-button');
+    clearButton.title = UIStrings.clearInput;
     clearButton.appendChild(Icon.create('mediumicon-gray-cross-active', 'search-cancel-button'));
     clearButton.addEventListener('click', () => {
       this.setValue('', true);

package/front_end/ui/legacy/softDropDownButton.css

@@ -23,6 +23,10 @@ button.soft-dropdown > .title {
   text-overflow: ellipsis;
 }
 
+button.soft-dropdown:hover:not(:active) > .title {
+  color: var(--color-text-primary);
+}
+
 @media (forced-colors: active) {
   button.soft-dropdown {
     border: 1px solid ButtonText;

package/package.json

@@ -30,6 +30,7 @@
     "check": "npm run check-lint && npm run check-loc",
     "check-external-links": "vpython third_party/node/node.py --output scripts/check_external_links.js",
     "check-lint": "vpython third_party/node/node.py --output scripts/test/run_lint_check_js.mjs && vpython third_party/node/node.py --output scripts/test/run_lint_check_css.js",
+    "check-lint-js": "vpython third_party/node/node.py --output scripts/test/run_lint_check_js.mjs",
     "check-lint-css": "vpython third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "collect-strings": "vpython third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
     "components-server": "vpython third_party/node/node.py --output scripts/component_server/server.js",
@@ -54,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.995491"
+  "version": "1.0.996595"
 }

package/scripts/eslint_rules/lib/inline_type_imports.js

@@ -0,0 +1,158 @@
+// 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.
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'Inline type imports.',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    messages: {
+      inlineTypeImport: 'Type imports must be imported in the same import statement as values, using the type keyword',
+      convertTypeImport: 'Type imports must use the type modifier on each item, not on the overall import statement',
+    },
+    schema: []  // no options
+  },
+  create: function(context) {
+    // Stores any type imports (import type {} from ...).
+    // The key is the literal import path ("../foo.js");
+    const typeImports = new Map();
+    // Stores any value imports (import {} from ...).
+    // The key is the literal import path ("../foo.js");
+    const valueImports = new Map();
+
+    // Takes the node that represents an import ("Foo", "Foo as Bar") and
+    // return the literal text.
+    function getTextForImportSpecifier(specifier) {
+      // import {Foo as Bar} from 'foo';
+      // Foo = imported name
+      // Bar = local name
+      const localName = specifier.local.name;
+      const importedName = specifier.imported.name;
+      if (localName === importedName) {
+        // No `X as Y`, so just use either name.
+        return localName;
+      }
+      return `${importedName} as ${localName}`;
+    }
+
+    function mergeImports(fixer, typeImportNode, valueImportNode) {
+      // Get all the references from the type import node that we need to add to the value import node.
+      const typeImportSpecifiers = typeImportNode.specifiers.map(spec => {
+        return getTextForImportSpecifier(spec);
+      });
+
+      // Find the last value specifier, which we will then insert the type imports to.
+      const lastValueSpecifier = valueImportNode.specifiers[valueImportNode.specifiers.length - 1];
+
+      // Remember that we don't need to concern ourselves with indentation: in
+      // PRESUBMIT clang-format runs _after_ ESLint, so we can let Clang tidy
+      // up any rough edges.
+      const textToImport = ', ' +
+          typeImportSpecifiers
+              .map(spec => `type ${spec}`)
+              .join(', ');
+
+      return [
+        // Remove the type import
+        fixer.remove(typeImportNode),
+        // Add the type imports to the existing import
+        fixer.insertTextAfter(lastValueSpecifier, textToImport)
+      ];
+    }
+
+    function inlineTypeImportKeyword(fixer, typeImportNode) {
+      // We need to remove the " type" text after "import".
+      const importStart = typeImportNode.range[0];
+      const typeImportStart = importStart + 6;    // 6 here = length of "import"
+      const typeImportEnd = typeImportStart + 5;  // 5 here = length of "type" + 1 to remove the space after it.
+
+      const addTypeToSpecifiersFixers = typeImportNode.specifiers.map(spec => {
+        const newText = getTextForImportSpecifier(spec);
+
+        return fixer.replaceText(spec, `type ${newText}`);
+      });
+
+      return [
+        ...addTypeToSpecifiersFixers,
+        fixer.removeRange([typeImportStart, typeImportEnd]),
+      ];
+    }
+
+    return {
+      ImportDeclaration(node) {
+        // Note that we only care about named imports: import {} from 'foo.js'.
+        // This is because:
+        // 1: if we have `import type * as SDK from '../` that means we know we
+        // aren't using `SDK` for any values, otherwise we wouldn't have the
+        // `type` modifier.
+        // 2: similarly, `import type Foo from './foo'` follows (1). We also
+        // don't use this pattern in DevTools, but even if we did we don't have
+        // to worry about it.
+        // 3: Any side-effect imports (import './foo.js') are irrelevant.
+
+        if (!node.specifiers || node.specifiers.length < 1) {
+          // import './foo.js';
+          return;
+        }
+
+        if (node.specifiers[0].type === 'ImportDefaultSpecifier') {
+          // import Foo from './foo.js';
+          return;
+        }
+
+        if (node.specifiers[0].type === 'ImportNamespaceSpecifier') {
+          // import * as Foo from './foo.js';
+          return;
+        }
+
+        // Store the import
+        const importFilePath = node.source.value;
+        if (node.importKind === 'type') {
+          typeImports.set(importFilePath, node);
+        } else if (node.importKind === 'value') {
+          valueImports.set(importFilePath, node);
+        }
+      },
+      'Program:exit'() {
+        // Loop over the type imports and see if there are any matching value
+        // imports.
+        // Looping this way means if there are any value imports without a
+        // matching type import, we leave them alone.
+        for (const [typeImportFilePath, typeImportNode] of typeImports) {
+          const valueImportNodeForFilePath = valueImports.get(typeImportFilePath);
+          if (valueImportNodeForFilePath) {
+          // If we've got here, we have two imports for the same file-path, one
+          // for types, and one for values, so let's merge them.
+            context.report({
+              node: typeImportNode,
+              messageId: 'inlineTypeImport',
+              fix(fixer) {
+                return mergeImports(fixer, typeImportNode, valueImportNodeForFilePath);
+              }
+            });
+            continue;
+          }
+
+          // At this point we have just a type import and no matching file
+          // import, but we still want to convert the import so that each
+          // imported reference uses the type modifier:
+          // BEFORE: import type {A, B} from '...';
+          // AFTER: import {type A, type B} from '...';
+          context.report({
+            node: typeImportNode,
+            messageId: 'convertTypeImport',
+            fix(fixer) {
+              return inlineTypeImportKeyword(fixer, typeImportNode);
+            }
+          });
+        }
+      },
+    };
+  }
+};