[RPP] Recommened which throttling settings to use

* Network: recommened the closest preset based on CruX data. If no feild
  data, recommened nothing
* CPU: always recommend 4x (for now)

The Network portion currently is not implemented for the toolbar
dropdown, as it requires some refactor to how CruX data is managed to
query it outside LiveMetricsView.

Bug: 311438203
Change-Id: I027de20bbda94c84dcd9084a26a1d9e724f17705
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6039744
Reviewed-by: Adam Raine <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -82,6 +82,12 @@ const UIStrings = {
    *@description Tooltip text for an input box that overrides navigator.hardwareConcurrency on the page
    */
   hardwareConcurrencySettingLabel: 'Override the value reported by navigator.hardwareConcurrency',
+  /**
+   * @description Text label for a selection box showing that a specific option is recommended.
+   * @example {Fast 4G} PH1
+   * @example {4x slowdown} PH1
+   */
+  recommendedThrottling: '{PH1} - recommended',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/ThrottlingManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -135,7 +141,9 @@ export class ThrottlingManager {
     return throttlingManagerInstance;
   }
 
-  decorateSelectWithNetworkThrottling(selectElement: HTMLSelectElement): NetworkThrottlingSelector {
+  decorateSelectWithNetworkThrottling(
+      selectElement: HTMLSelectElement,
+      recommendedConditions: SDK.NetworkManager.Conditions|null = null): NetworkThrottlingSelector {
     let options: (SDK.NetworkManager.Conditions|null)[] = [];
     const selector = new NetworkThrottlingSelector(populate, select, this.customNetworkConditionsSetting);
     selectElement.setAttribute(
@@ -156,7 +164,11 @@ export class ThrottlingManager {
         groupElement.label = group.title;
         for (const conditions of group.items) {
           // The title is usually an i18nLazyString except for custom values that are stored in the local storage in the form of a string.
-          const title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
+          let title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
+          if (conditions === recommendedConditions) {
+            title = i18nString(UIStrings.recommendedThrottling, {PH1: title});
+          }
+
           const option = new Option(title, title);
           UI.ARIAUtils.setLabel(option, i18nString(UIStrings.sS, {PH1: group.title, PH2: title}));
           const jslogContext = i === groups.length - 1 ?
@@ -296,7 +308,7 @@ export class ThrottlingManager {
     this.updatePanelIcon();
   }
 
-  createCPUThrottlingSelector(): UI.Toolbar.ToolbarComboBox {
+  createCPUThrottlingSelector(recommendedRate: number|null = null): UI.Toolbar.ToolbarComboBox {
     const control = new UI.Toolbar.ToolbarComboBox(
         event => this.setCPUThrottlingRate(this.cpuThrottlingRates[(event.target as HTMLSelectElement).selectedIndex]),
         i18nString(UIStrings.cpuThrottling), '', 'cpu-throttling');
@@ -305,7 +317,11 @@ export class ThrottlingManager {
 
     for (let i = 0; i < this.cpuThrottlingRates.length; ++i) {
       const rate = this.cpuThrottlingRates[i];
-      const title = rate === 1 ? i18nString(UIStrings.noThrottling) : i18nString(UIStrings.dSlowdown, {PH1: rate});
+      let title = rate === 1 ? i18nString(UIStrings.noThrottling) : i18nString(UIStrings.dSlowdown, {PH1: rate});
+      if (rate === recommendedRate) {
+        title = i18nString(UIStrings.recommendedThrottling, {PH1: title});
+      }
+
       const value = rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`;
       const option = control.createOption(title, value);
       control.addOption(option);

front_end/panels/timeline/TimelinePanel.ts

@@ -1195,7 +1195,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     const cpuThrottlingToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
     cpuThrottlingToolbar.appendText(i18nString(UIStrings.cpu));
-    this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
+    // TODO(crbug.com/311438203): need to get recommended like we do in LiveMetricsView
+    const recommendedRate = 4;
+    this.cpuThrottlingSelect =
+        MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector(recommendedRate);
     cpuThrottlingToolbar.appendToolbarItem(this.cpuThrottlingSelect);
 
     const networkThrottlingToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
@@ -1221,8 +1224,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private createNetworkConditionsSelect(): UI.Toolbar.ToolbarComboBox {
     const toolbarItem = new UI.Toolbar.ToolbarComboBox(null, i18nString(UIStrings.networkConditions));
     toolbarItem.setMaxWidth(140);
+    // TODO(crbug.com/311438203): need to get recommended like we do in LiveMetricsView
+    const recommendedConditions = null;
     MobileThrottling.ThrottlingManager.throttlingManager().decorateSelectWithNetworkThrottling(
-        toolbarItem.selectElement());
+        toolbarItem.selectElement(), recommendedConditions);
     return toolbarItem;
   }
 

front_end/panels/timeline/components/CPUThrottlingSelector.ts

@@ -6,6 +6,7 @@ import '../../../ui/components/menus/menus.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -36,6 +37,15 @@ const UIStrings = {
    * @example {2} PH1
    */
   dSlowdown: '{PH1}× slowdown',
+  /**
+   * @description Text label for a selection box showing that a specific option is recommended.
+   * @example {4x slowdown} PH1
+   */
+  recommendedThrottling: '{PH1} - recommended',
+  /**
+   * @description Text for why user should change a throttling setting.
+   */
+  recommendedThrottlingReason: 'Consider changing setting to simulate real user environments',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/CPUThrottlingSelector.ts', UIStrings);
@@ -45,13 +55,19 @@ export class CPUThrottlingSelector extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #currentRate: number;
+  #recommendedRate: number|null = null;
 
   constructor() {
     super();
     this.#currentRate = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingRate();
     this.#render();
   }
 
+  set recommendedRate(recommendedRate: number|null) {
+    this.#recommendedRate = recommendedRate;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  }
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [cpuThrottlingSelectorStyles];
     SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
@@ -75,6 +91,15 @@ export class CPUThrottlingSelector extends HTMLElement {
   }
 
   #render = (): void => {
+    let recommendedInfoEl;
+    if (this.#recommendedRate && this.#currentRate === 1) {
+      recommendedInfoEl = html`<devtools-button
+        title=${i18nString(UIStrings.recommendedThrottlingReason)}
+        .iconName=${'info'}
+        .variant=${Buttons.Button.Variant.ICON}
+      ></devtools-button>`;
+    }
+
     const selectionTitle = this.#currentRate === 1 ? i18nString(UIStrings.noThrottling) :
                                                      i18nString(UIStrings.dSlowdown, {PH1: this.#currentRate});
 
@@ -92,7 +117,11 @@ export class CPUThrottlingSelector extends HTMLElement {
             title=${i18nString(UIStrings.cpuThrottling, {PH1: selectionTitle})}
           >
           ${MobileThrottling.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.map(rate => {
-            const title = rate === 1 ? i18nString(UIStrings.noThrottling) : i18nString(UIStrings.dSlowdown, {PH1: rate});
+            let title = rate === 1 ? i18nString(UIStrings.noThrottling) : i18nString(UIStrings.dSlowdown, {PH1: rate});
+            if (rate === this.#recommendedRate) {
+              title = i18nString(UIStrings.recommendedThrottling, {PH1: title});
+            }
+
             const jslogContext = rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`;
             return html`
               <devtools-menu-item
@@ -105,6 +134,7 @@ export class CPUThrottlingSelector extends HTMLElement {
             `;
           })}
       </devtools-select-menu>
+      ${recommendedInfoEl}
     `;
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});

front_end/panels/timeline/components/LiveMetricsView.test.ts

@@ -945,6 +945,10 @@ describeWithMockConnection('LiveMetricsView', () => {
         assert.lengthOf(envRecs, 2);
         assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
         assert.match(envRecs[1].textContent!, /Slow 4G/);
+
+        const recNotice = view.shadowRoot!.querySelector('.environment-option devtools-network-throttling-selector')
+                              ?.shadowRoot!.querySelector('devtools-button');
+        assert.exists(recNotice);
       });
 
       it('should hide if no RTT data', async () => {
@@ -958,6 +962,10 @@ describeWithMockConnection('LiveMetricsView', () => {
         const envRecs = getEnvironmentRecs(view);
         assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
         assert.strictEqual(envRecs[1].textContent, 'Not enough data');
+
+        const recNotice = view.shadowRoot!.querySelector('.environment-option devtools-network-throttling-selector')
+                              ?.shadowRoot!.querySelector('devtools-button');
+        assert.notExists(recNotice);
       });
 
       it('should suggest no throttling for very low latency', async () => {
@@ -974,6 +982,10 @@ describeWithMockConnection('LiveMetricsView', () => {
         const envRecs = getEnvironmentRecs(view);
         assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
         assert.match(envRecs[1].textContent!, /too fast to simulate with throttling/);
+
+        const recNotice = view.shadowRoot!.querySelector('.environment-option devtools-network-throttling-selector')
+                              ?.shadowRoot!.querySelector('devtools-button');
+        assert.notExists(recNotice);
       });
 
       it('should ignore presets that are generally too far off', async () => {
@@ -990,6 +1002,10 @@ describeWithMockConnection('LiveMetricsView', () => {
         const envRecs = getEnvironmentRecs(view);
         assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
         assert.strictEqual(envRecs[1].textContent, 'Not enough data');
+
+        const recNotice = view.shadowRoot!.querySelector('.environment-option devtools-network-throttling-selector')
+                              ?.shadowRoot!.querySelector('devtools-button');
+        assert.notExists(recNotice);
       });
     });
 

front_end/panels/timeline/components/LiveMetricsView.ts

@@ -557,7 +557,12 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
-  #getNetworkRec(): string|null {
+  #getCpuRec(): number {
+    // TODO(cjamcl): will soon be set to recommended calibrated throttling - go/cpq:adaptive-throttling
+    return 4;
+  }
+
+  #getNetworkRecTitle(): string|null {
     const response = this.#getFieldMetricData('round_trip_time');
     if (!response?.percentiles) {
       return null;
@@ -572,6 +577,30 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       return i18nString(UIStrings.tryDisablingThrottling);
     }
 
+    const conditions = this.#getNetworkRec();
+    if (!conditions) {
+      return null;
+    }
+
+    const title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
+    return i18nString(UIStrings.tryUsingThrottling, {PH1: title});
+  }
+
+  #getNetworkRec(): SDK.NetworkManager.Conditions|null {
+    const response = this.#getFieldMetricData('round_trip_time');
+    if (!response?.percentiles) {
+      return null;
+    }
+
+    const rtt = Number(response.percentiles.p75);
+    if (!Number.isFinite(rtt)) {
+      return null;
+    }
+
+    if (rtt < RTT_MINIMUM) {
+      return null;
+    }
+
     let closestPreset: SDK.NetworkManager.Conditions|null = null;
     let smallestDiff = Infinity;
     for (const preset of MobileThrottling.ThrottlingPresets.ThrottlingPresets.networkPresets) {
@@ -593,13 +622,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       smallestDiff = diff;
     }
 
-    if (!closestPreset) {
-      return null;
-    }
-
-    const title = typeof closestPreset.title === 'function' ? closestPreset.title() : closestPreset.title;
-
-    return i18nString(UIStrings.tryUsingThrottling, {PH1: title});
+    return closestPreset;
   }
 
   #getDeviceRec(): string|null {
@@ -624,7 +647,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     const networkRecEl = document.createElement('span');
     networkRecEl.classList.add('environment-rec');
-    networkRecEl.textContent = this.#getNetworkRec() || i18nString(UIStrings.notEnoughData);
+    networkRecEl.textContent = this.#getNetworkRecTitle() || i18nString(UIStrings.notEnoughData);
 
     // clang-format off
     return html`
@@ -637,10 +660,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-cpu-throttling-selector></devtools-cpu-throttling-selector>
+        <devtools-cpu-throttling-selector .recommendedRate=${this.#getCpuRec()}></devtools-cpu-throttling-selector>
       </div>
       <div class="environment-option">
-        <devtools-network-throttling-selector></devtools-network-throttling-selector>
+        <devtools-network-throttling-selector .recommendedConditions=${this.#getNetworkRec()}></devtools-network-throttling-selector>
       </div>
       <div class="environment-option">
         <setting-checkbox

front_end/panels/timeline/components/NetworkThrottlingSelector.ts

@@ -8,6 +8,7 @@ import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -29,6 +30,15 @@ const UIStrings = {
    * @example {No throttling} PH1
    */
   networkThrottling: 'Network throttling: {PH1}',
+  /**
+   * @description Text label for a selection box showing that a specific option is recommended.
+   * @example {Fast 4G} PH1
+   */
+  recommendedThrottling: '{PH1} - recommended',
+  /**
+   * @description Text for why user should change a throttling setting.
+   */
+  recommendedThrottlingReason: 'Consider changing setting to simulate real user environments',
   /**
    * @description Text label for a menu group that disables network throttling.
    */
@@ -63,6 +73,7 @@ export class NetworkThrottlingSelector extends HTMLElement {
   #customNetworkConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
   #groups: ConditionsGroup[] = [];
   #currentConditions: SDK.NetworkManager.Conditions;
+  #recommendedConditions: SDK.NetworkManager.Conditions|null = null;
 
   constructor() {
     super();
@@ -73,6 +84,11 @@ export class NetworkThrottlingSelector extends HTMLElement {
     this.#render();
   }
 
+  set recommendedConditions(recommendedConditions: SDK.NetworkManager.Conditions|null) {
+    this.#recommendedConditions = recommendedConditions;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  }
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [networkThrottlingSelectorStyles];
     SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
@@ -155,6 +171,15 @@ export class NetworkThrottlingSelector extends HTMLElement {
     const selectionTitle = this.#getConditionsTitle(this.#currentConditions);
     const selectedConditionsKey = this.#keyForNetworkConditions(this.#currentConditions);
 
+    let recommendedInfoEl;
+    if (this.#recommendedConditions && this.#currentConditions === SDK.NetworkManager.NoThrottlingConditions) {
+      recommendedInfoEl = html`<devtools-button
+        title=${i18nString(UIStrings.recommendedThrottlingReason)}
+        .iconName=${'info'}
+        .variant=${Buttons.Button.Variant.ICON}
+      ></devtools-button>`;
+    }
+
     // clang-format off
     const output = html`
       <devtools-select-menu
@@ -172,12 +197,15 @@ export class NetworkThrottlingSelector extends HTMLElement {
           return html`
             <devtools-menu-group .name=${group.name}>
               ${group.items.map(conditions => {
+                let title = this.#getConditionsTitle(conditions);
+                if (conditions === this.#recommendedConditions) {
+                  title = i18nString(UIStrings.recommendedThrottling, {PH1: title});
+                }
+
                 const key = this.#keyForNetworkConditions(conditions);
-                const title = this.#getConditionsTitle(conditions);
                 const jslogContext = group.jslogContext || Platform.StringUtilities.toKebabCase(conditions.i18nTitleKey || title);
                 return html`
                   <devtools-menu-item
-                    title=${title}
                     .value=${key}
                     .selected=${selectedConditionsKey === key}
                     jslog=${VisualLogging.item(jslogContext).track({click: true})}
@@ -199,6 +227,7 @@ export class NetworkThrottlingSelector extends HTMLElement {
           `;
         })}
       </devtools-select-menu>
+      ${recommendedInfoEl}
     `;
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});

front_end/panels/timeline/components/cpuThrottlingSelector.css

@@ -5,11 +5,14 @@
  */
 
 :host {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   max-width: 100%;
-  min-width: 50px;
+  height: 20px;
 }
 
 devtools-select-menu {
+  min-width: 160px;
   max-width: 100%;
+  height: 20px;
 }