Bug 1257603 - Storage inspector search should ignore hidden columns r=nchevobbe

storage-search.html:
  - Switched  to use cookies.

browser_storage_search.js:
  - Use a little destructuring.
  - Hide all but name and value columns.
  - Run search tests with both columns visible.
  - Hide the value column.
  - Run search tests with only the name column visible.

MozReview-Commit-ID: JKeRLWfhpFb

--HG--
extra : rebase_source : f4e045f97dee8ad2470289eea69d208cedc79adb

devtools/client/shared/widgets/TableWidget.js

@@ -947,9 +947,11 @@ TableWidget.prototype = {
     // Loop through all items and hide unmatched items
     for (let [id, val] of this.items) {
       for (let prop in val) {
-        if (ignoreProps.includes(prop)) {
+        let column = this.columns.get(prop);
+        if (ignoreProps.includes(prop) || column.hidden) {
           continue;
         }
+
         let propValue = val[prop].toString().toLowerCase();
         if (propValue.includes(value)) {
           itemsToHide.splice(itemsToHide.indexOf(id), 1);
@@ -1082,6 +1084,13 @@ Column.prototype = {
     return this._sortState || 0;
   },
 
+  /**
+   * Returns a boolean indicating whether the column is hidden.
+   */
+  get hidden() {
+    return this.wrapper.hasAttribute("hidden");
+  },
+
   /**
    * Get the private state of the column (visibility in the UI).
    */

devtools/client/storage/test/browser_storage_search.js

@@ -4,9 +4,14 @@
 add_task(function* () {
   yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-search.html");
 
-  let $$ = sel => gPanelWindow.document.querySelectorAll(sel);
   gUI.tree.expandAll();
-  yield selectTreeItem(["localStorage", "http://test1.example.org"]);
+  yield selectTreeItem(["cookies", "http://test1.example.org"]);
+
+  showColumn("expires", false);
+  showColumn("host", false);
+  showColumn("isHttpOnly", false);
+  showColumn("lastAccessed", false);
+  showColumn("path", false);
 
   // Results: 0=hidden, 1=visible
   let testcases = [
@@ -52,7 +57,7 @@ add_task(function* () {
     // Test input with whitespace
     {
       value: "energy b",
-      results: [0, 0, 0, 1, 0, 0, 0]
+      results: [0, 0, 1, 0, 0, 0, 0]
     },
     // Test no input at all
     {
@@ -63,25 +68,72 @@ add_task(function* () {
     {
       value: "input that matches nothing",
       results: [0, 0, 0, 0, 0, 0, 0]
-    }
+    },
   ];
 
-  let names = $$("#name .table-widget-cell");
-  let rows = $$("#value .table-widget-cell");
-  for (let testcase of testcases) {
-    info(`Testing input: ${testcase.value}`);
+  let testcasesAfterHiding = [
+    // Test that search isn't case-sensitive
+    {
+      value: "OR",
+      results: [0, 0, 0, 0, 0, 1, 0]
+    },
+    {
+      value: "01",
+      results: [1, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      value: "2016",
+      results: [0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      value: "56789",
+      results: [0, 0, 0, 0, 0, 0, 0]
+    },
+    // Test filtering by value
+    {
+      value: "horse",
+      results: [0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      value: "$$$",
+      results: [0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      value: "bar",
+      results: [0, 0, 0, 0, 0, 0, 0]
+    },
+    // Test input with whitespace
+    {
+      value: "energy b",
+      results: [0, 0, 0, 0, 0, 0, 0]
+    },
+  ];
 
-    gUI.searchBox.value = testcase.value;
-    gUI.filterItems();
-
-    for (let i = 0; i < rows.length; i++) {
-      info(`Testing row ${i}`);
-      info(`key: ${names[i].value}, value: ${rows[i].value}`);
-      let state = testcase.results[i] ? "visible" : "hidden";
-      is(rows[i].hasAttribute("hidden"), !testcase.results[i],
-         `Row ${i} should be ${state}`);
-    }
-  }
+  runTests(testcases);
+  showColumn("value", false);
+  runTests(testcasesAfterHiding);
 
   yield finishTests();
 });
+
+function runTests(testcases) {
+  let $$ = sel => gPanelWindow.document.querySelectorAll(sel);
+  let names = $$("#name .table-widget-cell");
+  let rows = $$("#value .table-widget-cell");
+  for (let testcase of testcases) {
+    let {value, results} = testcase;
+
+    info(`Testing input: ${value}`);
+
+    gUI.searchBox.value = value;
+    gUI.filterItems();
+
+    for (let i = 0; i < rows.length; i++) {
+      info(`Testing row ${i} for "${value}"`);
+      info(`key: ${names[i].value}, value: ${rows[i].value}`);
+      let state = results[i] ? "visible" : "hidden";
+      is(rows[i].hasAttribute("hidden"), !results[i],
+         `Row ${i} should be ${state}`);
+    }
+  }
+}

devtools/client/storage/test/storage-search.html

@@ -6,18 +6,23 @@ Bug 1224115 - Storage Inspector table filtering
 <head>
   <meta charset="utf-8">
   <title>Storage inspector table filtering test</title>
-</head>
-<body>
-<script type="text/javascript">
-"use strict";
 
-localStorage.setItem("01234", "56789");
-localStorage.setItem("ANIMAL", "hOrSe");
-localStorage.setItem("FOO", "bArBaz");
-localStorage.setItem("food", "energy bar");
-localStorage.setItem("money", "##$$$**");
-localStorage.setItem("sport", "football");
-localStorage.setItem("year", "2016");
-</script>
+  <script type="text/javascript">
+    "use strict";
+
+    /* exported init */
+    function init() {
+      document.cookie = "01234=56789";
+      document.cookie = "ANIMAL=hOrSe";
+      document.cookie = "food=energy bar";
+      document.cookie = "FOO=bArBaz";
+      document.cookie = "money=##$$$**";
+      document.cookie = "sport=football";
+      document.cookie = "year=2016";
+    }
+  </script>
+
+</head>
+<body onload="init()">
 </body>
 </html>