Add accuracy parameter to geolocation emulation

This CL adds support for setting the accuracy parameter in geolocation
emulation, allowing developers to test how their applications handle
different levels of GPS accuracy.

Bug: 40074843
Change-Id: I4eeb6240aaa2185f9b0fc64278941bf8ef2d31ec
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6559109
Commit-Queue: Mathias Bynens <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: hjanuschka

AUTHORS

@@ -40,6 +40,7 @@ Feng Yu <[email protected]>
 Gabriel Luong <[email protected]>
 Gautham Banasandra <[email protected]>
 Han Xu <[email protected]>
+Helmut Januschka <[email protected]>
 Henry Lim <[email protected]>
 Jacky Hu <[email protected]>
 Jake Mulhern <[email protected]>
@@ -112,4 +113,3 @@ The Chromium Authors <*@chromium.org>
 The Qt Company <*@qt.io>
 # Please DO NOT APPEND here. See comments at the top of the file.
 # END organizations section.
-

front_end/core/sdk/EmulationModel.ts

@@ -278,7 +278,7 @@ export class EmulationModel extends SDKModel<void> {
             .invoke_setGeolocationOverride({
               latitude: location.latitude,
               longitude: location.longitude,
-              accuracy: Location.defaultGeoMockAccuracy,
+              accuracy: location.accuracy,
             })
             .then(result => processEmulationResult('emulation-set-location', result)),
         this.#emulationAgent
@@ -451,45 +451,54 @@ export class EmulationModel extends SDKModel<void> {
 }
 
 export class Location {
+  static readonly DEFAULT_ACCURACY = 150;
   latitude: number;
   longitude: number;
   timezoneId: string;
   locale: string;
+  accuracy: number;
   unavailable: boolean;
 
-  constructor(latitude: number, longitude: number, timezoneId: string, locale: string, unavailable: boolean) {
+  constructor(
+      latitude: number, longitude: number, timezoneId: string, locale: string, accuracy: number, unavailable: boolean) {
     this.latitude = latitude;
     this.longitude = longitude;
     this.timezoneId = timezoneId;
     this.locale = locale;
+    this.accuracy = accuracy;
     this.unavailable = unavailable;
   }
 
   static parseSetting(value: string): Location {
     if (value) {
-      const [position, timezoneId, locale, unavailable] = value.split(':');
+      const [position, timezoneId, locale, unavailable, ...maybeAccuracy] = value.split(':');
+      const accuracy = maybeAccuracy.length ? Number(maybeAccuracy[0]) : Location.DEFAULT_ACCURACY;
       const [latitude, longitude] = position.split('@');
-      return new Location(parseFloat(latitude), parseFloat(longitude), timezoneId, locale, Boolean(unavailable));
+      return new Location(
+          parseFloat(latitude), parseFloat(longitude), timezoneId, locale, accuracy, Boolean(unavailable));
     }
-    return new Location(0, 0, '', '', false);
+    return new Location(0, 0, '', '', Location.DEFAULT_ACCURACY, false);
   }
 
-  static parseUserInput(latitudeString: string, longitudeString: string, timezoneId: string, locale: string): Location
-      |null {
-    if (!latitudeString && !longitudeString) {
+  static parseUserInput(
+      latitudeString: string, longitudeString: string, timezoneId: string, locale: string,
+      accuracyString: string): Location|null {
+    if (!latitudeString && !longitudeString && !accuracyString) {
       return null;
     }
 
     const isLatitudeValid = Location.latitudeValidator(latitudeString);
     const isLongitudeValid = Location.longitudeValidator(longitudeString);
+    const {valid: isAccuracyValid} = Location.accuracyValidator(accuracyString);
 
-    if (!isLatitudeValid && !isLongitudeValid) {
+    if (!isLatitudeValid && !isLongitudeValid && !isAccuracyValid) {
       return null;
     }
 
     const latitude = isLatitudeValid ? parseFloat(latitudeString) : -1;
     const longitude = isLongitudeValid ? parseFloat(longitudeString) : -1;
-    return new Location(latitude, longitude, timezoneId, locale, false);
+    const accuracy = isAccuracyValid ? parseFloat(accuracyString) : Location.DEFAULT_ACCURACY;
+    return new Location(latitude, longitude, timezoneId, locale, accuracy, false);
   }
 
   static latitudeValidator(value: string): boolean {
@@ -522,11 +531,22 @@ export class Location {
     return value === '' || /[a-zA-Z]{2}/.test(value);
   }
 
-  toSetting(): string {
-    return `${this.latitude}@${this.longitude}:${this.timezoneId}:${this.locale}:${this.unavailable || ''}`;
+  static accuracyValidator(value: string): {
+    valid: boolean,
+    errorMessage: (string|undefined),
+  } {
+    if (!value) {
+      return {valid: true, errorMessage: undefined};
+    }
+    const numValue = parseFloat(value);
+    const valid = /^([+-]?[\d]+(\.\d+)?|[+-]?\.\d+)$/.test(value) && numValue >= 0;
+    return {valid, errorMessage: undefined};
   }
 
-  static defaultGeoMockAccuracy = 150;
+  toSetting(): string {
+    return `${this.latitude}@${this.longitude}:${this.timezoneId}:${this.locale}:${this.unavailable || ''}:${
+        this.accuracy || ''}`;
+  }
 }
 
 export class DeviceOrientation {

front_end/panels/sensors/LocationsSettingsTab.ts

@@ -7,6 +7,7 @@ import '../../ui/components/cards/cards.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 * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -47,6 +48,10 @@ const UIStrings = {
    *@description Label for text input for the longitude of a GPS position.
    */
   longitude: 'Longitude',
+  /**
+   *@description Label for text input for the accuracy of a GPS position.
+   */
+  accuracy: 'Accuracy',
   /**
    *@description Error message in the Locations settings pane that declares the location name input must not be empty
    */
@@ -92,6 +97,15 @@ const UIStrings = {
    *@description Error message in the Locations settings pane that declares locale input invalid
    */
   localeMustContainAlphabetic: 'Locale must contain alphabetic characters',
+  /**
+   *@description Error message in the Locations settings pane that declares that the value for the accuracy input must be a number
+   */
+  accuracyMustBeANumber: 'Accuracy must be a number',
+  /**
+   *@description Error message in the Locations settings pane that declares the minimum value for the accuracy input
+   *@example {0} PH1
+   */
+  accuracyMustBeGreaterThanOrEqual: 'Accuracy must be greater than or equal to {PH1}',
   /**
    *@description Text of add locations button in Locations Settings Tab of the Device Toolbar
    */
@@ -182,7 +196,14 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
   }
 
   private addButtonClicked(): void {
-    this.list.addNewItem(this.customSetting.get().length, {title: '', lat: 0, long: 0, timezoneId: '', locale: ''});
+    this.list.addNewItem(this.customSetting.get().length, {
+      title: '',
+      lat: 0,
+      long: 0,
+      timezoneId: '',
+      locale: '',
+      accuracy: SDK.EmulationModel.Location.DEFAULT_ACCURACY
+    });
   }
 
   renderItem(location: LocationDescription, _editable: boolean): Element {
@@ -210,6 +231,9 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     const locale = element.createChild('div', 'locations-list-text');
     locale.textContent = location.locale;
     locale.role = 'cell';
+    element.createChild('div', 'locations-list-separator');
+    element.createChild('div', 'locations-list-text').textContent =
+        String(location.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY);
     return element;
   }
 
@@ -229,6 +253,8 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     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;
 
     const list = this.customSetting.get();
     if (isNew) {
@@ -244,6 +270,7 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     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;
   }
 
@@ -267,6 +294,8 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.timezoneId);
     titles.createChild('div', 'locations-list-separator locations-list-separator-invisible');
     titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.locale);
+    titles.createChild('div', 'locations-list-separator locations-list-separator-invisible');
+    titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.accuracy);
 
     const fields = content.createChild('div', 'locations-edit-row');
     fields.createChild('div', 'locations-list-text locations-list-title locations-input-container')
@@ -287,6 +316,10 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
 
     cell = fields.createChild('div', 'locations-list-text locations-input-container');
     cell.appendChild(editor.createInput('locale', 'text', i18nString(UIStrings.locale), localeValidator));
+    fields.createChild('div', 'locations-list-separator locations-list-separator-invisible');
+
+    cell = fields.createChild('div', 'locations-list-text locations-input-container');
+    cell.appendChild(editor.createInput('accuracy', 'text', i18nString(UIStrings.accuracy), accuracyValidator));
 
     return editor;
 
@@ -392,6 +425,29 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
       const errorMessage = i18nString(UIStrings.localeMustContainAlphabetic);
       return {valid: false, errorMessage};
     }
+
+    function accuracyValidator(
+        _item: LocationDescription, _index: number, input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
+      const minAccuracy = 0;
+      const value = input.value.trim();
+      const parsedValue = Number(value);
+
+      if (!value) {
+        return {valid: true, errorMessage: undefined};
+      }
+
+      let errorMessage;
+      if (Number.isNaN(parsedValue)) {
+        errorMessage = i18nString(UIStrings.accuracyMustBeANumber);
+      } else if (parseFloat(value) < minAccuracy) {
+        errorMessage = i18nString(UIStrings.accuracyMustBeGreaterThanOrEqual, {PH1: minAccuracy});
+      }
+
+      if (errorMessage) {
+        return {valid: false, errorMessage};
+      }
+      return {valid: true, errorMessage: undefined};
+    }
   }
 }
 export interface LocationDescription {
@@ -400,4 +456,5 @@ export interface LocationDescription {
   long: number;
   timezoneId: string;
   locale: string;
+  accuracy?: number;
 }

front_end/panels/sensors/SensorsView.ts

@@ -73,6 +73,10 @@ const UIStrings = {
    *@description Label for the locale relevant to a custom location.
    */
   locale: 'Locale',
+  /**
+   *@description Label for Accuracy of a GPS location.
+   */
+  accuracy: 'Accuracy',
   /**
    *@description Label the orientation of a user's device e.g. tilt in 3D-space.
    */
@@ -180,11 +184,14 @@ export class SensorsView extends UI.Widget.VBox {
   private longitudeInput!: HTMLInputElement;
   private timezoneInput!: HTMLInputElement;
   private localeInput!: HTMLInputElement;
+  private accuracyInput!: HTMLInputElement;
   private latitudeSetter!: (arg0: string) => void;
   private longitudeSetter!: (arg0: string) => void;
   private timezoneSetter!: (arg0: string) => void;
   private localeSetter!: (arg0: string) => void;
+  private accuracySetter!: (arg0: string) => void;
   private localeError!: HTMLElement;
+  private accuracyError!: HTMLElement;
   private customLocationsGroup!: HTMLOptGroupElement;
   private readonly deviceOrientationSetting: Common.Settings.Setting<string>;
   private deviceOrientation: SDK.EmulationModel.DeviceOrientation;
@@ -310,6 +317,7 @@ export class SensorsView extends UI.Widget.VBox {
     const longitudeGroup = this.fieldsetElement.createChild('div', 'latlong-group');
     const timezoneGroup = this.fieldsetElement.createChild('div', 'latlong-group');
     const localeGroup = this.fieldsetElement.createChild('div', 'latlong-group');
+    const accuracyGroup = this.fieldsetElement.createChild('div', 'latlong-group');
 
     const cmdOrCtrl = Host.Platform.isMac() ? '\u2318' : 'Ctrl';
     const modifierKeyMessage = i18nString(UIStrings.adjustWithMousewheelOrUpdownKeys, {PH1: cmdOrCtrl});
@@ -357,6 +365,18 @@ export class SensorsView extends UI.Widget.VBox {
     this.localeSetter(location.locale);
     localeGroup.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.locale), 'locale-title', this.localeInput));
     this.localeError = localeGroup.createChild('div', 'locale-error');
+
+    this.accuracyInput = UI.UIUtils.createInput('', 'number', 'accuracy');
+    accuracyGroup.appendChild(this.accuracyInput);
+    this.accuracyInput.step = 'any';
+    this.accuracyInput.value = SDK.EmulationModel.Location.DEFAULT_ACCURACY.toString();
+    this.accuracySetter = UI.UIUtils.bindInput(
+        this.accuracyInput, this.applyLocationUserInput.bind(this),
+        (value: string) => SDK.EmulationModel.Location.accuracyValidator(value).valid, true, 1);
+    this.accuracySetter(String(location.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY));
+    accuracyGroup.appendChild(
+        UI.UIUtils.createLabel(i18nString(UIStrings.accuracy), 'accuracy-title', this.accuracyInput));
+    this.accuracyError = accuracyGroup.createChild('div', 'accuracy-error');
   }
 
   #locationSelectChanged(): void {
@@ -371,23 +391,26 @@ export class SensorsView extends UI.Widget.VBox {
       this.#locationOverrideEnabled = true;
       const location = SDK.EmulationModel.Location.parseUserInput(
           this.latitudeInput.value.trim(), this.longitudeInput.value.trim(), this.timezoneInput.value.trim(),
-          this.localeInput.value.trim());
+          this.localeInput.value.trim(), this.accuracyInput.value.trim());
       if (!location) {
         return;
       }
       this.#location = location;
     } else if (value === NonPresetOptions.Unavailable) {
       this.#locationOverrideEnabled = true;
-      this.#location = new SDK.EmulationModel.Location(0, 0, '', '', true);
+      this.#location =
+          new SDK.EmulationModel.Location(0, 0, '', '', SDK.EmulationModel.Location.DEFAULT_ACCURACY, true);
     } else {
       this.#locationOverrideEnabled = true;
       const coordinates = JSON.parse(value);
       this.#location = new SDK.EmulationModel.Location(
-          coordinates.lat, coordinates.long, coordinates.timezoneId, coordinates.locale, false);
+          coordinates.lat, coordinates.long, coordinates.timezoneId, coordinates.locale,
+          coordinates.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY, false);
       this.latitudeSetter(coordinates.lat);
       this.longitudeSetter(coordinates.long);
       this.timezoneSetter(coordinates.timezoneId);
       this.localeSetter(coordinates.locale);
+      this.accuracySetter(String(coordinates.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY));
     }
 
     this.applyLocation();
@@ -399,7 +422,7 @@ export class SensorsView extends UI.Widget.VBox {
   private applyLocationUserInput(): void {
     const location = SDK.EmulationModel.Location.parseUserInput(
         this.latitudeInput.value.trim(), this.longitudeInput.value.trim(), this.timezoneInput.value.trim(),
-        this.localeInput.value.trim());
+        this.localeInput.value.trim(), this.accuracyInput.value.trim());
     if (!location) {
       return;
     }
@@ -438,6 +461,7 @@ export class SensorsView extends UI.Widget.VBox {
     this.longitudeSetter('0');
     this.timezoneSetter('');
     this.localeSetter('');
+    this.accuracySetter(SDK.EmulationModel.Location.DEFAULT_ACCURACY.toString());
   }
 
   private createDeviceOrientationSection(): void {