chrome-devtools-frontend 1.0.998787 → 1.0.1000057

package/.clang-format

@@ -7,3 +7,4 @@ CommentPragmas: .*\@.*
 AllowShortBlocksOnASingleLine: false
 AllowShortFunctionsOnASingleLine: None
 ReflowComments: false
+JavaScriptWrapImports: true

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/Color.ts

@@ -33,7 +33,15 @@
 
 import * as Platform from '../platform/platform.js';
 
-import {blendColors, contrastRatioAPCA, desiredLuminanceAPCA, luminance, luminanceAPCA, rgbaToHsla, rgbaToHwba} from './ColorUtils.js';
+import {
+  blendColors,
+  contrastRatioAPCA,
+  desiredLuminanceAPCA,
+  luminance,
+  luminanceAPCA,
+  rgbaToHsla,
+  rgbaToHwba,
+} from './ColorUtils.js';
 
 export class Color {
   #hslaInternal: number[]|undefined;

package/front_end/core/common/Object.ts

@@ -28,7 +28,8 @@
  */
 
 import type * as Platform from '../platform/platform.js';
-import type {EventDescriptor, EventListener, EventTarget, EventTargetEvent, EventPayloadToRestParameters} from './EventTarget.js';
+import type {
+  EventDescriptor, EventListener, EventTarget, EventTargetEvent, EventPayloadToRestParameters} from './EventTarget.js';
 
 export interface ListenerCallbackTuple<Events, T extends keyof Events> {
   thisObject?: Object;

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/common/Settings.ts

@@ -36,7 +36,19 @@ import {Format} from './Color.js';
 import {Console} from './Console.js';
 import type {GenericEvents, EventDescriptor, EventTargetEvent} from './EventTarget.js';
 import {ObjectWrapper} from './Object.js';
-import {getLocalizedSettingsCategory, getRegisteredSettings, maybeRemoveSettingExtension, type RegExpSettingItem, registerSettingExtension, registerSettingsForTest, resetSettings, SettingCategory, type SettingExtensionOption, type SettingRegistration, SettingType} from './SettingRegistration.js';
+import {
+  getLocalizedSettingsCategory,
+  getRegisteredSettings,
+  maybeRemoveSettingExtension,
+  type RegExpSettingItem,
+  registerSettingExtension,
+  registerSettingsForTest,
+  resetSettings,
+  SettingCategory,
+  type SettingExtensionOption,
+  type SettingRegistration,
+  SettingType,
+} from './SettingRegistration.js';
 
 let settingsInstance: Settings|undefined;
 

package/front_end/core/dom_extension/DOMExtension.ts

@@ -532,16 +532,6 @@ Node.prototype.setTextContentTruncatedIfNeeded = function(text: string|Node, pla
   return false;
 };
 
-Document.prototype.deepActiveElement = function(): Element|null {
-  let activeElement: Element|(Element | null) = this.activeElement;
-  while (activeElement && activeElement.shadowRoot && activeElement.shadowRoot.activeElement) {
-    activeElement = activeElement.shadowRoot.activeElement;
-  }
-  return activeElement;
-};
-
-DocumentFragment.prototype.deepActiveElement = Document.prototype.deepActiveElement;
-
 Element.prototype.hasFocus = function(): boolean {
   const root = this.getComponentRoot();
   return Boolean(root) && this.isSelfOrAncestor(root.activeElement);

package/front_end/core/host/InspectorFrontendHost.ts

@@ -36,7 +36,10 @@ import * as i18n from '../i18n/i18n.js';
 import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 
-import type {CanShowSurveyResult, ContextMenuDescriptor, EnumeratedHistogram, EventTypes, ExtensionDescriptor, InspectorFrontendHostAPI, LoadNetworkResourceResult, ShowSurveyResult, SyncInformation} from './InspectorFrontendHostAPI.js';
+import type {
+  CanShowSurveyResult, ContextMenuDescriptor, EnumeratedHistogram, EventTypes, ExtensionDescriptor,
+  InspectorFrontendHostAPI, LoadNetworkResourceResult, ShowSurveyResult,
+  SyncInformation} from './InspectorFrontendHostAPI.js';
 import {EventDescriptors, Events} from './InspectorFrontendHostAPI.js';
 import {streamWrite as resourceLoaderStreamWrite} from './ResourceLoader.js';
 

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"
   },
@@ -7482,7 +7485,7 @@
     "message": "Unknown"
   },
   "panels/network/RequestTimingView.ts | waitingTtfb": {
-    "message": "Waiting (TTFB)"
+    "message": "Waiting for server response"
   },
   "panels/network/RequestTimingView.ts | waterfall": {
     "message": "Waterfall"
@@ -10238,9 +10241,6 @@
   "panels/timeline/TimelineEventOverview.ts | cpu": {
     "message": "CPU"
   },
-  "panels/timeline/TimelineEventOverview.ts | fps": {
-    "message": "FPS"
-  },
   "panels/timeline/TimelineEventOverview.ts | heap": {
     "message": "HEAP"
   },
@@ -10307,9 +10307,6 @@
   "panels/timeline/TimelineFlameChartDataProvider.ts | rasterizerThreadS": {
     "message": "Rasterizer Thread {PH1}"
   },
-  "panels/timeline/TimelineFlameChartDataProvider.ts | sFfps": {
-    "message": "{PH1} ~ {PH2} fps"
-  },
   "panels/timeline/TimelineFlameChartDataProvider.ts | sSelfS": {
     "message": "{PH1} (self {PH2})"
   },
@@ -10823,9 +10820,6 @@
   "panels/timeline/TimelineUIUtils.ts | forcedReflow": {
     "message": "Forced reflow"
   },
-  "panels/timeline/TimelineUIUtils.ts | fps": {
-    "message": "FPS"
-  },
   "panels/timeline/TimelineUIUtils.ts | frame": {
     "message": "Frame"
   },

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̂íôń"
   },
@@ -7482,7 +7485,7 @@
     "message": "Ûńk̂ńôẃn̂"
   },
   "panels/network/RequestTimingView.ts | waitingTtfb": {
-    "message": "Ŵáît́îńĝ (T́T̂F́B̂)"
+    "message": "Ŵáît́îńĝ f́ôŕ ŝér̂v́êŕ r̂éŝṕôńŝé"
   },
   "panels/network/RequestTimingView.ts | waterfall": {
     "message": "Ŵát̂ér̂f́âĺl̂"
@@ -10238,9 +10241,6 @@
   "panels/timeline/TimelineEventOverview.ts | cpu": {
     "message": "ĈṔÛ"
   },
-  "panels/timeline/TimelineEventOverview.ts | fps": {
-    "message": "F̂ṔŜ"
-  },
   "panels/timeline/TimelineEventOverview.ts | heap": {
     "message": "ĤÉÂṔ"
   },
@@ -10307,9 +10307,6 @@
   "panels/timeline/TimelineFlameChartDataProvider.ts | rasterizerThreadS": {
     "message": "R̂áŝt́êŕîźêŕ T̂h́r̂éâd́ {PH1}"
   },
-  "panels/timeline/TimelineFlameChartDataProvider.ts | sFfps": {
-    "message": "{PH1} ~ {PH2} f̂ṕŝ"
-  },
   "panels/timeline/TimelineFlameChartDataProvider.ts | sSelfS": {
     "message": "{PH1} (ŝél̂f́ {PH2})"
   },
@@ -10823,9 +10820,6 @@
   "panels/timeline/TimelineUIUtils.ts | forcedReflow": {
     "message": "F̂ór̂ćêd́ r̂éf̂ĺôẃ"
   },
-  "panels/timeline/TimelineUIUtils.ts | fps": {
-    "message": "F̂ṔŜ"
-  },
   "panels/timeline/TimelineUIUtils.ts | frame": {
     "message": "F̂ŕâḿê"
   },

package/front_end/core/sdk/CSSProperty.ts

@@ -163,8 +163,8 @@ export class CSSProperty {
 
     const range = this.range.relativeTo(this.ownerStyle.range.startLine, this.ownerStyle.range.startColumn);
     const indentation = this.ownerStyle.cssText ?
-    this.detectIndentation(this.ownerStyle.cssText) :
-    Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
+        this.detectIndentation(this.ownerStyle.cssText) :
+        Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
     const endIndentation = this.ownerStyle.cssText ? indentation.substring(0, this.ownerStyle.range.endColumn) : '';
     const text = new TextUtils.Text.Text(this.ownerStyle.cssText || '');
     const newStyleText = text.replaceRange(range, Platform.StringUtilities.sprintf(';%s;', propertyText));
@@ -172,8 +172,7 @@ export class CSSProperty {
     return this.ownerStyle.setText(styleText, majorChange);
   }
 
-  static async formatStyle(
-    styleText: string, indentation: string, endIndentation: string): Promise<string> {
+  static async formatStyle(styleText: string, indentation: string, endIndentation: string): Promise<string> {
     const doubleIndent = indentation.substring(endIndentation.length) + indentation;
     if (indentation) {
       indentation = '\n' + indentation;
@@ -197,7 +196,7 @@ export class CSSProperty {
         const disabledProperty = tokenType?.includes('comment') && isDisabledProperty(token);
         const isPropertyStart =
             (tokenType?.includes('string') || tokenType?.includes('meta') || tokenType?.includes('property') ||
-            tokenType?.includes('variableName'));
+             tokenType?.includes('variableName'));
         if (disabledProperty) {
           result = result.trimEnd() + indentation + token;
         } else if (isPropertyStart) {
@@ -222,8 +221,8 @@ export class CSSProperty {
         // implementation takes special care to restore a single
         // whitespace token in this edge case. https://crbug.com/1071296
         const trimmedPropertyText = propertyText.trim();
-        result =
-            result.trimEnd() + indentation + trimmedPropertyText + (trimmedPropertyText.endsWith(':') ? ' ' : '') + token;
+        result = result.trimEnd() + indentation + trimmedPropertyText + (trimmedPropertyText.endsWith(':') ? ' ' : '') +
+            token;
         needsSemi = false;
         insideProperty = false;
         propertyName = '';

package/front_end/core/sdk/ChildTargetManager.ts

@@ -142,9 +142,6 @@ export class ChildTargetManager extends SDKModel<EventTypes> implements Protocol
     }
     const target = this.#targetManager.createTarget(
         targetInfo.targetId, targetName, type, this.#parentTarget, sessionId, undefined, undefined, targetInfo);
-    if (type === Type.Worker || type === Type.ServiceWorker || type === Type.SharedWorker) {
-      target.setInspectedURL(this.#parentTarget.inspectedURL());
-    }
     this.#childTargetsBySessionId.set(sessionId, target);
     this.#childTargetsById.set(target.id(), target);
 

package/front_end/core/sdk/ConsoleModel.ts

@@ -44,7 +44,8 @@ import {Events as DebuggerModelEvents} from './DebuggerModel.js';
 import {LogModel} from './LogModel.js';
 import {RemoteObject} from './RemoteObject.js';
 import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTreeModel.js';
-import type {ConsoleAPICall, ExceptionWithTimestamp, ExecutionContext, QueryObjectRequestedEvent} from './RuntimeModel.js';
+import type {
+  ConsoleAPICall, ExceptionWithTimestamp, ExecutionContext, QueryObjectRequestedEvent} from './RuntimeModel.js';
 import {Events as RuntimeModelEvents, RuntimeModel} from './RuntimeModel.js';
 import type {Target} from './Target.js';
 import {TargetManager} from './TargetManager.js';

package/front_end/core/sdk/NetworkManager.ts

@@ -41,7 +41,9 @@ import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
 import {Cookie} from './Cookie.js';
-import type {BlockedCookieWithReason, ContentData, ExtraRequestInfo, ExtraResponseInfo, MIME_TYPE, NameValue, WebBundleInfo, WebBundleInnerRequestInfo} from './NetworkRequest.js';
+import type {
+  BlockedCookieWithReason, ContentData, ExtraRequestInfo, ExtraResponseInfo, MIME_TYPE, NameValue, WebBundleInfo,
+  WebBundleInnerRequestInfo} from './NetworkRequest.js';
 import {Events as NetworkRequestEvents, NetworkRequest} from './NetworkRequest.js';
 import type {Target} from './Target.js';
 import {Capability} from './Target.js';

package/front_end/core/sdk/RuntimeModel.ts

@@ -41,7 +41,13 @@ import type {FunctionDetails} from './DebuggerModel.js';
 import {DebuggerModel} from './DebuggerModel.js';
 import {HeapProfilerModel} from './HeapProfilerModel.js';
 import type {ScopeRef} from './RemoteObject.js';
-import {RemoteFunction, RemoteObject, RemoteObjectImpl, RemoteObjectProperty, ScopeRemoteObject} from './RemoteObject.js';
+import {
+  RemoteFunction,
+  RemoteObject,
+  RemoteObjectImpl,
+  RemoteObjectProperty,
+  ScopeRemoteObject,
+} from './RemoteObject.js';
 import type {Target} from './Target.js';
 import {Capability, Type} from './Target.js';
 import {SDKModel} from './SDKModel.js';

package/front_end/core/sdk/SourceMapManager.ts

@@ -8,6 +8,7 @@ import * as Platform from '../platform/platform.js';
 
 import type {FrameAssociated} from './FrameAssociated.js';
 import type {Target} from './Target.js';
+import {Type} from './Target.js';
 import {Events as TargetManagerEvents, TargetManager} from './TargetManager.js';
 import type {SourceMap} from './SourceMap.js';
 import {TextSourceMap} from './SourceMap.js';
@@ -66,6 +67,14 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
     }
   }
 
+  private getBaseUrl(): Platform.DevToolsPath.UrlString {
+    let target: Target|null = this.#target;
+    while (target && target.type() !== Type.Frame) {
+      target = target.parentTarget();
+    }
+    return target?.inspectedURL() ?? Platform.DevToolsPath.EmptyUrlString;
+  }
+
   private inspectedURLChanged(event: Common.EventTarget.EventTargetEvent<Target>): void {
     if (event.data !== this.#target) {
       return;
@@ -156,7 +165,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   }|null {
     // |#sourceURL| can be a random string, but is generally an absolute path.
     // Complete it to inspected page url for relative links.
-    const resolvedSourceURL = Common.ParsedURL.ParsedURL.completeURL(this.#target.inspectedURL(), sourceURL);
+    const resolvedSourceURL = Common.ParsedURL.ParsedURL.completeURL(this.getBaseUrl(), sourceURL);
     if (!resolvedSourceURL) {
       return null;
     }

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -31,7 +31,11 @@
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Acorn from '../../third_party/acorn/acorn.js';
-import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-legacy.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
+
+// This file is required to bring some types into scope, even though it
+// is not used.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-legacy.js';
 
 import {AcornTokenizer, ECMA_VERSION} from './AcornTokenizer.js';
 import {CSSFormatter} from './CSSFormatter.js';

package/front_end/legacy/legacy-defs.d.ts

@@ -122,8 +122,8 @@ interface DOMError {
 }
 
 interface ShadowRoot {
-  elementFromPoint(x: number, y: number): Element | null;
-  getSelection(): Selection | null;
+  elementFromPoint(x: number, y: number): Element|null;
+  getSelection(): Selection|null;
 }
 
 interface HTMLDialogElement {

package/front_end/models/formatter/ScriptFormatter.ts

@@ -30,7 +30,9 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js'; // eslint-disable-line rulesdir/es_modules_import
+
+// eslint-disable-next-line rulesdir/es_modules_import
+import type * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';
 
 import {formatterWorkerPool} from './FormatterWorkerPool.js';
 

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -102,7 +102,7 @@ const
           documentDomainSettingWithoutOriginAgentClusterHeader:
               'Relaxing the same-origin policy by setting `document.domain` is deprecated, and will be disabled by default. To continue using this feature, please opt-out of origin-keyed agent clusters by sending an `Origin-Agent-Cluster: ?0` header along with the HTTP response for the document and frames. See https://developer.chrome.com/blog/immutable-document-domain/ for more details.',
           /**
-   *@description TODO(crbug.com/1320338): Description needed for translation
+   *@description Warning displayed to developers when the non-standard `Event.path` API is used to notify them that this API is deprecated.
    */
           eventPath: '`Event.path` is deprecated and will be removed. Please use `Event.composedPath()` instead.',
           /**

package/front_end/models/issues_manager/SourceFrameIssuesManager.ts

@@ -8,7 +8,11 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 
-import {ContentSecurityPolicyIssue, trustedTypesPolicyViolationCode, trustedTypesSinkViolationCode} from './ContentSecurityPolicyIssue.js';
+import {
+  ContentSecurityPolicyIssue,
+  trustedTypesPolicyViolationCode,
+  trustedTypesSinkViolationCode,
+} from './ContentSecurityPolicyIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
 import {toZeroBasedLocation} from './Issue.js';
 import type {IssueAddedEvent, IssuesManager} from './IssuesManager.js';

package/front_end/models/text_utils/CodeMirrorUtils.ts

@@ -29,25 +29,22 @@
  */
 
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-type Tokenizer =
-    (line: string, callback: (value: string, style: string|null) => void) => void;
+type Tokenizer = (line: string, callback: (value: string, style: string|null) => void) => void;
 
 export function createCssTokenizer(): Tokenizer {
-    async function tokenize(
-        line: string, callback: (value: string, style: string|null) => void): Promise<void> {
-        const streamParser = await CodeMirror.cssStreamParser();
-        const stream = new CodeMirror.StringStream();
-        stream.string = line;
+  async function tokenize(line: string, callback: (value: string, style: string|null) => void): Promise<void> {
+    const streamParser = await CodeMirror.cssStreamParser();
+    const stream = new CodeMirror.StringStream();
+    stream.string = line;
 
-        const startState = streamParser.startState();
-        let lastPos = stream.pos;
-        while (!stream.eol()) {
-            const token = streamParser.token(stream, startState);
-            const segment = stream.current().substring(lastPos, stream.pos);
-            callback(segment, token);
-            lastPos = stream.pos;
-        }
+    const startState = streamParser.startState();
+    let lastPos = stream.pos;
+    while (!stream.eol()) {
+      const token = streamParser.token(stream, startState);
+      const segment = stream.current().substring(lastPos, stream.pos);
+      callback(segment, token);
+      lastPos = stream.pos;
     }
-    return tokenize;
+  }
+  return tokenize;
 }
-

package/front_end/models/timeline_model/TimelineModel.ts

@@ -1211,7 +1211,7 @@ export class TimelineModelImpl {
 
   private processBrowserEvent(event: SDK.TracingModel.Event): void {
     if (event.name === RecordType.LatencyInfoFlow) {
-      if (event.args.chrome_latency_info.trace_id) {
+      if (event.args.chrome_latency_info?.trace_id) {
         this.knownInputEvents.add(event.args.chrome_latency_info.trace_id);
       }
       return;

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/application/IndexedDBViews.ts

@@ -28,14 +28,17 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import indexedDBViewsStyles from './indexedDBViews.css.js';
 import * as i18n from '../../core/i18n/i18n.js';
+
+import indexedDBViewsStyles from './indexedDBViews.css.js';
+
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {Database, DatabaseId, Entry, Index, IndexedDBModel, ObjectStore, ObjectStoreMetadata} from './IndexedDBModel.js';
+import type {
+  Database, DatabaseId, Entry, Index, IndexedDBModel, ObjectStore, ObjectStoreMetadata} from './IndexedDBModel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/console/ConsoleView.ts

@@ -56,7 +56,15 @@ import {ConsoleFilter, FilterType} from './ConsoleFilter.js';
 import {ConsolePinPane} from './ConsolePinPane.js';
 import {ConsolePrompt, Events as ConsolePromptEvents} from './ConsolePrompt.js';
 import {ConsoleSidebar, Events} from './ConsoleSidebar.js';
-import {ConsoleCommand, ConsoleCommandResult, ConsoleGroupViewMessage, ConsoleTableMessageView, ConsoleViewMessage, getMessageForElement, MaxLengthForLinks} from './ConsoleViewMessage.js';
+import {
+  ConsoleCommand,
+  ConsoleCommandResult,
+  ConsoleGroupViewMessage,
+  ConsoleTableMessageView,
+  ConsoleViewMessage,
+  getMessageForElement,
+  MaxLengthForLinks,
+} from './ConsoleViewMessage.js';
 
 import type {ConsoleViewportElement, ConsoleViewportProvider} from './ConsoleViewport.js';
 import {ConsoleViewport} from './ConsoleViewport.js';

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -14,7 +14,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
-import type {OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from './CSSOverviewController.js';
+import type {
+  OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from
+  './CSSOverviewController.js';
 import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
 import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';

package/front_end/panels/elements/PropertiesWidget.ts

@@ -212,4 +212,3 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.registerCSSFiles([propertiesWidgetStyles]);
   }
 }
-

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -61,7 +61,13 @@ import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
 import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
 
 import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import {StylePropertiesSection, BlankStylePropertiesSection, KeyframePropertiesSection, HighlightPseudoStylePropertiesSection} from './StylePropertiesSection.js';
+import {
+  StylePropertiesSection,
+  BlankStylePropertiesSection,
+  KeyframePropertiesSection,
+  HighlightPseudoStylePropertiesSection,
+} from './StylePropertiesSection.js';
+
 import * as LayersWidget from './LayersWidget.js';
 
 const UIStrings = {

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/lighthouse/LighthousePanel.ts

@@ -12,7 +12,8 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
 
-import type {AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
+import type {
+  AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
 import {Events, LighthouseController} from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
 import type {LighthouseRun} from './LighthouseProtocolService.js';