chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/recorder/components/StepView.ts

@@ -3,7 +3,6 @@
 // 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';
@@ -14,7 +13,7 @@ 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 {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',
@@ -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/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/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/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
    */