Project import generated by Copybara

PiperOrigin-RevId: 696716272
googleads · Nov 15, 2024 · 23fa211 · 23fa211
1 parent 9636f4a
commit 23fa211
Show file tree

Hide file tree

Showing 29 changed files with 814 additions and 64 deletions.
diff --git a/data/localization/en.xlb b/data/localization/en.xlb
@@ -33,5 +33,36 @@
     <msg name="s34774a88f199f364">// Configure page-level targeting.</msg>
     <msg name="s0536dee760be4bf2">// Configure privacy settings.</msg>
     <msg name="sd3926a53f7b06107">// Request and render all previously defined ad slots.</msg>
+    <msg name="sba78b2039ea0dfb0">This sample cannot be previewed in an iframe. </msg>
+    <msg name="sf107929dee6a6c72">Click the button below to preview in a new window.</msg>
+    <msg name="s3be169991df10a5d">Open preview</msg>
+    <msg name="s48390e2c954ba495">Fixed-size ad (100x100)</msg>
+    <msg name="sbba26a884a26c0c7">Fixed-size ad (300x250)</msg>
+    <msg name="s4121536e35beb2ed">Fixed-size ad (728x90)</msg>
+    <msg name="s703415876ae4626f">Fixed-size ad (750x200)</msg>
+    <msg name="s3400fb34f1e245a9">Multi-size ad</msg>
+    <msg name="s292d08a9cea72454">Fluid ad</msg>
+    <msg name="s1c59de6a71660855">Add size</msg>
+    <msg name="sffdadf0a576fd802">Height</msg>
+    <msg name="sb55d0a3abebf97fe">Remove size</msg>
+    <msg name="sf21fb4f4b9e8911f">Width</msg>
+    <msg name="sed09c5dfcd2f8bc8">Add targeting key</msg>
+    <msg name="sf2057da4d0abd00e">Add targeting value</msg>
+    <msg name="s716e903e2945c8cb">Remove targeting value</msg>
+    <msg name="s02c64e6a6306c0b0">Add slot</msg>
+    <msg name="s2d647200b120ea41">Ad unit path</msg>
+    <msg name="s08995feb9716ee48">Out-of-page format</msg>
+    <msg name="s8a2c4a3aa651b7fb">Remove slot</msg>
+    <msg name="s11a3c998dc1af0b1">Sample ads</msg>
+    <msg name="s4661d2a8c1259e58">Sample ads (out-of-page)</msg>
+    <msg name="s7d28e0b73aced2d9">Sample configuration</msg>
+    <msg name="s669b18c6d2d9c95b" desc="Option indicating no out-of-page format is selected.">None</msg>
+    <msg name="sf0cab2483f66aa2e" desc="Option that allows users to input custom ad slot values.">Custom</msg>
+    <msg name="s43e9aef7aa01fca9" desc="Text shown when a drop-down option is disabled.">Unavailable</msg>
+    <msg name="s9691600b4b891cf3" desc="The &quot;fluid&quot; size for native ads.">Fluid</msg>
+    <msg name="s506b6a19d12f414c" desc="The key portion of a targeting key-value.">Key</msg>
+    <msg name="s57472465a23b41db" desc="The values portion of a targeting key-value.">Values</msg>
+    <msg name="s3e0b42b56e05829d" desc="Title for the section contain ad sizing options.">Sizes</msg>
+    <msg name="se6dd79643508bb80" desc="Title for the section containing ad targeting options.">Targeting</msg>
   </messages>
 </localizationbundle>
diff --git a/data/localization/test.xlb b/data/localization/test.xlb
@@ -33,5 +33,36 @@
     <msg name="s34774a88f199f364">// Ĉ́ôn̂́f̂î́ĝû́r̂ế p̂́âĝ́ê-l̂́êv̂́êl̂́ t̂́âr̂́ĝết̂î́n̂ĝ́.</msg>
     <msg name="s0536dee760be4bf2">// Ĉ́ôn̂́f̂î́ĝû́r̂ế p̂́r̂î́v̂ấĉŷ́ ŝ́êt̂́t̂î́n̂ĝ́ŝ.</msg>
     <msg name="sd3926a53f7b06107">// R̂́êq̂́ûếŝt̂́ ấn̂d̂́ r̂́ên̂́d̂ếr̂ ấl̂l̂́ p̂́r̂ếv̂î́ôû́ŝl̂́ŷ d̂́êf̂́în̂́êd̂́ ấd̂ ŝ́l̂ốt̂ŝ́.</msg>
+    <msg name="sba78b2039ea0dfb0">T̂́ĥî́ŝ ŝ́âm̂́p̂l̂́ê ĉ́ân̂́n̂ốt̂ b̂́ê p̂́r̂ếv̂î́êŵ́êd̂́ î́n̂ ấn̂ î́f̂r̂́âm̂́ê. </msg>
+    <msg name="sf107929dee6a6c72">Ĉ́l̂î́ĉk̂́ t̂́ĥế b̂́ût̂́t̂ốn̂ b̂́êl̂́ôŵ́ t̂́ô p̂́r̂ếv̂î́êŵ́ î́n̂ ấ n̂́êŵ́ ŵ́în̂́d̂ốŵ.</msg>
+    <msg name="s3be169991df10a5d">Ốp̂ến̂ p̂́r̂ếv̂î́êŵ́</msg>
+    <msg name="s48390e2c954ba495">F̂́îx̂́êd̂́-ŝ́îẑ́ê ấd̂ (100x̂́100)</msg>
+    <msg name="sbba26a884a26c0c7">F̂́îx̂́êd̂́-ŝ́îẑ́ê ấd̂ (300x̂́250)</msg>
+    <msg name="s4121536e35beb2ed">F̂́îx̂́êd̂́-ŝ́îẑ́ê ấd̂ (728x̂́90)</msg>
+    <msg name="s703415876ae4626f">F̂́îx̂́êd̂́-ŝ́îẑ́ê ấd̂ (750x̂́200)</msg>
+    <msg name="s3400fb34f1e245a9">M̂́ûl̂́t̂î́-ŝ́îẑ́ê ấd̂</msg>
+    <msg name="s292d08a9cea72454">F̂́l̂û́îd̂́ ấd̂</msg>
+    <msg name="s1c59de6a71660855">Ấd̂d̂́ ŝ́îẑ́ê</msg>
+    <msg name="sffdadf0a576fd802">Ĥ́êî́ĝĥ́t̂</msg>
+    <msg name="sb55d0a3abebf97fe">R̂́êm̂́ôv̂́ê ŝ́îẑ́ê</msg>
+    <msg name="sf21fb4f4b9e8911f">Ŵ́îd̂́t̂ĥ́</msg>
+    <msg name="sed09c5dfcd2f8bc8">Ấd̂d̂́ t̂́âr̂́ĝết̂î́n̂ĝ́ k̂́êŷ́</msg>
+    <msg name="sf2057da4d0abd00e">Ấd̂d̂́ t̂́âr̂́ĝết̂î́n̂ĝ́ v̂́âl̂́ûế</msg>
+    <msg name="s716e903e2945c8cb">R̂́êm̂́ôv̂́ê t̂́âr̂́ĝết̂î́n̂ĝ́ v̂́âl̂́ûế</msg>
+    <msg name="s02c64e6a6306c0b0">Ấd̂d̂́ ŝ́l̂ốt̂</msg>
+    <msg name="s2d647200b120ea41">Ấd̂ û́n̂î́t̂ p̂́ât̂́ĥ</msg>
+    <msg name="s08995feb9716ee48">Ốût̂́-ốf̂-p̂́âĝ́ê f̂́ôr̂́m̂ất̂</msg>
+    <msg name="s8a2c4a3aa651b7fb">R̂́êm̂́ôv̂́ê ŝ́l̂ốt̂</msg>
+    <msg name="s11a3c998dc1af0b1">Ŝ́âm̂́p̂l̂́ê ấd̂ŝ́</msg>
+    <msg name="s4661d2a8c1259e58">Ŝ́âm̂́p̂l̂́ê ấd̂ŝ́ (ốût̂́-ốf̂-p̂́âĝ́ê)</msg>
+    <msg name="s7d28e0b73aced2d9">Ŝ́âm̂́p̂l̂́ê ĉ́ôn̂́f̂î́ĝû́r̂ất̂î́ôn̂́</msg>
+    <msg name="s669b18c6d2d9c95b" desc="Option indicating no out-of-page format is selected.">N̂́ôn̂́ê</msg>
+    <msg name="sf0cab2483f66aa2e" desc="Option that allows users to input custom ad slot values.">Ĉ́ûŝ́t̂ốm̂</msg>
+    <msg name="s43e9aef7aa01fca9" desc="Text shown when a drop-down option is disabled.">Û́n̂ấv̂ấîl̂́âb̂́l̂ế</msg>
+    <msg name="s9691600b4b891cf3" desc="The &quot;fluid&quot; size for native ads.">F̂́l̂û́îd̂́</msg>
+    <msg name="s506b6a19d12f414c" desc="The key portion of a targeting key-value.">K̂́êŷ́</msg>
+    <msg name="s57472465a23b41db" desc="The values portion of a targeting key-value.">V̂́âl̂́ûếŝ</msg>
+    <msg name="s3e0b42b56e05829d" desc="Title for the section contain ad sizing options.">Ŝ́îẑ́êŝ́</msg>
+    <msg name="se6dd79643508bb80" desc="Title for the section containing ad targeting options.">T̂́âr̂́ĝết̂î́n̂ĝ́</msg>
   </messages>
 </localizationbundle>
diff --git a/src/components/gpt-playground.ts b/src/components/gpt-playground.ts
@@ -20,7 +20,7 @@ import 'playground-elements/playground-preview';
 import 'playground-elements/playground-project';
 import 'playground-elements/playground-tab-bar';
 
-import {localized} from '@lit/localize';
+import {localized, msg} from '@lit/localize';
 import {css, html, LitElement} from 'lit';
 import {ifDefined} from 'lit-html/directives/if-defined.js';
 import {customElement, property, query} from 'lit/decorators.js';
@@ -32,10 +32,12 @@ import type {ProjectManifest} from 'playground-elements/shared/worker-api.js';
 import {PlaygroundDialog, PlaygroundDialogButton} from './playground-dialog.js';
 
 // Constant UI strings.
-const PREVIEW_DIALOG =
-  'This sample cannot be previewed in an iframe. ' +
-  'Click the button below to preview in a new window.';
-const PREVIEW_DIALOG_BUTTON = 'Open preview';
+const strings = {
+  previewDialog: () =>
+    msg('This sample cannot be previewed in an iframe. ') +
+    msg('Click the button below to preview in a new window.'),
+  previewDialogButton: () => msg('Open preview'),
+};
 
 // Playground component identifier.
 const PLAYGROUND_ID = 'gpt-sample';
@@ -221,7 +223,7 @@ export class GptPlayground extends LitElement {
   private renderPreviewDialog() {
     const buttons: PlaygroundDialogButton[] = [
       {
-        text: `${PREVIEW_DIALOG_BUTTON}`,
+        text: `${strings.previewDialogButton()}`,
         onClick: () => {
           this.previewWindow = window.open(
             this.generatePreviewUrl(),
@@ -233,7 +235,7 @@ export class GptPlayground extends LitElement {
 
     return html`
       <playground-dialog
-        .text="${[PREVIEW_DIALOG]}"
+        .text="${[strings.previewDialog()]}"
         .buttons="${buttons}"
         ?open="${!this.previewEnabled}"
         modal

diff --git a/src/components/sample-configurator.ts b/src/components/sample-configurator.ts
@@ -41,6 +41,11 @@ import {GptPlayground} from './gpt-playground.js';
 import {SlotInput} from './slot-input.js';
 import {TargetingInput} from './targeting-input.js';
 
+// Constant UI strings.
+const strings = {
+  configuratorTitle: () => msg('Sample configuration'),
+};
+
 /**
  * Custom GPT sample configurator component.
  */
@@ -314,7 +319,7 @@ export class SampleConfigurator extends LitElement {
   private renderConfigurator() {
     return html` <div id="configurator">
       <div id="configurator-header">
-        <span>Sample configuration</span>
+        <span>${strings.configuratorTitle()}</span>
       </div>
       <div id="configurator-settings">
         ${this.renderPageSettings()} ${this.renderSlotSettings()}

diff --git a/src/components/shared/sample-ads.ts b/src/components/shared/sample-ads.ts
@@ -14,32 +14,34 @@
  * limitations under the License.
  */
 
+import {msg} from '@lit/localize';
+
 import type {SampleSlotConfig} from '../../model/sample-config.js';
 
 export interface SampleAd {
-  name: string;
+  name: () => string;
   slot: SampleSlotConfig;
 }
 
 export const sampleAds: SampleAd[] = [
   {
-    name: 'Fixed-size ad (100x100)',
+    name: () => msg('Fixed-size ad (100x100)'),
     slot: {adUnit: '/6355419/Travel/Europe', size: [100, 100]},
   },
   {
-    name: 'Fixed-size ad (300x250)',
+    name: () => msg('Fixed-size ad (300x250)'),
     slot: {adUnit: '/6355419/Travel/Europe', size: [300, 250]},
   },
   {
-    name: 'Fixed-size ad (728x90)',
+    name: () => msg('Fixed-size ad (728x90)'),
     slot: {adUnit: '/6355419/Travel/Europe', size: [728, 90]},
   },
   {
-    name: 'Fixed-size ad (750x200)',
+    name: () => msg('Fixed-size ad (750x200)'),
     slot: {adUnit: '/6355419/Travel/Europe', size: [750, 200]},
   },
   {
-    name: 'Multi-size ad',
+    name: () => msg('Multi-size ad'),
     slot: {
       adUnit: '/6355419/Travel/Europe',
       size: [
@@ -50,9 +52,12 @@ export const sampleAds: SampleAd[] = [
       ],
     },
   },
-  {name: 'Fluid ad', slot: {adUnit: '/6355419/Travel', size: 'fluid'}},
   {
-    name: 'Anchor ad (bottom)',
+    name: () => msg('Fluid ad'),
+    slot: {adUnit: '/6355419/Travel', size: 'fluid'},
+  },
+  {
+    name: () => msg('Anchor ad (bottom)'),
     slot: {
       adUnit: '/6355419/Travel',
       format: 'BOTTOM_ANCHOR',
@@ -61,7 +66,7 @@ export const sampleAds: SampleAd[] = [
     },
   },
   {
-    name: 'Anchor ad (top)',
+    name: () => msg('Anchor ad (top)'),
     slot: {
       adUnit: '/6355419/Travel',
       format: 'TOP_ANCHOR',
@@ -70,23 +75,23 @@ export const sampleAds: SampleAd[] = [
     },
   },
   {
-    name: 'Side rail ad (left)',
+    name: () => msg('Side rail ad (left)'),
     slot: {
       adUnit: '/6355419/Travel/Europe',
       format: 'LEFT_SIDE_RAIL',
       size: [],
     },
   },
   {
-    name: 'Side rail ad (right)',
+    name: () => msg('Side rail ad (right)'),
     slot: {
       adUnit: '/6355419/Travel/Europe',
       format: 'RIGHT_SIDE_RAIL',
       size: [],
     },
   },
   {
-    name: 'Web interstitial ad',
+    name: () => msg('Web interstitial ad'),
     slot: {
       adUnit: '/6355419/Travel/Europe/France/Paris',
       format: 'INTERSTITIAL',

diff --git a/src/components/slot-input.ts b/src/components/slot-input.ts
@@ -17,7 +17,7 @@
 import './slot-size-input';
 import './targeting-input';
 
-import {localized} from '@lit/localize';
+import {localized, msg} from '@lit/localize';
 import {css, html, LitElement, ReactiveElement, TemplateResult} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
@@ -33,17 +33,30 @@ import {SlotSizeInput} from './slot-size-input.js';
 import {TargetingInput} from './targeting-input.js';
 
 // Constant UI strings.
-const ADD_SLOT_TITLE = 'Add slot';
-const AD_UNIT_LABEL = 'Ad unit path';
-const CUSTOM_OPTION_LABEL = 'Custom';
-const OOP_FORMAT_DISABLED = 'Unavailable';
-const OOP_FORMAT_LABEL = 'Out-of-page format';
-const OOP_FORMAT_UNSELECTED = 'None';
-const REMOVE_SLOT_TITLE = 'Remove slot';
-const SAMPLE_ADS_LABEL = 'Sample ads';
-const SAMPLE_ADS_OOP_LABEL = 'Sample ads (out-of-page)';
-const SIZE_SECTION_TITLE = 'Sizes';
-const TARGETING_SECTION_TITLE = 'Targeting';
+const strings = {
+  addSlotTitle: () => msg('Add slot'),
+  adUnitLabel: () => msg('Ad unit path'),
+  customOptionLabel: () =>
+    msg('Custom', {
+      desc: 'Option that allows users to input custom ad slot values.',
+    }),
+  oopFormatDisabled: () =>
+    msg('Unavailable', {
+      desc: 'Text shown when a drop-down option is disabled.',
+    }),
+  oopFormatLabel: () => msg('Out-of-page format'),
+  oopFormatUnselected: () =>
+    msg('None', {desc: 'Option indicating no out-of-page format is selected.'}),
+  removeSlotTitle: () => msg('Remove slot'),
+  sampleAdsLabel: () => msg('Sample ads'),
+  sampleAdsOopLabel: () => msg('Sample ads (out-of-page)'),
+  sizeSectionTitle: () =>
+    msg('Sizes', {desc: 'Title for the section contain ad sizing options.'}),
+  targetingSectionTitle: () =>
+    msg('Targeting', {
+      desc: 'Title for the section containing ad targeting options.',
+    }),
+};
 
 // Ad unit path validation.
 const AD_UNIT_VALIDATION_PATTERN = '[\\da-zA-Z_\\-.*\\/\\\\!:\\(\\)]+';
@@ -352,7 +365,8 @@ export class SlotInput extends LitElement {
         ?disabled="${disabled}"
         ?selected="${isEqual(slot, sampleAd.slot)}"
       >
-        ${sampleAd.name} ${when(disabled, () => ` (${OOP_FORMAT_DISABLED})`)}
+        ${sampleAd.name()}
+        ${when(disabled, () => ` (${strings.oopFormatDisabled()})`)}
       </option>`;
       (format ? oopTemplates : templates).push(template);
     });
@@ -362,9 +376,11 @@ export class SlotInput extends LitElement {
       name="templates"
       @input="${this.updateSlot}"
     >
-      <option>${CUSTOM_OPTION_LABEL}</option>
-      <optgroup label="${SAMPLE_ADS_LABEL}">${templates}</optgroup>
-      <optgroup label="${SAMPLE_ADS_OOP_LABEL}">${oopTemplates}</optgroup>
+      <option>${strings.customOptionLabel()}</option>
+      <optgroup label="${strings.sampleAdsLabel()}">${templates}</optgroup>
+      <optgroup label="${strings.sampleAdsOopLabel()}">
+        ${oopTemplates}
+      </optgroup>
     </select>`;
   }
 
@@ -381,22 +397,22 @@ export class SlotInput extends LitElement {
           ?disabled="${disabled}"
           ?selected="${slot.format === format}"
         >
-          ${v()} ${when(disabled, () => ` (${OOP_FORMAT_DISABLED})`)}
+          ${v()} ${when(disabled, () => ` (${strings.oopFormatDisabled()})`)}
         </option>`;
         formats.push(option);
       });
 
     return html`
       <select class="flex padded" name="formats" @input="${this.updateSlot}">
-        <option value="">${OOP_FORMAT_UNSELECTED}</option>
+        <option value="">${strings.oopFormatUnselected()}</option>
         ${formats}
       </select>
     `;
   }
 
   private renderSlotOptions(slot: SampleSlotConfig) {
     return html` <div class="slot-option flex">
-        <label for="adUnit">${AD_UNIT_LABEL}</label>
+        <label for="adUnit">${strings.adUnitLabel()}</label>
         <input
           class="flex padded"
           type="text"
@@ -407,22 +423,22 @@ export class SlotInput extends LitElement {
         />
       </div>
       <div class="slot-option flex">
-        <label for="format">${OOP_FORMAT_LABEL}</label>
+        <label for="format">${strings.oopFormatLabel()}</label>
         ${this.renderSlotFormatInput(slot)}
       </div>`;
   }
 
   private renderSlotSizeInput(slot: SampleSlotConfig) {
     return html` <slot-size-input
-      title="${SIZE_SECTION_TITLE}"
+      title="${strings.sizeSectionTitle()}"
       .config="${slot.size}"
       @update="${this.updateSlot}"
     ></slot-size-input>`;
   }
 
   private renderTargetingInput(slot: SampleSlotConfig) {
     return html` <targeting-input
-      title="${TARGETING_SECTION_TITLE}"
+      title="${strings.targetingSectionTitle()}"
       .config="${slot.targeting || []}"
       @update="${this.updateSlot}"
     ></targeting-input>`;
@@ -455,7 +471,7 @@ export class SlotInput extends LitElement {
         ${this.renderSlotTemplates(slot.slot)}
         <span
           class="material-icons md-24 button"
-          title="${REMOVE_SLOT_TITLE}"
+          title="${strings.removeSlotTitle()}"
           @click="${this.removeSlot}"
           >delete</span
         >
@@ -476,7 +492,7 @@ export class SlotInput extends LitElement {
         ${slots}
         <span
           class="material-icons md-24 add-slot button"
-          title="${ADD_SLOT_TITLE}"
+          title="${strings.addSlotTitle()}"
           @click="${this.addSlot}"
           >add</span
         >