chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/docs/contributing/settings-experiments-features.md

@@ -154,3 +154,38 @@ if (Root.Runtime.experiments.isEnabled('yourExperimentNameHere')) {
   // Experiment code here
 }
 ```
+
+## A/B Testing with Finch and `base::Feature`
+
+`base::Feature` flags can be used with Finch to conduct A/B testing by toggling feature flags for a defined percentage of users. A/B testing can be a good way of testing the waters. However, since the time to get meaningful metrics may take a long time, it shouldn't be used to get feedback on options quickly.
+
+### Advantages and Disadvantages
+
+#### Advantages
+
+*   **Straightforward Setup**: Finch configuration for A/B testing is simple, with reusable templates. Upcoming [automation tools](http://go/finch-automation-doc) will make this even easier.
+*   **Integrated Dashboard**: UMA-based Finch dashboards are available for monitoring experiments and tracking UMA histograms.
+*   **Flexible Rollout**: Rollout percentages can be dynamically managed.
+
+#### Disadvantages
+
+*   **Time-to-Meaningful Metrics**: It can take a long time to gather enough data from users, which may delay releases. This is especially true when waiting for features to reach the Stable channel.
+*   **Deployment Restrictions**: Finch changes are subject to freezes (e.g., around holidays) and cannot be deployed on weekends.
+*   **Potential Rollout Latency**: Rollouts can take from 1-2 days to several weeks to reach all users.
+*   **Launch Coordination**: A/B testing on Beta and Stable channels requires coordination with the formal launch process.
+
+### General Information
+
+#### Deployment Cycle of Finch changes: How and when do Finch changes propagate to the user?
+
+1.  A Finch CL is pushed to servers.
+2.  The client pulls the configuration (usually within hours).
+3.  The change is applied after a Chrome restart (which can take days).
+
+#### Querying Visual Logging Data for Experiments
+
+To query VE (Visual Logging) data for your experiment, you will need the decimal hashes of your study and study groups.
+
+*   **Finding Field Trial Hashes**: Use the [go/finch-hashes](http://go/finch-hashes) tool.
+*   **Study Name/ID (`name_id`)**: This is your study name plus the `StructuredMetrics` suffix (e.g., `DevToolsAiSubmenuPromptsStructuredMetrics`).
+*   **Experiment Group ID (`group_id`)**: This is the experiment group name plus the `StructuredMetrics` suffix (e.g., `LaunchStructuredMetrics`).

package/docs/styleguide/ux/components.md

@@ -123,19 +123,10 @@ button.addEventListener('click', event => onClick(event));
 
 ### Resources
 
-#### For developers
-
-##### Implementation
-
   * [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts)
-
-#### For designers
-
-##### Figma
-
-  * [Buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
+  * [Buttons Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
   * [Icon
-    buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
+    buttons Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
 
 ## Combo Boxes and Single Select menus
 
@@ -316,7 +307,7 @@ html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`;
 Usage with the imperative API:
 
 ```ts
-const someIcon = IconButton.Icon.create('some-icon-name', 'some-class');
+const someIcon = createIcon('some-icon-name', 'some-class');
 ```
 
 ## Context menus
@@ -568,3 +559,53 @@ UI.ContextMenu.registerItem({
 ```
 
 This will automatically add the "Open file" action to the context menu that appears when clicking the Elements panel's 3-dot button.
+
+
+## Cards
+
+![Card component](images/cards.png)
+
+### Usage
+
+#### Developer guidelines
+
+###### Basic card with heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card heading="Simple card">
+  <div class="content">This is a simple card.</div>
+</devtools-card>`
+```
+
+###### Card without a heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card>
+  <div class="content">This is a card without a heading.</div>
+</devtools-card>`
+```
+
+###### Card with rich heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card heading="Card with rich heading">
+  <span slot="heading-prefix">Slotted heading prefix</span>
+  <span slot="heading-suffix">Slotted heading suffix</span>
+  <div class="content">This is a card with a rich heading.</div>
+</devtools-card>`
+```
+
+### Resources
+
+*   [`devtools-card`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/cards/Card.ts)
+* [Component Documentation Example](https://chromedevtools.github.io/devtools-frontend/)
+
+* [Cards Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/Chrome-DevTools-Design-Kit?node-id=3456-939)
+
+* [Greenlines](go/chrome-devtools:cards-greenlines)

package/docs/styleguide/ux/patterns.md

@@ -4,6 +4,33 @@ There are some common UX patterns in DevTools, such as linking from one place to
 
 Please also note that while some patterns can be summarized into a [component](components.md), this guide focuses more on the end-user experience than the actual implementation.
 
+## Feature promotion
+
+### What can they do?
+
+Feature promotion helps users discover new or existing features that might be buried in the UI.
+
+### When should you use them?
+
+When you want to increase the discoverability of a feature, especially if it's new or underused.
+
+### Common patterns and their implementations
+
+#### New Badges
+
+A "new" badge, can be attached to UI elements to indicate a new or updated feature. This has been shown to significantly increase discoverability.
+
+#### Avoid nested interactions
+
+Discovery of features can be hard due to nested interactions. Try to (potentially temporarily) lift them to increase the chances for users to interact with them. For example, ..
+
+- ..by moving a feature from a nested menu (like "More tools") to the main menu.
+- ..by temporarily highlighting a feature by default at the top of the command menu, which would otherwise be buried in the long search list.
+
+### Things to consider
+
+While effective, feature promotion should be used judiciously. Overusing badges can lead to visual noise, and constantly changing the UI can be confusing for users.
+
 ## Overlays
 
 Overlays are visual aids that are superimposed on the webpage you're inspecting. These overlays provide extra information or highlight specific aspects of the page to help you with debugging and development.

package/docs/ui_engineering.md

@@ -730,7 +730,7 @@ class SomeWidget extends UI.Widget.Widget {
 }
 ```
 
-## Migrating `IconButton.Icon.Icon`
+## Migrating `Icon`
 
 Replace the imperative `Icon` creation with the declarative `<devtools-icon>` component.
 
@@ -740,7 +740,7 @@ Replace the imperative `Icon` creation with the declarative `<devtools-icon>` co
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.data = {iconName: 'checkmark', color: 'var(--icon-checkmark-green)', width: '14px', height: '14px'};
     this.contentElement.appendChild(icon);
   }

package/eslint.config.mjs

@@ -663,6 +663,7 @@ export default defineConfig([
       '@devtools/jslog-context-list': 'error',
       '@devtools/es-modules-import': 'error',
       '@devtools/html-tagged-template': 'error',
+      '@devtools/enforce-ui-kit-named-import': 'error',
       '@devtools/enforce-custom-element-definitions-location': [
         'error',
         {

package/front_end/Tests.js

@@ -858,6 +858,7 @@
   // See crbug.com/747724
   TestSuite.prototype.testOfflineNetworkConditions = async function() {
     const test = this;
+    SDK.NetworkManager.MultitargetNetworkManager.instance().requestConditions.conditionsEnabled = true;
     SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(SDK.NetworkManager.OfflineConditions);
 
     function finishRequest(request) {
@@ -1342,6 +1343,7 @@
   };
 
   TestSuite.prototype.testExtensionWebSocketOfflineNetworkConditions = async function(websocketPort) {
+    SDK.NetworkManager.MultitargetNetworkManager.instance().requestConditions.conditionsEnabled = true;
     SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(SDK.NetworkManager.OfflineConditions);
 
     // TODO(crbug.com/1263900): Currently we don't send loadingFailed for web sockets.