chrome-devtools-frontend 1.0.1512147 → 1.0.1513662

package/front_end/models/ai_assistance/data_formatters/UnitFormatters.ts

@@ -0,0 +1,151 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * This module contains unit formatters that are only to be used within
+ * the AI models because they do not account for locales other than en-US.
+ */
+const defaultTimeFormatterOptions: Intl.NumberFormatOptions = {
+  style: 'unit',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+} as const;
+
+const defaultByteFormatterOptions: Intl.NumberFormatOptions = {
+  style: 'unit',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+} as const;
+
+const timeFormatters = {
+  milli: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'millisecond',
+  }),
+  second: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'second',
+  }),
+  micro: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'microsecond',
+  }),
+} as const;
+
+const byteFormatters = {
+  bytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    // Don't need as much precision on bytes.
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    unit: 'byte',
+  }),
+  kilobytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    unit: 'kilobyte',
+  }),
+  megabytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    unit: 'megabyte',
+  }),
+} as const;
+
+function numberIsTooLarge(x: number): boolean {
+  return !Number.isFinite(x) || x === Number.MAX_VALUE;
+}
+
+export function seconds(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+  if (x === 0) {
+    return formatAndEnsureSpace(timeFormatters.second, x);
+  }
+
+  const asMilli = x * 1_000;
+
+  if (asMilli < 1) {
+    return micros(x * 1_000_000);
+  }
+
+  if (asMilli < 1_000) {
+    return millis(asMilli);
+  }
+  return formatAndEnsureSpace(timeFormatters.second, x);
+}
+
+export function millis(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+  return formatAndEnsureSpace(timeFormatters.milli, x);
+}
+
+export function micros(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+
+  if (x < 100) {
+    return formatAndEnsureSpace(timeFormatters.micro, x);
+  }
+
+  const asMilli = x / 1_000;
+  return millis(asMilli);
+}
+
+export function bytes(x: number): string {
+  if (x < 1_000) {
+    return formatAndEnsureSpace(byteFormatters.bytes, x);
+  }
+  const kilobytes = x / 1_000;
+  if (kilobytes < 1_000) {
+    return formatAndEnsureSpace(byteFormatters.kilobytes, kilobytes);
+  }
+
+  const megabytes = kilobytes / 1_000;
+  return formatAndEnsureSpace(byteFormatters.megabytes, megabytes);
+}
+
+/**
+ * When using 'narrow' unitDisplay, many locales exclude the space between the literal and the unit.
+ * We don't like that, so when there is no space literal we inject the provided separator manually.
+ */
+function formatAndEnsureSpace(formatter: Intl.NumberFormat, value: number, separator = '\xA0'): string {
+  const parts = formatter.formatToParts(value);
+
+  let hasSpace = false;
+  for (const part of parts) {
+    if (part.type === 'literal') {
+      if (part.value === ' ') {
+        hasSpace = true;
+        part.value = separator;
+      } else if (part.value === separator) {
+        hasSpace = true;
+      }
+    }
+  }
+
+  if (hasSpace) {
+    return parts.map(part => part.value).join('');
+  }
+
+  const unitIndex = parts.findIndex(part => part.type === 'unit');
+
+  // Unexpected for there to be no unit, but just in case, handle that.
+  if (unitIndex === -1) {
+    return parts.map(part => part.value).join('');
+  }
+
+  // For locales where the unit comes first (sw), the space has to come after the unit.
+  if (unitIndex === 0) {
+    return parts[0].value + separator + parts.slice(1).map(part => part.value).join('');
+  }
+
+  // Otherwise, it comes before.
+  return parts.slice(0, unitIndex).map(part => part.value).join('') + separator +
+      parts.slice(unitIndex).map(part => part.value).join('');
+}

package/front_end/models/badges/AiExplorerBadge.ts

@@ -0,0 +1,21 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Badge, type BadgeAction} from './Badge.js';
+
+const AI_EXPLORER_BADGE_URI = new URL('../../Images/ai-explorer-badge.svg', import.meta.url).toString();
+export class AiExplorerBadge extends Badge {
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fai-explorer';
+  override readonly title = 'AI Explorer';
+  override readonly imageUri = AI_EXPLORER_BADGE_URI;
+
+  override readonly interestedActions = [
+    // TODO(ergunsh): Instrument related actions.
+  ] as const;
+
+  handleAction(_action: BadgeAction): void {
+    this.trigger();
+  }
+}

package/front_end/models/badges/Badge.ts

@@ -5,30 +5,35 @@
 import * as Common from '../../core/common/common.js';
 
 export enum BadgeAction {
+  GDP_SIGN_UP_COMPLETE = 'gdp-sign-up-complete',
   CSS_RULE_MODIFIED = 'css-rule-modified',
+  DOM_ELEMENT_OR_ATTRIBUTE_EDITED = 'dom-element-or-attribute-edited',
+  MODERN_DOM_BADGE_CLICKED = 'modern-dom-badge-clicked',
+  // TODO(ergunsh): Instrument performance insight clicks.
   PERFORMANCE_INSIGHT_CLICKED = 'performance-insight-clicked',
 }
 
 export type BadgeActionEvents = Record<BadgeAction, void>;
 
 export interface BadgeContext {
-  dispatchBadgeTriggeredEvent: (badge: Badge) => void;
+  onTriggerBadge: (badge: Badge) => void;
   badgeActionEventTarget: Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>;
 }
 
 export abstract class Badge {
-  #dispatchBadgeTriggeredEvent: (badge: Badge) => void;
+  #onTriggerBadge: (badge: Badge) => void;
   #badgeActionEventTarget: Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>;
   #eventListeners: Common.EventTarget.EventDescriptor[] = [];
   #triggeredBefore = false;
 
   abstract readonly name: string;
   abstract readonly title: string;
+  abstract readonly imageUri: string;
   abstract readonly interestedActions: readonly BadgeAction[];
   readonly isStarterBadge: boolean = false;
 
   constructor(context: BadgeContext) {
-    this.#dispatchBadgeTriggeredEvent = context.dispatchBadgeTriggeredEvent;
+    this.#onTriggerBadge = context.onTriggerBadge;
     this.#badgeActionEventTarget = context.badgeActionEventTarget;
   }
 
@@ -40,15 +45,10 @@ export abstract class Badge {
 
     this.#triggeredBefore = true;
     this.deactivate();
-    this.#dispatchBadgeTriggeredEvent(this);
+    this.#onTriggerBadge(this);
   }
 
   activate(): void {
-    // We don't reactivate a badge that's triggered before.
-    if (this.#triggeredBefore) {
-      return;
-    }
-
     // The event listeners are already registered, we don't re-register them.
     if (this.#eventListeners.length > 0) {
       return;
@@ -67,5 +67,6 @@ export abstract class Badge {
 
     Common.EventTarget.removeEventListeners(this.#eventListeners);
     this.#eventListeners = [];
+    this.#triggeredBefore = false;
   }
 }

package/front_end/models/badges/CodeWhispererBadge.ts

@@ -0,0 +1,21 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Badge, type BadgeAction} from './Badge.js';
+
+const CODE_WHISPERER_BADGE_IMAGE_URI = new URL('../../Images/code-whisperer-badge.svg', import.meta.url).toString();
+export class CodeWhispererBadge extends Badge {
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fcode-whisperer';
+  override readonly title = 'Code Whisperer';
+  override readonly imageUri = CODE_WHISPERER_BADGE_IMAGE_URI;
+
+  override readonly interestedActions = [
+    // TODO(ergunsh): Instrument related actions.
+  ] as const;
+
+  handleAction(_action: BadgeAction): void {
+    this.trigger();
+  }
+}

package/front_end/models/badges/DOMDetectiveBadge.ts

@@ -0,0 +1,21 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Badge, BadgeAction} from './Badge.js';
+
+const DOM_DETECTIVE_BADGE_IMAGE_URI = new URL('../../Images/dom-detective-badge.svg', import.meta.url).toString();
+export class DOMDetectiveBadge extends Badge {
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fdom-detective';
+  override readonly title = 'DOM Detective';
+  override readonly imageUri = DOM_DETECTIVE_BADGE_IMAGE_URI;
+
+  override readonly interestedActions = [
+    BadgeAction.MODERN_DOM_BADGE_CLICKED,
+  ] as const;
+
+  handleAction(_action: BadgeAction): void {
+    this.trigger();
+  }
+}

package/front_end/models/badges/SpeedsterBadge.ts

@@ -4,10 +4,15 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const SPEEDSTER_BADGE_URI = new URL('../../Images/speedster-badge.svg', import.meta.url).toString();
 export class SpeedsterBadge extends Badge {
-  override readonly name = 'awards/speedster';
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fspeedster';
   override readonly title = 'Speedster';
-  override readonly interestedActions = [BadgeAction.PERFORMANCE_INSIGHT_CLICKED] as const;
+  override readonly interestedActions = [
+    BadgeAction.PERFORMANCE_INSIGHT_CLICKED,
+  ] as const;
+  override readonly imageUri = SPEEDSTER_BADGE_URI;
 
   handleAction(_action: BadgeAction): void {
     this.trigger();

package/front_end/models/badges/StarterBadge.ts

@@ -4,14 +4,19 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const STARTER_BADGE_IMAGE_URI = new URL('../../Images/devtools-user-badge.svg', import.meta.url).toString();
 export class StarterBadge extends Badge {
   override readonly isStarterBadge = true;
-  override readonly name = 'awards/chrome-devtools-user';
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fchrome-devtools-user';
   override readonly title = 'Chrome DevTools User';
+  override readonly imageUri = STARTER_BADGE_IMAGE_URI;
 
   // TODO(ergunsh): Add remaining non-trivial event definitions
   override readonly interestedActions = [
+    BadgeAction.GDP_SIGN_UP_COMPLETE,
     BadgeAction.CSS_RULE_MODIFIED,
+    BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
   ] as const;
 
   handleAction(_action: BadgeAction): void {

package/front_end/models/badges/UserBadges.ts

@@ -5,7 +5,10 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 
+import {AiExplorerBadge} from './AiExplorerBadge.js';
 import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext} from './Badge.js';
+import {CodeWhispererBadge} from './CodeWhispererBadge.js';
+import {DOMDetectiveBadge} from './DOMDetectiveBadge.js';
 import {SpeedsterBadge} from './SpeedsterBadge.js';
 import {StarterBadge} from './StarterBadge.js';
 
@@ -23,12 +26,15 @@ let userBadgesInstance: UserBadges|undefined = undefined;
 export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #badgeActionEventTarget = new Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>();
 
-  #receiveBadgesSetting?: Common.Settings.Setting<Boolean>;
+  #receiveBadgesSetting: Common.Settings.Setting<Boolean>;
   #allBadges: Badge[];
 
   static readonly BADGE_REGISTRY: BadgeClass[] = [
     StarterBadge,
     SpeedsterBadge,
+    DOMDetectiveBadge,
+    CodeWhispererBadge,
+    AiExplorerBadge,
   ];
 
   private constructor() {
@@ -37,11 +43,10 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
     this.#receiveBadgesSetting.addChangeListener(this.#reconcileBadges, this);
 
-    this.#allBadges =
-        UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
-                                        dispatchBadgeTriggeredEvent: this.#dispatchBadgeTriggeredEvent.bind(this),
-                                        badgeActionEventTarget: this.#badgeActionEventTarget,
-                                      }));
+    this.#allBadges = UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
+                                                      onTriggerBadge: this.#onTriggerBadge.bind(this),
+                                                      badgeActionEventTarget: this.#badgeActionEventTarget,
+                                                    }));
   }
 
   static instance({forceNew}: {forceNew: boolean} = {forceNew: false}): UserBadges {
@@ -65,7 +70,28 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#badgeActionEventTarget.dispatchEventToListeners(action);
   }
 
-  #dispatchBadgeTriggeredEvent(badge: Badge): void {
+  async #onTriggerBadge(badge: Badge): Promise<void> {
+    let shouldAwardBadge = false;
+    // By default, we award non-starter badges directly when they are triggered.
+    if (!badge.isStarterBadge) {
+      shouldAwardBadge = true;
+    } else {
+      const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+      const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting.get());
+      // If there is a GDP profile and the user has enabled receiving badges, we award the starter badge as well.
+      if (gdpProfile && receiveBadgesSettingEnabled) {
+        shouldAwardBadge = true;
+      }
+    }
+
+    // Awarding was needed and not successful, we don't show the notification
+    if (shouldAwardBadge) {
+      const result = await Host.GdpClient.GdpClient.instance().createAward({name: badge.name});
+      if (!result) {
+        return;
+      }
+    }
+
     this.dispatchEventToListeners(Events.BADGE_TRIGGERED, badge);
   }
 
@@ -76,7 +102,6 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   // TODO(ergunsh): Implement starter badge dismissal, snooze count & timestamp checks.
-  // TODO(ergunsh): Implement checking for previously awarded badges.
   async #reconcileBadges(): Promise<void> {
     const syncInfo = await new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
         resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
@@ -98,8 +123,31 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
 
-    const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting?.get());
+    let awardedBadgeNames: Set<string>|null = null;
+    if (gdpProfile) {
+      awardedBadgeNames = await Host.GdpClient.GdpClient.instance().getAwardedBadgeNames(
+          {names: this.#allBadges.map(badge => badge.name)});
+      // This is a conservative approach. We bail out if `awardedBadgeNames` is null
+      // when there is a profile to prevent a negative user experience.
+      //
+      // A failure here (e.g., from a typo in a badge name) could cause us to
+      // re-trigger the "Receive badges" nudge for a user who has already earned the
+      // starter badge and opted out of receiving badges.
+      //
+      // The trade-off is, we silently failing to enable badge mechanism rather than annoying the user.
+      if (!awardedBadgeNames) {
+        this.#deactivateAllBadges();
+        return;
+      }
+    }
+
+    const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting.get());
     for (const badge of this.#allBadges) {
+      if (awardedBadgeNames?.has(badge.name)) {
+        badge.deactivate();
+        continue;
+      }
+
       const shouldActivateStarterBadge = badge.isStarterBadge && isEligibleToCreateProfile;
       const shouldActivateActivityBasedBadge =
           !badge.isStarterBadge && Boolean(gdpProfile) && receiveBadgesSettingEnabled;
@@ -115,4 +163,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   reconcileBadgesFinishedForTest(): void {
   }
+
+  isReceiveBadgesSettingEnabled(): boolean {
+    return Boolean(this.#receiveBadgesSetting.get());
+  }
 }

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -283,7 +283,7 @@ export class LiveLocation extends LiveLocationWithPool {
   readonly #lineNumber: number;
   readonly #columnNumber: number;
   readonly #info: ModelInfo;
-  headerInternal: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null;
+  #header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null;
   constructor(
       rawLocation: SDK.CSSModel.CSSLocation, info: ModelInfo,
       updateDelegate: (arg0: LiveLocationInterface) => Promise<void>, locationPool: LiveLocationPool) {
@@ -292,22 +292,22 @@ export class LiveLocation extends LiveLocationWithPool {
     this.#lineNumber = rawLocation.lineNumber;
     this.#columnNumber = rawLocation.columnNumber;
     this.#info = info;
-    this.headerInternal = null;
+    this.#header = null;
   }
 
   header(): SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null {
-    return this.headerInternal;
+    return this.#header;
   }
 
   setHeader(header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null): void {
-    this.headerInternal = header;
+    this.#header = header;
   }
 
   override async uiLocation(): Promise<Workspace.UISourceCode.UILocation|null> {
-    if (!this.headerInternal) {
+    if (!this.#header) {
       return null;
     }
-    const rawLocation = new SDK.CSSModel.CSSLocation(this.headerInternal, this.#lineNumber, this.#columnNumber);
+    const rawLocation = new SDK.CSSModel.CSSLocation(this.#header, this.#lineNumber, this.#columnNumber);
     return CSSWorkspaceBinding.instance().rawLocationToUILocation(rawLocation);
   }
 

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -221,30 +221,30 @@ class SourceScopeRemoteObject extends SDK.RemoteObject.RemoteObjectImpl {
 }
 
 export class SourceScope implements SDK.DebuggerModel.ScopeChainEntry {
-  readonly #callFrameInternal: SDK.DebuggerModel.CallFrame;
-  readonly #typeInternal: string;
-  readonly #typeNameInternal: string;
-  readonly #iconInternal: string|undefined;
-  readonly #objectInternal: SourceScopeRemoteObject;
+  readonly #callFrame: SDK.DebuggerModel.CallFrame;
+  readonly #type: string;
+  readonly #typeName: string;
+  readonly #icon: string|undefined;
+  readonly #object: SourceScopeRemoteObject;
   constructor(
       callFrame: SDK.DebuggerModel.CallFrame, stopId: StopId, type: string, typeName: string, icon: string|undefined,
       plugin: DebuggerLanguagePlugin) {
     if (icon && new URL(icon).protocol !== 'data:') {
       throw new Error('The icon must be a data:-URL');
     }
-    this.#callFrameInternal = callFrame;
-    this.#typeInternal = type;
-    this.#typeNameInternal = typeName;
-    this.#iconInternal = icon;
-    this.#objectInternal = new SourceScopeRemoteObject(callFrame, stopId, plugin);
+    this.#callFrame = callFrame;
+    this.#type = type;
+    this.#typeName = typeName;
+    this.#icon = icon;
+    this.#object = new SourceScopeRemoteObject(callFrame, stopId, plugin);
   }
 
   async getVariableValue(name: string): Promise<SDK.RemoteObject.RemoteObject|null> {
-    for (let v = 0; v < this.#objectInternal.variables.length; ++v) {
-      if (this.#objectInternal.variables[v].name !== name) {
+    for (let v = 0; v < this.#object.variables.length; ++v) {
+      if (this.#object.variables[v].name !== name) {
         continue;
       }
-      const properties = await this.#objectInternal.getAllProperties(false, false);
+      const properties = await this.#object.getAllProperties(false, false);
       if (!properties.properties) {
         continue;
       }
@@ -257,15 +257,15 @@ export class SourceScope implements SDK.DebuggerModel.ScopeChainEntry {
   }
 
   callFrame(): SDK.DebuggerModel.CallFrame {
-    return this.#callFrameInternal;
+    return this.#callFrame;
   }
 
   type(): string {
-    return this.#typeInternal;
+    return this.#type;
   }
 
   typeName(): string {
-    return this.#typeNameInternal;
+    return this.#typeName;
   }
 
   name(): string|undefined {
@@ -277,7 +277,7 @@ export class SourceScope implements SDK.DebuggerModel.ScopeChainEntry {
   }
 
   object(): SourceScopeRemoteObject {
-    return this.#objectInternal;
+    return this.#object;
   }
 
   description(): string {
@@ -285,7 +285,7 @@ export class SourceScope implements SDK.DebuggerModel.ScopeChainEntry {
   }
 
   icon(): string|undefined {
-    return this.#iconInternal;
+    return this.#icon;
   }
 
   extraProperties(): SDK.RemoteObject.RemoteObjectProperty[] {

package/front_end/models/bindings/FileUtils.ts

@@ -47,27 +47,27 @@ export interface ChunkedReader {
 
 export class ChunkedFileReader implements ChunkedReader {
   #file: File|null;
-  readonly #fileSizeInternal: number;
-  #loadedSizeInternal: number;
+  readonly #fileSize: number;
+  #loadedSize: number;
   #streamReader: ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>|null;
   readonly #chunkSize: number;
   readonly #chunkTransferredCallback: ((arg0: ChunkedReader) => void)|undefined;
   readonly #decoder: TextDecoder;
   #isCanceled: boolean;
-  #errorInternal: DOMException|null;
+  #error: DOMException|null;
   #transferFinished!: (arg0: boolean) => void;
   #output?: Common.StringOutputStream.OutputStream;
   #reader?: FileReader|null;
 
   constructor(file: File, chunkSize?: number, chunkTransferredCallback?: ((arg0: ChunkedReader) => void)) {
     this.#file = file;
-    this.#fileSizeInternal = file.size;
-    this.#loadedSizeInternal = 0;
+    this.#fileSize = file.size;
+    this.#loadedSize = 0;
     this.#chunkSize = (chunkSize) ? chunkSize : Number.MAX_VALUE;
     this.#chunkTransferredCallback = chunkTransferredCallback;
     this.#decoder = new TextDecoder();
     this.#isCanceled = false;
-    this.#errorInternal = null;
+    this.#error = null;
     this.#streamReader = null;
   }
 
@@ -99,11 +99,11 @@ export class ChunkedFileReader implements ChunkedReader {
   }
 
   loadedSize(): number {
-    return this.#loadedSizeInternal;
+    return this.#loadedSize;
   }
 
   fileSize(): number {
-    return this.#fileSizeInternal;
+    return this.#fileSize;
   }
 
   fileName(): string {
@@ -114,7 +114,7 @@ export class ChunkedFileReader implements ChunkedReader {
   }
 
   error(): DOMException|null {
-    return this.#errorInternal;
+    return this.#error;
   }
 
   private onChunkLoaded(event: Event): void {
@@ -132,8 +132,8 @@ export class ChunkedFileReader implements ChunkedReader {
     }
 
     const buffer = (this.#reader.result as ArrayBuffer);
-    this.#loadedSizeInternal += buffer.byteLength;
-    const endOfFile = this.#loadedSizeInternal === this.#fileSizeInternal;
+    this.#loadedSize += buffer.byteLength;
+    const endOfFile = this.#loadedSize === this.#fileSize;
     void this.decodeChunkBuffer(buffer, endOfFile);
   }
 
@@ -164,7 +164,7 @@ export class ChunkedFileReader implements ChunkedReader {
     this.#file = null;
     this.#reader = null;
     await this.#output.close();
-    this.#transferFinished(!this.#errorInternal);
+    this.#transferFinished(!this.#error);
   }
 
   private async loadChunk(): Promise<void> {
@@ -181,8 +181,8 @@ export class ChunkedFileReader implements ChunkedReader {
       void this.decodeChunkBuffer(value.buffer, false);
     }
     if (this.#reader) {
-      const chunkStart = this.#loadedSizeInternal;
-      const chunkEnd = Math.min(this.#fileSizeInternal, chunkStart + this.#chunkSize);
+      const chunkStart = this.#loadedSize;
+      const chunkEnd = Math.min(this.#fileSize, chunkStart + this.#chunkSize);
       const nextPart = this.#file.slice(chunkStart, chunkEnd);
       this.#reader.readAsArrayBuffer(nextPart);
     }
@@ -190,7 +190,7 @@ export class ChunkedFileReader implements ChunkedReader {
 
   private onError(event: Event): void {
     const eventTarget = (event.target as FileReader);
-    this.#errorInternal = eventTarget.error;
+    this.#error = eventTarget.error;
     this.#transferFinished(false);
   }
 }