chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -3,16 +3,20 @@
 // found in the LICENSE file.
 
 import '../../ui/kit/kit.js';
+import '../../ui/components/lists/lists.js';
 
 import * as Common from '../../core/common/common.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 type * as Lists from '../../ui/components/lists/lists.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, type LitTemplate, render} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import locationsSettingsTabStyles from './locationsSettingsTab.css.js';
+const {createRef, ref} = Directives;
+export {locationsSettingsTabStyles};
 
 const UIStrings = {
   /**
@@ -110,6 +114,22 @@ const UIStrings = {
    * @description Text of add locations button in the Locations settings tab of the Device toolbar.
    */
   addLocation: 'Add location',
+  /**
+   * @description Title for the dialog when editing an existing location in the Locations settings tab.
+   */
+  editLocation: 'Edit location',
+  /**
+   * @description Label for button to save location changes.
+   */
+  save: 'Save',
+  /**
+   * @description Label for button to cancel location edits.
+   */
+  cancel: 'Cancel',
+  /**
+   * @description Label for button to close the location dialog.
+   */
+  close: 'Close',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sensors/LocationsSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -136,49 +156,239 @@ function renderItemView(location: LocationDescription): LitTemplate {
   // clang-format on
 }
 
-interface EditorInputControls {
-  titleInput: Element;
-  latInput: Element;
-  longInput: Element;
-  timezoneIdInput: Element;
-  localeInput: Element;
-  accuracyInput: Element;
+export interface EditorInputControls {
+  titleInput: LitTemplate|Element;
+  latInput: LitTemplate|Element;
+  longInput: LitTemplate|Element;
+  timezoneIdInput: LitTemplate|Element;
+  localeInput: LitTemplate|Element;
+  accuracyInput: LitTemplate|Element;
 }
 
-function renderEditorView(controls: EditorInputControls): LitTemplate {
+export interface LocationValidationErrors {
+  title?: string|null;
+  lat?: string|null;
+  long?: string|null;
+  timezoneId?: string|null;
+  locale?: string|null;
+  accuracy?: string|null;
+}
+export interface LocationDialogInput {
+  location: LocationDescription;
+  isNew: boolean;
+  errors?: LocationValidationErrors;
+  onSave: (location: LocationDescription) => void;
+  onCancel: () => void;
+  onValidateErrors: (errors: LocationValidationErrors) => void;
+}
+
+export function renderEditorView(controls: EditorInputControls, errors?: LocationDialogInput['errors'],
+                                 isDialog = false): LitTemplate {
+  if (!isDialog) {
+    // clang-format off
+    return html`
+      <div class="locations-edit-row">
+        <div class="locations-list-text locations-list-title">${i18nString(UIStrings.locationName)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.lat)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.long)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.timezoneId)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.locale)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.accuracy)}</div>
+      </div>
+      <div class="locations-edit-row">
+        <div class="locations-list-text locations-list-title locations-input-container">${controls.titleInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.latInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-list-text-longitude locations-input-container">${controls.longInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.timezoneIdInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.localeInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.accuracyInput}</div>
+      </div>
+      ${errors ? html`
+        <div class="locations-edit-row locations-error-row" role="alert">
+          <div class="locations-list-text locations-list-title locations-error-cell">${errors.title ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.lat ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-list-text-longitude locations-error-cell">${errors.long ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.timezoneId ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.locale ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.accuracy ?? nothing}</div>
+        </div>
+      ` : nothing}`;
+    // clang-format on
+  }
+
   // clang-format off
   return html`
-    <div class="locations-edit-row">
-      <div class="locations-list-text locations-list-title">${i18nString(UIStrings.locationName)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.lat)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.long)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.timezoneId)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.locale)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.accuracy)}</div>
+    <div class="editor-grid">
+      <div class="editor-field editor-field-full-width ${errors?.title ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-title">${i18nString(UIStrings.locationName)}</label>
+        ${controls.titleInput}
+        ${errors?.title ? html`<div class="editor-field-error" role="alert">${errors.title}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.lat ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-lat">${i18nString(UIStrings.lat)}</label>
+        ${controls.latInput}
+        ${errors?.lat ? html`<div class="editor-field-error" role="alert">${errors.lat}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.long ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-long">${i18nString(UIStrings.long)}</label>
+        ${controls.longInput}
+        ${errors?.long ? html`<div class="editor-field-error" role="alert">${errors.long}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.timezoneId ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-timezone">${i18nString(UIStrings.timezoneId)}</label>
+        ${controls.timezoneIdInput}
+        ${errors?.timezoneId ? html`<div class="editor-field-error" role="alert">${errors.timezoneId}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.locale ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-locale">${i18nString(UIStrings.locale)}</label>
+        ${controls.localeInput}
+        ${errors?.locale ? html`<div class="editor-field-error" role="alert">${errors.locale}</div>` : nothing}
+      </div>
+      <div class="editor-field editor-field-full-width ${errors?.accuracy ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-accuracy">${i18nString(UIStrings.accuracy)}</label>
+        ${controls.accuracyInput}
+        ${errors?.accuracy ? html`<div class="editor-field-error" role="alert">${errors.accuracy}</div>` : nothing}
+      </div>
     </div>
-    <div class="locations-edit-row">
-      <div class="locations-list-text locations-list-title locations-input-container">${controls.titleInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.latInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-list-text-longitude locations-input-container">${controls.longInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.timezoneIdInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.localeInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.accuracyInput}</div>
-    </div>`;
+  `;
+  // clang-format on
+}
+
+export function renderLocationDialog(input: LocationDialogInput): LitTemplate {
+  const titleInputRef = createRef<HTMLInputElement>();
+  const latInputRef = createRef<HTMLInputElement>();
+  const longInputRef = createRef<HTMLInputElement>();
+  const timezoneIdInputRef = createRef<HTMLInputElement>();
+  const localeInputRef = createRef<HTMLInputElement>();
+  const accuracyInputRef = createRef<HTMLInputElement>();
+
+  const handleSave = (): void => {
+    const title = titleInputRef.value?.value.trim() ?? '';
+    const latStr = latInputRef.value?.value.trim() ?? '';
+    const longStr = longInputRef.value?.value.trim() ?? '';
+    const timezoneId = timezoneIdInputRef.value?.value.trim() ?? '';
+    const locale = localeInputRef.value?.value.trim() ?? '';
+    const accuracyStr = accuracyInputRef.value?.value.trim() ?? '';
+
+    const titleError = validateTitle(title);
+    const latError = validateLatitude(latStr);
+    const longError = validateLongitude(longStr);
+    const tzError = validateTimezoneId(timezoneId);
+    const localeError = validateLocale(locale);
+    const accuracyError = validateAccuracy(accuracyStr);
+
+    if (titleError || latError || longError || tzError || localeError || accuracyError) {
+      input.onValidateErrors({
+        title: titleError,
+        lat: latError,
+        long: longError,
+        timezoneId: tzError,
+        locale: localeError,
+        accuracy: accuracyError,
+      });
+      return;
+    }
+
+    input.onSave({
+      title,
+      lat: latStr ? parseFloat(latStr) : 0,
+      long: longStr ? parseFloat(longStr) : 0,
+      timezoneId,
+      locale,
+      accuracy: accuracyStr ? parseFloat(accuracyStr) : SDK.EmulationModel.Location.DEFAULT_ACCURACY,
+    });
+  };
+
+  const editorControls: EditorInputControls = {
+    titleInput:
+        html`<input id="location-title" aria-label=${i18nString(UIStrings.locationName)} type="text" placeholder=${
+            i18nString(UIStrings.locationName)} .value=${input.location.title} ${ref(titleInputRef)}>`,
+    latInput: html`<input id="location-lat" aria-label=${i18nString(UIStrings.lat)} type="text" placeholder=${
+        i18nString(UIStrings.latitude)} .value=${String(input.location.lat)} ${ref(latInputRef)}>`,
+    longInput: html`<input id="location-long" aria-label=${i18nString(UIStrings.long)} type="text" placeholder=${
+        i18nString(UIStrings.longitude)} .value=${String(input.location.long)} ${ref(longInputRef)}>`,
+    timezoneIdInput:
+        html`<input id="location-timezone" aria-label=${i18nString(UIStrings.timezoneId)} type="text" placeholder=${
+            i18nString(UIStrings.timezoneId)} .value=${input.location.timezoneId} ${ref(timezoneIdInputRef)}>`,
+    localeInput: html`<input id="location-locale" aria-label=${i18nString(UIStrings.locale)} type="text" placeholder=${
+        i18nString(UIStrings.locale)} .value=${input.location.locale} ${ref(localeInputRef)}>`,
+    accuracyInput: html`<input id="location-accuracy" aria-label=${
+        i18nString(UIStrings.accuracy)} type="text" placeholder=${i18nString(UIStrings.accuracy)} .value=${
+        String(input.location.accuracy ?? SDK.EmulationModel.Location.DEFAULT_ACCURACY)} ${ref(accuracyInputRef)}>`,
+  };
+
+  // clang-format off
+
+  const dialogContent = html`
+    <style>${locationsSettingsTabStyles}</style>
+      <div class="location-dialog-content">
+      <div class="dialog-header">
+        <span class="dialog-title">${input.isNew ? i18nString(UIStrings.addLocation) : i18nString(UIStrings.editLocation)}</span>
+        <devtools-button
+          class="dialog-close-button"
+          .iconName=${'cross'}
+          .variant=${Buttons.Button.Variant.ICON}
+          .title=${i18nString(UIStrings.close)}
+          .jslogContext=${'dialog-close'}
+          @click=${input.onCancel}
+          aria-label=${i18nString(UIStrings.close)}>
+        </devtools-button>
+      </div>
+        ${renderEditorView(editorControls, input.errors, true)}
+        <div class="dialog-buttons">
+          <devtools-button
+            class="save-button"
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            @click=${handleSave}>
+            ${i18nString(UIStrings.save)}
+          </devtools-button>
+          <devtools-button
+            class="cancel-button"
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            @click=${input.onCancel}>
+            ${i18nString(UIStrings.cancel)}
+          </devtools-button>
+        </div>
+      </div>
+  `;
+
+  return html`
+    <style>${locationsSettingsTabStyles}</style>
+    <devtools-widget
+      class="location-dialog-widget"
+      ${UI.Widget.widget(UI.Dialog.DialogWidget, {
+        open: true,
+        jslogContext: 'location-dialog',
+        dialogStack: true,
+        content: dialogContent,
+      })}
+      @hidden=${input.onCancel}>
+    </devtools-widget>
+  `;
   // clang-format on
 }
 
 interface LocationsViewInput {
+  locations: LocationDescription[];
   onAddLocation: () => void;
+  onEditLocation: (index: number) => void;
+  onRemoveLocation: (index: number) => void;
+  activeDialog?: LocationDialogInput;
 }
 
 export type ViewOutput = undefined;
@@ -190,7 +400,18 @@ export const DEFAULT_VIEW = (input: LocationsViewInput, _output: ViewOutput, tar
     <div class="settings-card-container-wrapper">
       <div class="settings-card-container">
         <devtools-card .heading=${i18nString(UIStrings.locations)}>
-          <div class="list-container"></div>
+          <div>
+            ${input.locations.length > 0 ? html`
+              <devtools-list
+                class="locations-list square-corners"
+                .editable=${true}
+                .deletable=${true}
+                @edit=${(e: Lists.List.ItemEditEvent) => input.onEditLocation(e.detail.index)}
+                @delete=${(e: Lists.List.ItemRemoveEvent) => input.onRemoveLocation(e.detail.index)}>
+                ${input.locations.map(location => renderItemView(location))}
+              </devtools-list>
+            ` : nothing}
+          </div>
           <devtools-button
             class="add-locations-button"
             .variant=${Buttons.Button.Variant.OUTLINED}
@@ -201,16 +422,22 @@ export const DEFAULT_VIEW = (input: LocationsViewInput, _output: ViewOutput, tar
           </devtools-button>
         </devtools-card>
       </div>
-    </div>`, target);
+    </div>
+    ${input.activeDialog ? renderLocationDialog(input.activeDialog) : nothing}
+  `, target);
   // clang-format on
 };
 
 export type View = typeof DEFAULT_VIEW;
-export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidget.Delegate<LocationDescription> {
-  private readonly list: UI.ListWidget.ListWidget<LocationDescription>;
+export class LocationsSettingsTab extends UI.Widget.VBox {
   private readonly customSetting: Common.Settings.Setting<LocationDescription[]>;
-  private editor?: UI.ListWidget.Editor<LocationDescription>;
   #view: View;
+  #activeDialogState?: {
+    location: LocationDescription,
+    isNew: boolean,
+    index?: number,
+    errors?: LocationValidationErrors,
+  };
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {
@@ -219,9 +446,6 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     });
     this.#view = view;
 
-    this.list = new UI.ListWidget.ListWidget(this, undefined, true);
-    this.list.element.classList.add('locations-list');
-    this.list.registerRequiredCSS(locationsSettingsTabStyles);
     this.customSetting =
         Common.Settings.Settings.instance().moduleSetting<LocationDescription[]>('emulation.locations');
     const list =
@@ -258,127 +482,93 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
   }
 
   override performUpdate(): void {
-    const viewInput = {
+    let activeDialogInput: LocationDialogInput|undefined;
+    if (this.#activeDialogState) {
+      const state = this.#activeDialogState;
+      activeDialogInput = {
+        location: state.location,
+        isNew: state.isNew,
+        errors: state.errors,
+        onSave: (updatedLocation: LocationDescription) => this.saveDialog(updatedLocation),
+        onCancel: () => this.closeDialog(),
+        onValidateErrors: (errors: LocationValidationErrors) => this.updateDialogErrors(errors),
+      };
+    }
+
+    const viewInput: LocationsViewInput = {
+      locations: this.customSetting.get(),
       onAddLocation: () => this.addButtonClicked(),
+      onEditLocation: (index: number) => this.editLocationClicked(index),
+      onRemoveLocation: (index: number) => this.removeLocationClicked(index),
+      activeDialog: activeDialogInput,
     };
     this.#view(viewInput, undefined, this.contentElement as HTMLElement);
 
-    const listContainer = this.contentElement.querySelector('.list-container');
-    if (listContainer) {
-      this.list.show(listContainer);
     }
-  }
   private locationsUpdated(): void {
-    this.list.clear();
-
-    const conditions = this.customSetting.get();
-    for (const condition of conditions) {
-      this.list.appendItem(condition, true);
-    }
-
-    this.list.appendSeparator();
     this.requestUpdate();
   }
 
   private addButtonClicked(): void {
-    this.list.addNewItem(this.customSetting.get().length, {
-      title: '',
-      lat: 0,
-      long: 0,
-      timezoneId: '',
-      locale: '',
-      accuracy: SDK.EmulationModel.Location.DEFAULT_ACCURACY,
-    });
+    this.#activeDialogState = {
+      location: {
+        title: '',
+        lat: 0,
+        long: 0,
+        timezoneId: '',
+        locale: '',
+        accuracy: SDK.EmulationModel.Location.DEFAULT_ACCURACY,
+      },
+      isNew: true,
+    };
+    this.requestUpdate();
   }
 
-  renderItem(location: LocationDescription, _editable: boolean): Element {
-    const fragment = document.createDocumentFragment();
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(renderItemView(location), fragment);
-    return fragment.firstElementChild as Element;
+  private editLocationClicked(index: number): void {
+    const list = this.customSetting.get();
+    const location = list[index];
+    if (!location) {
+      return;
+    }
+    this.#activeDialogState = {
+      location: {...location},
+      isNew: false,
+      index,
+    };
+    this.requestUpdate();
   }
 
-  removeItemRequested(_item: LocationDescription, index: number): void {
+  private removeLocationClicked(index: number): void {
     const list = this.customSetting.get();
     list.splice(index, 1);
     this.customSetting.set(list);
   }
 
-  commitEdit(location: LocationDescription, editor: UI.ListWidget.Editor<LocationDescription>, isNew: boolean): void {
-    location.title = editor.control('title').value.trim();
-    const lat = editor.control('lat').value.trim();
-    location.lat = lat ? parseFloat(lat) : 0;
-    const long = editor.control('long').value.trim();
-    location.long = long ? parseFloat(long) : 0;
-    const timezoneId = editor.control('timezone-id').value.trim();
-    location.timezoneId = timezoneId;
-    const locale = editor.control('locale').value.trim();
-    location.locale = locale;
-    const accuracy = editor.control('accuracy').value.trim();
-    location.accuracy = accuracy ? parseFloat(accuracy) : SDK.EmulationModel.Location.DEFAULT_ACCURACY;
+  private saveDialog(updatedLocation: LocationDescription): void {
+    if (!this.#activeDialogState) {
+      return;
+    }
 
     const list = this.customSetting.get();
-    if (isNew) {
-      list.push(location);
+    if (this.#activeDialogState.isNew) {
+      list.push(updatedLocation);
+    } else if (this.#activeDialogState.index !== undefined) {
+      list[this.#activeDialogState.index] = updatedLocation;
     }
+    this.#activeDialogState = undefined;
     this.customSetting.set(list);
   }
 
-  beginEdit(location: LocationDescription): UI.ListWidget.Editor<LocationDescription> {
-    const editor = this.createEditor();
-    editor.control('title').value = location.title;
-    editor.control('lat').value = String(location.lat);
-    editor.control('long').value = String(location.long);
-    editor.control('timezone-id').value = location.timezoneId;
-    editor.control('locale').value = location.locale;
-    editor.control('accuracy').value = String(location.accuracy ?? SDK.EmulationModel.Location.DEFAULT_ACCURACY);
-    return editor;
+  private closeDialog(): void {
+    this.#activeDialogState = undefined;
+    this.requestUpdate();
   }
 
-  private createEditor(): UI.ListWidget.Editor<LocationDescription> {
-    if (this.editor) {
-      return this.editor;
+  private updateDialogErrors(errors: LocationValidationErrors): void {
+    if (this.#activeDialogState) {
+      this.#activeDialogState.errors = errors;
+      this.requestUpdate();
     }
-
-    const editor = new UI.ListWidget.Editor<LocationDescription>();
-    this.editor = editor;
-    const content = editor.contentElement();
-
-    const createValidator = (validator: (value: string) => string | null) =>
-        (_item: LocationDescription, _index: number,
-         input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult => {
-          const errorMessage = validator(input.value);
-          if (errorMessage) {
-            return {valid: false, errorMessage};
-          }
-          return {valid: true};
-        };
-
-    const titleInput =
-        editor.createInput('title', 'text', i18nString(UIStrings.locationName), createValidator(validateTitle));
-    const latInput =
-        editor.createInput('lat', 'text', i18nString(UIStrings.latitude), createValidator(validateLatitude));
-    const longInput =
-        editor.createInput('long', 'text', i18nString(UIStrings.longitude), createValidator(validateLongitude));
-    const timezoneIdInput = editor.createInput('timezone-id', 'text', i18nString(UIStrings.timezoneId),
-                                               createValidator(validateTimezoneId));
-    const localeInput =
-        editor.createInput('locale', 'text', i18nString(UIStrings.locale), createValidator(validateLocale));
-    const accuracyInput =
-        editor.createInput('accuracy', 'text', i18nString(UIStrings.accuracy), createValidator(validateAccuracy));
-
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(renderEditorView({
-             titleInput,
-             latInput,
-             longInput,
-             timezoneIdInput,
-             localeInput,
-             accuracyInput,
-           }),
-           content as HTMLElement);
-
-    return editor;
   }
 }
 export interface LocationDescription {
@@ -397,6 +587,7 @@ export function validateTitle(value: string): string|null {
   if (!trimmedValue.length) {
     return i18nString(UIStrings.locationNameCannotBeEmpty);
   }
+
   if (trimmedValue.length > maxLength) {
     return i18nString(UIStrings.locationNameMustBeLessThanS, {PH1: maxLength});
   }
@@ -412,6 +603,7 @@ export function validateLatitude(value: string): string|null {
   if (!trimmedValue) {
     return null;
   }
+
   if (Number.isNaN(parsedValue)) {
     return i18nString(UIStrings.latitudeMustBeANumber);
   }
@@ -433,6 +625,7 @@ export function validateLongitude(value: string): string|null {
   if (!trimmedValue) {
     return null;
   }
+
   if (Number.isNaN(parsedValue)) {
     return i18nString(UIStrings.longitudeMustBeANumber);
   }
@@ -482,6 +675,7 @@ export function validateAccuracy(value: string): string|null {
   if (!trimmedValue) {
     return null;
   }
+
   if (Number.isNaN(parsedValue)) {
     return i18nString(UIStrings.accuracyMustBeANumber);
   }