<!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>[194737] 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/194737">194737</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-01-07 15:44:27 -0800 (Thu, 07 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add warnings to section that require specific values of other properties
https://bugs.webkit.org/show_bug.cgi?id=148254
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-01-07
Reviewed by Timothy Hatcher.
Added a function to VisualStylePropertyEditor to allow dependencies to be set which,
whenever the editor is updated or changed, will be checked against the computed styles
of the element to see if all the necessary property values are set.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
(WebInspector.VisualStyleDetailsPanel.prototype.refresh):
(WebInspector.VisualStyleDetailsPanel.prototype._populatePositionSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateFlexboxSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateAlignmentSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateOutlineSection):
Added dependencies to relevant property editors.
(WebInspector.VisualStyleDetailsPanel.prototype._prepareForChange): Deleted.
No longer needed as the sidebar panel will refresh whenever triggered.
* UserInterface/Views/VisualStylePropertyEditor.css:
(.visual-style-property-container.layout-reversed > .visual-style-property-title):
(.visual-style-property-container > .visual-style-property-title > .property-reference-info):
(.visual-style-property-container > .visual-style-property-editor-warning):
(.visual-style-property-container.layout-reversed > .visual-style-property-editor-warning):
(.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency):
(.visual-style-property-container > .visual-style-property-value-container):
(.visual-style-property-container.layout-reversed > .visual-style-property-value-container):
* UserInterface/Views/VisualStylePropertyEditor.js:
(WebInspector.VisualStylePropertyEditor):
(WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
(WebInspector.VisualStylePropertyEditor.prototype.addDependency):
(WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
(WebInspector.VisualStylePropertyEditor.prototype._checkDependencies):
Looks at the computed style for the node to see if any dependent properties do not
have one of the required values.
* UserInterface/Views/VisualStyleSelectorSection.js:
(WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
(WebInspector.VisualStyleSelectorSection.prototype._styleTextReset): Deleted.
* UserInterface/Views/VisualStyleSelectorTreeItem.js:
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):</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="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.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>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorTreeItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (194736 => 194737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-07 23:33:04 UTC (rev 194736)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-07 23:44:27 UTC (rev 194737)
</span><span class="lines">@@ -1,5 +1,55 @@
</span><span class="cx"> 2016-01-07 Devin Rousso <dcrousso+webkit@gmail.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Add warnings to section that require specific values of other properties
+ https://bugs.webkit.org/show_bug.cgi?id=148254
+
+ Reviewed by Timothy Hatcher.
+
+ Added a function to VisualStylePropertyEditor to allow dependencies to be set which,
+ whenever the editor is updated or changed, will be checked against the computed styles
+ of the element to see if all the necessary property values are set.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel):
+ (WebInspector.VisualStyleDetailsPanel.prototype.refresh):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populatePositionSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateFlexboxSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateAlignmentSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateOutlineSection):
+ Added dependencies to relevant property editors.
+
+ (WebInspector.VisualStyleDetailsPanel.prototype._prepareForChange): Deleted.
+ No longer needed as the sidebar panel will refresh whenever triggered.
+
+ * UserInterface/Views/VisualStylePropertyEditor.css:
+ (.visual-style-property-container.layout-reversed > .visual-style-property-title):
+ (.visual-style-property-container > .visual-style-property-title > .property-reference-info):
+ (.visual-style-property-container > .visual-style-property-editor-warning):
+ (.visual-style-property-container.layout-reversed > .visual-style-property-editor-warning):
+ (.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency):
+ (.visual-style-property-container > .visual-style-property-value-container):
+ (.visual-style-property-container.layout-reversed > .visual-style-property-value-container):
+
+ * UserInterface/Views/VisualStylePropertyEditor.js:
+ (WebInspector.VisualStylePropertyEditor):
+ (WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
+ (WebInspector.VisualStylePropertyEditor.prototype.addDependency):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
+ (WebInspector.VisualStylePropertyEditor.prototype._checkDependencies):
+ Looks at the computed style for the node to see if any dependent properties do not
+ have one of the required values.
+
+ * UserInterface/Views/VisualStyleSelectorSection.js:
+ (WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
+ (WebInspector.VisualStyleSelectorSection.prototype._styleTextReset): Deleted.
+
+ * UserInterface/Views/VisualStyleSelectorTreeItem.js:
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
+
+2016-01-07 Devin Rousso <dcrousso+webkit@gmail.com>
+
</ins><span class="cx"> Web Inspector: Allow error items on Exception page to be selected
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=152861
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (194736 => 194737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-07 23:33:04 UTC (rev 194736)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-07 23:44:27 UTC (rev 194737)
</span><span class="lines">@@ -416,6 +416,7 @@
</span><span class="cx"> localizedStrings["Method"] = "Method";
</span><span class="cx"> localizedStrings["Microtask Dispatched"] = "Microtask Dispatched";
</span><span class="cx"> localizedStrings["Min"] = "Min";
</span><ins>+localizedStrings["Missing Dependencies:%s"] = "Missing Dependencies:%s";
</ins><span class="cx"> localizedStrings["Mixed"] = "Mixed";
</span><span class="cx"> localizedStrings["Module Code"] = "Module Code";
</span><span class="cx"> localizedStrings["Name"] = "Name";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (194736 => 194737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-01-07 23:33:04 UTC (rev 194736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-01-07 23:44:27 UTC (rev 194737)
</span><span class="lines">@@ -30,20 +30,18 @@
</span><span class="cx"> super(delegate, "visual", "visual", WebInspector.UIString("Styles \u2014 Visual"));
</span><span class="cx">
</span><span class="cx"> this._currentStyle = null;
</span><del>- this._forceNextStyleUpdate = false;
</del><span class="cx">
</span><span class="cx"> this._sections = {};
</span><span class="cx"> this._groups = {};
</span><span class="cx"> this._keywords = {};
</span><span class="cx"> this._units = {};
</span><del>- this._autocompletionPropertyEditors = {};
</del><span class="cx">
</span><span class="cx"> // These keywords, as well as the values below, are not localized as they must match the CSS spec.
</span><span class="cx"> this._keywords.defaults = ["Inherit", "Initial", "Unset", "Revert"];
</span><span class="cx"> this._keywords.boxModel = this._keywords.defaults.concat(["Auto"]);
</span><span class="cx"> this._keywords.borderStyle = {
</span><span class="cx"> basic: this._keywords.defaults.concat(["None", "Hidden", "Solid"]),
</span><del>- advanced: ["Dashed", "Dotted", "Double", "Groove", "Hidden", "Inset", "None", "Outset", "Ridge"]
</del><ins>+ advanced: ["Dashed", "Dotted", "Double", "Groove", "Inset", "Outset", "Ridge"]
</ins><span class="cx"> };
</span><span class="cx"> this._keywords.borderWidth = this._keywords.defaults.concat(["Medium", "Thick", "Thin"]);
</span><span class="cx">
</span><span class="lines">@@ -59,7 +57,6 @@
</span><span class="cx"> // Selector Section
</span><span class="cx"> this._selectorSection = new WebInspector.VisualStyleSelectorSection(this);
</span><span class="cx"> this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged, this._updateSections, this);
</span><del>- this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.StyleTextChanged, this._prepareForChange, this);
</del><span class="cx"> this.element.appendChild(this._selectorSection.element);
</span><span class="cx">
</span><span class="cx"> // Layout Section
</span><span class="lines">@@ -106,11 +103,8 @@
</span><span class="cx">
</span><span class="cx"> refresh(significantChange)
</span><span class="cx"> {
</span><del>- if (significantChange || this._forceNextStyleUpdate) {
- this._selectorSection.update(this._nodeStyles);
- this._updateSections();
- this._forceNextStyleUpdate = false;
- }
</del><ins>+ this._selectorSection.update(this._nodeStyles);
+ this._updateSections();
</ins><span class="cx">
</span><span class="cx"> super.refresh();
</span><span class="cx"> }
</span><span class="lines">@@ -145,11 +139,6 @@
</span><span class="cx"> populateFunction.call(this);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _prepareForChange(event)
- {
- this._forceNextStyleUpdate = true;
- }
-
</del><span class="cx"> _updateSections(event)
</span><span class="cx"> {
</span><span class="cx"> this._currentStyle = this._selectorSection.currentStyle();
</span><span class="lines">@@ -440,6 +429,13 @@
</span><span class="cx">
</span><span class="cx"> let positionGroup = new WebInspector.DetailsSectionGroup(rows);
</span><span class="cx"> this._populateSection(group, [positionGroup]);
</span><ins>+
+ let allowedPositionValues = ["relative", "absolute", "fixed", "-webkit-sticky"];
+ properties.zIndex.addDependency("position", allowedPositionValues);
+ properties.top.addDependency("position", allowedPositionValues);
+ properties.right.addDependency("position", allowedPositionValues);
+ properties.bottom.addDependency("position", allowedPositionValues);
+ properties.left.addDependency("position", allowedPositionValues);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _populateFloatSection()
</span><span class="lines">@@ -577,6 +573,14 @@
</span><span class="cx">
</span><span class="cx"> let flexboxGroup = new WebInspector.DetailsSectionGroup([flexOrderRow, flexSizeRow, flexFlowRow]);
</span><span class="cx"> this._populateSection(group, [flexboxGroup]);
</span><ins>+
+ let allowedDisplayValues = ["flex", "inline-flex", "-webkit-box", "-webkit-inline-box"];
+ properties.order.addDependency("display", allowedDisplayValues);
+ properties.flexBasis.addDependency("display", allowedDisplayValues);
+ properties.flexGrow.addDependency("display", allowedDisplayValues);
+ properties.flexShrink.addDependency("display", allowedDisplayValues);
+ properties.flexDirection.addDependency("display", allowedDisplayValues);
+ properties.flexWrap.addDependency("display", allowedDisplayValues);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _populateAlignmentSection()
</span><span class="lines">@@ -612,6 +616,12 @@
</span><span class="cx">
</span><span class="cx"> let alignmentGroup = new WebInspector.DetailsSectionGroup([contentRow, itemsRow]);
</span><span class="cx"> this._populateSection(group, [alignmentGroup]);
</span><ins>+
+ let allowedDisplayValues = ["flex", "inline-flex", "-webkit-box", "-webkit-inline-box"];
+ properties.justifyContent.addDependency("display", allowedDisplayValues);
+ properties.alignContent.addDependency("display", allowedDisplayValues);
+ properties.alignItems.addDependency("display", allowedDisplayValues);
+ properties.alignSelf.addDependency("display", allowedDisplayValues);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _populateTextStyleSection()
</span><span class="lines">@@ -1030,6 +1040,18 @@
</span><span class="cx"> group.autocompleteCompatibleProperties = [properties.borderColor, properties.borderTopColor, properties.borderBottomColor, properties.borderLeftColor, properties.borderRightColor];
</span><span class="cx">
</span><span class="cx"> this._populateSection(group, [borderGroup, borderImageGroup]);
</span><ins>+
+ let allowedBorderValues = ["solid", "dashed", "dotted", "double", "groove", "inset", "outset", "ridge"];
+ properties.borderWidth.addDependency(["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"], allowedBorderValues);
+ properties.borderColor.addDependency(["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"], allowedBorderValues);
+ properties.borderTopWidth.addDependency("border-top-style", allowedBorderValues);
+ properties.borderTopColor.addDependency("border-top-style", allowedBorderValues);
+ properties.borderRightWidth.addDependency("border-right-style", allowedBorderValues);
+ properties.borderRightColor.addDependency("border-right-style", allowedBorderValues);
+ properties.borderBottomWidth.addDependency("border-bottom-style", allowedBorderValues);
+ properties.borderBottomColor.addDependency("border-bottom-style", allowedBorderValues);
+ properties.borderLeftWidth.addDependency("border-left-style", allowedBorderValues);
+ properties.borderLeftColor.addDependency("border-left-style", allowedBorderValues);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _populateOutlineSection()
</span><span class="lines">@@ -1039,24 +1061,28 @@
</span><span class="cx">
</span><span class="cx"> let outlineSizeRow = new WebInspector.DetailsSectionRow;
</span><span class="cx">
</span><ins>+ properties.outlineStyle = new WebInspector.VisualStyleKeywordPicker("outline-style" , WebInspector.UIString("Style"), this._keywords.borderStyle);
</ins><span class="cx"> properties.outlineWidth = new WebInspector.VisualStyleNumberInputBox("outline-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
</span><del>- properties.outlineOffset = new WebInspector.VisualStyleNumberInputBox("outline-offset", WebInspector.UIString("Offset"), this._keywords.defaults, this._units.defaults, true);
</del><span class="cx">
</span><ins>+ outlineSizeRow.element.appendChild(properties.outlineStyle.element);
</ins><span class="cx"> outlineSizeRow.element.appendChild(properties.outlineWidth.element);
</span><del>- outlineSizeRow.element.appendChild(properties.outlineOffset.element);
</del><span class="cx">
</span><span class="cx"> let outlineStyleRow = new WebInspector.DetailsSectionRow;
</span><span class="cx">
</span><del>- properties.outlineStyle = new WebInspector.VisualStyleKeywordPicker("outline-style" , WebInspector.UIString("Style"), this._keywords.borderStyle);
</del><span class="cx"> properties.outlineColor = new WebInspector.VisualStyleColorPicker("outline-color", WebInspector.UIString("Color"));
</span><ins>+ properties.outlineOffset = new WebInspector.VisualStyleNumberInputBox("outline-offset", WebInspector.UIString("Offset"), this._keywords.defaults, this._units.defaults, true);
</ins><span class="cx">
</span><del>- outlineStyleRow.element.appendChild(properties.outlineStyle.element);
</del><span class="cx"> outlineStyleRow.element.appendChild(properties.outlineColor.element);
</span><ins>+ outlineStyleRow.element.appendChild(properties.outlineOffset.element);
</ins><span class="cx">
</span><span class="cx"> group.autocompleteCompatibleProperties = [properties.outlineColor];
</span><span class="cx">
</span><span class="cx"> let outlineGroup = new WebInspector.DetailsSectionGroup([outlineSizeRow, outlineStyleRow]);
</span><span class="cx"> this._populateSection(group, [outlineGroup]);
</span><ins>+
+ let allowedOutlineValues = ["solid", "dashed", "dotted", "double", "groove", "inset", "outset", "ridge"];
+ properties.outlineWidth.addDependency("outline-style", allowedOutlineValues);
+ properties.outlineColor.addDependency("outline-style", allowedOutlineValues);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _populateBoxShadowSection()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css (194736 => 194737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2016-01-07 23:33:04 UTC (rev 194736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2016-01-07 23:44:27 UTC (rev 194737)
</span><span class="lines">@@ -34,7 +34,12 @@
</span><span class="cx"> text-align: right;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container > .visual-style-property-title > .property-reference-info{
</del><ins>+.visual-style-property-container.layout-reversed > .visual-style-property-title {
+ order: 2;
+ text-align: left;
+}
+
+.visual-style-property-container > .visual-style-property-title > .property-reference-info {
</ins><span class="cx"> cursor: help;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -42,11 +47,37 @@
</span><span class="cx"> opacity: 0.7;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.visual-style-property-container > .visual-style-property-editor-warning {
+ display: none;
+ position: relative;
+ order: 1;
+ top: 5px;
+ width: 10px;
+ height: 10px;
+ margin-right: 4px;
+ content: "";
+ background-image: url(../Images/Warning.svg);
+}
+
+.visual-style-property-container.layout-reversed > .visual-style-property-editor-warning {
+ margin-right: 0;
+ margin-left: 4px;
+}
+
+.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency {
+ display: block;
+}
+
</ins><span class="cx"> .visual-style-property-container > .visual-style-property-value-container {
</span><span class="cx"> flex: 1;
</span><ins>+ order: 2;
</ins><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.visual-style-property-container.layout-reversed > .visual-style-property-value-container {
+ order: 0;
+}
+
</ins><span class="cx"> .visual-style-property-container.disabled > .visual-style-property-value-container {
</span><span class="cx"> pointer-events: none;
</span><span class="cx"> opacity: 0.4;
</span><span class="lines">@@ -67,11 +98,6 @@
</span><span class="cx"> pointer-events: none !important;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.layout-reversed > .visual-style-property-title {
- order: 2;
- text-align: left;
-}
-
</del><span class="cx"> .visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 2px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (194736 => 194737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-01-07 23:33:04 UTC (rev 194736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-01-07 23:44:27 UTC (rev 194737)
</span><span class="lines">@@ -62,6 +62,7 @@
</span><span class="cx"> else
</span><span class="cx"> this._possibleUnits = possibleUnits;
</span><span class="cx"> }
</span><ins>+ this._dependencies = new Map;
</ins><span class="cx">
</span><span class="cx"> this._element = document.createElement("div");
</span><span class="cx"> this._element.classList.add("visual-style-property-container", className);
</span><span class="lines">@@ -323,6 +324,8 @@
</span><span class="cx">
</span><span class="cx"> this._lastValue = this.synthesizedValue;
</span><span class="cx"> this.disabled = false;
</span><ins>+
+ this._checkDependencies();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> resetEditorValues(value)
</span><span class="lines">@@ -396,6 +399,23 @@
</span><span class="cx"> return this._valueIsSupportedAdvancedUnit(unit);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ addDependency(propertyNames, propertyValues)
+ {
+ if (!propertyNames || !propertyNames.length || !propertyValues || !propertyValues.length)
+ return;
+
+ if (!Array.isArray(propertyNames))
+ propertyNames = [propertyNames];
+
+ for (let property of propertyNames)
+ this._dependencies.set(property, propertyValues);
+
+ if (!this._warningElement) {
+ this._warningElement = this._element.appendChild(document.createElement("div"));
+ this._warningElement.classList.add("visual-style-property-editor-warning");
+ }
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> get contentElement()
</span><span class="lines">@@ -474,6 +494,8 @@
</span><span class="cx"> this._ignoreNextUpdate = true;
</span><span class="cx"> this._specialPropertyPlaceholderElement.hidden = true;
</span><span class="cx">
</span><ins>+ this._checkDependencies();
+
</ins><span class="cx"> this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="lines">@@ -495,6 +517,37 @@
</span><span class="cx"> return longhandText ? text.replace(shorthand.text, longhandText) : text;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _hasMultipleConflictingValues()
+ {
+ return this._hasMultipleProperties && !this._specialPropertyPlaceholderElement.hidden;
+ }
+
+ _checkDependencies()
+ {
+ if (!this._dependencies.size || !this._style || !this.synthesizedValue) {
+ if (this._warningElement)
+ this._warningElement.classList.remove("missing-dependency");
+
+ return;
+ }
+
+ let title = "";
+
+ // FIXME: <https://webkit.org/b/152497> Arrow functions: "this" isn't lexically bound
+ let dependencies = this._style.nodeStyles.computedStyle.properties.filter(function(property) {
+ return this._dependencies.has(property.name) || this._dependencies.has(property.canonicalName);
+ }.bind(this));
+
+ for (let property of dependencies) {
+ let dependencyValues = this._dependencies.get(property.name);
+ if (!dependencyValues.includes(property.value))
+ title += "\n " + property.name + ": " + dependencyValues.join("/");
+ }
+
+ this._warningElement.classList.toggle("missing-dependency", !!title.length);
+ this._warningElement.title = !!title.length ? WebInspector.UIString("Missing Dependencies:%s").format(title) : null;
+ }
+
</ins><span class="cx"> _titleElementPrepareForClick(event)
</span><span class="cx"> {
</span><span class="cx"> this._titleElement.classList.toggle("property-reference-info", event.type === "keydown" && event.altKey);
</span><span class="lines">@@ -526,11 +579,6 @@
</span><span class="cx"> this._showPropertyInfoPopover();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _hasMultipleConflictingValues()
- {
- return this._hasMultipleProperties && !this._specialPropertyPlaceholderElement.hidden;
- }
-
</del><span class="cx"> _showPropertyInfoPopover()
</span><span class="cx"> {
</span><span class="cx"> if (!this._hasPropertyReference)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js (194736 => 194737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js 2016-01-07 23:33:04 UTC (rev 194736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js 2016-01-07 23:44:27 UTC (rev 194737)
</span><span class="lines">@@ -97,7 +97,6 @@
</span><span class="cx">
</span><span class="cx"> function createSelectorItem(style, title, subtitle) {
</span><span class="cx"> let selector = new WebInspector.VisualStyleSelectorTreeItem(this, style, title, subtitle);
</span><del>- selector.addEventListener(WebInspector.VisualStyleSelectorTreeItem.Event.StyleTextReset, this._styleTextReset, this);
</del><span class="cx"> selector.addEventListener(WebInspector.VisualStyleSelectorTreeItem.Event.CheckboxChanged, this._treeElementCheckboxToggled, this);
</span><span class="cx"> this._selectors.appendChild(selector);
</span><span class="cx">
</span><span class="lines">@@ -257,11 +256,6 @@
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _styleTextReset()
- {
- this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.StyleTextChanged);
- }
-
</del><span class="cx"> _addNewRule(event)
</span><span class="cx"> {
</span><span class="cx"> if (!this._nodeStyles || this._nodeStyles.node.isInShadowTree())
</span><span class="lines">@@ -331,6 +325,5 @@
</span><span class="cx"> WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol = Symbol("visual-style-selector-section-last-selected-rule");
</span><span class="cx">
</span><span class="cx"> WebInspector.VisualStyleSelectorSection.Event = {
</span><del>- SelectorChanged: "visual-style-selector-section-selector-changed",
- StyleTextChanged: "visual-style-selector-section-style-text-changed"
</del><ins>+ SelectorChanged: "visual-style-selector-section-selector-changed"
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorTreeItemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js (194736 => 194737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js 2016-01-07 23:33:04 UTC (rev 194736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js 2016-01-07 23:44:27 UTC (rev 194737)
</span><span class="lines">@@ -146,7 +146,6 @@
</span><span class="cx"> if (this.representedObject.modified) {
</span><span class="cx"> contextMenu.appendItem(WebInspector.UIString("Reset"), () => {
</span><span class="cx"> this.representedObject.resetText();
</span><del>- this.dispatchEventToListeners(WebInspector.VisualStyleSelectorTreeItem.Event.StyleTextReset);
</del><span class="cx"> });
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -282,6 +281,5 @@
</span><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.VisualStyleSelectorTreeItem.Event = {
</span><del>- StyleTextReset: "visual-style-selector-item-style-text-reset",
</del><span class="cx"> CheckboxChanged: "visual-style-selector-item-checkbox-changed"
</span><span class="cx"> };
</span></span></pre>
</div>
</div>
</body>
</html>