Bug 1169667 - DevTools: Flashpainting icon has wrong color when toggled on/off. r=jwalker

browser/devtools/commandline/test/browser.ini

@@ -70,6 +70,7 @@ support-files =
 [browser_cmd_pagemod_export.js]
 support-files =
   browser_cmd_pagemod_export.html
+[browser_cmd_paintflashing.js]
 [browser_cmd_pref1.js]
 [browser_cmd_pref2.js]
 [browser_cmd_pref3.js]

browser/devtools/commandline/test/browser_cmd_paintflashing.js

@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+* http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that the paintflashing command correctly sets its state.
+
+"use strict";
+
+const TEST_URI = "http://example.com/browser/browser/devtools/commandline/" +
+                 "test/browser_cmd_cookie.html";
+
+function test() {
+  return Task.spawn(testTask).then(finish, helpers.handleError);
+}
+
+let tests = {
+  testInput: function(options) {
+    let toggleCommand = options.requisition.system.commands.get("paintflashing toggle");
+
+    let actions = [
+      {
+        command: "paintflashing on",
+        isChecked: true,
+        label: "checked after on"
+      },
+      {
+        command: "paintflashing off",
+        isChecked: false,
+        label: "unchecked after off"
+      },
+      {
+        command: "paintflashing toggle",
+        isChecked: true,
+        label: "checked after toggle"
+      },
+      {
+        command: "paintflashing toggle",
+        isChecked: false,
+        label: "unchecked after toggle"
+      }
+    ];
+
+    return helpers.audit(options, actions.map(spec => ({
+      setup: spec.command,
+      exec: {},
+      post: () => is(toggleCommand.state.isChecked(), spec.isChecked, spec.label)
+    })));
+  },
+};
+
+function* testTask() {
+  let options = yield helpers.openTab(TEST_URI);
+  yield helpers.openToolbar(options);
+
+  yield helpers.runTests(options, tests);
+
+  yield helpers.closeToolbar(options);
+  yield helpers.closeTab(options);
+}

browser/devtools/shared/test/browser_telemetry_button_paintflashing.js

@@ -1,6 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+"use strict";
+
 const TEST_URI = "data:text/html;charset=utf-8," +
   "<p>browser_telemetry_button_paintflashing.js</p>";
 
@@ -30,27 +32,28 @@ function* testButton(toolbox, Telemetry) {
   let button = toolbox.doc.querySelector("#command-button-paintflashing");
   ok(button, "Captain, we have the button");
 
-  yield delayedClicks(button, 4);
+  yield* delayedClicks(toolbox, button, 4);
   checkResults("_PAINTFLASHING_", Telemetry);
 }
 
-function delayedClicks(node, clicks) {
-  return new Promise(resolve => {
-    let clicked = 0;
+function* delayedClicks(toolbox, node, clicks) {
+  for (let i = 0; i < clicks; i++) {
+    yield new Promise(resolve => {
+      // See TOOL_DELAY for why we need setTimeout here
+      setTimeout(() => resolve(), TOOL_DELAY);
+    });
 
-    // See TOOL_DELAY for why we need setTimeout here
-    setTimeout(function delayedClick() {
-      info("Clicking button " + node.id);
-      node.click();
-      clicked++;
+    // this event will fire once the command execution starts and
+    // the output object is created
+    let clicked = toolbox._requisition.commandOutputManager.onOutput.once();
 
-      if (clicked >= clicks) {
-        resolve(node);
-      } else {
-        setTimeout(delayedClick, TOOL_DELAY);
-      }
-    }, TOOL_DELAY);
-  });
+    info("Clicking button " + node.id);
+    node.click();
+
+    let outputEvent = yield clicked;
+    // promise gets resolved once execution finishes and output is ready
+    yield outputEvent.output.promise;
+  }
 }
 
 function checkResults(histIdFocus, Telemetry) {

toolkit/devtools/gcli/commands/paintflashing.js

@@ -112,9 +112,9 @@ exports.items = [
     }],
     exec: function*(args, context) {
       if (!args.chrome) {
-        const value = yield context.updateExec("paintflashing_server --state on");
-        isContentPaintFlashing = value;
-        onPaintFlashingChanged(context.environment.target, value);
+        const output = yield context.updateExec("paintflashing_server --state on");
+        isContentPaintFlashing = output.data;
+        onPaintFlashingChanged(context.environment.target, output.data);
       }
       else {
         setPaintFlashing(context.environment.chromeWindow, "on");
@@ -142,9 +142,9 @@ exports.items = [
     }],
     exec: function*(args, context) {
       if (!args.chrome) {
-        const value = yield context.updateExec("paintflashing_server --state off");
-        isContentPaintFlashing = value;
-        onPaintFlashingChanged(context.environment.target, value);
+        const output = yield context.updateExec("paintflashing_server --state off");
+        isContentPaintFlashing = output.data;
+        onPaintFlashingChanged(context.environment.target, output.data);
       }
       else {
         setPaintFlashing(context.environment.chromeWindow, "off");
@@ -167,9 +167,9 @@ exports.items = [
     description: l10n.lookup("paintflashingToggleDesc"),
     manual: l10n.lookup("paintflashingManual"),
     exec: function*(args, context) {
-      const value = yield context.updateExec("paintflashing_server --state toggle");
-      isContentPaintFlashing = value;
-      onPaintFlashingChanged(context.environment.target, value);
+      const output = yield context.updateExec("paintflashing_server --state toggle");
+      isContentPaintFlashing = output.data;
+      onPaintFlashingChanged(context.environment.target, output.data);
     }
   },
   {