OT Creation allows for the selection of WebDXFeature use counters (client-side) (#4313)

* OT creation allows WebDXFeature use counters

* wording change

* Update chromedash-ot-creation-page.ts

client-src/elements/chromedash-form-field.ts

@@ -353,6 +353,7 @@ export class ChromedashFormField extends LitElement {
               id="id_${this.name}_${value}"
               name="${fieldName}"
               value="${value}"
+              .checked="${value === fieldValue}"
               type="radio"
               required
               @change=${this.handleFieldUpdated}

client-src/elements/chromedash-ot-creation-page.ts

@@ -1,4 +1,4 @@
-import {LitElement, css, html, nothing} from 'lit';
+import {LitElement, TemplateResult, css, html, nothing} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {ref} from 'lit/directives/ref.js';
 import {FORM_STYLES} from '../css/forms-css.js';
@@ -6,7 +6,11 @@ import {SHARED_STYLES} from '../css/shared-css.js';
 import {Feature, StageDict} from '../js-src/cs-client.js';
 import './chromedash-form-field.js';
 import {ORIGIN_TRIAL_CREATION_FIELDS} from './form-definition.js';
-import {OT_SETUP_STATUS_OPTIONS, VOTE_OPTIONS} from './form-field-enums.js';
+import {
+  OT_SETUP_STATUS_OPTIONS,
+  VOTE_OPTIONS,
+  USE_COUNTER_TYPE_WEBFEATURE,
+} from './form-field-enums.js';
 import {ALL_FIELDS} from './form-field-specs.js';
 import {
   FieldInfo,
@@ -24,6 +28,16 @@ export class ChromedashOTCreationPage extends LitElement {
       ...SHARED_STYLES,
       ...FORM_STYLES,
       css`
+        .choices label {
+          font-weight: bold;
+        }
+        .choices div {
+          margin-top: 1em;
+        }
+        .choices p {
+          margin: 0.5em 1.5em 1em;
+        }
+
         #overlay {
           position: fixed;
           width: 100%;
@@ -80,6 +94,8 @@ export class ChromedashOTCreationPage extends LitElement {
   @state()
   isDeprecationTrial = false;
   @state()
+  webfeatureUseCounterType: Number = USE_COUNTER_TYPE_WEBFEATURE;
+  @state()
   stage!: StageDict;
 
   connectedCallback() {
@@ -109,6 +125,10 @@ export class ChromedashOTCreationPage extends LitElement {
     }
   }
 
+  handleUseCounterTypeUpdate(event) {
+    this.webfeatureUseCounterType = parseInt(event.detail.value);
+  }
+
   fetchData() {
     this.loading = true;
     Promise.all([
@@ -324,10 +344,11 @@ export class ChromedashOTCreationPage extends LitElement {
         }
       });
     }
-    if (this.isDeprecationTrial) {
+    const useCounterField = this.fieldValues.find(
-      this.fieldValues.find(
       fv => fv.name === 'ot_webfeature_use_counter'
-      )!.touched = false;
+    );
+    if (this.isDeprecationTrial) {
+      useCounterField!.touched = false;
     }
 
     const featureSubmitBody = formatFeatureChanges(
@@ -335,7 +356,15 @@ export class ChromedashOTCreationPage extends LitElement {
       this.featureId
     );
     // We only need the single stage changes.
-    const stageSubmitBody = featureSubmitBody.stages[0];
+    const stageSubmitBody = featureSubmitBody.stages[0] as Object;
+
+    // Add on the appropriate use counter prefix.
+    const useCounterPrefix =
+      this.webfeatureUseCounterType === USE_COUNTER_TYPE_WEBFEATURE
+        ? ''
+        : 'WebDXFeature::';
+    stageSubmitBody['ot_webfeature_use_counter'].value =
+      `${useCounterPrefix}${stageSubmitBody['ot_webfeature_use_counter'].value}`;
 
     this.submitting = true;
     window.csClient
@@ -417,7 +446,24 @@ export class ChromedashOTCreationPage extends LitElement {
         fieldInfo.isApprovalsField ||
         fieldInfo.name === 'ot_webfeature_use_counter';
 
+      let additionalInfo: TemplateResult | symbol = nothing;
+      if (fieldInfo.name == 'ot_webfeature_use_counter') {
+        additionalInfo = html`
+          <chromedash-form-field
+            name="ot_webfeature_use_counter__type"
+            index=${i}
+            .value=${this.webfeatureUseCounterType}
+            .fieldValues=${this.fieldValues}
+            ?shouldFadeIn=${shouldFadeIn}
+            @form-field-update="${this.handleUseCounterTypeUpdate}"
+            class="choices"
+          >
+          </chromedash-form-field>
+        `;
+      }
+
       return html`
+        ${additionalInfo}
         <chromedash-form-field
           name=${fieldInfo.name}
           index=${i}

client-src/elements/form-field-enums.ts

@@ -92,6 +92,34 @@ export const ROLLOUT_IMPACT_DISPLAYNAME: Record<number, string> = {
   3: 'High', // IMPACT_HIGH
 };
 
+export const USE_COUNTER_TYPE_WEBFEATURE = 0;
+export const USE_COUNTER_TYPE_WEBDXFEATURE = 1;
+export const WEBFEATURE_USE_COUNTER_TYPES: Record<
+  string,
+  [number, string, string | HTMLTemplateResult]
+> = {
+  WEBFEATURE: [
+    USE_COUNTER_TYPE_WEBFEATURE,
+    'WebFeature',
+    html`The feature's use counter has been added to
+      <a
+        target="_blank"
+        href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/mojom/use_counter/metrics/web_feature.mojom"
+        >web_feature.mojom</a
+      >.`,
+  ],
+  WEBDXFEATURE: [
+    USE_COUNTER_TYPE_WEBDXFEATURE,
+    'WebDXFeature',
+    html`The feature's use counter has been added to
+      <a
+        target="_blank"
+        href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/mojom/use_counter/metrics/webdx_feature.mojom"
+        >webdx_feature.mojom</a
+      >.`,
+  ],
+};
+
 // FEATURE_TYPES object is organized as [intValue, stringLabel, description],
 // the descriptions are used only for the descriptions of feature_type_radio_group
 export const FEATURE_TYPES_WITHOUT_ENTERPRISE: Record<

client-src/elements/form-field-specs.ts

@@ -21,6 +21,7 @@ import {
   VENDOR_VIEWS_COMMON,
   VENDOR_VIEWS_GECKO,
   WEB_DEV_VIEWS,
+  WEBFEATURE_USE_COUNTER_TYPES,
 } from './form-field-enums';
 import {unambiguousStageName} from './utils';
 
@@ -1519,13 +1520,28 @@ export const ALL_FIELDS: Record<string, Field> = {
     label: 'WebFeature UseCounter name',
     help_text: html` For measuring usage, this must be a single named value from
       the WebFeature enum, e.g. kWorkerStart. The use counter must be landed in
+      either
       <a
         target="_blank"
         href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/mojom/use_counter/metrics/web_feature.mojom"
         >web_feature.mojom</a
+      >
+      or
+      <a
+        target="_blank"
+        href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/mojom/use_counter/metrics/webdx_feature.mojom"
+        >webdx_feature.mojom</a
       >. Not required for deprecation trials.`,
   },
 
+  ot_webfeature_use_counter__type: {
+    type: 'radios',
+    label: 'Use counter type',
+    choices: WEBFEATURE_USE_COUNTER_TYPES,
+    help_text: html`Which type of use counter the feature is using. This can be
+    determined by which file the use counter is defined in.`,
+  },
+
   ot_require_approvals: {
     type: 'checkbox',
     initial: false,