chrome-devtools-frontend 1.0.1695017 → 1.0.1696961

package/front_end/core/sdk/SourceMap.ts

@@ -11,6 +11,7 @@ import type {CallFrame, ScopeChainEntry} from './DebuggerModel.js';
 import {scopeTreeForScript} from './ScopeTreeCache.js';
 import type {Script} from './Script.js';
 import {buildOriginalScopes, decodePastaRanges, type NamedFunctionRange} from './SourceMapFunctionRanges.js';
+import {decodeRangeMappings} from './SourceMapRangeMappings.js';
 import {SourceMapScopesInfo, type TranslatedFrame} from './SourceMapScopesInfo.js';
 
 /**
@@ -33,6 +34,7 @@ export interface SourceMapV3Object {
   names?: string[];
   ignoreList?: number[];
   scopes?: string;
+  rangeMappings?: string;
   debugId?: string;
   x_google_linecount?: number;
   x_google_ignoreList?: number[];
@@ -92,10 +94,17 @@ export class SourceMapEntry {
   readonly sourceLineNumber: number;
   readonly sourceColumnNumber: number;
   readonly name?: string;
+  /**
+   * Whether this entry covers everything up to the following entry, mapping the generated
+   * code character by character (including newlines) onto the original code.
+   *
+   * @see https://github.com/tc39/source-map/blob/main/proposals/range-mappings.md
+   */
+  readonly isRangeMapping: boolean;
 
-  constructor(
-      lineNumber: number, columnNumber: number, sourceIndex?: number, sourceURL?: Platform.DevToolsPath.UrlString,
-      sourceLineNumber?: number, sourceColumnNumber?: number, name?: string) {
+  constructor(lineNumber: number, columnNumber: number, sourceIndex?: number,
+              sourceURL?: Platform.DevToolsPath.UrlString, sourceLineNumber?: number, sourceColumnNumber?: number,
+              name?: string, isRangeMapping = false) {
     this.lineNumber = lineNumber;
     this.columnNumber = columnNumber;
     this.sourceIndex = sourceIndex;
@@ -103,6 +112,7 @@ export class SourceMapEntry {
     this.sourceLineNumber = (sourceLineNumber as number);
     this.sourceColumnNumber = (sourceColumnNumber as number);
     this.name = name;
+    this.isRangeMapping = isRangeMapping;
   }
 
   static compare(entry1: SourceMapEntry, entry2: SourceMapEntry): number {
@@ -526,6 +536,22 @@ export class SourceMap {
     const tokenIter = new TokenIterator(map.mappings);
     let sourceURL: Platform.DevToolsPath.UrlString|undefined = this.#sourceInfos[sourceIndex]?.sourceURL;
 
+    // For every line of this section, the index of its first entry in `mappings` and the
+    // number of entries on that line. The `rangeMappings` field addresses entries by their
+    // index within a line, so this is what resolves those indices below.
+    const lineStarts: number[] = [];
+    const lineCounts: number[] = [];
+    const mappings = this.mappings();
+    const pushEntry = (entry: SourceMapEntry): void => {
+      const line = entry.lineNumber - baseLineNumber;
+      if (lineCounts[line] === undefined) {
+        lineStarts[line] = mappings.length;
+        lineCounts[line] = 0;
+      }
+      lineCounts[line]++;
+      mappings.push(entry);
+    };
+
     while (true) {
       if (tokenIter.peek() === ',') {
         tokenIter.next();
@@ -542,7 +568,7 @@ export class SourceMap {
 
       columnNumber += tokenIter.nextVLQ();
       if (!tokenIter.hasNext() || this.isSeparator(tokenIter.peek())) {
-        this.mappings().push(new SourceMapEntry(lineNumber, columnNumber));
+        pushEntry(new SourceMapEntry(lineNumber, columnNumber));
         continue;
       }
 
@@ -555,16 +581,18 @@ export class SourceMap {
       sourceColumnNumber += tokenIter.nextVLQ();
 
       if (!tokenIter.hasNext() || this.isSeparator(tokenIter.peek())) {
-        this.mappings().push(
+        pushEntry(
             new SourceMapEntry(lineNumber, columnNumber, sourceIndex, sourceURL, sourceLineNumber, sourceColumnNumber));
         continue;
       }
 
       nameIndex += tokenIter.nextVLQ();
-      this.mappings().push(new SourceMapEntry(
-          lineNumber, columnNumber, sourceIndex, sourceURL, sourceLineNumber, sourceColumnNumber, names[nameIndex]));
+      pushEntry(new SourceMapEntry(lineNumber, columnNumber, sourceIndex, sourceURL, sourceLineNumber,
+                                   sourceColumnNumber, names[nameIndex]));
     }
 
+    this.#markRangeMappings(map, lineStarts, lineCounts);
+
     if (!this.#scopesInfo) {
       this.#scopesInfo = new SourceMapScopesInfo(this, {scopes: [], ranges: []});
     }
@@ -583,6 +611,44 @@ export class SourceMap {
     }
   }
 
+  /**
+   * Marks the entries of the section that was just parsed which the `rangeMappings` field of
+   * that section points at.
+   *
+   * A malformed field never invalidates the SourceMap: a field that can't be decoded is
+   * ignored altogether, and indices that don't point at a mapping with an original position
+   * are skipped.
+   *
+   * @param lineStarts index in `mappings` of the first entry of each line of the section.
+   * @param lineCounts number of entries on each line of the section.
+   */
+  #markRangeMappings(map: SourceMapV3Object, lineStarts: number[], lineCounts: number[]): void {
+    if (typeof map.rangeMappings !== 'string') {
+      return;
+    }
+    let rangeMappings: number[][];
+    try {
+      rangeMappings = decodeRangeMappings(map.rangeMappings);
+    } catch {
+      return;
+    }
+
+    const mappings = this.mappings();
+    for (let line = 0; line < rangeMappings.length; ++line) {
+      for (const index of rangeMappings[line]) {
+        if (index >= (lineCounts[line] ?? 0)) {
+          // The indices are sorted, so the rest of the line is out of bounds as well.
+          break;
+        }
+        const mappingIndex = lineStarts[line] + index;
+        if (mappings[mappingIndex].sourceURL === undefined) {
+          continue;
+        }
+        mappings[mappingIndex] = asRangeMapping(mappings[mappingIndex]);
+      }
+    }
+  }
+
   private parseBloombergScopes(map: SourceMapV3Object): Array<ScopesCodec.OriginalScope|null> {
     const scopeList = map.x_com_bloomberg_sourcesFunctionMappings;
     if (!scopeList) {
@@ -791,9 +857,17 @@ export class SourceMap {
   }
 }
 
+/** @returns a copy of the {@link entry} that is marked as a range mapping. */
+function asRangeMapping(entry: SourceMapEntry): SourceMapEntry {
+  return new SourceMapEntry(entry.lineNumber, entry.columnNumber, entry.sourceIndex, entry.sourceURL,
+                            entry.sourceLineNumber, entry.sourceColumnNumber, entry.name, true);
+}
+
 const VLQ_BASE_SHIFT = 5;
 const VLQ_BASE_MASK = (1 << 5) - 1;
 const VLQ_CONTINUATION_MASK = 1 << 5;
+/** The largest shift an unsigned VLQ digit may contribute at while still fitting into 32 bits. */
+const VLQ_UNSIGNED_MAX_SHIFT = 30;
 
 export class TokenIterator {
   readonly #string: string;
@@ -823,26 +897,50 @@ export class TokenIterator {
 
   nextVLQ(): number {
     // Read unsigned value.
+    let result = this.#decodeVLQ(false);
+
+    // Fix the sign.
+    const negative = result & 1;
+    result >>= 1;
+    return negative ? -result : result;
+  }
+
+  /**
+   * Decodes an unsigned Base64 VLQ number, as used by the `rangeMappings` field of the
+   * "range mappings" proposal. In contrast to {@link nextVLQ} the least significant bit
+   * carries a value rather than a sign, so the full 32 bit range is available. Numbers
+   * that don't fit into 32 bits are rejected.
+   *
+   * @see https://github.com/tc39/source-map/blob/main/proposals/range-mappings.md
+   */
+  nextUnsignedVLQ(): number {
+    return this.#decodeVLQ(true);
+  }
+
+  #decodeVLQ(unsigned: boolean): number {
     let result = 0;
     let shift = 0;
     let digit: number = VLQ_CONTINUATION_MASK;
     while (digit & VLQ_CONTINUATION_MASK) {
       if (!this.hasNext()) {
-        throw new Error('Unexpected end of input while decodling VLQ number!');
+        throw new Error('Unexpected end of input while decoding VLQ number!');
+      }
+      if (unsigned && shift > VLQ_UNSIGNED_MAX_SHIFT) {
+        throw new Error('Unsigned VLQ number does not fit into 32 bits!');
       }
       const charCode = this.nextCharCode();
       digit = Common.Base64.BASE64_CODES[charCode];
       if (charCode !== 65 /* 'A' */ && digit === 0) {
         throw new Error(`Unexpected char '${String.fromCharCode(charCode)}' encountered while decoding`);
       }
-      result += (digit & VLQ_BASE_MASK) << shift;
+      // Unsigned numbers may use the full 32 bits, where `<<` would sign extend.
+      result += unsigned ? (digit & VLQ_BASE_MASK) * 2 ** shift : (digit & VLQ_BASE_MASK) << shift;
       shift += VLQ_BASE_SHIFT;
     }
-
-    // Fix the sign.
-    const negative = result & 1;
-    result >>= 1;
-    return negative ? -result : result;
+    if (unsigned && result > 0xFFFFFFFF) {
+      throw new Error('Unsigned VLQ number does not fit into 32 bits!');
+    }
+    return result;
   }
 
   /**

package/front_end/core/sdk/SourceMapRangeMappings.ts

@@ -0,0 +1,43 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {TokenIterator} from './SourceMap.js';
+
+/**
+ * Implements decoding of the `rangeMappings` field of the "range mappings" proposal.
+ *
+ * The field holds one entry per line of the generated code, separated by `;`. Each line is
+ * a bare sequence of unsigned Base64 VLQs (no separators in between) denoting which of the
+ * mappings on that line are range mappings: the first VLQ is an absolute index into the
+ * line's mappings, every subsequent one an offset from the previous index. An offset of zero
+ * repeats the previous index, which is tolerated rather than treated as an error.
+ *
+ * @returns for every line of the generated code, the sorted indices of the mappings on
+ *          that line which are range mappings.
+ * @throws if the field is not a well-formed sequence of unsigned VLQs and `;` separators.
+ * @see https://github.com/tc39/source-map/blob/main/proposals/range-mappings.md
+ */
+export function decodeRangeMappings(encodedRangeMappings: string): number[][] {
+  const rangeMappings: number[][] = [];
+  const tokenIter = new TokenIterator(encodedRangeMappings);
+
+  let indices: number[] = [];
+  let currentIndex = 0;
+  while (tokenIter.hasNext()) {
+    if (tokenIter.peek() === ';') {
+      tokenIter.next();
+      rangeMappings.push(indices);
+      indices = [];
+      currentIndex = 0;
+      continue;
+    }
+
+    // The first index of a line is absolute, i.e. relative to 0.
+    currentIndex += tokenIter.nextUnsignedVLQ();
+    indices.push(currentIndex);
+  }
+  rangeMappings.push(indices);
+
+  return rangeMappings;
+}

package/front_end/core/sdk/SourceMapScopeChainEntry.ts

@@ -41,19 +41,22 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
   readonly #range?: ScopesCodec.GeneratedRange;
   readonly #isInnerMostFunction: boolean;
   readonly #returnValue?: RemoteObject;
+  readonly #scopeNumber?: number;
 
   /**
    * @param isInnerMostFunction If `scope` is the innermost 'function' scope. Only used for labeling as we name the
    * scope of the paused function 'Local', while other outer 'function' scopes are named 'Closure'.
+   * @param scopeNumber The V8 scope in which `scope`s binding expressions must be evaluated. Defaults to the
+   * inner-most scope.
    */
-  constructor(
-      callFrame: CallFrame, scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange|undefined,
-      isInnerMostFunction: boolean, returnValue: RemoteObject|undefined) {
+  constructor(callFrame: CallFrame, scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange|undefined,
+              isInnerMostFunction: boolean, returnValue: RemoteObject|undefined, scopeNumber?: number) {
     this.#callFrame = callFrame;
     this.#scope = scope;
     this.#range = range;
     this.#isInnerMostFunction = isInnerMostFunction;
     this.#returnValue = returnValue;
+    this.#scopeNumber = scopeNumber;
   }
 
   extraProperties(): RemoteObjectProperty[] {
@@ -102,7 +105,7 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
   }
 
   object(): RemoteObject {
-    return new SourceMapScopeRemoteObject(this.#callFrame, this.#scope, this.#range);
+    return new SourceMapScopeRemoteObject(this.#callFrame, this.#scope, this.#range, this.#scopeNumber);
   }
 
   description(): string {
@@ -118,18 +121,22 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
   readonly #callFrame: CallFrame;
   readonly #scope: ScopesCodec.OriginalScope;
   readonly #range?: ScopesCodec.GeneratedRange;
+  readonly #scopeNumber?: number;
 
-  constructor(callFrame: CallFrame, scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange|undefined) {
+  constructor(callFrame: CallFrame, scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange|undefined,
+              scopeNumber: number|undefined) {
     super(
         callFrame.debuggerModel.runtimeModel(), /* objectId */ undefined, 'object', /* sub type */ undefined,
         /* value */ null);
     this.#callFrame = callFrame;
     this.#scope = scope;
     this.#range = range;
+    this.#scopeNumber = scopeNumber;
   }
 
-  override async doGetProperties(_ownProperties: boolean, accessorPropertiesOnly: boolean, generatePreview: boolean):
-      Promise<GetPropertiesResult> {
+  override async doGetProperties(_ownProperties: boolean, accessorPropertiesOnly: boolean,
+                                 _nonIndexedPropertiesOnly: boolean,
+                                 generatePreview: boolean): Promise<GetPropertiesResult> {
     if (accessorPropertiesOnly) {
       return {properties: [], internalProperties: []};
     }
@@ -142,9 +149,7 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
         continue;
       }
 
-      // TODO(crbug.com/40277685): Once we can evaluate expressions in scopes other than the innermost one,
-      //         we need to find the find the CDP scope that matches `this.#range` and evaluate in that.
-      const result = await this.#callFrame.evaluate({expression, generatePreview});
+      const result = await this.#callFrame.evaluate({expression, generatePreview, scopeNumber: this.#scopeNumber});
       if ('error' in result || result.exceptionDetails) {
         // TODO(crbug.com/40277685): Make these errors user-visible to aid tooling developers.
         //         E.g. show the error on hover or expose it in the developer resources panel.

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -8,7 +8,7 @@ import type * as ScopesCodec from '../../third_party/source-map-scopes-codec/sou
 import type * as Platform from '../platform/platform.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
-import type {CallFrame, ScopeChainEntry} from './DebuggerModel.js';
+import type {CallFrame, Scope, ScopeChainEntry} from './DebuggerModel.js';
 import type {SourceMap} from './SourceMap.js';
 import {SourceMapScopeChainEntry} from './SourceMapScopeChainEntry.js';
 
@@ -190,13 +190,6 @@ export class SourceMapScopesInfo {
       return comparePositions(a.start, b.start);
     }
 
-    function comparePositions(a: ScopesCodec.Position, b: ScopesCodec.Position): number {
-      if (a.line !== b.line) {
-        return a.line - b.line;
-      }
-      return a.column - b.column;
-    }
-
     function positionFromOffset(offset: number): ScopesCodec.Position {
       const location = text.positionFromOffset(offset);
       return {line: location.lineNumber, column: location.columnNumber};
@@ -369,8 +362,9 @@ export class SourceMapScopesInfo {
       const isFunctionScope = originalScope.kind === 'function';
       const isInnerMostFunction = isFunctionScope && !seenFunctionScope;
       const returnValue = isInnerMostFunction ? callFrame.returnValue() : null;
-      result.push(
-          new SourceMapScopeChainEntry(callFrame, originalScope, range, isInnerMostFunction, returnValue ?? undefined));
+      const scopeNumber = range ? findMatchingScopeNumber(callFrame, range) : undefined;
+      result.push(new SourceMapScopeChainEntry(callFrame, originalScope, range, isInnerMostFunction,
+                                               returnValue ?? undefined, scopeNumber));
       seenFunctionScope ||= isFunctionScope;
     }
 
@@ -580,3 +574,91 @@ export function contains(
 
   return true;
 }
+
+export function comparePositions(a: ScopesCodec.Position, b: ScopesCodec.Position): number {
+  if (a.line !== b.line) {
+    return a.line - b.line;
+  }
+  return a.column - b.column;
+}
+
+function positionRange(callFrame: CallFrame, scope: Scope): {start: ScopesCodec.Position, end: ScopesCodec.Position}|
+    null {
+  const range = scope.range();
+  if (range === null || range.start.scriptId !== callFrame.location().scriptId ||
+      range.end.scriptId !== callFrame.location().scriptId) {
+    return null;
+  }
+  return {
+    start: {line: range.start.lineNumber, column: range.start.columnNumber},
+    end: {line: range.end.lineNumber, column: range.end.columnNumber},
+  };
+}
+
+/**
+ * Finds the V8 scope that corresponds to the source map's generated `range`.
+ *
+ * We need this to evaluate a scope's binding expressions in the right V8 scope. `evaluateOnCallFrame`
+ * defaults to the inner-most scope, where declarations shadow the outer variables we actually want to read.
+ *
+ * V8's scope ranges and the source map's generated ranges don't have to agree (in particular with
+ * inlining), so besides an exact match we accept the outer-most V8 scope contained in `range` (a generated
+ * range for a function spans the whole function text, while V8's scope only covers params + body), or
+ * failing that the inner-most V8 scope containing `range`.
+ *
+ * @returns The scope number, or `undefined` if nothing matched. Callers should then omit `scopeNumber`
+ *          and let CDP default to the inner-most scope.
+ */
+export function findMatchingScopeNumber(callFrame: CallFrame, range: ScopesCodec.GeneratedRange): number|undefined {
+  const scopeChain = callFrame.scopeChain();
+
+  const exactMatch = scopeChain.find(scope => {
+    const scopeRange = positionRange(callFrame, scope);
+    return scopeRange !== null && comparePositions(scopeRange.start, range.start) === 0 &&
+        comparePositions(scopeRange.end, range.end) === 0;
+  });
+  if (exactMatch !== undefined) {
+    return exactMatch.ordinal();
+  }
+
+  // A stack frame must correspond to a V8 function scope. Inlined ranges make it easy to accidentally
+  // land on an unrelated block/catch/with scope, so search the function scopes first.
+  if (range.isStackFrame) {
+    const functionScopes = scopeChain.filter(scope => scope.type() === Protocol.Debugger.ScopeType.Local ||
+                                                 scope.type() === Protocol.Debugger.ScopeType.Closure);
+    const functionScope = findBestScope(callFrame, functionScopes, range);
+    if (functionScope !== undefined) {
+      return functionScope.ordinal();
+    }
+  }
+
+  return findBestScope(callFrame, scopeChain, range)?.ordinal();
+}
+
+/**
+ * @param scopes Ordered inner-most to outer-most.
+ * @returns The outer-most scope contained in `range`, or if there is none, the inner-most scope
+ *          containing `range`.
+ */
+function findBestScope(callFrame: CallFrame, scopes: Scope[], range: ScopesCodec.GeneratedRange): Scope|undefined {
+  let outerMostContainedScope: Scope|undefined;
+  let innerMostContainingScope: Scope|undefined;
+
+  for (const scope of scopes) {
+    const scopeRange = positionRange(callFrame, scope);
+    if (scopeRange === null) {
+      continue;
+    }
+    const rangeContainsScope =
+        comparePositions(range.start, scopeRange.start) <= 0 && comparePositions(scopeRange.end, range.end) <= 0;
+    const scopeContainsRange =
+        comparePositions(scopeRange.start, range.start) <= 0 && comparePositions(range.end, scopeRange.end) <= 0;
+    if (rangeContainsScope) {
+      outerMostContainedScope = scope;
+    } else if (scopeContainsRange) {
+      innerMostContainingScope ??= scope;
+    }
+  }
+
+  return outerMostContainedScope ?? innerMostContainingScope;
+}

package/front_end/core/sdk/sdk.ts

@@ -89,6 +89,7 @@ import * as SourceMap from './SourceMap.js';
 import * as SourceMapCache from './SourceMapCache.js';
 import * as SourceMapFunctionRanges from './SourceMapFunctionRanges.js';
 import * as SourceMapManager from './SourceMapManager.js';
+import * as SourceMapRangeMappings from './SourceMapRangeMappings.js';
 import * as SourceMapScopeChainEntry from './SourceMapScopeChainEntry.js';
 import * as SourceMapScopesInfo from './SourceMapScopesInfo.js';
 import * as StorageBucketsModel from './StorageBucketsModel.js';
@@ -179,6 +180,7 @@ export {
   SourceMapCache,
   SourceMapFunctionRanges,
   SourceMapManager,
+  SourceMapRangeMappings,
   SourceMapScopeChainEntry,
   SourceMapScopesInfo,
   StorageBucketsModel,

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts

@@ -1135,7 +1135,7 @@ export abstract class HeapSnapshot {
       this.#allocationProfile = new AllocationProfile(this.profile, liveObjects);
     }
 
-    this.#progress.updateStatus('Finished processing.');
+    this.#progress.updateStatus('Finished processing');
   }
 
   nodeIndexForId(nodeId: number): number|undefined {

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -45,7 +45,7 @@ const UIStrings = {
   /**
    * @description Explanation text for the 'Layer borders' setting in the Rendering panel.
    */
-  showsLayerBordersOrangeoliveAnd: 'Shows layer borders (orange/olive) and tiles (cyan).',
+  showsLayerBordersOrangeoliveAnd: 'Shows layer borders (orange/olive) and tiles (cyan)',
   /**
    * @description The name of a checkbox setting in the Rendering panel. This setting shows the
    * rendering statistics for frames e.g. frames per second. Frame is a noun.
@@ -55,7 +55,7 @@ const UIStrings = {
    * @description Explanation text for the 'Frame rendering stats' setting in the Rendering panel.
    * Plots is a verb. GPU = Graphics Processing Unit.
    */
-  plotsFrameThroughputDropped: 'Plots frame throughput, dropped frames distribution, and GPU memory.',
+  plotsFrameThroughputDropped: 'Plots frame throughput, dropped frames distribution, and GPU memory',
   /**
    * @description The name of a checkbox setting in the Rendering panel. This setting highlights
    * elements that can slow down scrolling on the page.
@@ -65,7 +65,7 @@ const UIStrings = {
    * @description Explanation text for the 'Scrolling performance issues' setting in the Rendering panel.
    */
   highlightsElementsTealThatCan:
-      'Highlights elements (teal) that can slow down scrolling, including touch & wheel event handlers and other main-thread scrolling situations.',
+      'Highlights elements (teal) that can slow down scrolling, including touch & wheel event handlers and other main-thread scrolling situations',
   /**
    * @description The name of a checkbox setting in the Rendering panel. This setting highlights the
    * rendering elements for ads that are found on the page.
@@ -74,7 +74,7 @@ const UIStrings = {
   /**
    * @description Explanation text for the 'Highlight ads' setting in the Rendering panel.
    */
-  highlightsElementsRedDetectedToBe: 'Highlights elements (red) detected to be ads.',
+  highlightsElementsRedDetectedToBe: 'Highlights elements (red) detected to be ads',
   /**
    * @description The name of a checkbox setting in the Rendering panel. This setting prevents the
    * webpage from loading 'local' fonts. Local fonts are fonts that are installed on the user's
@@ -102,7 +102,7 @@ const UIStrings = {
   /**
    * @description Explanation text for the 'Emulate automatic dark mode' setting in the Rendering panel.
    */
-  emulatesAutoDarkMode: 'Enables automatic dark mode and sets `prefers-color-scheme` to `dark`.',
+  emulatesAutoDarkMode: 'Enables automatic dark mode and sets `prefers-color-scheme` to `dark`',
   /**
    * @description Explanation text for the 'Emulate CSS media type' setting in the Rendering panel.
    * This setting overrides the CSS media type on the page (https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types).
@@ -148,7 +148,7 @@ const UIStrings = {
   /**
    * @description Explanation text for the image format disabling settings in the Rendering panel.
    */
-  requiresAPageReloadToApplyAnd: 'Requires a page reload to apply and disables caching for image requests.',
+  requiresAPageReloadToApplyAnd: 'Requires a page reload to apply and disables caching for image requests',
   /**
    * @description The name of a checkbox setting in the Rendering panel. This setting disables the
    * page from loading images with the JPEG XL format.

package/front_end/entrypoints/main/MainImpl.ts

@@ -74,7 +74,7 @@ const UIStrings = {
    * @description Tooltip for the dock side menu options explaining how to restore the last dock position.
    * @example {Ctrl+Shift+D} PH1
    */
-  placementOfDevtoolsRelativeToThe: 'Placement of DevTools relative to the page. ({PH1} to restore last position)',
+  placementOfDevtoolsRelativeToThe: 'Placement of DevTools relative to the page ({PH1} to restore last position)',
   /**
    * @description Tooltip and label for the button to undock DevTools into a separate window.
    */