chrome-devtools-frontend 1.0.978673 → 1.0.980166

package/front_end/.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
       'files': ['*.ts'],
       'rules': {
         '@typescript-eslint/explicit-function-return-type': 2,
+        'rulesdir/no_importing_images_from_src': 2,
         'rulesdir/enforce_custom_event_names': 2,
         'rulesdir/set_data_type_reference': 2,
         'rulesdir/lit_html_data_as_type': 2,

package/front_end/core/common/Color.ts

@@ -33,10 +33,11 @@
 
 import * as Platform from '../platform/platform.js';
 
-import {blendColors, contrastRatioAPCA, desiredLuminanceAPCA, luminance, luminanceAPCA, rgbaToHsla} from './ColorUtils.js';
+import {blendColors, contrastRatioAPCA, desiredLuminanceAPCA, luminance, luminanceAPCA, rgbaToHsla, rgbaToHwba} from './ColorUtils.js';
 
 export class Color {
   #hslaInternal: number[]|undefined;
+  #hwbaInternal: number[]|undefined;
   #rgbaInternal: number[];
   #originalText: string|null;
   readonly #originalTextIsValid: boolean;
@@ -44,6 +45,7 @@ export class Color {
 
   constructor(rgba: number[], format: Format, originalText?: string) {
     this.#hslaInternal = undefined;
+    this.#hwbaInternal = undefined;
     this.#rgbaInternal = rgba;
     this.#originalText = originalText || null;
     this.#originalTextIsValid = Boolean(this.#originalText);
@@ -110,29 +112,12 @@ export class Color {
       return null;
     }
 
-    // rgb/rgba(), hsl/hsla()
-    match = text.toLowerCase().match(/^\s*(?:(rgba?)|(hsla?))\((.*)\)\s*$/);
-
+    // rgb/rgba(), hsl/hsla(), hwb/hwba()
+    match = text.toLowerCase().match(/^\s*(?:(rgba?)|(hsla?)|(hwba?))\((.*)\)\s*$/);
     if (match) {
-      const components = match[3].trim();
-      let values = components.split(/\s*,\s*/);
-      if (values.length === 1) {
-        values = components.split(/\s+/);
-        if (values[3] === '/') {
-          values.splice(3, 1);
-          if (values.length !== 4) {
-            return null;
-          }
-        } else if (
-            (values.length > 2 && values[2].indexOf('/') !== -1) ||
-            (values.length > 3 && values[3].indexOf('/') !== -1)) {
-          const alpha = values.slice(2, 4).join('');
-          values = values.slice(0, 2).concat(alpha.split(/\//)).concat(values.slice(4));
-        } else if (values.length >= 4) {
-          return null;
-        }
-      }
-      if (values.length !== 3 && values.length !== 4 || values.indexOf('') > -1) {
+      // hwb(a) must have white space delimiters between its parameters.
+      const values = this.splitColorFunctionParameters(match[4], !match[3]);
+      if (!values) {
         return null;
       }
       const hasAlpha = (values[3] !== undefined);
@@ -150,19 +135,23 @@ export class Color {
         return new Color((rgba as number[]), hasAlpha ? Format.RGBA : Format.RGB, text);
       }
 
-      if (match[2]) {  // hsl/hsla
-        const hsla = [
+      if (match[2] || match[3]) {  // hsl/hsla or hwb/hwba
+        const parameters = [
           Color.parseHueNumeric(values[0]),
           Color.parseSatLightNumeric(values[1]),
           Color.parseSatLightNumeric(values[2]),
           hasAlpha ? Color.parseAlphaNumeric(values[3]) : 1,
         ];
-        if (hsla.indexOf(null) > -1) {
+        if (parameters.indexOf(null) > -1) {
           return null;
         }
         const rgba: number[] = [];
-        Color.hsl2rgb((hsla as number[]), rgba);
-        return new Color(rgba, hasAlpha ? Format.HSLA : Format.HSL, text);
+        if (match[2]) {
+          Color.hsl2rgb((parameters as number[]), rgba);
+          return new Color(rgba, hasAlpha ? Format.HSLA : Format.HSL, text);
+        }
+        Color.hwb2rgb((parameters as number[]), rgba);
+        return new Color(rgba, hasAlpha ? Format.HWBA : Format.HWB, text);
       }
     }
 
@@ -179,6 +168,38 @@ export class Color {
     return new Color(rgba, Format.HSLA);
   }
 
+  /**
+   * Split the color parameters of (e.g.) rgb(a), hsl(a), hwb(a) functions.
+   */
+  static splitColorFunctionParameters(content: string, allowCommas: boolean): string[]|null {
+    const components = content.trim();
+    let values: string[] = [];
+
+    if (allowCommas) {
+      values = components.split(/\s*,\s*/);
+    }
+    if (!allowCommas || values.length === 1) {
+      values = components.split(/\s+/);
+      if (values[3] === '/') {
+        values.splice(3, 1);
+        if (values.length !== 4) {
+          return null;
+        }
+      } else if (
+          (values.length > 2 && values[2].indexOf('/') !== -1) ||
+          (values.length > 3 && values[3].indexOf('/') !== -1)) {
+        const alpha = values.slice(2, 4).join('');
+        values = values.slice(0, 2).concat(alpha.split(/\//)).concat(values.slice(4));
+      } else if (values.length >= 4) {
+        return null;
+      }
+    }
+    if (values.length !== 3 && values.length !== 4 || values.indexOf('') > -1) {
+      return null;
+    }
+    return values;
+  }
+
   static parsePercentOrNumber(value: string): number|null {
     // @ts-ignore: isNaN can accept strings
     if (isNaN(value.replace('%', ''))) {
@@ -309,6 +330,24 @@ export class Color {
     out_rgb[3] = hsl[3];
   }
 
+  // See https://drafts.csswg.org/css-color-4/#hwb-to-rgb for formula reference.
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  static hwb2rgb(hwb: number[], out_rgb: number[]): void {
+    const h = hwb[0];
+    const w = hwb[1];
+    const b = hwb[2];
+
+    if (w + b >= 1) {
+      out_rgb[0] = out_rgb[1] = out_rgb[2] = w / (w + b);
+      out_rgb[3] = hwb[3];
+    } else {
+      Color.hsl2rgb([h, 1, 0.5, hwb[3]], out_rgb);
+      for (let i = 0; i < 3; ++i) {
+        out_rgb[i] += w - (w + b) * out_rgb[i];
+      }
+    }
+  }
+
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/naming-convention
   static hsva2rgba(hsva: number[], out_rgba: number[]): void {
@@ -478,6 +517,21 @@ export class Color {
     return [h, s !== 0 ? 2 * s / (l + s) : 0, (l + s), hsla[3]];
   }
 
+  /** HWBA with components within [0..1]
+     */
+  hwba(): number[] {
+    if (this.#hwbaInternal) {
+      return this.#hwbaInternal;
+    }
+    this.#hwbaInternal = rgbaToHwba(this.#rgbaInternal);
+    return this.#hwbaInternal;
+  }
+
+  canonicalHWBA(): number[] {
+    const hwba = this.hwba();
+    return [Math.round(hwba[0] * 360), Math.round(hwba[1] * 100), Math.round(hwba[2] * 100), hwba[3]];
+  }
+
   hasAlpha(): boolean {
     return this.#rgbaInternal[3] !== 1;
   }
@@ -546,6 +600,16 @@ export class Color {
         }
         return start + ')';
       }
+      case Format.HWB:
+      case Format.HWBA: {
+        const hwba = this.hwba();
+        const start = Platform.StringUtilities.sprintf(
+            'hwb(%ddeg %d% %d%', Math.round(hwba[0] * 360), Math.round(hwba[1] * 100), Math.round(hwba[2] * 100));
+        if (this.hasAlpha()) {
+          return start + Platform.StringUtilities.sprintf(' / %d%)', Math.round(hwba[3] * 100));
+        }
+        return start + ')';
+      }
       case Format.HEXA: {
         return Platform.StringUtilities
             .sprintf(
@@ -670,7 +734,7 @@ export class Color {
 }
 
 export const Regex: RegExp =
-    /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b[a-zA-Z]+\b(?!-))/g;
+    /((?:rgb|hsl|hwb)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b[a-zA-Z]+\b(?!-))/g;
 
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
@@ -685,6 +749,8 @@ export enum Format {
   RGBA = 'rgba',
   HSL = 'hsl',
   HSLA = 'hsla',
+  HWB = 'hwb',
+  HWBA = 'hwba',
 }
 
 const COLOR_TO_RGBA_ENTRIES: Array<readonly[string, number[]]> = [

package/front_end/core/common/ColorUtils.ts

@@ -15,11 +15,10 @@ export function blendColors(fgRGBA: number[], bgRGBA: number[]): number[] {
   ];
 }
 
-export function rgbaToHsla([r, g, b, a]: number[]): number[] {
+function rgbToHue([r, g, b]: number[]): number {
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
   const diff = max - min;
-  const sum = max + min;
 
   let h;
   if (min === max) {
@@ -31,7 +30,16 @@ export function rgbaToHsla([r, g, b, a]: number[]): number[] {
   } else {
     h = (1 / 6 * (r - g) / diff) + 2 / 3;
   }
+  return h;
+}
+
+export function rgbaToHsla([r, g, b, a]: number[]): number[] {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  const sum = max + min;
 
+  const h = rgbToHue([r, g, b]);
   const l = 0.5 * sum;
 
   let s;
@@ -48,6 +56,14 @@ export function rgbaToHsla([r, g, b, a]: number[]): number[] {
   return [h, s, l, a];
 }
 
+export function rgbaToHwba([r, g, b, a]: number[]): number[] {
+  const h = rgbToHue([r, g, b]);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+
+  return [h, min, 1 - max, a];
+}
+
 /**
 * Calculate the luminance of this color using the WCAG algorithm.
 * See http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

package/front_end/core/common/Settings.ts

@@ -1113,6 +1113,8 @@ export function detectColorFormat(color: Color): Format {
     format = cf.RGB;
   } else if (formatSetting === cf.HSL) {
     format = cf.HSL;
+  } else if (formatSetting === cf.HWB) {
+    format = cf.HWB;
   } else if (formatSetting === cf.HEX) {
     format = color.detectHEXFormat();
   } else {

package/front_end/core/sdk/CSSStyleSheetHeader.ts

@@ -6,6 +6,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
+import * as Root from '../root/root.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import type {CSSModel} from './CSSModel.js';
@@ -104,27 +105,38 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
   }
 
   resourceURL(): Platform.DevToolsPath.UrlString {
-    return (this.isViaInspector() ? this.viaInspectorResourceURL() : this.sourceURL);
+    const url = this.isViaInspector() ? this.viaInspectorResourceURL() : this.sourceURL;
+    if (!url && Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      return this.dynamicStyleURL();
+    }
+    return url;
   }
 
-  private viaInspectorResourceURL(): Platform.DevToolsPath.UrlString {
+  private getFrameURLPath(): string {
     const model = this.#cssModelInternal.target().model(ResourceTreeModel);
     console.assert(Boolean(model));
     if (!model) {
-      return '' as Platform.DevToolsPath.UrlString;
+      return '';
     }
     const frame = model.frameForId(this.frameId);
     if (!frame) {
-      return '' as Platform.DevToolsPath.UrlString;
+      return '';
     }
     console.assert(Boolean(frame));
     const parsedURL = new Common.ParsedURL.ParsedURL(frame.url);
-    let fakeURL = 'inspector://' + parsedURL.host + parsedURL.folderPathComponents;
-    if (!fakeURL.endsWith('/')) {
-      fakeURL += '/';
+    let urlPath = parsedURL.host + parsedURL.folderPathComponents;
+    if (!urlPath.endsWith('/')) {
+      urlPath += '/';
     }
-    fakeURL += 'inspector-stylesheet';
-    return fakeURL as Platform.DevToolsPath.UrlString;
+    return urlPath;
+  }
+
+  private viaInspectorResourceURL(): Platform.DevToolsPath.UrlString {
+    return `inspector://${this.getFrameURLPath()}inspector-stylesheet` as Platform.DevToolsPath.UrlString;
+  }
+
+  private dynamicStyleURL(): Platform.DevToolsPath.UrlString {
+    return `stylesheet://${this.getFrameURLPath()}style#${this.id}` as Platform.DevToolsPath.UrlString;
   }
 
   lineNumberInSource(lineNumberInStyleSheet: number): number {

package/front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -8,6 +8,7 @@ export const enum FormatterActions {
   HTML_OUTLINE = 'htmlOutline',
   JAVASCRIPT_OUTLINE = 'javaScriptOutline',
   JAVASCRIPT_IDENTIFIERS = 'javaScriptIdentifiers',
+  JAVASCRIPT_SUBSTITUTE = 'javaScriptSubstitute',
   EVALUATE_JAVASCRIPT_SUBSTRING = 'evaluatableJavaScriptSubstring',
   ARGUMENTS_LIST = 'argumentsList',
 }

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -42,7 +42,7 @@ import {HTMLFormatter} from './HTMLFormatter.js';
 import {IdentityFormatter} from './IdentityFormatter.js';
 import {JavaScriptFormatter} from './JavaScriptFormatter.js';
 import {JSONFormatter} from './JSONFormatter.js';
-import {computeSubstitution, applySubstitution} from './Substitute.js';
+import {substituteExpression} from './Substitute.js';
 
 export interface Chunk {
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -306,4 +306,4 @@ export function argumentsList(content: string): string[] {
   }
 })();
 
-export {applySubstitution, computeSubstitution};
+export {substituteExpression};

package/front_end/entrypoints/formatter_worker/Substitute.ts

@@ -6,7 +6,12 @@ import * as Acorn from '../../third_party/acorn/acorn.js';
 
 import {ECMA_VERSION} from './AcornTokenizer.js';
 
-export interface Replacement {
+export function substituteExpression(expression: string, nameMap: Map<string, string>): string {
+  const replacements = computeSubstitution(expression, nameMap);
+  return applySubstitution(expression, replacements);
+}
+
+interface Replacement {
   from: string;
   to: string;
   offset: number;
@@ -17,7 +22,7 @@ export interface Replacement {
 // function returns a list of replacements sorted by the offset. The function throws if
 // it cannot parse the expression or the substitution is impossible to perform (for example
 // if the substitution target is 'this' within a function, it would become bound there).
-export function computeSubstitution(expression: string, nameMap: Map<string, string>): Replacement[] {
+function computeSubstitution(expression: string, nameMap: Map<string, string>): Replacement[] {
   // Parse the expression and find variables and scopes.
   const root = Acorn.parse(expression, {ecmaVersion: ECMA_VERSION, allowAwaitOutsideFunction: true, ranges: false}) as
       Acorn.ESTree.Node;
@@ -80,7 +85,7 @@ export function computeSubstitution(expression: string, nameMap: Map<string, str
   return result;
 }
 
-export function applySubstitution(expression: string, replacements: Replacement[]): string {
+function applySubstitution(expression: string, replacements: Replacement[]): string {
   const accumulator = [];
   let last = 0;
   for (const r of replacements) {

package/front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.ts

@@ -10,7 +10,8 @@ import {FormatterActions} from './FormatterActions.js';
 
 self.onmessage = function(event: MessageEvent): void {
   const method: FormatterActions = event.data.method;
-  const params: {indentString: string, content: string, mimeType: string} = event.data.params;
+  const params: {indentString: string, content: string, mimeType: string, mapping: [string, string][]} =
+      event.data.params;
   if (!method) {
     return;
   }
@@ -31,6 +32,11 @@ self.onmessage = function(event: MessageEvent): void {
     case FormatterActions.JAVASCRIPT_IDENTIFIERS:
       self.postMessage(FormatterWorker.FormatterWorker.javaScriptIdentifiers(params.content));
       break;
+    case FormatterActions.JAVASCRIPT_SUBSTITUTE: {
+      const mapping = new Map<string, string>(params.mapping);
+      self.postMessage(FormatterWorker.Substitute.substituteExpression(params.content, mapping));
+      break;
+    }
     case FormatterActions.EVALUATE_JAVASCRIPT_SUBSTRING:
       self.postMessage(FormatterWorker.FormatterWorker.evaluatableJavaScriptSubstring(params.content));
       break;

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -108,7 +108,7 @@ export class FormatterWorkerPool {
   }
 
   private runTask(methodName: FormatterActions.FormatterActions, params: {
-    [x: string]: string,
+    [x: string]: string|string[][],
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }): Promise<any> {
@@ -132,6 +132,14 @@ export class FormatterWorkerPool {
         .then(ids => ids || []);
   }
 
+  javaScriptSubstitute(expression: string, mapping: Map<string, string>): Promise<string> {
+    return this
+        .runTask(
+            FormatterActions.FormatterActions.JAVASCRIPT_SUBSTITUTE,
+            {content: expression, mapping: Array.from(mapping.entries())})
+        .then(result => result || '');
+  }
+
   evaluatableJavaScriptSubstring(content: string): Promise<string> {
     return this.runTask(FormatterActions.FormatterActions.EVALUATE_JAVASCRIPT_SUBSTRING, {content: content})
         .then(text => text || '');
@@ -179,13 +187,13 @@ export class FormatterWorkerPool {
 class Task {
   method: string;
   params: {
-    [x: string]: string,
+    [x: string]: string|string[][],
   };
   callback: (arg0: MessageEvent|null) => void;
   isChunked: boolean|undefined;
   constructor(
       method: string, params: {
-        [x: string]: string,
+        [x: string]: string|string[][],
       },
       callback: (arg0: MessageEvent|null) => void, isChunked?: boolean) {
     this.method = method;

package/front_end/models/persistence/PersistenceUtils.ts

@@ -53,9 +53,8 @@ export class PersistenceUtils {
       }
       const icon = UI.Icon.Icon.create('mediumicon-file-sync');
       UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
-      // TODO(allada) This will not work properly with dark theme.
       if (NetworkPersistenceManager.instance().project() === binding.fileSystem.project()) {
-        icon.style.filter = 'hue-rotate(160deg)';
+        icon.classList.add('purple-dot');
       }
       return icon;
     }

package/front_end/panels/console/ConsolePrompt.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
@@ -309,7 +310,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const callFrame = executionContext.debuggerModel.selectedCallFrame();
       if (callFrame) {
         const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(callFrame);
-        expression = this.substituteNames(expression, nameMap);
+        expression = await this.substituteNames(expression, nameMap);
       }
     }
 
@@ -317,11 +318,12 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         executionContext, message, expression, useCommandLineAPI);
   }
 
-  private substituteNames(expression: string, mapping: Map<string, string>): string {
-    // TODO(jarin) Build a more reliable replacer, based on the parsed AST.
-    // Here, we just replace exact occurrences.
-    const replacement = mapping.get(expression);
-    return replacement ?? expression;
+  private async substituteNames(expression: string, mapping: Map<string, string>): Promise<string> {
+    try {
+      return await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, mapping);
+    } catch {
+      return expression;
+    }
   }
 
   private editorUpdate(update: CodeMirror.ViewUpdate): void {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -219,9 +219,7 @@ const HIGHLIGHTABLE_PROPERTIES = [
   {mode: 'flexibility', properties: ['flex', 'flex-basis', 'flex-grow', 'flex-shrink']},
 ];
 
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-let _stylesSidebarPaneInstance: StylesSidebarPane;
+let stylesSidebarPaneInstance: StylesSidebarPane;
 
 // TODO(crbug.com/1172300) This workaround is needed to keep the linter happy.
 // Otherwise it complains about: Unknown word CssSyntaxError
@@ -258,10 +256,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #urlToChangeTracker: Map<string, ChangeTracker> = new Map();
 
   static instance(): StylesSidebarPane {
-    if (!_stylesSidebarPaneInstance) {
-      _stylesSidebarPaneInstance = new StylesSidebarPane();
+    if (!stylesSidebarPaneInstance) {
+      stylesSidebarPaneInstance = new StylesSidebarPane();
     }
-    return _stylesSidebarPaneInstance;
+    return stylesSidebarPaneInstance;
   }
 
   private constructor() {
@@ -292,7 +290,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.swatchPopoverHelperInternal = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
     this.swatchPopoverHelperInternal.addEventListener(
         InlineEditor.SwatchPopoverHelper.Events.WillShowPopover, this.hideAllPopovers, this);
-    this.linkifier = new Components.Linkifier.Linkifier(_maxLinkLength, /* useLinkDecorator */ true);
+    this.linkifier = new Components.Linkifier.Linkifier(MAX_LINK_LENGTH, /* useLinkDecorator */ true);
     this.decorator = new StylePropertyHighlighter(this);
     this.lastRevealedProperty = null;
     this.userOperation = false;
@@ -307,7 +305,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.sectionBlocks = [];
     this.idleCallbackManager = null;
     this.needsForceUpdate = false;
-    _stylesSidebarPaneInstance = this;
+    stylesSidebarPaneInstance = this;
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
     this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
     this.resizeThrottler = new Common.Throttler.Throttler(100);
@@ -1392,9 +1390,7 @@ async function buildPropertyRuleMaps(content: string):
   return {propertyToSelector, ruleToSelector};
 }
 
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const _maxLinkLength = 23;
+const MAX_LINK_LENGTH = 23;
 
 export class SectionBlock {
   private readonly titleElementInternal: Element|null;

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -44,6 +44,7 @@ slot[name="property-value"] {
 
 .goto {
   display: none;
+  cursor: pointer;
   position: absolute;
   width: var(--goto-size);
   height: var(--goto-size);

package/front_end/panels/elements/components/computedStyleTrace.css

@@ -24,6 +24,7 @@
   --size: 16px;
 
   display: none;
+  cursor: pointer;
   position: absolute;
   width: var(--size);
   height: var(--size);

package/front_end/panels/media/playerMessagesView.css

@@ -14,17 +14,10 @@
 }
 
 .media-messages-level-dropdown-element {
-  background-color: var(--color-background-elevation-1);
-  color: var(--color-text-primary);
   height: 18px;
   line-height: 18px;
 }
 
-.media-messages-level-dropdown-element:hover {
-  background-color: var(--legacy-accent-color-hover);
-  color: var(--color-background);
-}
-
 .media-messages-level-dropdown-text {
   float: left;
 }

package/front_end/panels/sources/components/HeadersView.css

@@ -6,6 +6,7 @@
 
 :host {
   flex-grow: 1;
+  padding: 6px;
 }
 
 .row {
@@ -16,11 +17,7 @@
   font-size: var(--monospace-font-size);
   align-items: center;
   line-height: 18px;
-  margin: 2em 0 0 0.5em;
-}
-
-.row:first-child {
-  margin-top: 0.5em;
+  margin-top: 3px;
 }
 
 .row devtools-button {
@@ -29,7 +26,7 @@
 }
 
 .padded {
-  margin: 0.25em 0 0 2em;
+  margin-left: 2em;
 }
 
 .separator {

package/front_end/panels/webauthn/webauthnPane.css

@@ -75,14 +75,18 @@
   margin: auto;
 }
 
+.authenticator-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
 .authenticator-section-title {
   line-height: 24px;
-  width: 260px;
   display: inline-block;
 }
 
 .authenticator-section-title .authenticator-name-field {
-  width: 220px;
   display: inline-block;
   font-weight: bold;
   border: none;

package/front_end/third_party/puppeteer/README.chromium

@@ -1,7 +1,7 @@
 Name: Puppeteer
 Short Name: Puppeteer
 URL: https://github.com/puppeteer/puppeteer
-Version: 13.1.1
+Version: 13.5.1
 License: Apache-2.0
 License File: package/LICENSE
 Security Critical: no
@@ -12,5 +12,5 @@ Puppeteer is a Node library which provides a high-level API to control Chrome or
 To update this package, run the following command (replace version number with updated version number):
 
 ```bash
-wget -qO- https://registry.npmjs.org/puppeteer/-/puppeteer-x.y.z.tgz | tar xzf -
+curl --output - $(npm view puppeteer dist.tarball) | tar xzf -
 ```