[DevTools] Check blackboxing, port forwarding and file system mapping for duplicates.

Drive-by: fixing UI glitches.

BUG=549448,549469

Review URL: https://codereview.chromium.org/1428093002

Cr-Commit-Position: refs/heads/master@{#357705}

8 files changed, 113 insertions, 50 deletions

diff --git a/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js b/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js
index 983c947..b43471e 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js
@@ -156,9 +156,6 @@ WebInspector.NetworkConditionsSettingsTab.prototype = {
 
     _conditionsUpdated: function()
     {
-        if (this._muteUpdate)
-            return;
-
         this._list.clear();
 
         var conditions = this._customSetting.get();
@@ -207,10 +204,7 @@ WebInspector.NetworkConditionsSettingsTab.prototype = {
     {
         var list = this._customSetting.get();
         list.splice(index, 1);
-        this._muteUpdate = true;
         this._customSetting.set(list);
-        this._muteUpdate = false;
-        this._list.removeItem(index);
     },
 
     /**
@@ -284,30 +278,36 @@ WebInspector.NetworkConditionsSettingsTab.prototype = {
         return editor;
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function titleValidator(input)
+        function titleValidator(item, index, input)
         {
             var value = input.value.trim();
             return value.length > 0 && value.length < 50;
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function throughputValidator(input)
+        function throughputValidator(item, index, input)
         {
             var value = input.value.trim();
             return !value || (/^[\d]+(\.\d+)?|\.\d+$/.test(value) && value >= 0 && value <= 10000000);
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function latencyValidator(input)
+        function latencyValidator(item, index, input)
         {
             var value = input.value.trim();
             return !value || (/^[\d]+$/.test(value) && value >= 0 && value <= 1000000);
diff --git a/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js b/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js
index 4e91b62..cf223e4 100644
--- a/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js
+++ b/third_party/WebKit/Source/devtools/front_end/devices/DevicesView.js
@@ -42,6 +42,9 @@ WebInspector.DevicesView = function()
 
     InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DevicesUpdated, this._devicesUpdated, this);
     InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this);
+
+    this.contentElement.tabIndex = 0;
+    this.setDefaultFocusedElement(this.contentElement);
 }
 
 WebInspector.DevicesView.prototype = {
@@ -324,29 +327,41 @@ WebInspector.DevicesView.DiscoveryView.prototype = {
         this._editor = editor;
         var content = editor.contentElement();
         var fields = content.createChild("div", "port-forwarding-edit-row");
-        fields.createChild("div", "port-forwarding-value port-forwarding-port").appendChild(editor.createInput("port", "text", "Device port (3333)", portValidator));
+        fields.createChild("div", "port-forwarding-value port-forwarding-port").appendChild(editor.createInput("port", "text", "Device port (3333)", portValidator.bind(this)));
         fields.createChild("div", "port-forwarding-separator port-forwarding-separator-invisible");
         fields.createChild("div", "port-forwarding-value").appendChild(editor.createInput("address", "text", "Local address (dev.example.corp:3333)", addressValidator));
         return editor;
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
+         * @this {WebInspector.DevicesView.DiscoveryView}
          * @return {boolean}
          */
-        function portValidator(input)
+        function portValidator(item, index, input)
         {
-            var match = input.value.trim().match(/^(\d+)$/);
+            var value = input.value.trim();
+            var match = value.match(/^(\d+)$/);
             if (!match)
                 return false;
             var port = parseInt(match[1], 10);
-            return port >= 1024 && port <= 65535;
+            if (port < 1024 || port > 65535)
+                return false;
+            for (var i = 0; i < this._portForwardingConfig.length; ++i) {
+                if (i !== index && this._portForwardingConfig[i].port === value)
+                    return false;
+            }
+            return true;
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function addressValidator(input)
+        function addressValidator(item, index, input)
         {
             var match = input.value.trim().match(/^([a-zA-Z0-9\.\-_]+):(\d+)$/);
             if (!match)
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js b/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js
index a9b5ba0..26ba0e8 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js
@@ -19,8 +19,8 @@ WebInspector.DevicesSettingsTab = function()
     this.containerElement = this.element.createChild("div", "help-container-wrapper").createChild("div", "settings-tab help-content help-container");
 
     var buttonsRow = this.containerElement.createChild("div", "devices-button-row");
-    var addCustomButton = createTextButton(WebInspector.UIString("Add custom device..."), this._addCustomDevice.bind(this));
-    buttonsRow.appendChild(addCustomButton);
+    this._addCustomButton = createTextButton(WebInspector.UIString("Add custom device..."), this._addCustomDevice.bind(this));
+    buttonsRow.appendChild(this._addCustomButton);
 
     this._list = new WebInspector.ListWidget(this);
     this._list.registerRequiredCSS("emulation/devicesSettingsTab.css");
@@ -31,7 +31,7 @@ WebInspector.DevicesSettingsTab = function()
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, this._devicesUpdated, this);
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._devicesUpdated, this);
 
-    this.setDefaultFocusedElement(addCustomButton);
+    this.setDefaultFocusedElement(this._addCustomButton);
 }
 
 WebInspector.DevicesSettingsTab.prototype = {
@@ -156,6 +156,8 @@ WebInspector.DevicesSettingsTab.prototype = {
             WebInspector.emulatedDevicesList.addCustomDevice(device);
         else
             WebInspector.emulatedDevicesList.saveCustomDevices();
+        this._addCustomButton.scrollIntoView();
+        this._addCustomButton.focus();
     },
 
     /**
@@ -202,38 +204,46 @@ WebInspector.DevicesSettingsTab.prototype = {
         return editor;
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function titleValidator(input)
+        function titleValidator(item, index, input)
         {
             var value = input.value.trim();
             return value.length > 0 && value.length < 50;
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function sizeValidator(input)
+        function sizeValidator(item, index, input)
         {
             return !WebInspector.OverridesSupport.deviceSizeValidator(input.value);
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function scaleValidator(input)
+        function scaleValidator(item, index, input)
         {
             return !WebInspector.OverridesSupport.deviceScaleFactorValidator(input.value);
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function userAgentValidator(input)
+        function userAgentValidator(item, index, input)
         {
             return true;
         }
diff --git a/third_party/WebKit/Source/devtools/front_end/settings/EditFileSystemView.js b/third_party/WebKit/Source/devtools/front_end/settings/EditFileSystemView.js
index bf90adf..627629a 100644
--- a/third_party/WebKit/Source/devtools/front_end/settings/EditFileSystemView.js
+++ b/third_party/WebKit/Source/devtools/front_end/settings/EditFileSystemView.js
@@ -85,14 +85,19 @@ WebInspector.EditFileSystemView.prototype = {
             return;
 
         this._mappingsList.clear();
-        this._mappings = WebInspector.fileSystemMapping.mappingEntries(this._fileSystemPath);
-        for (var entry of this._mappings) {
-            if (entry.configurable)
+        this._mappings = [];
+        var mappings = WebInspector.fileSystemMapping.mappingEntries(this._fileSystemPath);
+        for (var entry of mappings) {
+            if (entry.configurable) {
                 this._mappingsList.appendItem(entry, true);
+                this._mappings.push(entry);
+            }
         }
-        for (var entry of this._mappings) {
-            if (!entry.configurable)
+        for (var entry of mappings) {
+            if (!entry.configurable) {
                 this._mappingsList.appendItem(entry, false);
+                this._mappings.push(entry);
+            }
         }
 
         this._excludedFoldersList.clear();
@@ -156,16 +161,12 @@ WebInspector.EditFileSystemView.prototype = {
      */
     removeItemRequested: function(item, index)
     {
-        this._muteUpdate = true;
         if (item instanceof WebInspector.FileSystemMapping.Entry) {
             var entry = this._mappings[index];
             WebInspector.fileSystemMapping.removeFileMapping(entry.fileSystemPath, entry.urlPrefix, entry.pathPrefix);
-            this._mappingsList.removeItem(index);
         } else {
             WebInspector.isolatedFileSystemManager.fileSystem(this._fileSystemPath).removeExcludedFolder(this._excludedFolders[index]);
-            this._excludedFoldersList.removeItem(index);
         }
-        this._muteUpdate = false;
     },
 
     /**
@@ -236,24 +237,36 @@ WebInspector.EditFileSystemView.prototype = {
         return editor;
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          * @this {WebInspector.EditFileSystemView}
          */
-        function urlPrefixValidator(input)
+        function urlPrefixValidator(item, index, input)
         {
             var prefix = this._normalizePrefix(input.value);
+            for (var i = 0; i < this._mappings.length; ++i) {
+                if (i !== index && this._mappings[i].configurable && this._mappings[i].urlPrefix === prefix)
+                    return false;
+            }
             return !!prefix;
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          * @this {WebInspector.EditFileSystemView}
          */
-        function pathPrefixValidator(input)
+        function pathPrefixValidator(item, index, input)
         {
             var prefix = this._normalizePrefix(input.value);
+            for (var i = 0; i < this._mappings.length; ++i) {
+                if (i !== index && this._mappings[i].configurable && this._mappings[i].pathPrefix === prefix)
+                    return false;
+            }
             return !!prefix;
         }
     },
@@ -279,13 +292,20 @@ WebInspector.EditFileSystemView.prototype = {
         return editor;
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          * @this {WebInspector.EditFileSystemView}
          */
-        function pathPrefixValidator(input)
+        function pathPrefixValidator(item, index, input)
         {
             var prefix = this._normalizePrefix(input.value);
+            var configurableCount = WebInspector.isolatedFileSystemManager.fileSystem(this._fileSystemPath).excludedFolders().size;
+            for (var i = 0; i < configurableCount; ++i) {
+                if (i !== index && this._excludedFolders[i] === prefix)
+                    return false;
+            }
             return !!prefix;
         }
     },
diff --git a/third_party/WebKit/Source/devtools/front_end/settings/FrameworkBlackboxSettingsTab.js b/third_party/WebKit/Source/devtools/front_end/settings/FrameworkBlackboxSettingsTab.js
index f994054..3e18f62 100644
--- a/third_party/WebKit/Source/devtools/front_end/settings/FrameworkBlackboxSettingsTab.js
+++ b/third_party/WebKit/Source/devtools/front_end/settings/FrameworkBlackboxSettingsTab.js
@@ -45,9 +45,6 @@ WebInspector.FrameworkBlackboxSettingsTab.prototype = {
 
     _settingUpdated: function()
     {
-        if (this._muteUpdate)
-            return;
-
         this._list.clear();
         var patterns = this._setting.getAsArray();
         for (var i = 0; i < patterns.length; ++i)
@@ -87,10 +84,7 @@ WebInspector.FrameworkBlackboxSettingsTab.prototype = {
     {
         var patterns = this._setting.getAsArray();
         patterns.splice(index, 1);
-        this._muteUpdate = true;
         this._setting.setAsArray(patterns);
-        this._muteUpdate = false;
-        this._list.removeItem(index);
     },
 
     /**
@@ -141,19 +135,28 @@ WebInspector.FrameworkBlackboxSettingsTab.prototype = {
         titles.createChild("div", "blackbox-behavior").textContent = WebInspector.UIString("Behavior");
 
         var fields = content.createChild("div", "blackbox-edit-row");
-        fields.createChild("div", "blackbox-pattern").appendChild(editor.createInput("pattern", "text", "/framework\\.js$", patternValidator));
+        fields.createChild("div", "blackbox-pattern").appendChild(editor.createInput("pattern", "text", "/framework\\.js$", patternValidator.bind(this)));
         fields.createChild("div", "blackbox-separator blackbox-separator-invisible");
         fields.createChild("div", "blackbox-behavior").appendChild(editor.createSelect("behavior", [this._blackboxLabel, this._disabledLabel], behaviorValidator));
 
         return editor;
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
+         * @this {WebInspector.FrameworkBlackboxSettingsTab}
          * @return {boolean}
          */
-        function patternValidator(input)
+        function patternValidator(item, index, input)
         {
             var pattern = input.value.trim();
+            var patterns = this._setting.getAsArray();
+            for (var i = 0; i < patterns.length; ++i) {
+                if (i !== index && patterns[i].pattern === pattern)
+                    return false;
+            }
+
             var regex;
             try {
                 regex = new RegExp(pattern);
@@ -163,10 +166,12 @@ WebInspector.FrameworkBlackboxSettingsTab.prototype = {
         }
 
         /**
+         * @param {*} item
+         * @param {number} index
          * @param {!HTMLInputElement|!HTMLSelectElement} input
          * @return {boolean}
          */
-        function behaviorValidator(input)
+        function behaviorValidator(item, index, input)
         {
             return true;
         }
diff --git a/third_party/WebKit/Source/devtools/front_end/settings/editFileSystemView.css b/third_party/WebKit/Source/devtools/front_end/settings/editFileSystemView.css
index 7d8c654..4ee0115 100644
--- a/third_party/WebKit/Source/devtools/front_end/settings/editFileSystemView.css
+++ b/third_party/WebKit/Source/devtools/front_end/settings/editFileSystemView.css
@@ -23,7 +23,6 @@
 }
 
 .file-system-list {
-    max-width: 600px;
     flex: auto;
 }
 
diff --git a/third_party/WebKit/Source/devtools/front_end/settings/settingsScreen.css b/third_party/WebKit/Source/devtools/front_end/settings/settingsScreen.css
index dbfaaeb..fa9f5f3 100644
--- a/third_party/WebKit/Source/devtools/front_end/settings/settingsScreen.css
+++ b/third_party/WebKit/Source/devtools/front_end/settings/settingsScreen.css
@@ -292,6 +292,7 @@ p.folder-exclude-pattern {
     margin-bottom: 18px;
     padding: 0 8px;
     border-left: 1px solid hsl(0, 0%, 90%);
+    max-width: 800px;
 }
 
 .settings-tab .file-system-header {
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js b/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
index 8de1aab..1a53abd 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
@@ -228,10 +228,11 @@ WebInspector.ListWidget.prototype = {
         if (element)
             element.classList.add("hidden");
 
+        var index = element ? this._elements.indexOf(element) : -1;
         this._editor = this._delegate.beginEdit(item);
         this._updatePlaceholder();
         this._list.insertBefore(this._editor.element, insertionPoint);
-        this._editor.beginEdit(element ? WebInspector.UIString("Save") : WebInspector.UIString("Add"), this._commitEditing.bind(this), this._stopEditing.bind(this));
+        this._editor.beginEdit(item, index, element ? WebInspector.UIString("Save") : WebInspector.UIString("Add"), this._commitEditing.bind(this), this._stopEditing.bind(this));
     },
 
     _commitEditing: function()
@@ -295,13 +296,17 @@ WebInspector.ListWidget.Editor = function()
     this._controls = [];
     /** @type {!Map<string, !HTMLInputElement|!HTMLSelectElement>} */
     this._controlByName = new Map();
-    /** @type {!Array<function((!HTMLInputElement|!HTMLSelectElement)):boolean>} */
+    /** @type {!Array<function(*, number, (!HTMLInputElement|!HTMLSelectElement)):boolean>} */
     this._validators = [];
 
     /** @type {?function()} */
     this._commit = null;
     /** @type {?function()} */
     this._cancel = null;
+    /** @type {*|null} */
+    this._item = null;
+    /** @type {number} */
+    this._index = -1;
 }
 
 WebInspector.ListWidget.Editor.prototype = {
@@ -317,7 +322,7 @@ WebInspector.ListWidget.Editor.prototype = {
      * @param {string} name
      * @param {string} type
      * @param {string} title
-     * @param {function((!HTMLInputElement|!HTMLSelectElement)):boolean} validator
+     * @param {function(*, number, (!HTMLInputElement|!HTMLSelectElement)):boolean} validator
      * @return {!HTMLInputElement}
      */
     createInput: function(name, type, title, validator)
@@ -336,7 +341,7 @@ WebInspector.ListWidget.Editor.prototype = {
     /**
      * @param {string} name
      * @param {!Array<string>} options
-     * @param {function((!HTMLInputElement|!HTMLSelectElement)):boolean} validator
+     * @param {function(*, number, (!HTMLInputElement|!HTMLSelectElement)):boolean} validator
      * @return {!HTMLSelectElement}
      */
     createSelect: function(name, options, validator)
@@ -372,7 +377,7 @@ WebInspector.ListWidget.Editor.prototype = {
         var allValid = true;
         for (var index = 0; index < this._controls.length; ++index) {
             var input = this._controls[index];
-            var valid = this._validators[index].call(null, input);
+            var valid = this._validators[index].call(null, this._item, this._index, input);
             input.classList.toggle("error-input", !valid && !forceValid);
             allValid &= valid;
         }
@@ -380,17 +385,21 @@ WebInspector.ListWidget.Editor.prototype = {
     },
 
     /**
+     * @param {*} item
+     * @param {number} index
      * @param {string} commitButtonTitle
      * @param {function()} commit
      * @param {function()} cancel
      */
-    beginEdit: function(commitButtonTitle, commit, cancel)
+    beginEdit: function(item, index, commitButtonTitle, commit, cancel)
     {
         this._commit = commit;
         this._cancel = cancel;
+        this._item = item;
+        this._index = index;
 
         this._commitButton.textContent = commitButtonTitle;
-        this.element.scrollIntoView();
+        this.element.scrollIntoView(false);
         if (this._controls.length)
             this._controls[0].focus();
         this._validateControls(true);
@@ -404,6 +413,8 @@ WebInspector.ListWidget.Editor.prototype = {
         var commit = this._commit;
         this._commit = null;
         this._cancel = null;
+        this._item = null;
+        this._index = -1;
         commit();
     },
 
@@ -412,6 +423,8 @@ WebInspector.ListWidget.Editor.prototype = {
         var cancel = this._cancel;
         this._commit = null;
         this._cancel = null;
+        this._item = null;
+        this._index = -1;
         cancel();
     }
 }