<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[196146] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/196146">196146</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-04 13:51:26 -0800 (Thu, 04 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Show error icons if invalid values already exist for properties in the Visual sidebar
https://bugs.webkit.org/show_bug.cgi?id=153702
<rdar://problem/24424025>
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-02-04
Reviewed by Timothy Hatcher.
When CSS properties have invalid values, instead of displaying the computed
value for that property in the Visual sidebar, show an error icon with the
the invalid value.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Views/VisualStyleNumberInputBox.css:
(.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value):
(.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder[hidden] ~ .number-input-container > .number-input-value):
By default, do not allow any pointer events to interact with the input element.
Instead, only allow interaction when the placeholder element is hidden to ensure
that the user cannot add a value when the computed value is displayed.
* UserInterface/Views/VisualStyleNumberInputBox.js:
(WebInspector.VisualStyleNumberInputBox.prototype.set specialPropertyPlaceholderElementText):
Reset the selected keyword to "Unchanged" since this is either a warning
message or the computed value.
* UserInterface/Views/VisualStylePropertyEditor.css:
(.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency):
(.visual-style-property-container > .visual-style-property-editor-warning.invalid-value):
(.visual-style-property-container > .visual-style-property-editor-warning):
* UserInterface/Views/VisualStylePropertyEditor.js:
(WebInspector.VisualStylePropertyEditor):
Replaced document.createElement with [element].createChild for simplicity.
(WebInspector.VisualStylePropertyEditor.prototype.update):
Before assigning the value of the property to the editor, check to see if
the property is valid. If not, display an Error icon and message stating
that the current value is invalid.
(WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
(WebInspector.VisualStylePropertyEditor.prototype.set specialPropertyPlaceholderElementText):
Unhides the special placeholder element with the given text as its content.
(WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
(WebInspector.VisualStylePropertyEditor.prototype._checkDependencies):
(WebInspector.VisualStylePropertyEditor.prototype.addDependency):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (196145 => 196146)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-02-04 21:36:04 UTC (rev 196145)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-02-04 21:51:26 UTC (rev 196146)
</span><span class="lines">@@ -1,3 +1,51 @@
</span><ins>+2016-02-04 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: Show error icons if invalid values already exist for properties in the Visual sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=153702
+ <rdar://problem/24424025>
+
+ Reviewed by Timothy Hatcher.
+
+ When CSS properties have invalid values, instead of displaying the computed
+ value for that property in the Visual sidebar, show an error icon with the
+ the invalid value.
+
+ * Localizations/en.lproj/localizedStrings.js:
+
+ * UserInterface/Views/VisualStyleNumberInputBox.css:
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value):
+ (.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder[hidden] ~ .number-input-container > .number-input-value):
+ By default, do not allow any pointer events to interact with the input element.
+ Instead, only allow interaction when the placeholder element is hidden to ensure
+ that the user cannot add a value when the computed value is displayed.
+
+ * UserInterface/Views/VisualStyleNumberInputBox.js:
+ (WebInspector.VisualStyleNumberInputBox.prototype.set specialPropertyPlaceholderElementText):
+ Reset the selected keyword to "Unchanged" since this is either a warning
+ message or the computed value.
+
+ * UserInterface/Views/VisualStylePropertyEditor.css:
+ (.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency):
+ (.visual-style-property-container > .visual-style-property-editor-warning.invalid-value):
+ (.visual-style-property-container > .visual-style-property-editor-warning):
+
+ * UserInterface/Views/VisualStylePropertyEditor.js:
+ (WebInspector.VisualStylePropertyEditor):
+ Replaced document.createElement with [element].createChild for simplicity.
+
+ (WebInspector.VisualStylePropertyEditor.prototype.update):
+ Before assigning the value of the property to the editor, check to see if
+ the property is valid. If not, display an Error icon and message stating
+ that the current value is invalid.
+
+ (WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
+ (WebInspector.VisualStylePropertyEditor.prototype.set specialPropertyPlaceholderElementText):
+ Unhides the special placeholder element with the given text as its content.
+
+ (WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
+ (WebInspector.VisualStylePropertyEditor.prototype._checkDependencies):
+ (WebInspector.VisualStylePropertyEditor.prototype.addDependency):
+
</ins><span class="cx"> 2016-02-03 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: JS PrettyPrinting unary - and + issues
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (196145 => 196146)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-02-04 21:36:04 UTC (rev 196145)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-02-04 21:51:26 UTC (rev 196146)
</span><span class="lines">@@ -652,6 +652,7 @@
</span><span class="cx"> localizedStrings["The 'webkit' prefix is not necessary.\nClick to insert a duplicate without the prefix."] = "The 'webkit' prefix is not necessary.\nClick to insert a duplicate without the prefix.";
</span><span class="cx"> localizedStrings["The property '%s' is not supported."] = "The property '%s' is not supported.";
</span><span class="cx"> localizedStrings["The selector '%s' is invalid.\nClick to revert to the previous selector."] = "The selector '%s' is invalid.\nClick to revert to the previous selector.";
</span><ins>+localizedStrings["The value '%s' is not supported for this property."] = "The value '%s' is not supported for this property.";
</ins><span class="cx"> localizedStrings["The value '%s' is not supported for this property.\nClick to delete and open autocomplete."] = "The value '%s' is not supported for this property.\nClick to delete and open autocomplete.";
</span><span class="cx"> localizedStrings["The value '%s' needs units.\nClick to add 'px' to the value."] = "The value '%s' needs units.\nClick to add 'px' to the value.";
</span><span class="cx"> localizedStrings["The %s \ntable is empty."] = "The %s \ntable is empty.";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css (196145 => 196146)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css 2016-02-04 21:36:04 UTC (rev 196145)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css 2016-02-04 21:51:26 UTC (rev 196146)
</span><span class="lines">@@ -66,6 +66,10 @@
</span><span class="cx"> text-align: right;
</span><span class="cx"> border: none;
</span><span class="cx"> outline: none;
</span><ins>+ pointer-events: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder[hidden] ~ .number-input-container > .number-input-value {
</ins><span class="cx"> pointer-events: all;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js (196145 => 196146)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2016-02-04 21:36:04 UTC (rev 196145)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2016-02-04 21:51:26 UTC (rev 196146)
</span><span class="lines">@@ -211,6 +211,14 @@
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><ins>+ set specialPropertyPlaceholderElementText(text)
+ {
+ this._unchangedOptionElement.selected = true;
+
+ // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+ WebInspector.VisualStylePropertyEditor.prototype.__lookupSetter__("specialPropertyPlaceholderElementText").call(this, text);
+ }
+
</ins><span class="cx"> parseValue(text)
</span><span class="cx"> {
</span><span class="cx"> return /^(-?[\d.]+)([^\s\d]{0,4})(?:\s*;?)$/.exec(text);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css (196145 => 196146)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2016-02-04 21:36:04 UTC (rev 196145)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2016-02-04 21:51:26 UTC (rev 196146)
</span><span class="lines">@@ -55,8 +55,6 @@
</span><span class="cx"> width: 10px;
</span><span class="cx"> height: 10px;
</span><span class="cx"> margin-right: 4px;
</span><del>- content: "";
- background-image: url(../Images/Warning.svg);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container.layout-reversed > .visual-style-property-editor-warning {
</span><span class="lines">@@ -66,8 +64,14 @@
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container > .visual-style-property-editor-warning.missing-dependency {
</span><span class="cx"> display: block;
</span><ins>+ content: url(../Images/Warning.svg);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.visual-style-property-container > .visual-style-property-editor-warning.invalid-value {
+ display: block;
+ content: url(../Images/Error.svg);
+}
+
</ins><span class="cx"> .visual-style-property-container > .visual-style-property-value-container {
</span><span class="cx"> flex: 1;
</span><span class="cx"> order: 2;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (196145 => 196146)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-02-04 21:36:04 UTC (rev 196145)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-02-04 21:51:26 UTC (rev 196146)
</span><span class="lines">@@ -69,30 +69,23 @@
</span><span class="cx"> this._element.classList.toggle("layout-reversed", !!layoutReversed);
</span><span class="cx">
</span><span class="cx"> if (label && label.length) {
</span><del>- let titleContainer = document.createElement("div");
- titleContainer.classList.add("visual-style-property-title");
</del><ins>+ let titleContainer = this._element.createChild("div", "visual-style-property-title");
</ins><span class="cx">
</span><del>- this._titleElement = document.createElement("span");
- this._titleElement.appendChild(document.createTextNode(label));
</del><ins>+ this._titleElement = titleContainer.createChild("span");
+ this._titleElement.append(label);
</ins><span class="cx"> this._titleElement.addEventListener("mouseover", this._titleElementMouseOver.bind(this));
</span><span class="cx"> this._titleElement.addEventListener("mouseout", this._titleElementMouseOut.bind(this));
</span><span class="cx"> this._titleElement.addEventListener("click", this._titleElementClick.bind(this));
</span><del>- titleContainer.appendChild(this._titleElement);
</del><span class="cx">
</span><del>- this._element.appendChild(titleContainer);
-
</del><span class="cx"> this._boundTitleElementPrepareForClick = this._titleElementPrepareForClick.bind(this);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._contentElement = document.createElement("div");
- this._contentElement.classList.add("visual-style-property-value-container");
</del><ins>+ this._contentElement = this._element.createChild("div", "visual-style-property-value-container");
</ins><span class="cx">
</span><del>- this._specialPropertyPlaceholderElement = document.createElement("span");
- this._specialPropertyPlaceholderElement.classList.add("visual-style-special-property-placeholder");
</del><ins>+ this._specialPropertyPlaceholderElement = this._contentElement.createChild("span", "visual-style-special-property-placeholder");
</ins><span class="cx"> this._specialPropertyPlaceholderElement.hidden = true;
</span><del>- this._contentElement.appendChild(this._specialPropertyPlaceholderElement);
</del><span class="cx">
</span><del>- this._element.appendChild(this._contentElement);
</del><ins>+ this._warningElement = this._element.createChild("div", "visual-style-property-editor-warning");
</ins><span class="cx">
</span><span class="cx"> this._updatedValues = {};
</span><span class="cx"> this._lastValue = null;
</span><span class="lines">@@ -296,6 +289,13 @@
</span><span class="cx"> if (!propertyMissing && property && property.anonymous)
</span><span class="cx"> this._representedProperty = property;
</span><span class="cx">
</span><ins>+ if (!propertyMissing && !property.valid) {
+ this._warningElement.classList.add("invalid-value");
+ this._warningElement.title = WebInspector.UIString("The value '%s' is not supported for this property.").format(propertyText);
+ this.specialPropertyPlaceholderElementText = propertyText;
+ return;
+ }
+
</ins><span class="cx"> let newValues = this.getValuesFromText(propertyText, propertyMissing);
</span><span class="cx"> if (this._updatedValues.placeholder && this._updatedValues.placeholder !== newValues.placeholder)
</span><span class="cx"> propertyValuesConflict = true;
</span><span class="lines">@@ -305,7 +305,7 @@
</span><span class="cx">
</span><span class="cx"> if (propertyValuesConflict) {
</span><span class="cx"> this._updatedValues.conflictingValues = true;
</span><del>- this._specialPropertyPlaceholderElement.textContent = WebInspector.UIString("(multiple)");
</del><ins>+ this.specialPropertyPlaceholderElementText = WebInspector.UIString("(multiple)");
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -325,6 +325,7 @@
</span><span class="cx"> this._lastValue = this.synthesizedValue;
</span><span class="cx"> this.disabled = false;
</span><span class="cx">
</span><ins>+ this._warningElement.classList.remove("invalid-value");
</ins><span class="cx"> this._checkDependencies();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -409,11 +410,6 @@
</span><span class="cx">
</span><span class="cx"> for (let property of propertyNames)
</span><span class="cx"> this._dependencies.set(property, propertyValues);
</span><del>-
- if (!this._warningElement) {
- this._warningElement = this._element.appendChild(document.createElement("div"));
- this._warningElement.classList.add("visual-style-property-editor-warning");
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -428,6 +424,15 @@
</span><span class="cx"> return this._specialPropertyPlaceholderElement;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ set specialPropertyPlaceholderElementText(text)
+ {
+ if (!text || !text.length)
+ return;
+
+ this._specialPropertyPlaceholderElement.hidden = false;
+ this._specialPropertyPlaceholderElement.textContent = text;
+ }
+
</ins><span class="cx"> parseValue(text)
</span><span class="cx"> {
</span><span class="cx"> return /^([^;]+)\s*;?$/.exec(text);
</span><span class="lines">@@ -495,6 +500,7 @@
</span><span class="cx"> this._specialPropertyPlaceholderElement.hidden = true;
</span><span class="cx">
</span><span class="cx"> this._checkDependencies();
</span><ins>+ this._warningElement.classList.remove("invalid-value");
</ins><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
</span><span class="cx"> return true;
</span><span class="lines">@@ -525,9 +531,7 @@
</span><span class="cx"> _checkDependencies()
</span><span class="cx"> {
</span><span class="cx"> if (!this._dependencies.size || !this._style || !this.synthesizedValue) {
</span><del>- if (this._warningElement)
- this._warningElement.classList.remove("missing-dependency");
-
</del><ins>+ this._warningElement.classList.remove("missing-dependency");
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>