Project import generated by Copybara

PiperOrigin-RevId: 731929305

data/localization/en.xlb

@@ -71,6 +71,7 @@
     <msg name="s3870e706a2084c79" desc="Validation error">Invalid value for key <ph name="0">${key}</ph>: <ph name="1">${value}</ph></msg>
     <msg name="sd4801ff24e6e00e1" desc="Validation error">No value for key: <ph name="0">${key}</ph></msg>
     <msg name="sb4a18873f72e8f57" desc="Validation error">Invalid size: <ph name="0">${size}</ph></msg>
+    <msg name="s49b92d61c8e9e116" desc="Validation error.">Please specify a valid URL.</msg>
     <msg name="sab590a46db406ca7" desc="Validation error.">Please specify a valid ad unit path.</msg>
     <msg name="s85ed67972e8ca8a4" desc="Whether user consent is required to access local storage.">Require local storage consent</msg>
   </messages>

data/localization/test.xlb

@@ -71,6 +71,7 @@
     <msg name="s3870e706a2084c79" desc="Validation error">Î́n̂v̂́âl̂́îd̂́ v̂́âl̂́ûế f̂́ôr̂́ k̂́êŷ́ <ph name="0">${key}</ph>: <ph name="1">${value}</ph></msg>
     <msg name="sd4801ff24e6e00e1" desc="Validation error">N̂́ô v̂́âl̂́ûế f̂́ôr̂́ k̂́êŷ́: <ph name="0">${key}</ph></msg>
     <msg name="sb4a18873f72e8f57" desc="Validation error">Î́n̂v̂́âl̂́îd̂́ ŝ́îẑ́ê: <ph name="0">${size}</ph></msg>
+    <msg name="s49b92d61c8e9e116" desc="Validation error.">P̂́l̂ếâŝ́ê ŝ́p̂ếĉî́f̂ŷ́ ấ v̂́âl̂́îd̂́ Û́R̂L̂́.</msg>
     <msg name="sab590a46db406ca7" desc="Validation error.">P̂́l̂ếâŝ́ê ŝ́p̂ếĉî́f̂ŷ́ ấ v̂́âl̂́îd̂́ ấd̂ û́n̂î́t̂ p̂́ât̂́ĥ.</msg>
     <msg name="s85ed67972e8ca8a4" desc="Whether user consent is required to access local storage.">R̂́êq̂́ûî́r̂ế l̂́ôĉ́âl̂́ ŝ́t̂ốr̂ấĝế ĉ́ôn̂́ŝến̂t̂́</msg>
   </messages>

src/components/configurator/page-settings.ts

@@ -16,23 +16,44 @@
 
 import '../ui-controls/config-section';
 import '../ui-controls/configurator-checkbox';
+import '../ui-controls/configurator-text-field';
 import '../ui-controls/targeting-input';
 
-import {localized} from '@lit/localize';
+import {localized, msg} from '@lit/localize';
 import {html, LitElement} from 'lit';
 import {customElement, property, query, queryAll} from 'lit/decorators.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
 import {
   SamplePageConfig,
   SamplePrivacyConfig,
 } from '../../model/sample-config.js';
 import {
+  adSenseAttributeConfigNames,
   configNames,
   pageConfigNames,
   privacyConfigNames,
 } from '../../model/settings.js';
+import {ConfiguratorTextField} from '../ui-controls/configurator-text-field.js';
 import {TargetingInput} from '../ui-controls/targeting-input.js';
 
+const strings = {
+  validationErrorPageUrl: () =>
+    msg('Please specify a valid URL.', {desc: 'Validation error.'}),
+};
+
+// Page URL validation
+const URL_PROTOCOL_PATTERN = 'https?:\\/\\/';
+const URL_DOMAIN_PATTERN = '[A-Za-z\\d\\.\\-]';
+const URL_TLD_PATTERN = '\\.[A-Za-z]{2,}';
+const URL_PATH_PATTERN = '\\/[\\w\\d\\(\\)@:%\\+\\.~#?&\\/=]*';
+const PAGE_URL_VALIDATION_PATTERN = `${URL_PROTOCOL_PATTERN}(${
+  URL_DOMAIN_PATTERN
+})+(${URL_TLD_PATTERN})+(${URL_PATH_PATTERN})?`;
+const PAGE_URL_VALIDATION_REGEX = new RegExp(
+  `^${PAGE_URL_VALIDATION_PATTERN}$`,
+);
+
 /**
  * Page-level configurator settings.
  */
@@ -43,6 +64,8 @@ export class PageSettings extends LitElement {
   @queryAll('.privacy configurator-checkbox')
   private privacySettings!: HTMLInputElement[];
   @query('targeting-input') private targetingInput!: TargetingInput;
+  @query('configurator-text-field#pageUrl')
+  private pageUrl!: ConfiguratorTextField;
 
   /**
    * Gets the active page-level configuration.
@@ -60,6 +83,13 @@ export class PageSettings extends LitElement {
 
     this.config.targeting = this.targetingInput.config;
 
+    this.config.adsense = this.config.adsense || {};
+    this.config.adsense.pageUrl = PAGE_URL_VALIDATION_REGEX.test(
+      this.pageUrl.value,
+    )
+      ? this.pageUrl.value
+      : undefined;
+
     // Fire an event to let the configurator know a value has changed.
     this.dispatchEvent(
       new CustomEvent('update', {bubbles: true, composed: true}),
@@ -76,7 +106,18 @@ export class PageSettings extends LitElement {
   }
 
   private renderGeneralSettings() {
-    return this.renderCheckbox('sra', pageConfigNames.sra!(), this.config.sra);
+    return html`
+      ${this.renderCheckbox('sra', pageConfigNames.sra!(), this.config.sra)}
+      <configurator-text-field
+        id="pageUrl"
+        label="${adSenseAttributeConfigNames.pageUrl()}"
+        error-text="${strings.validationErrorPageUrl()}"
+        pattern="${PAGE_URL_VALIDATION_PATTERN}"
+        placeholder="https://www.example.com"
+        value="${ifDefined(this.config.adsense?.pageUrl)}"
+        @update="${this.handleUpdate}"
+      ></configurator-text-field>
+    `;
   }
 
   private renderPrivacySettings() {

src/components/configurator/slot-settings.ts

@@ -152,16 +152,7 @@ export class SlotSettings extends LitElement {
         display: flex;
         flex-flow: row wrap;
         grid-area: settings;
-        padding: 5px 0 0 10px;
-      }
-
-      .slot-settings configurator-format-select,
-      .slot-settings configurator-text-field {
-        padding: 5px 0;
-      }
-
-      .slot-settings slot-size-input {
-        padding-block-start: 5px;
+        padding: 0 0 0 10px;
       }
 
       configurator-checkbox[name='storage'] {

src/components/ui-controls/configurator-select.ts

@@ -75,6 +75,7 @@ export class ConfiguratorSelect extends LitElement {
     }
 
     md-filled-select {
+      padding: 0 0 8px;
       width: 100%;
 
       --md-filled-field-leading-space: 10px;

src/components/ui-controls/configurator-text-field.ts

@@ -35,6 +35,7 @@ export class ConfiguratorTextField extends LitElement {
     }
 
     md-filled-text-field {
+      padding: 0 0 8px;
       width: 100%;
 
       --md-filled-field-leading-space: 10px;

src/generated/locales/test.ts

@@ -53,6 +53,7 @@ export const templates = {
   s4535f519744108bf: 'Ốût̂́p̂û́t̂ f̂́ôr̂́m̂ất̂',
   s4661d2a8c1259e58: 'Ŝ́âm̂́p̂l̂́ê ấd̂ŝ́ (ốût̂́-ốf̂-p̂́âĝ́ê)',
   s48390e2c954ba495: 'F̂́îx̂́êd̂́-ŝ́îẑ́ê ấd̂ (100x̂́100)',
+  s49b92d61c8e9e116: 'P̂́l̂ếâŝ́ê ŝ́p̂ếĉî́f̂ŷ́ ấ v̂́âl̂́îd̂́ Û́R̂L̂́.',
   s53a96edcf36221b2: 'Ấd̂ ŝ́l̂ốt̂ ŝ́îẑ́êŝ́',
   s5bf3f3d517569ebd: 'Ấn̂ĉ́ĥốr̂ ấd̂ (b̂́ôt̂́t̂ốm̂)',
   s5e13187e6961d8b1: '// D̂́êf̂́în̂́ê ốût̂́-ốf̂-p̂́âĝ́ê ŝ́l̂ốt̂ŝ́.',

test/codegen-test-data/configs/adsense-attributes.json

@@ -0,0 +1,22 @@
+{
+  "slots": [
+    {
+      "adUnit": "/123/abc",
+      "size": [
+        300,
+        250
+      ],
+      "targeting": [
+        {
+          "key": "slot",
+          "value": "blue"
+        }
+      ]
+    }
+  ],
+  "page": {
+    "adsense": {
+      "pageUrl": "https://www.google.com"
+    }
+  }
+}

test/web/page-settings.spec.ts

@@ -15,9 +15,14 @@
  */
 
 import {SampleConfig, SamplePageConfig} from '../../src/model/sample-config.js';
-import {pageConfigNames, privacyConfigNames} from '../../src/model/settings.js';
+import {
+  adSenseAttributeConfigNames,
+  configNames,
+  pageConfigNames,
+  privacyConfigNames,
+} from '../../src/model/settings.js';
 
-import {expect, test} from './fixtures/configurator.js';
+import {Configurator, expect, test} from './fixtures/configurator.js';
 
 /**
  * Maps page-level setting labels to the GPT API functions/properties they
@@ -178,3 +183,80 @@ test.describe('Configure targeting', () => {
     });
   });
 });
+
+test.describe('Page URL', () => {
+  test.describe('Prepopulation', () => {
+    const testUrl = 'https://one.two.test.co.uk';
+
+    test.use({
+      config: {
+        page: {adsense: {pageUrl: testUrl}},
+        slots: [],
+      },
+    });
+
+    test('Prepopulated page URL appears in code', async ({
+      configurator,
+      page,
+    }) => {
+      const pageUrlInput = configurator.getTextField(
+        adSenseAttributeConfigNames.pageUrl(),
+        configurator.getConfigSection(configNames.page()),
+      );
+
+      await expect(pageUrlInput).toHaveValue(testUrl);
+      await expect(page.locator('gpt-playground')).toContainText('page_url');
+      await expect(page.locator('gpt-playground')).toContainText(testUrl);
+    });
+  });
+
+  test.describe('Validation', () => {
+    async function validatePageUrl(
+      configurator: Configurator,
+      url: string,
+      shouldBeValid = true,
+    ): Promise<void> {
+      const pageUrlInput = configurator.getTextField(
+        adSenseAttributeConfigNames.pageUrl(),
+        configurator.getConfigSection(configNames.page()),
+      );
+      await pageUrlInput.fill(url);
+
+      return shouldBeValid
+        ? expect(pageUrlInput).toBeValid()
+        : expect(pageUrlInput).not.toBeValid();
+    }
+
+    test('Protocol is required', async ({configurator}) => {
+      await validatePageUrl(configurator, 'www.google.com', false);
+      await validatePageUrl(configurator, 'https://www.google.com');
+    });
+
+    test('Unsupported protocols are invalid', async ({configurator}) => {
+      await validatePageUrl(configurator, 'file://file.txt', false);
+      await validatePageUrl(configurator, 'ftp://1270.0.0.1', false);
+      await validatePageUrl(configurator, 'javascript:alert("")', false);
+    });
+
+    test('Subdomain is optional', async ({configurator}) => {
+      await validatePageUrl(configurator, 'https://google.com');
+    });
+
+    test('Multiple subdomains are supported', async ({configurator}) => {
+      await validatePageUrl(configurator, 'https://one.two.google.com');
+    });
+
+    test('Top-level domain is required', async ({configurator}) => {
+      await validatePageUrl(configurator, 'https://google', false);
+      await validatePageUrl(configurator, 'https://google.com');
+    });
+
+    test('Second-level domains are supported', async ({configurator}) => {
+      await validatePageUrl(configurator, 'https://www.google.co.uk');
+    });
+
+    test('Paths are supported', async ({configurator}) => {
+      await validatePageUrl(configurator, 'https://www.google.com/one/two');
+    });
+  });
+});