chrome-devtools-frontend 1.0.1011873 → 1.0.1012379

package/codereview.settings

@@ -0,0 +1,4 @@
+# This file is used by git-cl to get repository specific information.
+GERRIT_HOST: True
+CODE_REVIEW_SERVER: codereview.chromium.org
+PROJECT: devtools-frontend

package/front_end/core/host/UserMetrics.ts

@@ -626,8 +626,9 @@ export enum DevtoolsExperiments {
   'cssLayers' = 59,
   'eyedropperColorPicker' = 60,
   'instrumentationBreakpoints' = 61,
+  'cssAuthoringHints' = 62,
   // Increment this when new experiments are added.
-  'MaxValue' = 62,
+  'MaxValue' = 63,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/core/root/Runtime.ts

@@ -291,6 +291,7 @@ export enum ExperimentName {
   CSS_LAYERS = 'cssLayers',
   EYEDROPPER_COLOR_PICKER = 'eyedropperColorPicker',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentationBreakpoints',
+  CSS_AUTHORING_HINTS = 'cssAuthoringHints',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/core/sdk/CSSModel.ts

@@ -517,6 +517,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     return [...this.#fontFaces.values()];
   }
 
+  fontFaceForSource(src: string): CSSFontFace|undefined {
+    return this.#fontFaces.get(src);
+  }
+
   styleSheetHeaderForId(id: Protocol.CSS.StyleSheetId): CSSStyleSheetHeader|null {
     return this.#styleSheetIdToHeader.get(id) || null;
   }

package/front_end/entrypoints/main/MainImpl.ts

@@ -386,6 +386,11 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.HEADER_OVERRIDES, 'Local overrides for response headers');
 
+    // Enable CSS Authoring hints for inactive rules, deprecated properties, etc.
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS,
+        'Enable CSS Authoring hints for inactive rules, deprecated properties, etc.');
+
     // New Lighthouse panel with timespan and snapshot mode
     Root.Runtime.experiments.register('lighthousePanelFR', 'Use Lighthouse panel with timespan and snapshot modes');
 

package/front_end/entrypoints/wasmparser_worker/WasmParserWorker.ts

@@ -55,7 +55,6 @@ export function dissambleWASM(
     const lines = [];
     const offsets = [];
     const functionBodyOffsets = [];
-    const MAX_LINES = 1000 * 1000;
     let chunkSize: number = 128 * 1024;
     let buffer: Uint8Array = new Uint8Array(chunkSize);
     let pendingSize = 0;
@@ -86,6 +85,7 @@ export function dissambleWASM(
           end: number,
         }>,
       });
+
       for (const line of result.lines) {
         lines.push(line);
       }
@@ -96,14 +96,6 @@ export function dissambleWASM(
         functionBodyOffsets.push(functionBodyOffset);
       }
 
-      if (lines.length > MAX_LINES) {
-        lines[MAX_LINES] = ';; .... text is truncated due to size';
-        lines.splice(MAX_LINES + 1);
-        if (offsets) {
-          offsets.splice(MAX_LINES + 1);
-        }
-        break;
-      }
       if (finished) {
         break;
       }
@@ -124,13 +116,9 @@ export function dissambleWASM(
       postMessage({event: 'progress', params: {percentage}});
     }
 
-    postMessage({event: 'progress', params: {percentage: 99}});
-
-    const source = lines.join('\n');
-
     postMessage({event: 'progress', params: {percentage: 100}});
 
-    postMessage({method: 'disassemble', result: {source, offsets, functionBodyOffsets}});
+    postMessage({method: 'disassemble', result: {lines, offsets, functionBodyOffsets}});
   } catch (error) {
     postMessage({method: 'disassemble', error});
   }

package/front_end/generated/protocol.ts

@@ -2351,6 +2351,10 @@ export namespace CSS {
      * The font-stretch.
      */
     fontStretch: string;
+    /**
+     * The font-display.
+     */
+    fontDisplay: string;
     /**
      * The unicode-range.
      */

package/front_end/models/emulation/EmulatedDevices.ts

@@ -725,6 +725,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 11; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '11', 'architecture': '', 'model': 'Pixel 3', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -745,6 +747,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '11', 'architecture': '', 'model': 'Pixel 5', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -765,6 +769,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '8.0.0', 'architecture': '', 'model': 'SM-G955U', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -785,6 +791,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 10; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '10', 'architecture': '', 'model': 'SM-G981B', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -869,7 +877,9 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+        'Mozilla/5.0 (Linux; Android 11.0; Surface Duo) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '11.0', 'architecture': '', 'model': 'Surface Duo', 'mobile': true},
     'type': 'phone',
     'modes': [
       {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
@@ -896,7 +906,9 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+        'Mozilla/5.0 (Linux; Android 9.0; SAMSUNG SM-F900U Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '9.0', 'architecture': '', 'model': 'SM-F900U', 'mobile': true},
     'type': 'phone',
     'modes': [
       {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
@@ -927,6 +939,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '8.0.0', 'architecture': '', 'model': 'SM-G955U', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -976,6 +990,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.109 Safari/537.36 CrKey/1.54.248666',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '', 'architecture': '', 'model': '', 'mobile': true},
     'type': 'tablet',
     'modes': [{'title': 'default', 'orientation': 'horizontal'}],
   },
@@ -1409,6 +1425,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 550) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '4.2.1', 'architecture': '', 'model': 'Lumia 550', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -1422,6 +1440,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '4.2.1', 'architecture': '', 'model': 'Lumia 950', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -1512,6 +1532,13 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Mobile; LYF/F300B/LYF-F300B-001-01-15-130718-i;Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5',
+    'user-agent-metadata': {
+      'platform': 'Android',
+      'platformVersion': '',
+      'architecture': '',
+      'model': 'LYF/F300B/LYF-F300B-001-01-15-130718-i',
+      'mobile': true,
+    },
     'type': 'phone',
   },
   {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -1247,7 +1247,7 @@ export const NativeFunctions = [
   },
   {
     name: 'add',
-    signatures: [['install_url']],
+    signatures: [['sub_apps']],
     receivers: ['SubApps']
   },
   {
@@ -1745,11 +1745,6 @@ export const NativeFunctions = [
     name: 'replaceWith',
     signatures: [['...nodes']]
   },
-  {
-    name: 'read',
-    signatures: [['?options']],
-    receivers: ['Clipboard']
-  },
   {
     name: 'read',
     signatures: [['view']],
@@ -2572,7 +2567,7 @@ export const NativeFunctions = [
   {
     name: 'focus',
     signatures: [['focus_behavior']],
-    receivers: ['FocusableMediaStreamTrack']
+    receivers: ['BrowserCaptureMediaStreamTrack','FocusableMediaStreamTrack']
   },
   {
     name: 'assign',
@@ -5898,10 +5893,6 @@ export const NativeFunctions = [
     name: 'registerProperty',
     signatures: [['definition']]
   },
-  {
-    name: 'setElement',
-    signatures: [['element','tag','?options']]
-  },
   {
     name: 'timeout',
     signatures: [['milliseconds']]
@@ -6767,7 +6758,7 @@ export const NativeFunctions = [
   },
   {
     name: 'ClipboardItem',
-    signatures: [['items','?options']]
+    signatures: [['items']]
   },
   {
     name: 'CompressionStream',
@@ -7113,6 +7104,10 @@ export const NativeFunctions = [
     name: 'cropTo',
     signatures: [['crop_id']]
   },
+  {
+    name: 'fromElement',
+    signatures: [['element']]
+  },
   {
     name: 'getDisplayMediaSet',
     signatures: [['?constraints']]
@@ -7121,10 +7116,6 @@ export const NativeFunctions = [
     name: 'setCaptureHandleConfig',
     signatures: [['?config']]
   },
-  {
-    name: 'produceCropId',
-    signatures: [['target']]
-  },
   {
     name: 'MediaStreamEvent',
     signatures: [['type','?eventInitDict']]
@@ -7399,7 +7390,7 @@ export const NativeFunctions = [
   },
   {
     name: 'requestPictureInPictureWindow',
-    signatures: [['options']]
+    signatures: [['?options']]
   },
   {
     name: 'PresentationConnectionAvailableEvent',

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -310,8 +310,11 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     if (binding) {
       const mutex = this.#getOrCreateMutex(binding.network);
       const release = await mutex.acquire();
-      await this.#innerUnbind(binding);
-      release();
+      try {
+        await this.#innerUnbind(binding);
+      } finally {
+        release();
+      }
     }
   }
 
@@ -340,10 +343,10 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
         if (networkUISourceCode === network && fileSystemUISourceCode === fileSystem) {
           return;
         }
+        await this.#unbindUnguarded(networkUISourceCode);
+        await this.#unbindUnguarded(fileSystemUISourceCode);
       }
 
-      await this.#unbindUnguarded(networkUISourceCode);
-      await this.#unbindUnguarded(fileSystemUISourceCode);
       await this.#innerAddBinding(networkUISourceCode, fileSystemUISourceCode);
     } finally {
       release();

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -60,7 +60,7 @@ export class PreviewToggle extends HTMLElement {
     // clang-format off
     render(
       html`
-      <div class="experiment-preview">
+      <label class="experiment-preview">
         <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
         <${IconButton.Icon.Icon.litTagName} .data=${{
           iconName: 'ic_preview_feature',
@@ -74,7 +74,7 @@ export class PreviewToggle extends HTMLElement {
         ${this.#helperText && this.#feedbackURL
           ? html`<p>${this.#helperText} <x-link href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
           : nothing}
-      </div>`,
+      </label>`,
       this.#shadow,
       {
         host: this,

package/front_end/ui/components/text_editor/config.ts

@@ -236,7 +236,7 @@ function getTooltipSpace(): DOMRect {
   return sideBarElement.getBoundingClientRect();
 }
 
-export function baseConfiguration(text: string): CM.Extension {
+export function baseConfiguration(text: string|CM.Text): CM.Extension {
   return [
     theme(),
     CM.highlightSpecialChars(),
@@ -252,7 +252,7 @@ export function baseConfiguration(text: string): CM.Extension {
     bracketMatching.instance(),
     indentUnit.instance(),
     CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
-    detectLineSeparator(text),
+    text instanceof CM.Text ? [] : detectLineSeparator(text),
     CM.tooltips({
       tooltipSpace: getTooltipSpace,
     }),

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -105,7 +105,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     UI.View.SimpleView) implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable, Transformer {
   private readonly lazyContent: () => Promise<TextUtils.ContentProvider.DeferredContent>;
   private prettyInternal: boolean;
-  private rawContent: string|null;
+  private rawContent: string|CodeMirror.Text|null;
   private formattedContentPromise: Promise<Formatter.ScriptFormatter.FormattedContent>|null;
   private formattedMap: Formatter.ScriptFormatter.FormatterSourceMapping|null;
   private readonly prettyToggle: UI.Toolbar.ToolbarToggle;
@@ -203,7 +203,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     });
   }
 
-  protected editorConfiguration(doc: string): CodeMirror.Extension {
+  protected editorConfiguration(doc: string|CodeMirror.Text): CodeMirror.Extension {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.dispatchEventToListeners(Events.EditorUpdate, update)),
       TextEditor.Config.baseConfiguration(doc),
@@ -459,7 +459,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         const worker = Common.Worker.WorkerWrapper.fromURL(
             new URL('../../../../entrypoints/wasmparser_worker/wasmparser_worker-entrypoint.js', import.meta.url));
         const promise = new Promise<{
-          source: string,
+          lines: string[],
           offsets: number[],
           functionBodyOffsets: {
             start: number,
@@ -492,8 +492,8 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         });
         worker.postMessage({method: 'disassemble', params: {content}});
         try {
-          const {source, offsets, functionBodyOffsets} = await promise;
-          this.rawContent = content = source;
+          const {lines, offsets, functionBodyOffsets} = await promise;
+          this.rawContent = content = CodeMirror.Text.of(lines);
           this.wasmDisassemblyInternal = new Common.WasmDisassembly.WasmDisassembly(offsets, functionBodyOffsets);
         } catch (e) {
           this.rawContent = content = error = e.message;
@@ -528,8 +528,8 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (this.formattedContentPromise) {
       return this.formattedContentPromise;
     }
-    this.formattedContentPromise =
-        Formatter.ScriptFormatter.formatScriptContent(this.contentType, this.rawContent || '');
+    const content = this.rawContent instanceof CodeMirror.Text ? this.rawContent.sliceString(0) : this.rawContent || '';
+    this.formattedContentPromise = Formatter.ScriptFormatter.formatScriptContent(this.contentType, content);
     return this.formattedContentPromise;
   }
 
@@ -648,7 +648,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.prettyToggle.setEnabled(true);
   }
 
-  private simplifyMimeType(content: string, mimeType: string): string {
+  private simplifyMimeType(content: string|CodeMirror.Text, mimeType: string): string {
     if (!mimeType) {
       return '';
     }
@@ -663,8 +663,11 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return 'text/jsx';
     }
     // A hack around the fact that files with "php" extension might be either standalone or html embedded php scripts.
-    if (mimeType === 'text/x-php' && content.match(/\<\?.*\?\>/g)) {
-      return 'application/x-httpd-php';
+    if (mimeType === 'text/x-php') {
+      const strContent = typeof content === 'string' ? content : content.sliceString(0);
+      if (strContent.match(/\<\?.*\?\>/g)) {
+        return 'application/x-httpd-php';
+      }
     }
     if (mimeType === 'application/wasm') {
       // text/webassembly is not a proper MIME type, but CodeMirror uses it for WAT syntax highlighting.
@@ -674,7 +677,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     return mimeType;
   }
 
-  protected async getLanguageSupport(content: string): Promise<CodeMirror.Extension> {
+  protected async getLanguageSupport(content: string|CodeMirror.Text): Promise<CodeMirror.Extension> {
     const mimeType = this.simplifyMimeType(content, this.contentType) || '';
     const languageDesc = await CodeHighlighter.CodeHighlighter.languageFromMIME(mimeType);
     if (!languageDesc) {
@@ -694,7 +697,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.textEditor.dispatch({effects: config.language.reconfigure(langExtension)});
   }
 
-  async setContent(content: string): Promise<void> {
+  async setContent(content: string|CodeMirror.Text): Promise<void> {
     this.muteChangeEventsForSetContent = true;
     const {textEditor} = this;
     const wasLoaded = this.loadedInternal;

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.1011873"
+  "version": "1.0.1012379"
 }