Bug 1136257 - Shift-click to switch between color unit format in place r=bgrins

toolkit/devtools/output-parser.js

@@ -77,6 +77,8 @@ loader.lazyGetter(this, "REGEX_ALL_CSS_PROPERTIES", function () {
  */
 function OutputParser() {
   this.parsed = [];
+  this.colorSwatches = new WeakMap();
+  this._onSwatchMouseDown = this._onSwatchMouseDown.bind(this);
 }
 
 exports.OutputParser = OutputParser;
@@ -396,12 +398,14 @@ OutputParser.prototype = {
           class: options.colorSwatchClass,
           style: "background-color:" + color
         });
+        this.colorSwatches.set(swatch, colorObj);
+        swatch.addEventListener("mousedown", this._onSwatchMouseDown, false);
         container.appendChild(swatch);
       }
 
       if (options.defaultColorType) {
         color = colorObj.toString();
-        container.dataset["color"] = color;
+        container.dataset.color = color;
       }
 
       let value = this._createNode("span", {
@@ -435,6 +439,21 @@ OutputParser.prototype = {
     this.parsed.push(container);
   },
 
+  _onSwatchMouseDown: function(event) {
+    // Prevent text selection in the case of shift-click or double-click.
+    event.preventDefault();
+
+    if (!event.shiftKey) {
+      return;
+    }
+
+    let swatch = event.target;
+    let color = this.colorSwatches.get(swatch);
+    let val = color.nextColorUnit();
+
+    swatch.nextElementSibling.textContent = val;
+  },
+
    /**
     * Append a URL to the output.
     *