chrome-devtools-frontend 1.0.999791 → 1.0.1000713

package/front_end/.eslintrc.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
 const path = require('path');
 const rulesDirPlugin = require('eslint-plugin-rulesdir');
 rulesDirPlugin.RULES_DIR = path.join(__dirname, '..', 'scripts', 'eslint_rules', 'lib');
@@ -28,6 +29,7 @@ module.exports = {
       'rules': {
         '@typescript-eslint/explicit-function-return-type': 2,
         'rulesdir/no_importing_images_from_src': 2,
+        'rulesdir/enforce_bound_render_for_schedule_render': 2,
         'rulesdir/enforce_custom_event_names': 2,
         'rulesdir/set_data_type_reference': 2,
         'rulesdir/no_bound_component_methods': 2,
@@ -120,10 +122,7 @@ module.exports = {
           },
           {
             // Ignore type properties that require quotes
-            'selector': [
-              'typeProperty',
-              'enumMember'
-            ],
+            'selector': ['typeProperty', 'enumMember'],
             'format': null,
             'modifiers': ['requiresQuotes']
           }
@@ -150,3 +149,4 @@ module.exports = {
     }
   ]
 };
+// clang-format on

package/front_end/core/common/ParsedURL.ts

@@ -153,10 +153,10 @@ export class ParsedURL {
     return null;
   }
 
-  private static preEncodeSpecialCharactersInPath(path: string): string {
+  static preEncodeSpecialCharactersInPath(path: string): string {
     // Based on net::FilePathToFileURL. Ideally we would handle
     // '\\' as well on non-Windows file systems.
-    for (const specialChar of ['%', ';', '#', '?']) {
+    for (const specialChar of ['%', ';', '#', '?', ' ']) {
       (path as string) = path.replaceAll(specialChar, encodeURIComponent(specialChar));
     }
     return path;
@@ -185,7 +185,7 @@ export class ParsedURL {
    */
   static urlFromParentUrlAndName(parentUrl: Platform.DevToolsPath.UrlString, name: string):
       Platform.DevToolsPath.UrlString {
-    return ParsedURL.concatenate(parentUrl, '/', encodeURIComponent(name));
+    return ParsedURL.concatenate(parentUrl, '/', ParsedURL.preEncodeSpecialCharactersInPath(name));
   }
 
   static encodedPathToRawPathString(encPath: Platform.DevToolsPath.EncodedPathString):

package/front_end/core/i18n/locales/en-US.json

@@ -5822,6 +5822,9 @@
   "panels/lighthouse/LighthouseController.ts | isThisPageUsableByPeopleWith": {
     "message": "Is this page usable by people with disabilities or impairments"
   },
+  "panels/lighthouse/LighthouseController.ts | javaScriptDisabled": {
+    "message": "JavaScript is disabled. You need to enable JavaScript to audit this page. Open the Command Menu and run the Enable JavaScript command to enable JavaScript."
+  },
   "panels/lighthouse/LighthouseController.ts | legacyNavigation": {
     "message": "Legacy navigation"
   },
@@ -11528,6 +11531,9 @@
   "panels/webauthn/WebauthnPane.ts | signCount": {
     "message": "Signature Count"
   },
+  "panels/webauthn/WebauthnPane.ts | supportsLargeBlob": {
+    "message": "Supports large blob"
+  },
   "panels/webauthn/WebauthnPane.ts | supportsResidentKeys": {
     "message": "Supports resident keys"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -5822,6 +5822,9 @@
   "panels/lighthouse/LighthouseController.ts | isThisPageUsableByPeopleWith": {
     "message": "Îś t̂h́îś p̂áĝé ûśâb́l̂é b̂ý p̂éôṕl̂é ŵít̂h́ d̂íŝáb̂íl̂ít̂íêś ôŕ îḿp̂áîŕm̂én̂t́ŝ"
   },
+  "panels/lighthouse/LighthouseController.ts | javaScriptDisabled": {
+    "message": "Ĵáv̂áŜćr̂íp̂t́ îś d̂íŝáb̂ĺêd́. Ŷóû ńêéd̂ t́ô én̂áb̂ĺê J́âv́âŚĉŕîṕt̂ t́ô áûd́ît́ t̂h́îś p̂áĝé. Ôṕêń t̂h́ê Ćôḿm̂án̂d́ M̂én̂ú âńd̂ ŕûń t̂h́ê Én̂áb̂ĺê J́âv́âŚĉŕîṕt̂ ćôḿm̂án̂d́ t̂ó êńâb́l̂é Ĵáv̂áŜćr̂íp̂t́."
+  },
   "panels/lighthouse/LighthouseController.ts | legacyNavigation": {
     "message": "L̂éĝáĉý n̂áv̂íĝát̂íôń"
   },
@@ -11528,6 +11531,9 @@
   "panels/webauthn/WebauthnPane.ts | signCount": {
     "message": "Ŝíĝńât́ûŕê Ćôún̂t́"
   },
+  "panels/webauthn/WebauthnPane.ts | supportsLargeBlob": {
+    "message": "Ŝúp̂ṕôŕt̂ś l̂ár̂ǵê b́l̂ób̂"
+  },
   "panels/webauthn/WebauthnPane.ts | supportsResidentKeys": {
     "message": "Ŝúp̂ṕôŕt̂ś r̂éŝíd̂én̂t́ k̂éŷś"
   },

package/front_end/models/extensions/ExtensionAPI.ts

@@ -28,7 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as PublicAPI from '../../../extension-api/ExtensionAPI'; // eslint-disable-line rulesdir/es_modules_import
 import type * as HAR from '../har/har.js';
 
@@ -141,7 +141,7 @@ export namespace PrivateAPI {
   type UpdateButtonRequest =
       {command: Commands.UpdateButton, id: string, icon?: string, tooltip?: string, disabled?: boolean};
   type CompleteTraceSessionRequest =
-      {command: Commands.CompleteTraceSession, id: string, url: string, timeOffset: number};
+      {command: Commands.CompleteTraceSession, id: string, url: Platform.DevToolsPath.UrlString, timeOffset: number};
   type CreateSidebarPaneRequest = {command: Commands.CreateSidebarPane, id: string, panel: string, title: string};
   type SetSidebarHeightRequest = {command: Commands.SetSidebarHeight, id: string, height: string};
   type SetSidebarContentRequest = {
@@ -930,11 +930,11 @@ self.injectedExtensionAPI = function(
   }
 
   (TraceSessionImpl.prototype as Pick<APIImpl.TraceSession, 'complete'>) = {
-    complete: function(this: APIImpl.TraceSession, url?: string, timeOffset?: number): void {
+    complete: function(this: APIImpl.TraceSession, url?: Platform.DevToolsPath.UrlString, timeOffset?: number): void {
       extensionServer.sendRequest({
         command: PrivateAPI.Commands.CompleteTraceSession,
         id: this._id,
-        url: url || '',
+        url: url || Platform.DevToolsPath.EmptyUrlString,
         timeOffset: timeOffset || 0,
       });
     },

package/front_end/models/extensions/ExtensionTraceProvider.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {ExtensionServer} from './ExtensionServer.js';
+import type * as Platform from '../../core/platform/platform.js';
 
 export class ExtensionTraceProvider {
   private readonly extensionOrigin: string;
@@ -43,5 +44,5 @@ export class ExtensionTraceProvider {
 let _lastSessionId = 0;
 
 export interface TracingSession {
-  complete(url: string, timeOffsetMicroseconds: number): void;
+  complete(url: Platform.DevToolsPath.UrlString, timeOffsetMicroseconds: number): void;
 }

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -327,8 +327,13 @@ const
           xmlHttpRequestSynchronousInNonWorkerOutsideBeforeUnload:
               'Synchronous `XMLHttpRequest` on the main thread is deprecated because of its detrimental effects to the end user\u2019s experience. For more help, check https://xhr.spec.whatwg.org/.',
           /**
-   *@description TODO(crbug.com/1320365): Description needed for translation
-   */
+           *@description Warning displayed to developers that instead of using
+           *    `supportsSession()`, which returns a promise that resolves if
+           *    the XR session can be supported and rejects if not, they should
+           *    use `isSessionSupported()` which will return a promise which
+           *    resolves to a boolean indicating if the XR session can be
+           *    supported or not, but may reject to throw an exception.
+           */
           xrSupportsSession:
               '`supportsSession()` is deprecated. Please use `isSessionSupported()` and check the resolved boolean value instead.',
         };

package/front_end/models/workspace/WorkspaceImpl.ts

@@ -183,7 +183,7 @@ export abstract class ProjectStore implements Project {
     const oldPath = uiSourceCode.url();
     const newPath = uiSourceCode.parentURL() ?
         Common.ParsedURL.ParsedURL.urlFromParentUrlAndName(uiSourceCode.parentURL(), newName) :
-        encodeURIComponent(newName) as Platform.DevToolsPath.UrlString;
+        Common.ParsedURL.ParsedURL.preEncodeSpecialCharactersInPath(newName) as Platform.DevToolsPath.UrlString;
     const value = this.uiSourceCodesMap.get(oldPath) as {
       uiSourceCode: UISourceCode,
       index: number,

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -171,6 +171,11 @@ const UIStrings = {
   */
   resetStorageLocalstorage:
       'Reset storage (`cache`, `service workers`, etc) before auditing. (Good for performance & `PWA` testing)',
+  /**
+  *@description Explanation for user that Ligthhouse can only audit when JavaScript is enabled
+  */
+  javaScriptDisabled:
+      'JavaScript is disabled. You need to enable JavaScript to audit this page. Open the Command Menu and run the Enable JavaScript command to enable JavaScript.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -196,6 +201,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       runtimeSetting.setting.addChangeListener(this.recomputePageAuditability.bind(this));
     }
 
+    const javaScriptDisabledSetting = Common.Settings.Settings.instance().moduleSetting('javaScriptDisabled');
+    javaScriptDisabledSetting.addChangeListener(this.recomputePageAuditability.bind(this));
+
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.InspectedURLChanged, this.recomputePageAuditability, this);
@@ -273,6 +281,10 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return null;
   }
 
+  private javaScriptDisabled(): boolean {
+    return Common.Settings.Settings.instance().moduleSetting('javaScriptDisabled').get();
+  }
+
   private async hasImportantResourcesNotCleared(): Promise<string> {
     const clearStorageSetting =
         RuntimeSettings.find(runtimeSetting => runtimeSetting.setting.name === 'lighthouse.clear_storage');
@@ -363,6 +375,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     const hasActiveServiceWorker = this.hasActiveServiceWorker();
     const hasAtLeastOneCategory = this.hasAtLeastOneCategory();
     const unauditablePageMessage = this.unauditablePageMessage();
+    const javaScriptDisabled = this.javaScriptDisabled();
 
     let helpText = '';
     if (hasActiveServiceWorker) {
@@ -371,6 +384,8 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       helpText = i18nString(UIStrings.atLeastOneCategoryMustBeSelected);
     } else if (unauditablePageMessage) {
       helpText = unauditablePageMessage;
+    } else if (javaScriptDisabled) {
+      helpText = i18nString(UIStrings.javaScriptDisabled);
     }
 
     this.dispatchEventToListeners(Events.PageAuditabilityChanged, {helpText});

package/front_end/panels/network/NetworkItemView.ts

@@ -143,7 +143,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.element.classList.add('network-item-view');
 
     this.resourceViewTabSetting = Common.Settings.Settings.instance().createSetting(
-        'resourceViewTab', NetworkForward.UIRequestLocation.UIRequestTabs.Preview);
+        'resourceViewTab', NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
 
     this.headersView = new RequestHeadersView(request);
     this.appendTab(

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import dialogStyles from './dialog.css.js';
@@ -22,8 +23,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class AddSourceMapURLDialog extends UI.Widget.HBox {
   private readonly input: HTMLInputElement;
   private readonly dialog: UI.Dialog.Dialog;
-  private readonly callback: (arg0: string) => void;
-  constructor(callback: (arg0: string) => void) {
+  private readonly callback: (arg0: Platform.DevToolsPath.UrlString) => void;
+  constructor(callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
     super(/* isWebComponent */ true);
 
     this.contentElement.createChild('label').textContent = i18nString(UIStrings.sourceMapUrl);
@@ -51,13 +52,13 @@ export class AddSourceMapURLDialog extends UI.Widget.HBox {
     this.dialog.show();
   }
 
-  private done(value: string): void {
+  private done(value: Platform.DevToolsPath.UrlString): void {
     this.dialog.hide();
     this.callback(value);
   }
 
   private apply(): void {
-    this.done(this.input.value);
+    this.done(this.input.value as Platform.DevToolsPath.UrlString);
   }
 
   private onKeyDown(event: KeyboardEvent): void {

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 import debuggerPausedMessageStyles from './debuggerPausedMessage.css.js';
@@ -276,6 +277,6 @@ export const BreakpointTypeNouns = new Map([
 ]);
 interface PausedDetailsAuxData {
   description?: string;
-  url?: string;
+  url?: Platform.DevToolsPath.UrlString;
   value?: string;
 }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -472,11 +472,11 @@ export class DebuggerPlugin extends Plugin {
     }
 
     function addSourceMapURLDialogCallback(
-        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: string): void {
+        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: Platform.DevToolsPath.UrlString): void {
       if (!url) {
         return;
       }
-      scriptFile.addSourceMapURL(url as Platform.DevToolsPath.UrlString);
+      scriptFile.addSourceMapURL(url);
     }
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -93,9 +93,7 @@ export class EditingLocationHistoryManager {
   }
 
   private reveal(entry: EditingLocationHistoryEntry): void {
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(
-        entry.projectId, entry.url as Platform.DevToolsPath.UrlString);
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(entry.projectId, entry.url);
     if (uiSourceCode) {
       this.revealing = true;
       this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);
@@ -131,7 +129,7 @@ export class EditingLocationHistoryManager {
 
 class EditingLocationHistoryEntry {
   readonly projectId: string;
-  readonly url: string;
+  readonly url: Platform.DevToolsPath.UrlString;
   position: number;
 
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, position: number) {

package/front_end/panels/sources/NavigatorView.ts

@@ -290,7 +290,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     // Update folder titles.
     const pathTokens =
         Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(binding.fileSystem);
-    let folderPath = '' as Platform.DevToolsPath.EncodedPathString;
+    let folderPath = Platform.DevToolsPath.EmptyEncodedPathString;
     for (let i = 0; i < pathTokens.length - 1; ++i) {
       folderPath = Common.ParsedURL.ParsedURL.concatenate(folderPath, pathTokens[i]);
       const folderId =
@@ -744,7 +744,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       const folderId = this.folderNodeId(
           project, target, frame, uiSourceCode.origin(),
           currentNode instanceof NavigatorFolderTreeNode && currentNode.folderPath ||
-              '' as Platform.DevToolsPath.EncodedPathString);
+              Platform.DevToolsPath.EmptyEncodedPathString);
       this.subfolderNodes.delete(folderId);
       parentNode.removeChild(currentNode);
       currentNode = (parentNode as NavigatorUISourceCodeTreeNode | null);
@@ -822,8 +822,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       contextMenu.editSection().appendItem(i18nString(UIStrings.rename), this.handleContextMenuRename.bind(this, node));
       contextMenu.editSection().appendItem(
           i18nString(UIStrings.makeACopy),
-          this.handleContextMenuCreate.bind(
-              this, project, '' as Platform.DevToolsPath.EncodedPathString, uiSourceCode));
+          this.handleContextMenuCreate.bind(this, project, Platform.DevToolsPath.EmptyEncodedPathString, uiSourceCode));
       contextMenu.editSection().appendItem(
           i18nString(UIStrings.delete), this.handleContextMenuDelete.bind(this, uiSourceCode));
     }
@@ -1472,7 +1471,7 @@ export class NavigatorFolderTreeNode extends NavigatorTreeNode {
       folderPath: Platform.DevToolsPath.EncodedPathString, title: string) {
     super(navigatorView, id, type);
     this.project = project;
-    this.folderPath = folderPath as Platform.DevToolsPath.EncodedPathString;
+    this.folderPath = folderPath;
     this.title = title;
   }
 

package/front_end/panels/sources/ScriptFormatterEditorAction.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as FormatterModule from '../../models/formatter/formatter.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -30,7 +31,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let scriptFormatterEditorActionInstance: ScriptFormatterEditorAction;
 
 export class ScriptFormatterEditorAction implements EditorAction {
-  private readonly pathsToFormatOnLoad: Set<string>;
+  private readonly pathsToFormatOnLoad: Set<Platform.DevToolsPath.UrlString>;
   private sourcesView!: SourcesView;
   private button!: UI.Toolbar.ToolbarButton;
   private constructor() {

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -436,10 +436,10 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   private updateHistory(): void {
     const tabIds = this.tabbedPane.lastOpenedTabIds(maximalPreviouslyViewedFilesCount);
 
-    function tabIdToURI(this: TabbedEditorContainer, tabId: string): string {
+    function tabIdToURI(this: TabbedEditorContainer, tabId: string): Platform.DevToolsPath.UrlString {
       const tab = this.files.get(tabId);
       if (!tab) {
-        return '';
+        return Platform.DevToolsPath.EmptyUrlString;
       }
       return tab.url();
     }
@@ -639,18 +639,19 @@ export let tabId = 0;
 export const maximalPreviouslyViewedFilesCount = 30;
 
 interface SerializedHistoryItem {
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   selectionRange?: TextUtils.TextRange.SerializedTextRange;
   scrollLineNumber?: number;
 }
 
 export class HistoryItem {
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   private isSerializable: boolean;
   selectionRange: TextUtils.TextRange.TextRange|undefined;
   scrollLineNumber: number|undefined;
 
-  constructor(url: string, selectionRange?: TextUtils.TextRange.TextRange, scrollLineNumber?: number) {
+  constructor(
+      url: Platform.DevToolsPath.UrlString, selectionRange?: TextUtils.TextRange.TextRange, scrollLineNumber?: number) {
     this.url = url;
     this.isSerializable = url.length < HistoryItem.serializableUrlLengthLimit;
     this.selectionRange = selectionRange;
@@ -700,7 +701,7 @@ export class History {
     return new History(items);
   }
 
-  index(url: string): number {
+  index(url: Platform.DevToolsPath.UrlString): number {
     const index = this.itemsIndex.get(url);
     if (index !== undefined) {
       return index;
@@ -716,12 +717,12 @@ export class History {
     }
   }
 
-  selectionRange(url: string): TextUtils.TextRange.TextRange|undefined {
+  selectionRange(url: Platform.DevToolsPath.UrlString): TextUtils.TextRange.TextRange|undefined {
     const index = this.index(url);
     return index !== -1 ? this.items[index].selectionRange : undefined;
   }
 
-  updateSelectionRange(url: string, selectionRange?: TextUtils.TextRange.TextRange): void {
+  updateSelectionRange(url: Platform.DevToolsPath.UrlString, selectionRange?: TextUtils.TextRange.TextRange): void {
     if (!selectionRange) {
       return;
     }
@@ -732,12 +733,12 @@ export class History {
     this.items[index].selectionRange = selectionRange;
   }
 
-  scrollLineNumber(url: string): number|undefined {
+  scrollLineNumber(url: Platform.DevToolsPath.UrlString): number|undefined {
     const index = this.index(url);
     return index !== -1 ? this.items[index].scrollLineNumber : undefined;
   }
 
-  updateScrollLineNumber(url: string, scrollLineNumber: number): void {
+  updateScrollLineNumber(url: Platform.DevToolsPath.UrlString, scrollLineNumber: number): void {
     const index = this.index(url);
     if (index === -1) {
       return;
@@ -745,7 +746,7 @@ export class History {
     this.items[index].scrollLineNumber = scrollLineNumber;
   }
 
-  update(urls: string[]): void {
+  update(urls: Platform.DevToolsPath.UrlString[]): void {
     for (let i = urls.length - 1; i >= 0; --i) {
       const index = this.index(urls[i]);
       let item;
@@ -760,7 +761,7 @@ export class History {
     }
   }
 
-  remove(url: string): void {
+  remove(url: Platform.DevToolsPath.UrlString): void {
     const index = this.index(url);
     if (index !== -1) {
       this.items.splice(index, 1);
@@ -786,7 +787,7 @@ export class History {
     return serializedHistory;
   }
 
-  urls(): string[] {
+  urls(): Platform.DevToolsPath.UrlString[] {
     const result = [];
     for (let i = 0; i < this.items.length; ++i) {
       result.push(this.items[i].url);

package/front_end/panels/timeline/ExtensionTracingSession.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Extensions from '../../models/extensions/extensions.js';
 
@@ -42,7 +43,7 @@ export class ExtensionTracingSession implements Extensions.ExtensionTraceProvide
     this.completionCallback();
   }
 
-  complete(url: string, timeOffsetMicroseconds: number): void {
+  complete(url: Platform.DevToolsPath.UrlString, timeOffsetMicroseconds: number): void {
     if (!url) {
       this.completionCallback();
       return;

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -161,7 +161,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private readonly groupBySetting: Common.Settings.Setting<any>;
   private searchableView!: UI.SearchableView.SearchableView;
-  private urlToColorCache?: Map<string, string>;
+  private urlToColorCache?: Map<Platform.DevToolsPath.UrlString, string>;
   private needsResizeToPreferredHeights?: boolean;
   private selectedSearchResult?: number;
   private searchRegex?: RegExp;

package/front_end/panels/timeline/TimelineLoader.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -95,7 +96,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     return loader;
   }
 
-  static loadFromURL(url: string, client: Client): TimelineLoader {
+  static loadFromURL(url: Platform.DevToolsPath.UrlString, client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
     Host.ResourceLoader.loadAsStream(url, null, loader);
     return loader;

package/front_end/panels/timeline/TimelinePanel.ts

@@ -695,7 +695,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.createFileSelector();
   }
 
-  loadFromURL(url: string): void {
+  loadFromURL(url: Platform.DevToolsPath.UrlString): void {
     if (this.state !== State.Idle) {
       return;
     }
@@ -1249,7 +1249,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     const item = items[0];
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.PerfPanelTraceImported);
     if (item.kind === 'string') {
-      const url = dataTransfer.getData('text/uri-list');
+      const url = dataTransfer.getData('text/uri-list') as Platform.DevToolsPath.UrlString;
       if (new Common.ParsedURL.ParsedURL(url).isValid) {
         this.loadFromURL(url);
       }
@@ -1492,7 +1492,7 @@ export class LoadTimelineHandler implements Common.QueryParamHandler.QueryParamH
 
   handleQueryParam(value: string): void {
     void UI.ViewManager.ViewManager.instance().showView('timeline').then(() => {
-      TimelinePanel.instance().loadFromURL(window.decodeURIComponent(value));
+      TimelinePanel.instance().loadFromURL(window.decodeURIComponent(value) as Platform.DevToolsPath.UrlString);
     });
   }
 }

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -756,9 +756,9 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
   }
 
   private beautifyDomainName(this: AggregatedTimelineTreeView, name: string): string {
-    if (AggregatedTimelineTreeView.isExtensionInternalURL(name)) {
+    if (AggregatedTimelineTreeView.isExtensionInternalURL(name as Platform.DevToolsPath.UrlString)) {
       name = i18nString(UIStrings.chromeExtensionsOverhead);
-    } else if (AggregatedTimelineTreeView.isV8NativeURL(name)) {
+    } else if (AggregatedTimelineTreeView.isV8NativeURL(name as Platform.DevToolsPath.UrlString)) {
       name = i18nString(UIStrings.vRuntime);
     } else if (name.startsWith('chrome-extension')) {
       name = this.executionContextNamesByOrigin.get(name) || name;
@@ -949,11 +949,11 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     contextMenu.appendApplicableItems(frame.ownerNode);
   }
 
-  private static isExtensionInternalURL(url: string): boolean {
+  private static isExtensionInternalURL(url: Platform.DevToolsPath.UrlString): boolean {
     return url.startsWith(AggregatedTimelineTreeView.extensionInternalPrefix);
   }
 
-  private static isV8NativeURL(url: string): boolean {
+  private static isV8NativeURL(url: Platform.DevToolsPath.UrlString): boolean {
     return url.startsWith(AggregatedTimelineTreeView.v8NativePrefix);
   }
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1473,7 +1473,7 @@ export class TimelineUIUtils {
     }
   }
 
-  static eventURL(event: SDK.TracingModel.Event): string|null {
+  static eventURL(event: SDK.TracingModel.Event): Platform.DevToolsPath.UrlString|null {
     const data = event.args['data'] || event.args['beginData'];
     const url = data && data.url;
     if (url) {
@@ -1482,7 +1482,7 @@ export class TimelineUIUtils {
     const stackTrace = data && data['stackTrace'];
     const frame = stackTrace && stackTrace.length && stackTrace[0] ||
         TimelineModel.TimelineModel.TimelineData.forEvent(event).topFrame();
-    return frame && frame.url || null;
+    return frame && frame.url as Platform.DevToolsPath.UrlString || null;
   }
 
   static eventStyle(event: SDK.TracingModel.Event): TimelineRecordStyle {
@@ -1533,7 +1533,7 @@ export class TimelineUIUtils {
   static eventColorByProduct(
       model: TimelineModel.TimelineModel.TimelineModelImpl, urlToColorCache: Map<string, string>,
       event: SDK.TracingModel.Event): string {
-    const url = TimelineUIUtils.eventURL(event) || '';
+    const url = TimelineUIUtils.eventURL(event) || Platform.DevToolsPath.EmptyUrlString;
     let color = urlToColorCache.get(url);
     if (color) {
       return color;

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -84,6 +84,12 @@ const UIStrings = {
   */
   supportsResidentKeys: 'Supports resident keys',
   /**
+  *@description Label for checkbox that toggles large blob support on virtual authenticators. Large blobs are opaque data associated
+  * with a WebAuthn credential that a website can store, like an SSH certificate or a symmetric encryption key.
+  * See https://w3c.github.io/webauthn/#sctn-large-blob-extension
+  */
+  supportsLargeBlob: 'Supports large blob',
+  /**
   *@description Text to add something
   */
   add: 'Add',
@@ -244,10 +250,12 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   #protocolSelect: HTMLSelectElement|undefined;
   #transportSelect: HTMLSelectElement|undefined;
   #residentKeyCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
-  #residentKeyCheckbox: HTMLInputElement|undefined;
+  residentKeyCheckbox: HTMLInputElement|undefined;
   #userVerificationCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
   #userVerificationCheckbox: HTMLInputElement|undefined;
-  #addAuthenticatorButton: HTMLButtonElement|undefined;
+  #largeBlobCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
+  largeBlobCheckbox: HTMLInputElement|undefined;
+  addAuthenticatorButton: HTMLButtonElement|undefined;
   #isEnabling?: Promise<void>;
 
   constructor() {
@@ -475,13 +483,18 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   }
 
   #updateNewAuthenticatorSectionOptions(): void {
-    if (!this.#protocolSelect || !this.#residentKeyCheckbox || !this.#userVerificationCheckbox) {
+    if (!this.#protocolSelect || !this.residentKeyCheckbox || !this.#userVerificationCheckbox ||
+        !this.largeBlobCheckbox) {
       return;
     }
 
     if (this.#protocolSelect.value === Protocol.WebAuthn.AuthenticatorProtocol.Ctap2) {
-      this.#residentKeyCheckbox.disabled = false;
+      this.residentKeyCheckbox.disabled = false;
       this.#userVerificationCheckbox.disabled = false;
+      this.largeBlobCheckbox.disabled = !this.residentKeyCheckbox.checked;
+      if (this.largeBlobCheckbox.disabled) {
+        this.largeBlobCheckbox.checked = false;
+      }
       this.#updateEnabledTransportOptions([
         Protocol.WebAuthn.AuthenticatorTransport.Usb,
         Protocol.WebAuthn.AuthenticatorTransport.Ble,
@@ -491,10 +504,12 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
         Protocol.WebAuthn.AuthenticatorTransport.Internal,
       ]);
     } else {
-      this.#residentKeyCheckbox.checked = false;
-      this.#residentKeyCheckbox.disabled = true;
+      this.residentKeyCheckbox.checked = false;
+      this.residentKeyCheckbox.disabled = true;
       this.#userVerificationCheckbox.checked = false;
       this.#userVerificationCheckbox.disabled = true;
+      this.largeBlobCheckbox.checked = false;
+      this.largeBlobCheckbox.disabled = true;
       this.#updateEnabledTransportOptions([
         Protocol.WebAuthn.AuthenticatorTransport.Usb,
         Protocol.WebAuthn.AuthenticatorTransport.Ble,
@@ -524,6 +539,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     const transportGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
     const residentKeyGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
     const userVerificationGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
+    const largeBlobGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
     const addButtonGroup = this.#newAuthenticatorForm.createChild('div', 'authenticator-option');
 
     const protocolSelectTitle = UI.UIUtils.createLabel(i18nString(UIStrings.protocol), 'authenticator-option-label');
@@ -551,9 +567,9 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     this.#residentKeyCheckboxLabel = UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.supportsResidentKeys), false);
     this.#residentKeyCheckboxLabel.textElement.classList.add('authenticator-option-label');
     residentKeyGroup.appendChild(this.#residentKeyCheckboxLabel.textElement);
-    this.#residentKeyCheckbox = this.#residentKeyCheckboxLabel.checkboxElement;
-    this.#residentKeyCheckbox.checked = false;
-    this.#residentKeyCheckbox.classList.add('authenticator-option-checkbox');
+    this.residentKeyCheckbox = this.#residentKeyCheckboxLabel.checkboxElement;
+    this.residentKeyCheckbox.checked = false;
+    this.residentKeyCheckbox.classList.add('authenticator-option-checkbox');
     residentKeyGroup.appendChild(this.#residentKeyCheckboxLabel);
 
     this.#userVerificationCheckboxLabel = UI.UIUtils.CheckboxLabel.create('Supports user verification', false);
@@ -564,17 +580,29 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     this.#userVerificationCheckbox.classList.add('authenticator-option-checkbox');
     userVerificationGroup.appendChild(this.#userVerificationCheckboxLabel);
 
-    this.#addAuthenticatorButton =
+    this.#largeBlobCheckboxLabel = UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.supportsLargeBlob), false);
+    this.#largeBlobCheckboxLabel.textElement.classList.add('authenticator-option-label');
+    largeBlobGroup.appendChild(this.#largeBlobCheckboxLabel.textElement);
+    this.largeBlobCheckbox = this.#largeBlobCheckboxLabel.checkboxElement;
+    this.largeBlobCheckbox.checked = false;
+    this.largeBlobCheckbox.classList.add('authenticator-option-checkbox');
+    this.largeBlobCheckbox.name = 'large-blob-checkbox';
+    largeBlobGroup.appendChild(this.#largeBlobCheckboxLabel);
+
+    this.addAuthenticatorButton =
         UI.UIUtils.createTextButton(i18nString(UIStrings.add), this.#handleAddAuthenticatorButton.bind(this), '');
     addButtonGroup.createChild('div', 'authenticator-option-label');
-    addButtonGroup.appendChild(this.#addAuthenticatorButton);
+    addButtonGroup.appendChild(this.addAuthenticatorButton);
     const addAuthenticatorTitle = UI.UIUtils.createLabel(i18nString(UIStrings.addAuthenticator), '');
-    UI.ARIAUtils.bindLabelToControl(addAuthenticatorTitle, this.#addAuthenticatorButton);
+    UI.ARIAUtils.bindLabelToControl(addAuthenticatorTitle, this.addAuthenticatorButton);
 
     this.#updateNewAuthenticatorSectionOptions();
     if (this.#protocolSelect) {
       this.#protocolSelect.addEventListener('change', this.#updateNewAuthenticatorSectionOptions.bind(this));
     }
+    if (this.residentKeyCheckbox) {
+      this.residentKeyCheckbox.addEventListener('change', this.#updateNewAuthenticatorSectionOptions.bind(this));
+    }
   }
 
   async #handleAddAuthenticatorButton(): Promise<void> {
@@ -702,6 +730,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     const protocolField = sectionFields.createChild('div', 'authenticator-field');
     const transportField = sectionFields.createChild('div', 'authenticator-field');
     const srkField = sectionFields.createChild('div', 'authenticator-field');
+    const slbField = sectionFields.createChild('div', 'authenticator-field');
     const suvField = sectionFields.createChild('div', 'authenticator-field');
 
     uuidField.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.uuid), 'authenticator-option-label'));
@@ -709,6 +738,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     transportField.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.transport), 'authenticator-option-label'));
     srkField.appendChild(
         UI.UIUtils.createLabel(i18nString(UIStrings.supportsResidentKeys), 'authenticator-option-label'));
+    slbField.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.supportsLargeBlob), 'authenticator-option-label'));
     suvField.appendChild(
         UI.UIUtils.createLabel(i18nString(UIStrings.supportsUserVerification), 'authenticator-option-label'));
 
@@ -717,6 +747,8 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     transportField.createChild('div', 'authenticator-field-value').textContent = options.transport;
     srkField.createChild('div', 'authenticator-field-value').textContent =
         options.hasResidentKey ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
+    slbField.createChild('div', 'authenticator-field-value').textContent =
+        options.hasLargeBlob ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
     suvField.createChild('div', 'authenticator-field-value').textContent =
         options.hasUserVerification ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
   }
@@ -779,18 +811,20 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
   #createOptionsFromCurrentInputs(): Protocol.WebAuthn.VirtualAuthenticatorOptions {
     // TODO(crbug.com/1034663): Add optionality for isUserVerified param.
-    if (!this.#protocolSelect || !this.#transportSelect || !this.#residentKeyCheckbox ||
-        !this.#userVerificationCheckbox) {
+    if (!this.#protocolSelect || !this.#transportSelect || !this.residentKeyCheckbox ||
+        !this.#userVerificationCheckbox || !this.largeBlobCheckbox) {
       throw new Error('Unable to create options from current inputs');
     }
 
     return {
       protocol: this.#protocolSelect.options[this.#protocolSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorProtocol,
+      ctap2Version: Protocol.WebAuthn.Ctap2Version.Ctap2_1,
       transport: this.#transportSelect.options[this.#transportSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorTransport,
-      hasResidentKey: this.#residentKeyCheckbox.checked,
+      hasResidentKey: this.residentKeyCheckbox.checked,
       hasUserVerification: this.#userVerificationCheckbox.checked,
+      hasLargeBlob: this.largeBlobCheckbox.checked,
       automaticPresenceSimulation: true,
       isUserVerified: true,
     };

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.999791"
+  "version": "1.0.1000713"
 }

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