Bug 965181 - respect default color unit when choosing a color. r=mratcliffe

devtools/client/shared/widgets/Tooltip.js

@@ -1145,8 +1145,7 @@ SwatchColorPickerTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.pr
     // Then set spectrum's color and listen to color changes to preview them
     if (this.activeSwatch) {
       this.currentSwatchColor = this.activeSwatch.nextSibling;
-      this._colorUnit =
-        colorUtils.classifyColor(this.currentSwatchColor.textContent);
+      this._originalColor = this.currentSwatchColor.textContent;
       let color = this.activeSwatch.style.backgroundColor;
       this.spectrum.then(spectrum => {
         spectrum.off("changed", this._onSpectrumColorChange);
@@ -1224,7 +1223,7 @@ SwatchColorPickerTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.pr
 
   _toDefaultType: function(color) {
     let colorObj = new colorUtils.CssColor(color);
-    colorObj.colorUnit = this._colorUnit;
+    colorObj.setAuthoredUnitFromColor(this._originalColor);
     return colorObj.toString();
   },
 

devtools/client/styleinspector/test/browser.ini

@@ -72,6 +72,7 @@ support-files =
 [browser_ruleview_colorpicker-release-outside-frame.js]
 [browser_ruleview_colorpicker-revert-on-ESC.js]
 [browser_ruleview_colorpicker-swatch-displayed.js]
+[browser_ruleview_colorUnit.js]
 [browser_ruleview_completion-existing-property_01.js]
 [browser_ruleview_completion-existing-property_02.js]
 [browser_ruleview_completion-new-property_01.js]

devtools/client/styleinspector/test/browser_ruleview_colorUnit.js

@@ -0,0 +1,59 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that color selection respects the user pref.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      color: blue;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(function*() {
+  let TESTS = [
+    {name: "hex", result: "#0F0"},
+    {name: "rgb", result: "rgb(0, 255, 0)"}
+  ];
+
+  for (let {name, result} of TESTS) {
+    info("starting test for " + name);
+    Services.prefs.setCharPref("devtools.defaultColorUnit", name);
+
+    yield addTab("data:text/html;charset=utf-8," +
+                 encodeURIComponent(TEST_URI));
+    let {inspector, view} = yield openRuleView();
+    yield selectNode("#testid", inspector);
+    yield basicTest(view, name, result);
+  }
+});
+
+function* basicTest(view, name, result) {
+  let cPicker = view.tooltips.colorPicker;
+  let swatch = getRuleViewProperty(view, "#testid", "color").valueSpan
+      .querySelector(".ruleview-colorswatch");
+  let onShown = cPicker.tooltip.once("shown");
+  swatch.click();
+  yield onShown;
+
+  let testNode = yield getNode("#testid");
+
+  yield simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
+    element: testNode,
+    name: "color",
+    value: "rgb(0, 255, 0)"
+  });
+
+  let spectrum = yield cPicker.spectrum;
+  let onHidden = cPicker.tooltip.once("hidden");
+  EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
+  yield onHidden;
+
+  is(getRuleViewPropertyValue(view, "#testid", "color"), result,
+     "changing the color used the " + name + " unit");
+}

devtools/shared/css-color.js

@@ -92,6 +92,20 @@ CssColor.prototype = {
     this._colorUnit = unit;
   },
 
+  /**
+   * If the current color unit pref is "authored", then set the
+   * default color unit from the given color.  Otherwise, leave the
+   * color unit untouched.
+   *
+   * @param {String} color The color to use
+   */
+  setAuthoredUnitFromColor: function(color) {
+    if (Services.prefs.getCharPref(COLOR_UNIT_PREF) ===
+        CssColor.COLORUNIT.authored) {
+      this._colorUnit = classifyColor(color);
+    }
+  },
+
   get hasAlpha() {
     if (!this.valid) {
       return false;

devtools/shared/tests/unit/test_cssColor.js

@@ -25,5 +25,10 @@ function run_test() {
   for (let test of CLASSIFY_TESTS) {
     let result = colorUtils.classifyColor(test.input);
     equal(result, test.output, "test classifyColor(" + test.input + ")");
+
+    let obj = new colorUtils.CssColor("purple");
+    obj.setAuthoredUnitFromColor(test.input);
+    equal(obj.colorUnit, test.output,
+          "test setAuthoredUnitFromColor(" + test.input + ")");
   }
 }