Bug 843019 - Add VariablesViewController#setSingleVariable. r=vp, r=msucan

browser/devtools/netmonitor/netmonitor-controller.js

@@ -65,6 +65,7 @@ Cu.import("resource:///modules/devtools/sourceeditor/source-editor.jsm");
 Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 Cu.import("resource:///modules/devtools/SideMenuWidget.jsm");
 Cu.import("resource:///modules/devtools/VariablesView.jsm");
+Cu.import("resource:///modules/devtools/VariablesViewController.jsm");
 Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",

browser/devtools/netmonitor/netmonitor-view.js

@@ -1539,6 +1539,7 @@ NetworkDetailsView.prototype = {
       Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {
         searchPlaceholder: L10N.getStr("jsonFilterText")
       }));
+    VariablesViewController.attach(this._json);
 
     this._paramsQueryString = L10N.getStr("paramsQueryString");
     this._paramsFormData = L10N.getStr("paramsFormData");
@@ -1889,9 +1890,10 @@ NetworkDetailsView.prototype = {
             ? L10N.getFormatStr("jsonpScopeName", callbackPadding[0].slice(0, -1))
             : L10N.getStr("jsonScopeName");
 
-          let jsonScope = this._json.addScope(jsonScopeName);
-          jsonScope.addItem().populate(jsonObject, { expanded: true });
-          jsonScope.expanded = true;
+          this._json.controller.setSingleVariable({
+            label: jsonScopeName,
+            rawObject: jsonObject,
+          });
         }
         // Malformed JSON.
         else {

browser/devtools/scratchpad/scratchpad.js

@@ -1816,15 +1816,8 @@ ScratchpadSidebar.prototype = {
    */
   _update: function SS__update(aObject)
   {
-    let view = this.variablesView;
-    view.empty();
-
-    let scope = view.addScope();
-    scope.expanded = true;
-    scope.locked = true;
-
-    let container = scope.addItem();
-    return view.controller.expand(container, aObject);
+    let options = { objectActor: aObject };
+    return this.variablesView.controller.setSingleVariable(options).expanded;
   }
 };
 

browser/devtools/shared/widgets/VariablesViewController.jsm

@@ -40,7 +40,7 @@ this.EXPORTED_SYMBOLS = ["VariablesViewController"];
  *
  * @param VariablesView aView
  *        The view to attach to.
- * @param object aOptions
+ * @param object aOptions [optional]
  *        Options for configuring the controller. Supported options:
  *        - getObjectClient: callback for creating an object grip client
  *        - getLongStringClient: callback for creating a long string grip client
@@ -49,7 +49,7 @@ this.EXPORTED_SYMBOLS = ["VariablesViewController"];
  *        - getterOrSetterEvalMacro: callback for creating a getter/setter eval macro
  *        - simpleValueEvalMacro: callback for creating a simple value eval macro
  */
-function VariablesViewController(aView, aOptions) {
+function VariablesViewController(aView, aOptions = {}) {
   this.addExpander = this.addExpander.bind(this);
 
   this._getObjectClient = aOptions.getObjectClient;
@@ -341,6 +341,38 @@ VariablesViewController.prototype = {
       }
     }
   },
+
+  /**
+   * Helper function for setting up a single Scope with a single Variable
+   * contained within it.
+   *
+   * @param object aOptions
+   *        Options for the contents of the view:
+   *        - objectActor: the grip of the new ObjectActor to show.
+   *        - rawObject: the new raw object to show.
+   *        - label: the new label for the inspected object.
+   * @return Object
+   *         - variable: the created Variable.
+   *         - expanded: the Promise that resolves when the variable expands.
+   */
+  setSingleVariable: function(aOptions) {
+    this.view.empty();
+    let scope = this.view.addScope(aOptions.label);
+    scope.expanded = true;
+    scope.locked = true;
+
+    let variable = scope.addItem();
+    let expanded;
+
+    if (aOptions.objectActor) {
+      expanded = this.expand(variable, aOptions.objectActor);
+    } else if (aOptions.rawObject) {
+      variable.populate(aOptions.rawObject, { expanded: true });
+      expanded = promise.resolve();
+    }
+
+    return { variable: variable, expanded: expanded };
+  },
 };
 
 

browser/devtools/webconsole/test/Makefile.in

@@ -92,6 +92,7 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_770099_violation.js \
 	browser_webconsole_bug_766001_JS_Console_in_Debugger.js \
 	browser_webconsole_bug_782653_CSS_links_in_Style_Editor.js \
+	browser_webconsole_bug_843019_variables_view_filter.js \
 	browser_cached_messages.js \
 	browser_bug664688_sandbox_update_after_navigation.js \
 	browser_result_format_as_string.js \

browser/devtools/webconsole/test/browser_webconsole_bug_843019_variables_view_filter.js

@@ -0,0 +1,79 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Test for bug 843019.
+// Check that variables view filter works as expected in the web console.
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-eval-in-stackframe.html";
+
+let gVariablesView;
+
+function test()
+{
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, consoleOpened);
+  }, true);
+}
+
+function consoleOpened(hud)
+{
+  hud.jsterm.execute("fooObj", (msg) => {
+    ok(msg, "output message found");
+    isnot(msg.textContent.indexOf("[object Object]"), -1, "message text check");
+
+    hud.jsterm.once("variablesview-fetched", (aEvent, aVar) => {
+      gVariablesView = aVar._variablesView;
+      ok(gVariablesView, "variables view object");
+
+      findVariableViewProperties(aVar, [
+        { name: "testProp", value: "testValue" },
+      ], { webconsole: hud }).then(onTestPropFound);
+    });
+
+    let anchor = msg.querySelector("a");
+    executeSoon(() =>
+      EventUtils.synthesizeMouse(anchor, 2, 2, {}, hud.iframeWindow)
+    );
+  });
+}
+
+let console = Cu.import("resource://gre/modules/devtools/Console.jsm", {}).console;
+
+function onTestPropFound([result])
+{
+  let target = result.matchedProp.target;
+  let searchbox = gVariablesView._searchboxContainer.firstChild;
+  gVariablesView.lazySearch = false;
+
+  searchbox.addEventListener("focus", function onFocus() {
+    searchbox.removeEventListener("focus", onFocus);
+
+    // Test initial state.
+    ok(!target.hasAttribute("non-match"),
+      "Property starts visible");
+
+    // Test a non-matching search.
+    EventUtils.sendChar("x");
+    ok(target.hasAttribute("non-match"),
+      "Property is hidden on non-matching search");
+
+    // Test clearing the search.
+    EventUtils.sendKey("ESCAPE");
+    ok(!target.hasAttribute("non-match"),
+      "Pressing ESC makes the property visible again");
+
+    // Test a matching search.
+    EventUtils.sendChar("t");
+    ok(!target.hasAttribute("non-match"),
+      "Property still visible when search matches");
+
+    gVariablesView = null;
+    finishTest();
+  });
+
+  searchbox.focus();
+}

browser/devtools/webconsole/webconsole.js

@@ -3481,20 +3481,13 @@ JSTerm.prototype = {
       view.delete = null;
     }
 
-    let scope = view.addScope(aOptions.label);
-    scope.expanded = true;
-    scope.locked = true;
-
-    let container = scope.addItem();
-    container.evaluationMacro = simpleValueEvalMacro;
+    let { variable, expanded } = view.controller.setSingleVariable(aOptions);
+    variable.evaluationMacro = simpleValueEvalMacro;
 
     if (aOptions.objectActor) {
-      view.controller.expand(container, aOptions.objectActor);
       view._consoleLastObjectActor = aOptions.objectActor.actor;
     }
     else if (aOptions.rawObject) {
-      container.populate(aOptions.rawObject);
-      view.commitHierarchy();
       view._consoleLastObjectActor = null;
     }
     else {
@@ -3502,7 +3495,9 @@ JSTerm.prototype = {
                       "display.");
     }
 
-    this.emit("variablesview-updated", view, aOptions);
+    expanded.then(() => {
+      this.emit("variablesview-updated", view, aOptions);
+    });
   },
 
   /**