RC: Allow quering for extra origins in chrome://discards.

Bug: 874968
Change-Id: I289e12b23e3bac144615ca5cfbe861e22404170a
Reviewed-on: https://chromium-review.googlesource.com/1244497Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Chris Hamilton <chrisha@chromium.org>
Commit-Queue: Sigurður Ásgeirsson <siggi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594476}

chrome/browser/resources/discards/database_tab.html

@@ -8,13 +8,21 @@ general use and is not localized.
 -->
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="sorted_table_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/assert.html">
-<script src="chrome://resources/js/cr.js"></script>
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="sorted_table_behavior.html">
 
 <dom-module id="database-tab">
   <template>
     <style>
+      .add-origin-container {
+        display: flex;
+        padding-top: 10px;
+      }
+
       table {
         border-collapse: collapse;
       }
@@ -159,6 +167,19 @@ general use and is not localized.
         </template>
       </tbody>
     </table>
+    <div class="add-origin-container">
+      <cr-input id="addOriginInput" label="Add Origin" value="{{newOrigin_}}"
+           on-keydown="onOriginKeydown_" placeholder="https://example.org"
+           invalid="[[!isEmptyOrValidOrigin_(newOrigin_)]]"
+           error-message="The origin must be a valid URL without a path."
+           autofocus>
+        <button slot="suffix" label="Add Origin"
+            on-click="onAddOriginClick_"
+            disabled="[[!isValidOrigin_(newOrigin_)]]">
+          <iron-icon icon="cr:check"></iron-icon>
+        </button>
+      </cr-input>
+    </div>
   </template>
   <script src="database_tab.js"></script>
 </dom-module>

chrome/browser/resources/discards/database_tab.js

@@ -203,6 +203,14 @@ Polymer({
       type: Object,
       value: {numRows: -1, onDiskSizeKb: -1},
     },
+
+    /**
+     * An origin that can be added to requestedOrigins_ by onAddOriginClick_.
+     * @private {!string}
+     */
+    newOrigin_: {
+      type: String,
+    },
   },
 
   /** @private {number} */
@@ -270,6 +278,38 @@ Polymer({
         });
   },
 
+  /**
+   * Adds the current new origin to requested origins and starts an update.
+   * @private
+   */
+  addNewOrigin_: function() {
+    this.requestedOrigins_[this.newOrigin_] = true;
+    this.newOrigin_ = '';
+    this.updateDbRows_();
+  },
+
+  /**
+   * An on-click handler that adds the current new origin to requested origins.
+   * @private
+   */
+  onAddOriginClick_: function() {
+    this.addNewOrigin_();
+
+    // Set the focus back to the input field for convenience.
+    this.$.addOriginInput.focus();
+  },
+
+  /**
+   * A key-down handler that adds the current new origin to requested origins.
+   * @private
+   */
+  onOriginKeydown_: function(e) {
+    if (e.key === 'Enter' && this.isValidOrigin_(this.newOrigin_)) {
+      this.addNewOrigin_();
+      e.stopPropagation();
+    }
+  },
+
   /**
    * Issues a request for the database sizes and renders on response.
    * @private
@@ -307,6 +347,26 @@ Polymer({
     };
   },
 
+  /**
+   * @param {string} origin A potentially valid origin string.
+   * @return {boolean} Whether the origin is valid.
+   * @private
+   */
+  isValidOrigin_: function(origin) {
+    const re = /(https?|ftp):\/\/[a-z+.]/;
+
+    return re.test(origin);
+  },
+
+  /**
+   * @param {string} origin A potentially valid origin string.
+   * @return {boolean} Whether the origin is valid or empty.
+   * @private
+   */
+  isEmptyOrValidOrigin_: function(origin) {
+    return !origin || this.isValidOrigin_(origin);
+  },
+
   /**
    * @param {boolean} value The value to convert.
    * @return {string} A display string representing value.