[Client Hints] add support override form factors

Add option to override the form factors in devtool.
devtool backend:https://crrev.com/c/6634640

Bug: 422218341
Change-Id: I66bae9371ad0ca52b722eaa263f87a5742959913
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6653397
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Victor Tan <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: Victor Tan

front_end/panels/settings/emulation/components/UserAgentClientHintsForm.test.ts

@@ -1,6 +1,7 @@
 // Copyright 2021 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import type * as Protocol from '../../../../generated/protocol.js';
 import {
   getElementsWithinComponent,
   getElementWithinComponent,
@@ -30,6 +31,7 @@ describeWithLocale('UserAgentClientHintsForm', () => {
         version: '1.2.3',
       },
     ],
+    formFactors: [] as string[],
     fullVersion: '',
     platform: '',
     platformVersion: '',
@@ -66,6 +68,65 @@ describeWithLocale('UserAgentClientHintsForm', () => {
     assert.deepEqual(brandInputValues, ['Brand3']);
   });
 
+  it('renders form factors checkboxes with initial values and updates on change', () => {
+    const component = renderUserAgentClientHintsForm();
+    const initialFormFactors: string[] = [
+      'Desktop',
+      'Mobile',
+    ];
+    component.value = {
+      metaData: {
+        ...testMetaData,
+        formFactors: initialFormFactors,
+      },
+    };
+
+    const checkboxLabels = getElementsWithinComponent(component, '.form-factor-checkbox-label', HTMLLabelElement);
+    assert.strictEqual(
+        checkboxLabels.length, EmulationComponents.UserAgentClientHintsForm.ALL_PROTOCOL_FORM_FACTORS.length,
+        'Should render all form factor checkboxes');
+
+    for (const ff of EmulationComponents.UserAgentClientHintsForm.ALL_PROTOCOL_FORM_FACTORS) {
+      const checkbox = getElementWithinComponent(component, `input[value="${ff}"]`, HTMLInputElement);
+      assert.isNotNull(checkbox, `Checkbox for ${ff} should exist`);
+      if (initialFormFactors.includes(ff)) {
+        assert.isTrue(checkbox.checked, `Checkbox for ${ff} should be checked initially`);
+      } else {
+        assert.isFalse(checkbox.checked, `Checkbox for ${ff} should be unchecked initially`);
+      }
+    }
+
+    // Simulate changing a checkbox
+    const tabletCheckbox = getElementWithinComponent(component, 'input[value=Tablet]', HTMLInputElement);
+    assert.isFalse(tabletCheckbox.checked, 'Tablet checkbox should be unchecked before click');
+    tabletCheckbox.click();
+
+    const expectedFormFactorsAfterClick: string[] = [
+      'Desktop',
+      'Mobile',
+      'Tablet',
+    ];
+    const currentMetaData =
+        component.value.metaData as (Protocol.Emulation.UserAgentMetadata & {formFactors?: string[]});
+    assert.deepEqual(
+        currentMetaData.formFactors?.sort(), expectedFormFactorsAfterClick.sort(),
+        'Form factors in component value should be updated after checkbox click');
+
+    // Simulate unchecking a checkbox
+    const mobileCheckbox = getElementWithinComponent(component, 'input[value="Mobile"]', HTMLInputElement);
+    assert.isTrue(mobileCheckbox.checked, 'Mobile checkbox should be checked before unchecking');
+    mobileCheckbox.click();
+
+    const expectedFormFactorsAfterUncheck: string[] = [
+      'Desktop',
+      'Tablet',
+    ];
+    const finalMetaData = component.value.metaData as (Protocol.Emulation.UserAgentMetadata & {formFactors?: string[]});
+    assert.deepEqual(
+        finalMetaData.formFactors?.sort(), expectedFormFactorsAfterUncheck.sort(),
+        'Form factors in component value should be updated after unchecking a checkbox');
+  });
+
   it('Submitting the form returns metaData', async () => {
     const component = renderUserAgentClientHintsForm();
     component.value = {

front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -81,10 +81,47 @@ const UIStrings = {
    */
   brandFullVersionListDelete: 'Delete brand from full version list',
 
+  /**
+   * @description Heading for the form factors section.
+   */
+  formFactorsTitle: 'Form Factors (Sec-CH-UA-Form-Factors)',
+  /**
+   * @description ARIA label for the group of form factor checkboxes.
+   */
+  formFactorsGroupAriaLabel: 'Available Form Factors',
+  /**
+   * @description Form factor option: Desktop.
+   */
+  formFactorDesktop: 'Desktop',
+  /**
+   * @description Form factor option: Automotive.
+   */
+  formFactorAutomotive: 'Automotive',
+  /**
+   * @description Form factor option: Mobile.
+   */
+  formFactorMobile: 'Mobile',
+  /**
+   * @description Form factor option: Tablet.
+   */
+  formFactorTablet: 'Tablet',
+  /**
+   * @description Form factor option: XR.
+   */
+  formFactorXR: 'XR',
+  /**
+   * @description Form factor option: EInk.
+   */
+  formFactorEInk: 'EInk',
+  /**
+   * @description Form factor option: Watch.
+   */
+  formFactorWatch: 'Watch',
+
   /**
    * @description Label for full browser version input field.
    */
-  fullBrowserVersion: 'Full browser version (Sec-CH-UA-Full-Browser-Version)',
+  fullBrowserVersion: 'Full browser version (Sec-CH-UA-Full-Version)',
   /**
    * @description Placeholder for full browser version input field.
    */
@@ -198,8 +235,19 @@ const DEFAULT_METADATA = {
   architecture: '',
   model: '',
   mobile: false,
+  formFactors: []
 };
 
+export const ALL_PROTOCOL_FORM_FACTORS: string[] = [
+  UIStrings.formFactorDesktop,
+  UIStrings.formFactorAutomotive,
+  UIStrings.formFactorMobile,
+  UIStrings.formFactorTablet,
+  UIStrings.formFactorXR,
+  UIStrings.formFactorEInk,
+  UIStrings.formFactorWatch,
+] as const;
+
 /**
  * Component for user agent client hints form, it is used in device settings panel
  * and network conditions panel. It is customizable through showMobileCheckbox and showSubmitButton.
@@ -412,6 +460,23 @@ export class UserAgentClientHintsForm extends HTMLElement {
     }
   };
 
+  #handleFormFactorCheckboxChange = (formFactorValue: string, isChecked: boolean): void => {
+    let currentFormFactors = [...(this.#metaData.formFactors || [])];
+    if (isChecked) {
+      if (!currentFormFactors.includes(formFactorValue)) {
+        currentFormFactors.push(formFactorValue);
+      }
+    } else {
+      currentFormFactors = currentFormFactors.filter(ff => ff !== formFactorValue);
+    }
+    this.#metaData = {
+      ...this.#metaData,
+      formFactors: currentFormFactors,
+    };
+    this.dispatchEvent(new ClientHintsChangeEvent());
+    this.#render();
+  };
+
   #handleInputChange = (stateKey: keyof Protocol.Emulation.UserAgentMetadata, value: string|boolean): void => {
     if (stateKey in this.#metaData) {
       this.#metaData = {
@@ -743,13 +808,48 @@ export class UserAgentClientHintsForm extends HTMLElement {
     `;
   }
 
+  #renderFormFactorsSection(): Lit.TemplateResult {
+    const checkboxElements = ALL_PROTOCOL_FORM_FACTORS.map(ffValue => {
+      const isChecked = this.#metaData.formFactors?.includes(ffValue) || false;
+      const labelStringId = `formFactor${ffValue}` as keyof typeof UIStrings;
+      const label = i18nString(UIStrings[labelStringId]);
+
+      return html`
+        <label class="form-factor-checkbox-label">
+          <input
+            type="checkbox"
+            .checked=${isChecked}
+            value=${ffValue}
+            jslog=${VisualLogging.toggle(Platform.StringUtilities.toKebabCase(ffValue)).track({
+        click: true
+      })}
+            @change=${
+          (e: Event) => this.#handleFormFactorCheckboxChange(ffValue, (e.target as HTMLInputElement).checked)}
+          />
+          ${label}
+        </label>
+      `;
+    });
+
+    return html`
+      <span class="full-row label" jslog=${VisualLogging.sectionHeader('form-factors')}>
+        ${i18nString(UIStrings.formFactorsTitle)}
+      </span>
+      <div class="full-row form-factors-checkbox-group" role="group" aria-label=${
+        i18nString(UIStrings.formFactorsGroupAriaLabel)}>
+        ${checkboxElements}
+      </div>
+    `;
+  }
+
   #render(): void {
     const {fullVersion, architecture} = this.#metaData;
     const useragentSection = this.#renderUseragent();
     const fullVersionListSection = this.#renderFullVersionList();
     const fullBrowserInput = this.#renderInputWithLabel(
         i18nString(UIStrings.fullBrowserVersion), i18nString(UIStrings.fullBrowserVersionPlaceholder),
         fullVersion || '', 'fullVersion');
+    const formFactorsSection = this.#renderFormFactorsSection();
     const platformSection = this.#renderPlatformSection();
     const architectureInput = this.#renderInputWithLabel(
         i18nString(UIStrings.architecture), i18nString(UIStrings.architecturePlaceholder), architecture,
@@ -805,10 +905,17 @@ export class UserAgentClientHintsForm extends HTMLElement {
           @submit=${this.#handleSubmit}
         >
           ${useragentSection}
+          <hr class="section-separator">
           ${fullVersionListSection}
+          <hr class="section-separator">
           ${fullBrowserInput}
+          <hr class="section-separator">
+          ${formFactorsSection}
+          <hr class="section-separator">
           ${platformSection}
+          <hr class="section-separator">
           ${architectureInput}
+          <hr class="section-separator">
           ${deviceModelSection}
           ${submitButton}
         </form>
@@ -833,6 +940,23 @@ export class UserAgentClientHintsForm extends HTMLElement {
         if (!isBrandValid) {
           return {valid: false, errorMessage: i18nString(UIStrings.notRepresentable)};
         }
+      } else if (metaDataKey === 'formFactors') {
+        const formFactors = metaDataValue as string[] | undefined;
+        if (formFactors) {
+          for (const ff of formFactors) {
+            if (!ALL_PROTOCOL_FORM_FACTORS.includes(ff)) {
+              return {
+                valid: false,
+                errorMessage: i18nString(UIStrings.notRepresentable) + ` (Invalid form factor: ${ff})`,
+              };
+            }
+            const ffError = EmulationUtils.UserAgentMetadata.validateAsStructuredHeadersString(
+                ff, i18nString(UIStrings.notRepresentable));
+            if (!ffError.valid) {
+              return ffError;
+            }
+          }
+        }
       } else {
         // otherwise, validate the value as a string
         const metaDataError = EmulationUtils.UserAgentMetadata.validateAsStructuredHeadersString(

front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -45,6 +45,25 @@
   grid-column: 1 / 5;
 }
 
+.form-factors-checkbox-group {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 6px 10px;
+}
+
+.form-factor-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+hr.section-separator {
+  grid-column: 1 / 5; /* Ensures the separator spans all columns */
+  border: none;
+  margin-top: 1px;
+}
+
 .half-row {
   grid-column: span 2;
 }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -501,6 +501,7 @@ export const knownContextValues = new Set([
   'automatic-workspace-folders',
   'automatic-workspace-folders.connect',
   'automatically-ignore-list-known-third-party-scripts',
+  'automotive',
   'auxclick',
   'avif-format-disabled',
   'avif-format-disabled-true',
@@ -1295,6 +1296,7 @@ export const knownContextValues = new Set([
   'dynamic-local-setting',
   'dynamic-range-limit',
   'dynamic-synced-setting',
+  'e-ink',
   'early-hints-headers',
   'edit',
   'edit-and-resend',
@@ -1597,6 +1599,7 @@ export const knownContextValues = new Set([
   'forced-color-adjust',
   'forced-reflow',
   'form-data',
+  'form-factors',
   'fourth',
   'fr',
   'fr-ca',
@@ -3527,6 +3530,7 @@ export const knownContextValues = new Set([
   'tab-5',
   'tab-size',
   'table-layout',
+  'tablet',
   'tag-name',
   'take-screenshot',
   'target',
@@ -3954,6 +3958,7 @@ export const knownContextValues = new Set([
   'wasm',
   'wasm-auto-stepping',
   'wasm-auto-stepping-false',
+  'watch',
   'watch-test-expression',
   'watch-test-object',
   'waterfall',
@@ -4002,6 +4007,7 @@ export const knownContextValues = new Set([
   'x-offset',
   'x-small',
   'xhr',
+  'xr',
   'xx-large',
   'xx-small',
   'xy',

test/e2e/emulation/custom-devices_test.ts

@@ -98,6 +98,15 @@ describe('Custom devices', () => {
     await tabForward();  // Focus full version.
     await typeText('1.1.2345');
 
+    // Focus on form factors checkbox
+    for (let i = 0; i < 7; ++i) {
+      await tabForward();
+      // Enable form factors Desktop and XR
+      if (i === 0 || i === 4) {
+        await pressKey('Space');
+      }
+    }
+
     await tabForward();  // Focus platform.
     await typeText('Cyborg');
 
@@ -141,6 +150,12 @@ describe('Custom devices', () => {
     assert.strictEqual(await targetTextContent('#res-architecture'), 'Bipedal');
     assert.strictEqual(await targetTextContent('#res-model'), 'C-1-Gardener');
     assert.strictEqual(await targetTextContent('#res-ua-full-version'), '1.1.2345');
+    assert.strictEqual(await targetTextContent('#res-num-full-version-list'), '1');
+    assert.strictEqual(await targetTextContent('#res-full-version-list-0-name'), 'Ready Rover');
+    assert.strictEqual(await targetTextContent('#res-full-version-list-0-version'), '2.4.9');
+    assert.strictEqual(await targetTextContent('#res-num-form-factors'), '2');
+    assert.strictEqual(await targetTextContent('#res-form-factors-0'), 'Desktop');
+    assert.strictEqual(await targetTextContent('#res-form-factors-1'), 'XR');
 
     // Focus the first item in the device list, which should be the custom entry,
     // and then click the edit button that should appear.
@@ -164,6 +179,10 @@ describe('Custom devices', () => {
     // Change the value.
     await typeText('1.1.5');
 
+    // Move to form factor Desktop checkbox, uncheck it.
+    await tabForward();
+    await pressKey('Space');
+
     // Save the changes.
     await pressKey('Enter');
 
@@ -183,6 +202,11 @@ describe('Custom devices', () => {
     assert.strictEqual(await targetTextContent('#res-architecture'), 'Bipedal');
     assert.strictEqual(await targetTextContent('#res-model'), 'C-1-Gardener');
     assert.strictEqual(await targetTextContent('#res-ua-full-version'), '1.1.5');
+    assert.strictEqual(await targetTextContent('#res-num-full-version-list'), '1');
+    assert.strictEqual(await targetTextContent('#res-full-version-list-0-name'), 'Ready Rover');
+    assert.strictEqual(await targetTextContent('#res-full-version-list-0-version'), '2.4.9');
+    assert.strictEqual(await targetTextContent('#res-num-form-factors'), '1');
+    assert.strictEqual(await targetTextContent('#res-form-factors-0'), 'XR');
   });
 
   it('can add and properly display a device with a custom resolution', async () => {