chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/front_end/panels/recorder/{components/StepView.ts → StepView.ts}

@@ -2,19 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/kit/kit.js';
-import './StepEditor.js';
-
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
-import * as Menus from '../../../ui/components/menus/menus.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import type * as Converters from '../converters/converters.js';
-import * as Models from '../models/models.js';
-
-import type {StepEditedEvent} from './StepEditor.js';
+import '../../ui/kit/kit.js';
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as Menus from '../../ui/components/menus/menus.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import type * as Converters from './converters/converters.js';
+import * as Models from './models/models.js';
+import {type StepEditedEvent, StepEditor} from './StepEditor.js';
 import stepViewStyles from './stepView.css.js';
 import {TimelineSection} from './TimelineSection.js';
 
@@ -23,99 +22,99 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Title for the step type that configures the viewport
+   * @description Title for the step type that configures the viewport.
    */
   setViewportClickTitle: 'Set viewport',
   /**
-   * @description Title for the customStep step type
+   * @description Title for the customStep step type.
    */
   customStepTitle: 'Custom step',
   /**
-   * @description Title for the click step type
+   * @description Title for the click step type.
    */
   clickStepTitle: 'Click',
   /**
-   * @description Title for the double click step type
+   * @description Title for the double click step type.
    */
   doubleClickStepTitle: 'Double click',
   /**
-   * @description Title for the hover step type
+   * @description Title for the hover step type.
    */
   hoverStepTitle: 'Hover',
   /**
-   * @description Title for the emulateNetworkConditions step type
+   * @description Title for the emulateNetworkConditions step type.
    */
   emulateNetworkConditionsStepTitle: 'Emulate network conditions',
   /**
-   * @description Title for the change step type
+   * @description Title for the change step type.
    */
   changeStepTitle: 'Change',
   /**
-   * @description Title for the close step type
+   * @description Title for the close step type.
    */
   closeStepTitle: 'Close',
   /**
-   * @description Title for the scroll step type
+   * @description Title for the scroll step type.
    */
   scrollStepTitle: 'Scroll',
   /**
-   * @description Title for the key up step type. `up` refers to the state of the keyboard key: it's released, i.e., up. It does not refer to the down arrow key specifically.
+   * @description Title for the key up step type. `up` refers to the state of the keyboard key: it’s released, i.e., up. It does not refer to the down arrow key specifically.
    */
   keyUpStepTitle: 'Key up',
   /**
-   * @description Title for the navigate step type
+   * @description Title for the navigate step type.
    */
   navigateStepTitle: 'Navigate',
   /**
-   * @description Title for the key down step type. `down` refers to the state of the keyboard key: it's pressed, i.e., down. It does not refer to the down arrow key specifically.
+   * @description Title for the key down step type. `down` refers to the state of the keyboard key: it’s pressed, i.e., down. It does not refer to the down arrow key specifically.
    */
   keyDownStepTitle: 'Key down',
   /**
-   * @description Title for the waitForElement step type
+   * @description Title for the waitForElement step type.
    */
   waitForElementStepTitle: 'Wait for element',
   /**
-   * @description Title for the waitForExpression step type
+   * @description Title for the waitForExpression step type.
    */
   waitForExpressionStepTitle: 'Wait for expression',
   /**
-   * @description Title for elements with role button
+   * @description Title for elements with role button.
    */
   elementRoleButton: 'Button',
   /**
-   * @description Title for elements with role input
+   * @description Title for elements with role input.
    */
   elementRoleInput: 'Input',
   /**
-   * @description Default title for elements without a specific role
+   * @description Default title for elements without a specific role.
    */
   elementRoleFallback: 'Element',
   /**
-   * @description The title of the button in the step's context menu that adds a new step before the current one.
+   * @description The title of the button in the step’s context menu that adds a new step before the current one.
    */
   addStepBefore: 'Add step before',
   /**
-   * @description The title of the button in the step's context menu that adds a new step after the current one.
+   * @description The title of the button in the step’s context menu that adds a new step after the current one.
    */
   addStepAfter: 'Add step after',
   /**
-   * @description The title of the button in the step's context menu that removes the step.
+   * @description The title of the button in the step’s context menu that removes the step.
    */
   removeStep: 'Remove step',
   /**
-   * @description The title of the button that open the step's context menu.
+   * @description The title of the button that opens the step’s context menu.
    */
   openStepActions: 'Open step actions',
   /**
-   * @description The title of the button in the step's context menu that adds a breakpoint.
+   * @description The title of the button in the step’s context menu that adds a breakpoint.
    */
   addBreakpoint: 'Add breakpoint',
   /**
-   * @description The title of the button in the step's context menu that removes a breakpoint.
+   * @description The title of the button in the step’s context menu that removes a breakpoint.
    */
   removeBreakpoint: 'Remove breakpoint',
   /**
-   * @description A menu item item in the context menu that expands another menu which list all
+   * @description A menu item in the context menu that expands another menu which lists all
    * the formats the user can copy the recording as.
    */
   copyAs: 'Copy as',
@@ -129,7 +128,7 @@ const UIStrings = {
   breakpoints: 'Breakpoints',
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
-    'panels/recorder/components/StepView.ts',
+    'panels/recorder/StepView.ts',
     UIStrings,
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -464,21 +463,21 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         <div class="details">
           ${
             input.step &&
-            html`<devtools-recorder-step-editor
+            html`<devtools-widget ${widget(StepEditor, {
+              step: input.step,
+              disabled: input.isPlaying,
+            })}
             class=${input.isSelected ? 'is-selected' : ''}
-            .step=${input.step}
-            .disabled=${input.isPlaying}
-            @stepedited=${input.stepEdited}>
-          </devtools-recorder-step-editor>`
+            @stepedited=${input.stepEdited}></devtools-widget>`
           }
           ${
             input.section?.causingStep &&
-            html`<devtools-recorder-step-editor
-            .step=${input.section.causingStep}
-            .isTypeEditable=${false}
-            .disabled=${input.isPlaying}
-            @stepedited=${input.stepEdited}>
-          </devtools-recorder-step-editor>`
+            html`<devtools-widget ${widget(StepEditor, {
+              step: input.section.causingStep,
+              isTypeEditable: false,
+              disabled: input.isPlaying,
+            })}
+            @stepedited=${input.stepEdited}></devtools-widget>`
           }
         </div>
         ${

package/front_end/panels/recorder/{components/TimelineSection.ts → TimelineSection.ts}

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import timelineSectionStyles from './timelineSection.css.js';
 

package/front_end/panels/recorder/models/RecorderSettings.ts

@@ -11,8 +11,8 @@ import {SelectorType} from './Schema.js';
 
 const UIStrings = {
   /**
-   * @description This string is used to generate the default name for the create recording form in the Recording panel.
-   * The format is similar to the one used by MacOS to generate names for screenshots. Both {DATE} and {TIME} are localized
+   * @description This string is used to generate the default name for the create recording form in the Recorder panel.
+   * The format is similar to the one used by macOS to generate names for screenshots. Both {DATE} and {TIME} are localized
    * using the current locale.
    * @example {2022-08-04} DATE
    * @example {10:32:48} TIME

package/front_end/panels/recorder/recorder-meta.ts

@@ -10,27 +10,27 @@ import type * as Recorder from './recorder.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Recorder Panel
+   * @description Title of the Recorder panel.
    */
   recorder: 'Recorder',
   /**
-   * @description Title of the Recorder Panel
+   * @description Command for showing the Recorder panel.
    */
   showRecorder: 'Show Recorder',
   /**
-   * @description Title of start/stop recording action in command menu
+   * @description Title of the start/stop recording action in the command menu.
    */
-  startStopRecording: 'Start/Stop recording',
+  startStopRecording: 'Start/stop recording',
   /**
-   * @description Title of create a new recording action in command menu
+   * @description Title of the create new recording action in the command menu.
    */
   createRecording: 'Create a new recording',
   /**
-   * @description Title of start a new recording action in command menu
+   * @description Title of the replay recording action in the command menu.
    */
   replayRecording: 'Replay recording',
   /**
-   * @description Title for toggling code action in command menu
+   * @description Title for the toggle code action in the command menu.
    */
   toggleCode: 'Toggle code view',
 } as const;

package/front_end/panels/recorder/recorder.ts

@@ -2,8 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as ControlButton from './ControlButton.js';
+import * as CreateRecordingView from './CreateRecordingView.js';
 import * as RecorderController from './RecorderController.js';
 import * as RecorderEvents from './RecorderEvents.js';
 import * as RecorderPanel from './RecorderPanel.js';
+import * as RecordingListView from './RecordingListView.js';
+import * as RecordingView from './RecordingView.js';
+import * as ReplaySection from './ReplaySection.js';
+import * as SelectorPicker from './SelectorPicker.js';
+import * as StepEditor from './StepEditor.js';
+import * as StepView from './StepView.js';
+import * as TimelineSection from './TimelineSection.js';
 
-export {RecorderController, RecorderEvents, RecorderPanel};
+export {
+  ControlButton,
+  CreateRecordingView,
+  RecorderController,
+  RecorderEvents,
+  RecorderPanel,
+  RecordingListView,
+  RecordingView,
+  ReplaySection,
+  SelectorPicker,
+  StepEditor,
+  StepView,
+  TimelineSection,
+};

package/front_end/panels/recorder/{components/recordingView.css → recordingView.css}

@@ -356,7 +356,7 @@
     border-bottom: 1px solid var(--sys-color-divider);
   }
 
-  devtools-recorder-extension-view {
+  .recorder-extension-view {
     flex: 1;
   }
 }

package/front_end/panels/recorder/util/util.ts

@@ -23,3 +23,116 @@ class InjectedScript {
 }
 
 export {DEVTOOLS_RECORDER_WORLD_NAME, InjectedScript, isDebugBuild, SharedObject};
+
+export const mod = (a: number, n: number): number => {
+  return ((a % n) + n) % n;
+};
+
+export function assert<T>(
+    predicate: T,
+    message = 'Assertion failed!',
+    ): asserts predicate {
+  if (!predicate) {
+    throw new Error(message);
+  }
+}
+
+export type Keys<T> = T extends T ? keyof T : never;
+
+export type RequiredKeys<T> = {
+  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? never : K;
+}[keyof T];
+
+export type OptionalKeys<T> = {
+  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? K : never;
+}[keyof T];
+
+export type DeepImmutable<T> = {
+  readonly[K in keyof T]: DeepImmutable<T[K]>;
+};
+
+export type DeepMutable<T> = {
+  -readonly[K in keyof T]: DeepMutable<T[K]>;
+};
+
+export type DeepPartial<T> = {
+  [K in keyof T]?: DeepPartial<Exclude<T[K], undefined>>;
+};
+
+export type Mutable<T> = {
+  -readonly[K in keyof T]: T[K];
+};
+
+export const deepFreeze = <T extends object>(object: T): DeepImmutable<T> => {
+  for (const name of Reflect.ownKeys(object)) {
+    const value = object[name as keyof T];
+    if ((value && typeof value === 'object') || typeof value === 'function') {
+      deepFreeze(value);
+    }
+  }
+  return Object.freeze(object);
+};
+
+export class InsertAssignment<T> {
+  value: T;
+  constructor(value: T) {
+    this.value = value;
+  }
+}
+
+export class ArrayAssignments<T> {
+  value: Record<number, T>;
+  constructor(value: Record<number, T>) {
+    this.value = value;
+  }
+}
+
+export type Assignments<T> = T extends Readonly<Array<infer R>>?
+    R[]|ArrayAssignments<Assignments<R>|InsertAssignment<R>>:
+    {[K in keyof T]: Assignments<T[K]>};
+
+export const immutableDeepAssign = <T>(
+    object: DeepImmutable<T>,
+    assignments: DeepImmutable<DeepPartial<Assignments<T>>>,
+    ): DeepImmutable<T> => {
+  if (assignments instanceof ArrayAssignments) {
+    assert(Array.isArray(object), `Expected an array. Got ${typeof object}.`);
+    const updatedObject = [...object] as Mutable<typeof object>;
+    const keys = Object.keys(assignments.value)
+                     .sort(
+                         (a, b) => Number(b) - Number(a),
+                         ) as Array<keyof typeof updatedObject>;
+    for (const key of keys) {
+      const update = assignments.value[Number(key)];
+      if (update === undefined) {
+        updatedObject.splice(Number(key), 1);
+      } else if (update instanceof InsertAssignment) {
+        updatedObject.splice(Number(key), 0, update.value);
+      } else {
+        updatedObject[Number(key)] = immutableDeepAssign(
+            updatedObject[key],
+            update,
+        );
+      }
+    }
+    return Object.freeze(updatedObject);
+  }
+  if (typeof assignments === 'object' && !Array.isArray(assignments)) {
+    assert(!Array.isArray(object), 'Expected an object. Got an array.');
+    const updatedObject = {...object} as Mutable<typeof object>;
+    const keys = Object.keys(assignments) as Array<keyof typeof assignments&keyof typeof updatedObject>;
+    for (const key of keys) {
+      const update = assignments[key];
+      if (update === undefined) {
+        delete updatedObject[key];
+      } else {
+        updatedObject[key] = immutableDeepAssign(
+            updatedObject[key],
+            update as typeof updatedObject[typeof key],
+        );
+      }
+    }
+    return Object.freeze(updatedObject);
+  }
+  return assignments as DeepImmutable<T>;
+};

package/front_end/panels/screencast/ScreencastApp.ts

@@ -12,7 +12,7 @@ import {ScreencastView} from './ScreencastView.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over largeicon phone button in Screencast App of the Remote Devices tab when toggling screencast
+   * @description Tooltip text that appears when hovering over the toggle screencast button in the Screencast app of the Remote devices tab when toggling screencast.
    */
   toggleScreencast: 'Toggle screencast',
 } as const;

package/front_end/panels/screencast/ScreencastView.ts

@@ -18,39 +18,39 @@ import screencastViewStyles from './screencastView.css.js';
 
 const UIStrings = {
   /**
-   * @description Accessible alt text for the screencast canvas rendering of the debug target webpage
+   * @description Accessible alt text for the Screencast canvas rendering of the debug target webpage.
    */
   screencastViewOfDebugTarget: 'Screencast view of debug target',
   /**
-   * @description Glass pane element text content in Screencast View of the Remote Devices tab when toggling screencast
+   * @description Glass pane element text content in the Screencast view of the Remote devices tab when toggling screencast.
    */
   theTabIsInactive: 'The tab is inactive',
   /**
-   * @description Glass pane element text content in Screencast View of the Remote Devices tab when toggling screencast
+   * @description Glass pane element text content in the Screencast view of the Remote devices tab when profiling is in progress.
    */
   profilingInProgress: 'Profiling in progress',
   /**
-   * @description Accessible text for the screencast back button
+   * @description Accessible label for the Screencast back button.
    */
-  back: 'back',
+  back: 'Back',
   /**
-   * @description Accessible text for the screencast forward button
+   * @description Accessible label for the Screencast forward button.
    */
-  forward: 'forward',
+  forward: 'Forward',
   /**
-   * @description Accessible text for the screencast reload button
+   * @description Accessible label for the Screencast reload button.
    */
-  reload: 'reload',
+  reload: 'Reload',
   /**
-   * @description Accessible text for the address bar in screencast view
+   * @description Accessible label for the address bar in the Screencast view.
    */
   addressBar: 'Address bar',
   /**
-   * @description Accessible text for the touch emulation button.
+   * @description Accessible label for the touch input button in the Screencast view.
    */
   touchInput: 'Use touch',
   /**
-   * @description Accessible text for the mouse emulation button.
+   * @description Accessible label for the mouse input button in the Screencast view.
    */
   mouseInput: 'Use mouse',
 } as const;

package/front_end/panels/search/SearchResultsPane.ts

@@ -14,17 +14,17 @@ import type {SearchResult} from './SearchScope.js';
 
 const UIStrings = {
   /**
-   * @description Accessibility label for number of matches in each file in search results pane
+   * @description Accessibility label for the number of matches in each file in the search results view of the Search panel.
    * @example {2} PH1
    */
-  matchesCountS: 'Matches Count {PH1}',
+  matchesCountS: 'Matches count {PH1}',
   /**
-   * @description Search result label for results in the Search tool
+   * @description Label for search results in the Search panel.
    * @example {2} PH1
    */
   lineS: 'Line {PH1}',
   /**
-   * @description Text in Search Results Pane of the Search tab
+   * @description Text in the search results view of the Search panel.
    * @example {2} PH1
    */
   showDMore: 'Show {PH1} more',

package/front_end/panels/search/SearchView.ts

@@ -20,87 +20,87 @@ import searchViewStyles from './searchView.css.js';
 
 const UIStrings = {
   /**
-   * @description Placeholder text of a search bar
+   * @description Placeholder text of a search bar.
    */
   find: 'Find',
   /**
-   * @description Tooltip text on a toggle to enable search by matching case of the input
+   * @description Tooltip text on a toggle to enable search by matching case of the input.
    */
   enableCaseSensitive: 'Enable case sensitive search',
   /**
-   * @description Tooltip text on a toggle to disable search by matching case of the input
+   * @description Tooltip text on a toggle to disable search by matching case of the input.
    */
   disableCaseSensitive: 'Disable case sensitive search',
   /**
-   * @description Tooltip text on a toggle to enable searching with regular expression
+   * @description Tooltip text on a toggle to enable searching with regular expressions.
    */
   enableRegularExpression: 'Enable regular expressions',
   /**
-   * @description Tooltip text on a toggle to disable searching with regular expression
+   * @description Tooltip text on a toggle to disable searching with regular expressions.
    */
   disableRegularExpression: 'Disable regular expressions',
   /**
-   * @description Text to refresh the page
+   * @description Text to refresh the search.
    */
   refresh: 'Refresh',
   /**
-   * @description Tooltip text to clear the search input field
+   * @description Tooltip text to clear the search input field.
    */
   clearInput: 'Clear',
   /**
-   * @description Text to clear content
+   * @description Text to clear search results.
    */
   clear: 'Clear search',
   /**
-   * @description Search message element text content in Search View of the Search tab
+   * @description Message element text content during search in the search view of the Search panel.
    */
   indexing: 'Indexing…',
   /**
-   * @description Text to indicate the searching is in progress
+   * @description Text to indicate that searching is in progress.
    */
   searching: 'Searching…',
   /**
-   * @description Text in Search View of the Search tab
+   * @description Text in the search view of the Search panel when indexing is interrupted.
    */
   indexingInterrupted: 'Indexing interrupted.',
   /**
-   * @description Search results message element text content in Search View of the Search tab
+   * @description Message element text content for search results in the search view of the Search panel.
    */
   foundMatchingLineInFile: 'Found 1 matching line in 1 file.',
   /**
-   * @description Search results message element text content in Search View of the Search tab
+   * @description Message element text content for search results in the search view of the Search panel.
    * @example {2} PH1
    */
   foundDMatchingLinesInFile: 'Found {PH1} matching lines in 1 file.',
   /**
-   * @description Search results message element text content in Search View of the Search tab
+   * @description Message element text content for search results in the search view of the Search panel.
    * @example {2} PH1
    * @example {2} PH2
    */
   foundDMatchingLinesInDFiles: 'Found {PH1} matching lines in {PH2} files.',
   /**
-   * @description Search results message element text content in Search View of the Search tab
+   * @description Message element text content for search results in the search view of the Search panel.
    */
   noMatchesFound: 'No matches found',
   /**
-   * @description Search results message element text content in Search View of the Search tab
+   * @description Message element text content for search results in the search view of the Search panel.
    */
   nothingMatchedTheQuery: 'Nothing matched your search query',
   /**
-   * @description Text in Search View of the Search tab
+   * @description Text in the search view of the Search panel when search finishes.
    */
   searchFinished: 'Search finished.',
   /**
-   * @description Text in Search View of the Search tab
+   * @description Text in the search view of the Search panel when search is interrupted.
    */
   searchInterrupted: 'Search interrupted.',
   /**
-   * @description Text in Search View of the Search tab if user hasn't started the search
+   * @description Text in the search view of the Search panel if the user hasn’t started a search.
    * @example {Enter} PH1
    */
   typeAndPressSToSearch: 'Type and press {PH1} to search',
   /**
-   * @description Text in Search view of the Search tab if user hasn't started the search
+   * @description Text in the search view of the Search panel if the user hasn’t started a search.
    */
   noSearchResult: 'No search results',
 } as const;

package/front_end/panels/security/SecurityModel.ts

@@ -9,21 +9,21 @@ import * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
   /**
-   * @description Text in Security Panel of the Security panel
+   * @description Summary text displayed in the overview of the Security panel when the page's security state is unknown.
    */
   theSecurityOfThisPageIsUnknown: 'The security of this page is unknown.',
   /**
-   * @description Text in Security Panel of the Security panel
+   * @description Summary text displayed in the overview of the Security panel when the page isn't secure.
    */
-  thisPageIsNotSecure: 'This page is not secure.',
+  thisPageIsNotSecure: 'This page isn’t secure.',
   /**
-   * @description Text in Security Panel of the Security panel
+   * @description Summary text displayed in the overview of the Security panel when the page is secure with valid HTTPS.
    */
   thisPageIsSecureValidHttps: 'This page is secure (valid HTTPS).',
   /**
-   * @description Text in Security Panel of the Security panel
+   * @description Summary text displayed in the overview of the Security panel when the page isn't secure due to broken HTTPS.
    */
-  thisPageIsNotSecureBrokenHttps: 'This page is not secure (broken HTTPS).',
+  thisPageIsNotSecureBrokenHttps: 'This page isn’t secure (broken HTTPS).',
   /**
    * @description Description of an SSL cipher that contains a separate (bulk) cipher and MAC.
    * @example {AES_256_CBC} PH1
@@ -31,7 +31,7 @@ const UIStrings = {
    */
   cipherWithMAC: '{PH1} with {PH2}',
   /**
-   * @description Description of an SSL Key and its Key Exchange Group.
+   * @description Description of an SSL key and its key exchange group.
    * @example {ECDHE_RSA} PH1
    * @example {X25519} PH2
    */