chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/front_end/core/sdk/ServerTiming.ts

@@ -69,14 +69,14 @@ export class ServerTiming {
     this.description = description;
   }
 
-  static parseHeaders(headers: NameValue[]): ServerTiming[]|null {
+  static parseHeaders(headers: NameValue[], devToolsConsole: Common.Console.Console): ServerTiming[]|null {
     const rawServerTimingHeaders = headers.filter(item => item.name.toLowerCase() === 'server-timing');
     if (!rawServerTimingHeaders.length) {
       return null;
     }
 
     const serverTimings = rawServerTimingHeaders.reduce<ServerTiming[]>((timings, header) => {
-      const timing = this.createFromHeaderValue(header.value);
+      const timing = this.createFromHeaderValue(header.value, devToolsConsole);
       timings.push(...timing.map(function(entry) {
         return new ServerTiming(entry.name, entry.dur ?? null, entry.desc ?? '');
       }));
@@ -85,7 +85,9 @@ export class ServerTiming {
     return serverTimings;
   }
 
-  static createFromHeaderValue(valueString: string): ServerTimingMetric[] {
+  static createFromHeaderValue(valueString: string,
+                               devToolsConsole: Common.Console.Console = new Common.Console.Console()):
+      ServerTimingMetric[] {
     function trimLeadingWhiteSpace(): void {
       valueString = valueString.replace(/^\s*/, '');
     }
@@ -158,7 +160,7 @@ export class ServerTiming {
       const entry: ServerTimingMetric = {name};
 
       if (valueString.charAt(0) === '=') {
-        this.showWarning(i18nString(UIStrings.deprecatedSyntaxFoundPleaseUse, {PH1: name}));
+        this.#showWarning(i18nString(UIStrings.deprecatedSyntaxFoundPleaseUse, {PH1: name}), devToolsConsole);
       }
 
       while (consumeDelimiter(';')) {
@@ -168,7 +170,7 @@ export class ServerTiming {
         }
 
         paramName = paramName.toLowerCase();
-        const parseParameter = this.getParserForParameter(paramName);
+        const parseParameter = this.#getParserForParameter(paramName, devToolsConsole);
         let paramValue: (string|null)|null = null;
         if (consumeDelimiter('=')) {
           // always parse the value, even if we don't recognize the parameter #name
@@ -179,19 +181,19 @@ export class ServerTiming {
         if (parseParameter) {
           // paramName is valid
           if (entry.hasOwnProperty(paramName)) {
-            this.showWarning(i18nString(UIStrings.duplicateParameterSIgnored, {PH1: paramName}));
+            this.#showWarning(i18nString(UIStrings.duplicateParameterSIgnored, {PH1: paramName}), devToolsConsole);
             continue;
           }
 
           if (paramValue === null) {
-            this.showWarning(i18nString(UIStrings.noValueFoundForParameterS, {PH1: paramName}));
+            this.#showWarning(i18nString(UIStrings.noValueFoundForParameterS, {PH1: paramName}), devToolsConsole);
           }
 
           parseParameter.call(this, entry, paramValue);
         } else {
           // paramName is not valid
           // TODO(paulirish): consider showing other included params, like `start`: https://github.com/w3c/server-timing/issues/43
-          this.showWarning(i18nString(UIStrings.unrecognizedParameterS, {PH1: paramName}));
+          this.#showWarning(i18nString(UIStrings.unrecognizedParameterS, {PH1: paramName}), devToolsConsole);
         }
       }
 
@@ -219,12 +221,13 @@ export class ServerTiming {
     }
 
     if (valueString.length) {
-      this.showWarning(i18nString(UIStrings.extraneousTrailingCharacters));
+      this.#showWarning(i18nString(UIStrings.extraneousTrailingCharacters), devToolsConsole);
     }
     return result;
   }
 
-  static getParserForParameter(paramName: string): ((arg0: ServerTimingMetric, arg1: string|null) => void)|null {
+  static #getParserForParameter(paramName: string, devToolsConsole: Common.Console.Console):
+      ((arg0: ServerTimingMetric, arg1: string|null) => void)|null {
     switch (paramName) {
       case 'dur': {
         function durParser(entry: ServerTimingMetric, paramValue: string|null): void {
@@ -232,7 +235,8 @@ export class ServerTiming {
           if (paramValue !== null) {
             const duration = parseFloat(paramValue);
             if (isNaN(duration)) {
-              ServerTiming.showWarning(i18nString(UIStrings.unableToParseSValueS, {PH1: paramName, PH2: paramValue}));
+              ServerTiming.#showWarning(i18nString(UIStrings.unableToParseSValueS, {PH1: paramName, PH2: paramValue}),
+                                        devToolsConsole);
               return;
             }
             entry.dur = duration;
@@ -254,7 +258,7 @@ export class ServerTiming {
     }
   }
 
-  static showWarning(msg: string): void {
-    Common.Console.Console.instance().warn(`ServerTiming: ${msg}`);
+  static #showWarning(msg: string, devToolsConsole: Common.Console.Console): void {
+    devToolsConsole.warn(`ServerTiming: ${msg}`);
   }
 }

package/front_end/core/sdk/ServiceWorkerCacheModel.ts

@@ -28,6 +28,7 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
   readonly cacheAgent: ProtocolProxyApi.CacheStorageApi;
   readonly #storageAgent: ProtocolProxyApi.StorageApi;
   readonly #storageBucketModel: StorageBucketsModel;
+  readonly #console: Common.Console.Console;
 
   readonly #caches = new Map<string, Cache>();
   readonly #storageKeysTracked = new Set<string>();
@@ -48,6 +49,7 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
     this.cacheAgent = target.cacheStorageAgent();
     this.#storageAgent = target.storageAgent();
     this.#storageBucketModel = (target.model(StorageBucketsModel) as StorageBucketsModel);
+    this.#console = target.targetManager().getConsole();
   }
 
   enable(): void {
@@ -101,8 +103,8 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
   async deleteCacheEntry(cache: Cache, request: string): Promise<void> {
     const response = await this.cacheAgent.invoke_deleteEntry({cacheId: cache.cacheId, request});
     if (response.getError()) {
-      Common.Console.Console.instance().error(i18nString(
-          UIStrings.serviceworkercacheagentError, {PH1: cache.toString(), PH2: String(response.getError())}));
+      this.#console.error(i18nString(UIStrings.serviceworkercacheagentError,
+                                     {PH1: cache.toString(), PH2: String(response.getError())}));
       return;
     }
   }

package/front_end/core/sdk/ServiceWorkerManager.ts

@@ -8,6 +8,7 @@ import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
 
+import {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events as RuntimeModelEvents, type ExecutionContext, RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target, Type} from './Target.js';
@@ -70,23 +71,36 @@ export class ServiceWorkerManager extends SDKModel<EventTypes> {
   readonly #registrations = new Map<string, ServiceWorkerRegistration>();
   #enabled = false;
   readonly #forceUpdateSetting: Common.Settings.Setting<boolean>;
+  readonly #networkManager: MultitargetNetworkManager;
 
   constructor(target: Target) {
     super(target);
+    this.#networkManager = target.targetManager().getNetworkManager();
     target.registerServiceWorkerDispatcher(new ServiceWorkerDispatcher(this));
     this.#agent = target.serviceWorkerAgent();
     void this.enable();
-    this.#forceUpdateSetting = this.target()
-                                   .targetManager()
-                                   .context.get(Common.Settings.Settings)
-                                   .createSetting('service-worker-update-on-reload', false);
+    this.#forceUpdateSetting = target.targetManager().settings.createSetting('service-worker-update-on-reload', false);
     if (this.#forceUpdateSetting.get()) {
       this.forceUpdateSettingChanged();
     }
     this.#forceUpdateSetting.addChangeListener(this.forceUpdateSettingChanged, this);
+    this.#networkManager.addEventListener(
+        MultitargetNetworkManager.Events.CONDITIONS_CHANGED,
+        this.forceUpdateSettingChanged,
+        this,
+    );
     new ServiceWorkerContextNamer(target, this);
   }
 
+  override dispose(): void {
+    this.#networkManager.removeEventListener(
+        MultitargetNetworkManager.Events.CONDITIONS_CHANGED,
+        this.forceUpdateSettingChanged,
+        this,
+    );
+    super.dispose();
+  }
+
   async enable(): Promise<void> {
     if (this.#enabled) {
       return;
@@ -237,7 +251,7 @@ export class ServiceWorkerManager extends SDKModel<EventTypes> {
   }
 
   private forceUpdateSettingChanged(): void {
-    const forceUpdateOnPageLoad = this.#forceUpdateSetting.get();
+    const forceUpdateOnPageLoad = this.#forceUpdateSetting.get() && !this.#networkManager.isOffline();
     void this.#agent.invoke_setForceUpdateOnPageLoad({forceUpdateOnPageLoad});
   }
 }

package/front_end/core/sdk/SourceMap.ts

@@ -138,25 +138,25 @@ export class SourceMap {
   readonly #debugId?: DebugId;
 
   #scopesFallbackPromise?: Promise<void>;
+  readonly #console: Common.Console.Console;
 
   /**
    * Implements Source Map V3 model. See https://github.com/google/closure-compiler/wiki/Source-Maps
    * for format description.
    */
-  constructor(
-      compiledURL: Platform.DevToolsPath.UrlString, sourceMappingURL: Platform.DevToolsPath.UrlString,
-      payload: SourceMapV3, script?: Script) {
+  constructor(compiledURL: Platform.DevToolsPath.UrlString, sourceMappingURL: Platform.DevToolsPath.UrlString,
+              payload: SourceMapV3, console: Common.Console.Console, script?: Script) {
     this.#json = payload;
     this.#script = script;
     this.#compiledURL = compiledURL;
     this.#sourceMappingURL = sourceMappingURL;
     this.#baseURL = (Common.ParsedURL.schemeIs(sourceMappingURL, 'data:')) ? compiledURL : sourceMappingURL;
     this.#debugId = 'debugId' in payload ? (payload.debugId as DebugId | undefined) : undefined;
+    this.#console = console;
 
     if ('sections' in this.#json) {
       if (this.#json.sections.find(section => 'url' in section)) {
-        Common.Console.Console.instance().warn(
-            `SourceMap "${sourceMappingURL}" contains unsupported "URL" field in one of its sections.`);
+        this.#console.warn(`SourceMap "${sourceMappingURL}" contains unsupported "URL" field in one of its sections.`);
       }
     }
     this.eachSection(this.parseSources.bind(this));

package/front_end/core/sdk/SourceMapManager.ts

@@ -28,8 +28,9 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
     super();
 
     this.#target = target;
-    this.#factory =
-        factory ?? ((compiledURL, sourceMappingURL, payload) => new SourceMap(compiledURL, sourceMappingURL, payload));
+    this.#factory = factory ??
+        ((compiledURL, sourceMappingURL, payload) =>
+             new SourceMap(compiledURL, sourceMappingURL, payload, this.#target.targetManager().getConsole()));
   }
 
   setEnabled(isEnabled: boolean): void {

package/front_end/core/sdk/TargetManager.ts

@@ -12,6 +12,7 @@ import * as Root from '../root/root.js';
 
 import {FrameManager} from './FrameManager.js';
 import {MultitargetNetworkManager} from './NetworkManager.js';
+import {PageResourceLoader} from './PageResourceLoader.js';
 import {type RegistrationInfo, SDKModel, type SDKModelConstructor} from './SDKModel.js';
 import {Target, Type as TargetType} from './Target.js';
 
@@ -36,6 +37,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
   getConsole(): Common.Console.Console {
     if ('has' in this.context && typeof this.context.has === 'function' && !this.context.has(Common.Console.Console)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       return Common.Console.Console.instance();
     }
     return this.context.get(Common.Console.Console);
@@ -44,6 +46,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
   getFrameManager(): FrameManager {
     if ('has' in this.context && typeof this.context.has === 'function' && !this.context.has(FrameManager)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       return FrameManager.instance();
     }
     return this.context.get(FrameManager);
@@ -53,11 +56,21 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   getNetworkManager(): MultitargetNetworkManager {
     if ('has' in this.context && typeof this.context.has === 'function' &&
         !this.context.has(MultitargetNetworkManager)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       return MultitargetNetworkManager.instance();
     }
     return this.context.get(MultitargetNetworkManager);
   }
 
+  // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
+  getPageResourceLoader(): PageResourceLoader {
+    if ('has' in this.context && typeof this.context.has === 'function' && !this.context.has(PageResourceLoader)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      return PageResourceLoader.instance();
+    }
+    return this.context.get(PageResourceLoader);
+  }
+
   /* eslint-disable @typescript-eslint/no-explicit-any */
   #modelListeners: Platform.MapUtilities.Multimap<string|symbol|number, {
     modelClass: SDKModelConstructor,
@@ -135,7 +148,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   async #waitForPromiseWithTimeout(promise: Promise<void>, timeoutMessage: string): Promise<void> {
     const {promise: timeoutPromise, resolve: timeoutResolve} = Promise.withResolvers<void>();
     const timeoutId = globalThis.setTimeout(() => {
-      Common.Console.Console.instance().warn(timeoutMessage);
+      this.getConsole().warn(timeoutMessage);
       timeoutResolve();
     }, 2000);
     await Promise.race([promise, timeoutPromise]);

package/front_end/core/sdk/TraceObject.ts

@@ -10,6 +10,7 @@ import type {NetworkRequest} from './NetworkRequest.js';
 import type {RehydratingResource} from './RehydratingObject.js';
 import {ResourceTreeModel} from './ResourceTreeModel.js';
 import type {SourceMapV3} from './SourceMap.js';
+import type {TargetManager} from './TargetManager.js';
 
 interface TraceObjectWithNoMetadata {
   readonly traceEvents: TraceObject['traceEvents'];
@@ -57,13 +58,14 @@ export class RevealableNetworkRequest {
   }
 
   // Only Trace.Types.Events.SyntheticNetworkRequest are passed in, but we can't depend on that type from SDK
-  static create(event: unknown): RevealableNetworkRequest|null {
+  static create(targetManager: TargetManager, event: unknown): RevealableNetworkRequest|null {
     const syntheticNetworkRequest = event;
     // @ts-expect-error We don't have type checking here to confirm these events have .args.data.url.
     const url = syntheticNetworkRequest.args.data.url as Platform.DevToolsPath.UrlString;
     const urlWithoutHash = Common.ParsedURL.ParsedURL.urlWithoutHash(url) as Platform.DevToolsPath.UrlString;
 
-    const resource = ResourceTreeModel.resourceForURL(url) ?? ResourceTreeModel.resourceForURL(urlWithoutHash);
+    const resource = ResourceTreeModel.resourceForURL(targetManager, url) ??
+        ResourceTreeModel.resourceForURL(targetManager, urlWithoutHash);
     const sdkNetworkRequest = resource?.request;
     return sdkNetworkRequest ? new RevealableNetworkRequest(sdkNetworkRequest) : null;
   }

package/front_end/core/sdk/sdk-meta.ts

@@ -166,6 +166,71 @@ const UIStrings = {
    * @description A drop-down menu option to do not emulate css media type
    */
   noEmulation: 'No emulation',
+  /**
+   * @description Text for the CPU Pressure type to simulate on a device.
+   */
+  cpuPressure: 'CPU Pressure',
+  /**
+   * @description Title of an option in Sensors tab cpu pressure emulation drop-down. Turns off emulation of cpu pressure state.
+   */
+  noPressureEmulation: 'No override',
+  /**
+   * @description An option that appears in a drop-down that represents the nominal state.
+   */
+  nominal: 'Nominal',
+  /**
+   * @description An option that appears in a drop-down that represents the fair state.
+   */
+  fair: 'Fair',
+  /**
+   * @description An option that appears in a drop-down that represents the serious state.
+   */
+  serious: 'Serious',
+  /**
+   * @description An option that appears in a drop-down that represents the critical state.
+   */
+  critical: 'Critical',
+  /**
+   * @description Text for the touch type to simulate on a device. Refers to touch input as opposed to
+   * mouse input.
+   */
+  touch: 'Touch',
+  /**
+   * @description Text in Sensors View of the Device Toolbar. Means that touch input will be forced
+   *on, even if the device type e.g. desktop computer does not normally have touch input.
+   */
+  forceEnabled: 'Force enabled',
+  /**
+   * @description Text in Sensors View of the Device Toolbar. Refers to device-based touch input,
+   *which means the input type will be 'touch' only if the device normally has touch input e.g. a
+   *phone or tablet.
+   */
+  devicebased: 'Device-based',
+  /**
+   * @description Title of a section option in Sensors tab for idle emulation. This is a command, to
+   *emulate the state of the 'Idle Detector'.
+   */
+  emulateIdleDetectorState: 'Emulate Idle Detector state',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down. Turns off emulation of idle state.
+   */
+  noIdleEmulation: 'No idle emulation',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userActiveScreenUnlocked: 'User active, screen unlocked',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userActiveScreenLocked: 'User active, screen locked',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userIdleScreenUnlocked: 'User idle, screen unlocked',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userIdleScreenLocked: 'User idle, screen locked',
   /**
    * @description Title of a setting under the Rendering category that can be invoked through the Command Menu
    */
@@ -419,6 +484,13 @@ const UIStrings = {
    * @description Title of a setting under the Elements category in Settings.
    */
   apca: 'Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines',
+  /**
+   * @description Title of a setting under the Appearance category in Settings. When the webpage is
+   * paused by devtools, an overlay is shown on top of the page to indicate that it is paused. The
+   * overlay is a pause/unpause button and some text, which appears on top of the paused page. This
+   * setting turns off this overlay.
+   */
+  disablePaused: 'Disable paused state overlay',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('core/sdk/sdk-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -785,6 +857,95 @@ Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.emulateCssMediaType),
 });
 
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.cpuPressure),
+  reloadRequired: true,
+  settingName: 'emulation.cpu-pressure',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.noPressureEmulation),
+      text: i18nLazyString(UIStrings.noPressureEmulation),
+    },
+    {
+      value: 'nominal',
+      title: i18nLazyString(UIStrings.nominal),
+      text: i18nLazyString(UIStrings.nominal),
+    },
+    {
+      value: 'fair',
+      title: i18nLazyString(UIStrings.fair),
+      text: i18nLazyString(UIStrings.fair),
+    },
+    {
+      value: 'serious',
+      title: i18nLazyString(UIStrings.serious),
+      text: i18nLazyString(UIStrings.serious),
+    },
+    {
+      value: 'critical',
+      title: i18nLazyString(UIStrings.critical),
+      text: i18nLazyString(UIStrings.critical),
+    },
+  ],
+});
+
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.touch),
+  reloadRequired: true,
+  settingName: 'emulation.touch',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.devicebased),
+      text: i18nLazyString(UIStrings.devicebased),
+    },
+    {
+      value: 'force',
+      title: i18nLazyString(UIStrings.forceEnabled),
+      text: i18nLazyString(UIStrings.forceEnabled),
+    },
+  ],
+});
+
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.emulateIdleDetectorState),
+  settingName: 'emulation.idle-detection',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.noIdleEmulation),
+      text: i18nLazyString(UIStrings.noIdleEmulation),
+    },
+    {
+      value: '{\"isUserActive\":true,\"isScreenUnlocked\":true}',
+      title: i18nLazyString(UIStrings.userActiveScreenUnlocked),
+      text: i18nLazyString(UIStrings.userActiveScreenUnlocked),
+    },
+    {
+      value: '{\"isUserActive\":true,\"isScreenUnlocked\":false}',
+      title: i18nLazyString(UIStrings.userActiveScreenLocked),
+      text: i18nLazyString(UIStrings.userActiveScreenLocked),
+    },
+    {
+      value: '{\"isUserActive\":false,\"isScreenUnlocked\":true}',
+      title: i18nLazyString(UIStrings.userIdleScreenUnlocked),
+      text: i18nLazyString(UIStrings.userIdleScreenUnlocked),
+    },
+    {
+      value: '{\"isUserActive\":false,\"isScreenUnlocked\":false}',
+      title: i18nLazyString(UIStrings.userIdleScreenLocked),
+      text: i18nLazyString(UIStrings.userIdleScreenLocked),
+    },
+  ],
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.RENDERING,
   settingName: 'emulated-css-media-feature-prefers-color-scheme',
@@ -1277,3 +1438,12 @@ Common.Settings.registerSettingExtension({
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
 });
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.APPEARANCE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.disablePaused),
+  settingName: 'disable-paused-state-overlay',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});

package/front_end/design_system_tokens.css

@@ -644,11 +644,6 @@
     --source-code-font-family: ahem;
   }
 
-  &.platform-screenshot-e2e-test {
-    --default-font-family: roboto;
-    --monospace-font-family: roboto;
-    --source-code-font-family: roboto;
-  }
 
   --ref-typeface-weight-regular: 400;
   --ref-typeface-weight-medium: 500;

package/front_end/entrypoints/formatter_worker/FormattedContentBuilder.ts

@@ -29,8 +29,11 @@ export class FormattedContentBuilder {
   addToken(token: string, offset: number): void {
     // Skip the regex check if `addSoftSpace` will be a no-op.
     if (this.#enforceSpaceBetweenWords && !this.#hardSpaces && !this.#softSpace) {
-      const lastCharOfLastToken = this.#formattedContent.at(-1)?.at(-1) ?? '';
-      if (this.#canBeIdentifierOrNumber.test(lastCharOfLastToken) && this.#canBeIdentifierOrNumber.test(token)) {
+      const lastToken = this.#formattedContent.at(-1) ?? '';
+      const lastCharOfLastToken = lastToken.at(-1) ?? '';
+      if ((this.#canBeIdentifierOrNumber.test(lastCharOfLastToken) ||
+           ['`', '}', ')', ']', '\'', '"', '/'].includes(lastCharOfLastToken)) &&
+          this.#canBeIdentifierOrNumber.test(token)) {
         this.addSoftSpace();
       }
     }

package/front_end/entrypoints/formatter_worker/HTMLFormatter.ts

@@ -107,10 +107,16 @@ export class HTMLFormatter {
   }
 
   #formatToken(element: FormatterElement, token: Token): void {
-    if (Platform.StringUtilities.isWhitespace(token.value)) {
+    const isBodyToken =
+        Boolean(element.openTag && !element.openTag.selfClosingTag && element.closeTag &&
+                element.openTag.endOffset <= token.startOffset && token.startOffset < element.closeTag.startOffset);
+    if (Platform.StringUtilities.isWhitespace(token.value) &&
+        (!isBodyToken || element.children.length > 0 ||
+         (!element.hasContent && !element.hasComments && /[\r\n]/.test(token.value)))) {
       return;
     }
-    if (hasTokenInSet(token.type, 'comment') || hasTokenInSet(token.type, 'meta')) {
+    if ((hasTokenInSet(token.type, 'comment') || hasTokenInSet(token.type, 'meta')) &&
+        (!isBodyToken || element.children.length > 0)) {
       this.#builder.addNewLine();
       this.#builder.addToken(token.value.trim(), token.startOffset);
       this.#builder.addNewLine();
@@ -121,8 +127,6 @@ export class HTMLFormatter {
       return;
     }
 
-    const isBodyToken =
-        element.openTag.endOffset <= token.startOffset && token.startOffset < element.closeTag.startOffset;
     if (isBodyToken && element.name === 'style') {
       this.#builder.addNewLine();
       this.#builder.increaseNestingLevel();
@@ -149,7 +153,15 @@ export class HTMLFormatter {
       this.#builder.addSoftSpace();
     }
 
+    // When adding tag brackets and tag names (<, </, /, div, >), disable word space enforcement so
+    // that FormattedContentBuilder does not insert unwanted spaces (e.g. splitting </title> into </ title>).
+    const restore = !isBodyToken && !hasTokenInSet(token.type, 'attribute') ?
+        this.#builder.setEnforceSpaceBetweenWords(false) :
+        false;
     this.#builder.addToken(token.value, token.startOffset);
+    if (!isBodyToken && !hasTokenInSet(token.type, 'attribute')) {
+      this.#builder.setEnforceSpaceBetweenWords(restore);
+    }
   }
 }
 
@@ -260,6 +272,14 @@ export class HTMLModel {
       this.#updateDOM(token);
 
       const element = this.#stack[this.#stack.length - 1];
+      if (element && (hasTokenInSet(token.type, 'comment') || hasTokenInSet(token.type, 'meta'))) {
+        element.hasComments = true;
+      }
+      if (element && !Platform.StringUtilities.isWhitespace(token.value) && !hasTokenInSet(token.type, 'tag') &&
+          !hasTokenInSet(token.type, 'attribute') && !hasTokenInSet(token.type, 'bracket') &&
+          !hasTokenInSet(token.type, 'comment') && !hasTokenInSet(token.type, 'meta')) {
+        element.hasContent = true;
+      }
       if (element && (element.name === 'script' || element.name === 'style') &&
           element.openTag?.endOffset === lastOffset) {
         return AbortTokenization;
@@ -585,6 +605,8 @@ class FormatterElement {
   parent: FormatterElement|null = null;
   openTag: Tag|null = null;
   closeTag: Tag|null = null;
+  hasComments = false;
+  hasContent = false;
 
   constructor(name: string) {
     this.name = name;

package/front_end/entrypoints/formatter_worker/JavaScriptFormatter.ts

@@ -82,11 +82,12 @@ export class JavaScriptFormatter {
       const format = this.#formatToken(node.parent, token);
       this.#push(token, format);
     }
+    if (node.parent?.type === 'TemplateLiteral' && node.type !== 'TemplateElement' && node.type !== 'TemplateLiteral') {
+      this.#builder.setEnforceSpaceBetweenWords(true);
+    }
   }
 
   #afterVisit(node: Acorn.ESTree.Node): void {
-    // ${expressions} within a template literal need space enforced.
-    const restore = this.#builder.setEnforceSpaceBetweenWords(node.type !== 'TemplateElement');
     let token;
     while ((token = this.#tokenizer.peekToken()) && token.start < node.end) {
       const token = (this.#tokenizer.nextToken() as TokenOrComment);
@@ -94,7 +95,11 @@ export class JavaScriptFormatter {
       this.#push(token, format);
     }
     this.#push(null, this.#finishNode(node));
-    this.#builder.setEnforceSpaceBetweenWords(restore || node.type === 'TemplateLiteral');
+    if (node.parent?.type === 'TemplateLiteral' && node.type !== 'TemplateElement' && node.type !== 'TemplateLiteral') {
+      this.#builder.setEnforceSpaceBetweenWords(false);
+    } else if (node.type === 'TemplateLiteral' && node.parent?.type !== 'TemplateLiteral') {
+      this.#builder.setEnforceSpaceBetweenWords(true);
+    }
   }
 
   #inForLoopHeader(node: Acorn.ESTree.Node): boolean {

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -39,7 +39,7 @@ const UIStrings = {
    */
   javascriptIsDisabled: 'JavaScript is disabled',
   /**
-   * @description A message that prompts the user to open devtools for a specific environment (Node.js)
+   * @description Tooltip for the Node.js indicator prompting the user to open dedicated DevTools for Node.js.
    */
   openDedicatedTools: 'Open dedicated DevTools for `Node.js`',
 } as const;
@@ -107,7 +107,7 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.ReloadInspectedPage, ({data: hard}) => {
-          SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(hard);
+          SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(SDK.TargetManager.TargetManager.instance(), hard);
         });
   }
 }
@@ -118,10 +118,10 @@ export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegat
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {
       case 'inspector-main.reload':
-        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(false);
+        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(SDK.TargetManager.TargetManager.instance(), false);
         return true;
       case 'inspector-main.hard-reload':
-        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(true);
+        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(SDK.TargetManager.TargetManager.instance(), true);
         return true;
     }
     return false;