Bug 727867 - Rule view indicate when invalid values are entered; r=dcamp

browser/devtools/styleinspector/CssRuleView.jsm

@@ -1003,6 +1003,12 @@ TextPropertyEditor.prototype = {
 
     appendText(this.element, ";");
 
+    this.warning = createChild(this.element, "div", {
+      hidden: "",
+      class: "ruleview-warning",
+      title: CssLogic.l10n("rule.warning.title"),
+    });
+
     // Holds the viewers for the computed properties.
     // will be populated in |_updateComputed|.
     this.computed = createChild(this.element, "ul", {
@@ -1038,6 +1044,7 @@ TextPropertyEditor.prototype = {
       val += " !" + this.prop.priority;
     }
     this.valueSpan.textContent = val;
+    this.warning.hidden = this._validate();
 
     // Populate the computed styles.
     this._updateComputed();
@@ -1173,6 +1180,23 @@ TextPropertyEditor.prototype = {
       this.prop.setValue(this.committed.value, this.committed.priority);
     }
   },
+
+  /**
+   * Validate this property.
+   *
+   * @returns {Boolean}
+   *          True if the property value is valid, false otherwise.
+   */
+  _validate: function TextPropertyEditor_validate()
+  {
+    let name = this.prop.name;
+    let value = this.prop.value;
+    let style = this.doc.createElementNS(HTML_NS, "div").style;
+
+    style.setProperty(name, value, null);
+
+    return !!style.getPropertyValue(name);
+  },
 };
 
 /**

browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues.js

@@ -119,9 +119,9 @@ function testCreateNew()
       waitForEditorBlur(aEditor, function() {
         expectChange();
         is(textProp.value, "#XYZ", "Text prop should have been changed.");
-        finishTest();
+        is(textProp.editor._validate(), false, "#XYZ should not be a valid entry");
+        testEditProperty();
       });
-
       aEditor.input.blur();
     });
     EventUtils.synthesizeKey("VK_RETURN", {}, ruleDialog);
@@ -132,6 +132,39 @@ function testCreateNew()
                              ruleDialog);
 }
 
+function testEditProperty()
+{
+  let idRuleEditor = ruleView.element.children[1]._ruleEditor;
+  let propEditor = idRuleEditor.rule.textProps[0].editor;
+  waitForEditorFocus(propEditor.element, function onNewElement(aEditor) {
+    is(propEditor.nameSpan.inplaceEditor, aEditor, "Next focused editor should be the name editor.");
+    let input = aEditor.input;
+    waitForEditorFocus(propEditor.element, function onNewName(aEditor) {
+      expectChange();
+      input = aEditor.input;
+      is(propEditor.valueSpan.inplaceEditor, aEditor, "Focus should have moved to the value.");
+
+      waitForEditorBlur(aEditor, function() {
+        expectChange();
+        let value = idRuleEditor.rule.style.getPropertyValue("border-color");
+        is(value, "red", "border-color should have been set.");
+        is(propEditor._validate(), true, "red should be a valid entry");
+        finishTest();
+      });
+
+      for each (let ch in "red;") {
+        EventUtils.sendChar(ch, ruleDialog);
+      }
+    });
+    for each (let ch in "border-color:") {
+      EventUtils.sendChar(ch, ruleDialog);
+    }
+  });
+
+  EventUtils.synthesizeMouse(propEditor.nameSpan, 1, 1,
+                             { },
+                             ruleDialog);}
+
 function finishTest()
 {
   ruleView.element.removeEventListener("CssRuleViewChanged", ruleViewChanged, false);

browser/locales/en-US/chrome/browser/devtools/styleinspector.properties

@@ -44,3 +44,8 @@ style.highlighter.button.tooltip=Inspect element computed styles
 # quickly jump to the documentation from the Mozilla Developer Network site.
 # This is the link title shown in the hover tooltip.
 helpLinkTitle=Read the documentation for this property
+
+# LOCALIZATION NOTE (rule.warning.title): When an invalid property value is
+# entered into the rule view a warning icon is displayed. This text is used for
+# the title attribute of the warning icon.
+rule.warning.title=Invalid property value

browser/themes/gnomestripe/devtools/csshtmltree.css

@@ -217,6 +217,19 @@
   padding: 2px 5px;
 }
 
+.ruleview-warning {
+  background: url("chrome://browser/skin/devtools/alerticon-warning.png");
+  display: inline-block;
+  -moz-margin-start: 5px;
+  vertical-align: middle;
+  width: 13px;
+  height: 12px;
+}
+
+.ruleview-warning[hidden] {
+  display: none;
+}
+
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }

browser/themes/gnomestripe/jar.mn

@@ -88,6 +88,7 @@ browser.jar:
   skin/classic/browser/devtools/common.css            (devtools/common.css)
   skin/classic/browser/devtools/arrows.png            (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png       (devtools/commandline.png)
+  skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png          (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css       (devtools/csshtmltree.css)
   skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)

browser/themes/pinstripe/devtools/csshtmltree.css

@@ -219,6 +219,19 @@
   padding: 2px 5px;
 }
 
+.ruleview-warning {
+  background: url("chrome://browser/skin/devtools/alerticon-warning.png");
+  display: inline-block;
+  -moz-margin-start: 5px;
+  vertical-align: middle;
+  width: 13px;
+  height: 12px;
+}
+
+.ruleview-warning[hidden] {
+  display: none;
+}
+
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }

browser/themes/pinstripe/jar.mn

@@ -127,6 +127,7 @@ browser.jar:
 * skin/classic/browser/devtools/common.css                  (devtools/common.css)
   skin/classic/browser/devtools/arrows.png                  (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png             (devtools/commandline.png)
+  skin/classic/browser/devtools/alerticon-warning.png       (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png                (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css             (devtools/csshtmltree.css)
   skin/classic/browser/devtools/gcli.css                    (devtools/gcli.css)

browser/themes/winstripe/devtools/csshtmltree.css

@@ -217,6 +217,19 @@
   padding: 2px 5px;
 }
 
+.ruleview-warning {
+  background: url("chrome://browser/skin/devtools/alerticon-warning.png");
+  display: inline-block;
+  -moz-margin-start: 5px;
+  vertical-align: middle;
+  width: 13px;
+  height: 12px;
+}
+
+.ruleview-warning[hidden] {
+  display: none;
+}
+
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }

browser/themes/winstripe/jar.mn

@@ -112,6 +112,7 @@ browser.jar:
         skin/classic/browser/devtools/common.css                    (devtools/common.css)
         skin/classic/browser/devtools/arrows.png                    (devtools/arrows.png)
         skin/classic/browser/devtools/commandline.png               (devtools/commandline.png)
+        skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
         skin/classic/browser/devtools/goto-mdn.png                  (devtools/goto-mdn.png)
         skin/classic/browser/devtools/csshtmltree.css               (devtools/csshtmltree.css)
         skin/classic/browser/devtools/gcli.css                      (devtools/gcli.css)
@@ -281,6 +282,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
         skin/classic/aero/browser/devtools/commandline.png           (devtools/commandline.png)
+        skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
         skin/classic/aero/browser/devtools/goto-mdn.png              (devtools/goto-mdn.png)
         skin/classic/aero/browser/devtools/csshtmltree.css           (devtools/csshtmltree.css)
         skin/classic/aero/browser/devtools/gcli.css                  (devtools/gcli.css)