Bug 1257603 - Storage inspector search should ignore hidden columns r?nchevobbe draft
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Tue, 06 Jun 2017 11:08:11 +0100
changeset 593197 454b798e97b44c443437d8b159ef2fdc6554a2a1
parent 592668 2a63a6c35033b5cbc6c98cabc7657c7290284691
child 633048 71cd46a78901ca1623216ea409cd5ebda9fab27b
push id63627
push userbmo:mratcliffe@mozilla.com
push dateTue, 13 Jun 2017 09:34:11 +0000
reviewersnchevobbe
bugs1257603
milestone56.0a1
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
devtools/client/shared/widgets/TableWidget.js
devtools/client/storage/test/browser_storage_search.js
devtools/client/storage/test/storage-search.html
--- a/devtools/client/shared/widgets/TableWidget.js
+++ b/devtools/client/shared/widgets/TableWidget.js
@@ -942,19 +942,21 @@ TableWidget.prototype = {
     }
     // Shouldn't be case-sensitive
     value = value.toLowerCase();
 
     let itemsToHide = [...this.items.keys()];
     // 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);
           break;
         }
       }
     }
     this.emit(EVENTS.TABLE_FILTERED, itemsToHide);
@@ -1078,16 +1080,23 @@ Column.prototype = {
    * 1 - ascending order
    * 2 - descending order
    */
   get sorted() {
     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).
    */
   get private() {
     return this._private;
   },
 
   /**
    * Set the private state of the column (visibility in the UI).
--- a/devtools/client/storage/test/browser_storage_search.js
+++ b/devtools/client/storage/test/browser_storage_search.js
@@ -1,17 +1,22 @@
 // Tests the filter search box in the storage inspector
 "use strict";
 
 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 = [
     // Test that search isn't case-sensitive
     {
       value: "FoO",
       results: [0, 0, 1, 1, 0, 1, 0]
     },
@@ -47,41 +52,88 @@ add_task(function* () {
     },
     {
       value: "bar",
       results: [0, 0, 1, 1, 0, 0, 0]
     },
     // 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
     {
       value: "",
       results: [1, 1, 1, 1, 1, 1, 1]
     },
     // Test input that matches nothing
     {
       value: "input that matches nothing",
       results: [0, 0, 0, 0, 0, 0, 0]
-    }
+    },
   ];
 
+  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]
+    },
+  ];
+
+  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) {
-    info(`Testing input: ${testcase.value}`);
+    let {value, results} = testcase;
 
-    gUI.searchBox.value = testcase.value;
+    info(`Testing input: ${value}`);
+
+    gUI.searchBox.value = value;
     gUI.filterItems();
 
     for (let i = 0; i < rows.length; i++) {
-      info(`Testing row ${i}`);
+      info(`Testing row ${i} for "${value}"`);
       info(`key: ${names[i].value}, value: ${rows[i].value}`);
-      let state = testcase.results[i] ? "visible" : "hidden";
-      is(rows[i].hasAttribute("hidden"), !testcase.results[i],
+      let state = results[i] ? "visible" : "hidden";
+      is(rows[i].hasAttribute("hidden"), !results[i],
          `Row ${i} should be ${state}`);
     }
   }
-
-  yield finishTests();
-});
+}
--- a/devtools/client/storage/test/storage-search.html
+++ b/devtools/client/storage/test/storage-search.html
@@ -1,23 +1,28 @@
 <!DOCTYPE HTML>
 <html>
 <!--
 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";
+
+  <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>
+    /* 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>