Devtools: Fix regex to show error for inputs which expects number

Before this change, latitude and longitude inputs in Geolocations and pixel ratio in Devices Settings which expects a number wasn't throwing error when invalid input was entered.
E.g. An input starting with digits and ending with any non-digit character like 1.1a.
This change uses Number.isNaN for validation instead of regex. Using this method is better instead of regex considering localization and also fixes the current bug.

Before: !/^[\d]+(\.\d+)?|\.\d+$/.test(value)
After:
        parsedValue = Number(value.trim())
        Number.isNaN(parsedValue);

Gif before the change: https://imgur.com/sFOBWfd
Gif after the change: https://imgur.com/BiUll5C

Bug: 990451
Change-Id: Id41ccee141ff36257505e451b7f44b950cb833a5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1776594Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#702081}

third_party/blink/renderer/devtools/front_end/emulation/DeviceModeModel.js

@@ -121,10 +121,11 @@ Emulation.DeviceModeModel = class extends Common.Object {
   static scaleValidator(value) {
     let valid = false;
     let errorMessage;
+    const parsedValue = Number(value.trim());
 
     if (!value) {
       valid = true;
-    } else if (!/^[\d]+(\.\d+)?|\.\d+$/.test(value)) {
+    } else if (Number.isNaN(parsedValue)) {
       errorMessage = ls`Device pixel ratio must be a number or blank.`;
     } else if (value > Emulation.DeviceModeModel.MaxDeviceScaleFactor) {
       errorMessage =

third_party/blink/renderer/devtools/front_end/emulation/GeolocationsSettingsTab.js

@@ -184,13 +184,14 @@ Emulation.GeolocationsSettingsTab = class extends UI.VBox {
       const minLat = -90;
       const maxLat = 90;
       const value = input.value.trim();
+      const parsedValue = Number(value);
 
       if (!value) {
         return {valid: true};
       }
 
       let errorMessage;
-      if (!/^-?[\d]+(\.\d+)?|\.\d+$/.test(value)) {
+      if (Number.isNaN(parsedValue)) {
         errorMessage = ls`Latitude must be a number`;
       } else if (parseFloat(value) < minLat) {
         errorMessage = ls`Latitude must be greater than or equal to ${minLat}`;
@@ -214,13 +215,14 @@ Emulation.GeolocationsSettingsTab = class extends UI.VBox {
       const minLong = -180;
       const maxLong = 180;
       const value = input.value.trim();
+      const parsedValue = Number(value);
 
       if (!value) {
         return {valid: true};
       }
 
       let errorMessage;
-      if (!/^-?[\d]+(\.\d+)?|\.\d+$/.test(value)) {
+      if (Number.isNaN(parsedValue)) {
         errorMessage = ls`Longitude must be a number`;
       } else if (parseFloat(value) < minLong) {
         errorMessage = ls`Longitude must be greater than or equal to ${minLong}`;

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/settings/emulated-device-a11y-test-expected.txt

+Test error message in the settings tool Emulated Device pane
+
+Running: testNewDeviceError
+Invalidating the device pixel ratio
+Error message: Device pixel ratio must be a number or blank.
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/settings/emulated-device-a11y-test.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult('Test error message in the settings tool Emulated Device pane');
+  await UI.viewManager.showView('devices');
+  const devicesWidget = await UI.viewManager.view('devices').widget();
+
+  async function testNewDeviceError() {
+    const addDeviceButton = devicesWidget._defaultFocusedElement;
+    addDeviceButton.click();
+
+    TestRunner.addResult(`Invalidating the device pixel ratio`);
+    const editor = devicesWidget._list._editor;
+    const title = editor.control('title');
+    const width = editor.control('width');
+    const height = editor.control('height');
+    const scale = editor.control('scale');
+    title.value = 'Device';
+    width.value = 700;
+    height.value = 400;
+    scale.value = '  zzz.213213';
+
+    scale.dispatchEvent(new Event('input'));
+    const errorMessage = devicesWidget._list._editor._errorMessageContainer.textContent;
+    TestRunner.addResult(`Error message: ${errorMessage}`);
+  }
+
+  TestRunner.runAsyncTestSuite([testNewDeviceError]);
+})();
\ No newline at end of file

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/settings/geolocations-a11y-test-expected.txt

@@ -8,6 +8,10 @@ aXe violations: []
 Running: testNewLocationError
 Invalidating the Location name input
 Error message: Location name cannot be empty
+Invalidating the Latitude input
+Error message: Latitude must be a number
+Invalidating the Longitude input
+Error message: Longitude must be a number
 aXe violations: []
 
 

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/settings/geolocations-a11y-test.js

@@ -24,10 +24,27 @@
     const locationsEditor = geolocationsWidget._list._editor;
     const newLocationInputs = locationsEditor._controls;
     const nameInput = newLocationInputs[0];
+    const latitudeInput = newLocationInputs[1];
+    const longitudeInput = newLocationInputs[2];
+    let errorMessage;
+
     TestRunner.addResult(`Invalidating the ${nameInput.getAttribute('aria-label')} input`);
     nameInput.blur();
+    errorMessage = locationsEditor._errorMessageContainer.textContent;
+    TestRunner.addResult(`Error message: ${errorMessage}`);
+
+    TestRunner.addResult(`Invalidating the ${latitudeInput.getAttribute('aria-label')} input`);
+    nameInput.value = 'location';
+    latitudeInput.value = 'a.a';
+    latitudeInput.dispatchEvent(new Event('input'));
+    errorMessage = locationsEditor._errorMessageContainer.textContent;
+    TestRunner.addResult(`Error message: ${errorMessage}`);
 
-    const errorMessage = locationsEditor._errorMessageContainer.textContent;
+    TestRunner.addResult(`Invalidating the ${longitudeInput.getAttribute('aria-label')} input`);
+    latitudeInput.value = '1.1';
+    longitudeInput.value = '1a.1';
+    longitudeInput.dispatchEvent(new Event('input'));
+    errorMessage = locationsEditor._errorMessageContainer.textContent;
     TestRunner.addResult(`Error message: ${errorMessage}`);
 
     await AxeCoreTestRunner.runValidation(geolocationsWidget.contentElement);