<!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>[194728] 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/194728">194728</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-01-07 14:36:51 -0800 (Thu, 07 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add border-image properties to Visual sidebar
https://bugs.webkit.org/show_bug.cgi?id=152755
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-01-07
Reviewed by Timothy Hatcher.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:
Switched the order of VisualStyleURLInput and VisualStyleUnitSlider
to be ordered alphabetically.
* UserInterface/Views/VisualStyleBackgroundPicker.js:
(WebInspector.VisualStyleBackgroundPicker.prototype._keywordSelectMouseDown):
* UserInterface/Views/VisualStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child):
(.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.border .visual-style-property-container.keyword-checkbox.border-image-slice):
Since the checkbox is so small, give it less room.
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection.generateBorderImagePropertyEditors):
The three properties "border-image-width", "border-image-outset", and
"border-image-slice" all have the same syntax, so one function to generate
the layout for all three is much simpler.
(WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
Added the border image properties to a seperate group under Background > Border.
* UserInterface/Views/VisualStyleKeywordPicker.js:
(WebInspector.VisualStyleKeywordPicker.prototype._keywordSelectMouseDown):
* UserInterface/Views/VisualStyleNumberInputBox.js:
(WebInspector.VisualStyleNumberInputBox):
(WebInspector.VisualStyleNumberInputBox.prototype.set units):
Reordered logic to allow a value of ""/null to set the units to the "Number"
value if it is allowed for that editor.
(WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
Instead of relying upon whether the editor has any units, just check to see if
the selected units are "Number" and, if not, add them to the value.
(WebInspector.VisualStyleNumberInputBox.prototype._unitsElementTextContent):
* UserInterface/Views/VisualStylePropertyCombiner.js:
(WebInspector.VisualStylePropertyCombiner):
Now has another argument that, when true, assumes the combiner has at least 4
numerical values and is of the form (can have units):
property-name: value1 [value2 [value3 [value4 [...]]]];
(WebInspector.VisualStylePropertyCombiner.prototype.get synthesizedValue):
(WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateEditor):
(WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateCompatibleEditor):
(WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText):
If the new argument is true, assigns the existing values in the following way:
- If there is 1 value, assign it to all of the editors.
- If there are 2 values, assign the 1st one to editors 1 and 3 and the 2nd one
to editors 2 and 4.
- If there are 3 values, assign the 1st one to editor 1, the 2nd one to editors
2 and 4, and the 3rd one to editor 3.
- If there are 4 or more values, assign them normally.
* UserInterface/Views/VisualStylePropertyEditor.js:
(WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedKeyword):
(WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedKeyword):
Removed call to this.value to prevent recursion from VisualStyleNumberInputBox.
(WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedUnit):
(WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedUnit):
Removed call to this.units to prevent recursion from VisualStyleNumberInputBox.</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="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickerjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordPickerjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyCombinerjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js</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 (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -1,5 +1,76 @@
</span><span class="cx"> 2016-01-07 Devin Rousso <dcrousso+webkit@gmail.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Add border-image properties to Visual sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=152755
+
+ Reviewed by Timothy Hatcher.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Main.html:
+ Switched the order of VisualStyleURLInput and VisualStyleUnitSlider
+ to be ordered alphabetically.
+
+ * UserInterface/Views/VisualStyleBackgroundPicker.js:
+ (WebInspector.VisualStyleBackgroundPicker.prototype._keywordSelectMouseDown):
+
+ * UserInterface/Views/VisualStyleDetailsPanel.css:
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child):
+ (.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.border .visual-style-property-container.keyword-checkbox.border-image-slice):
+ Since the checkbox is so small, give it less room.
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection.generateBorderImagePropertyEditors):
+ The three properties "border-image-width", "border-image-outset", and
+ "border-image-slice" all have the same syntax, so one function to generate
+ the layout for all three is much simpler.
+
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
+ Added the border image properties to a seperate group under Background > Border.
+
+ * UserInterface/Views/VisualStyleKeywordPicker.js:
+ (WebInspector.VisualStyleKeywordPicker.prototype._keywordSelectMouseDown):
+
+ * UserInterface/Views/VisualStyleNumberInputBox.js:
+ (WebInspector.VisualStyleNumberInputBox):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set units):
+ Reordered logic to allow a value of ""/null to set the units to the "Number"
+ value if it is allowed for that editor.
+
+ (WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
+ Instead of relying upon whether the editor has any units, just check to see if
+ the selected units are "Number" and, if not, add them to the value.
+
+ (WebInspector.VisualStyleNumberInputBox.prototype._unitsElementTextContent):
+
+ * UserInterface/Views/VisualStylePropertyCombiner.js:
+ (WebInspector.VisualStylePropertyCombiner):
+ Now has another argument that, when true, assumes the combiner has at least 4
+ numerical values and is of the form (can have units):
+ property-name: value1 [value2 [value3 [value4 [...]]]];
+
+ (WebInspector.VisualStylePropertyCombiner.prototype.get synthesizedValue):
+ (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateEditor):
+ (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateCompatibleEditor):
+ (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText):
+ If the new argument is true, assigns the existing values in the following way:
+ - If there is 1 value, assign it to all of the editors.
+ - If there are 2 values, assign the 1st one to editors 1 and 3 and the 2nd one
+ to editors 2 and 4.
+ - If there are 3 values, assign the 1st one to editor 1, the 2nd one to editors
+ 2 and 4, and the 3rd one to editor 3.
+ - If there are 4 or more values, assign them normally.
+
+ * UserInterface/Views/VisualStylePropertyEditor.js:
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedKeyword):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedKeyword):
+ Removed call to this.value to prevent recursion from VisualStyleNumberInputBox.
+
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedUnit):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedUnit):
+ Removed call to this.units to prevent recursion from VisualStyleNumberInputBox.
+
+2016-01-07 Devin Rousso <dcrousso+webkit@gmail.com>
+
</ins><span class="cx"> Web Inspector: Add indicator that element has pseudo-class in DOM tree
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=152680
</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 (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -287,6 +287,7 @@
</span><span class="cx"> localizedStrings["Extra Scripts"] = "Extra Scripts";
</span><span class="cx"> localizedStrings["Family"] = "Family";
</span><span class="cx"> localizedStrings["Filename"] = "Filename";
</span><ins>+localizedStrings["Fill"] = "Fill";
</ins><span class="cx"> localizedStrings["Fill Mode"] = "Fill Mode";
</span><span class="cx"> localizedStrings["Filter %s"] = "Filter %s";
</span><span class="cx"> localizedStrings["Filter Breakpoint List"] = "Filter Breakpoint List";
</span><span class="lines">@@ -467,6 +468,7 @@
</span><span class="cx"> localizedStrings["Other Issue"] = "Other Issue";
</span><span class="cx"> localizedStrings["Outline"] = "Outline";
</span><span class="cx"> localizedStrings["Output: "] = "Output: ";
</span><ins>+localizedStrings["Outset"] = "Outset";
</ins><span class="cx"> localizedStrings["Over 1 ms"] = "Over 1 ms";
</span><span class="cx"> localizedStrings["Over 15 ms"] = "Over 15 ms";
</span><span class="cx"> localizedStrings["Overflow"] = "Overflow";
</span><span class="lines">@@ -586,6 +588,7 @@
</span><span class="cx"> localizedStrings["Shrink"] = "Shrink";
</span><span class="cx"> localizedStrings["Size"] = "Size";
</span><span class="cx"> localizedStrings["Sizing"] = "Sizing";
</span><ins>+localizedStrings["Slice"] = "Slice";
</ins><span class="cx"> localizedStrings["Small Icons"] = "Small Icons";
</span><span class="cx"> localizedStrings["Socket"] = "Socket";
</span><span class="cx"> localizedStrings["Sockets"] = "Sockets";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -601,8 +601,8 @@
</span><span class="cx"> <script src="Views/VisualStyleSelectorTreeItem.js"></script>
</span><span class="cx"> <script src="Views/VisualStyleTabbedPropertiesRow.js"></script>
</span><span class="cx"> <script src="Views/VisualStyleTimingEditor.js"></script>
</span><ins>+ <script src="Views/VisualStyleURLInput.js"></script>
</ins><span class="cx"> <script src="Views/VisualStyleUnitSlider.js"></script>
</span><del>- <script src="Views/VisualStyleURLInput.js"></script>
</del><span class="cx">
</span><span class="cx"> <script src="Controllers/Annotator.js"></script>
</span><span class="cx"> <script src="Controllers/CodeMirrorEditingController.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -206,7 +206,7 @@
</span><span class="cx"> {
</span><span class="cx"> if (event.altKey)
</span><span class="cx"> this._addAdvancedValues();
</span><del>- else if (!this._valueIsSupportedAdvancedKeyword())
</del><ins>+ else if (!this._valueIsSupportedAdvancedKeyword(this.value))
</ins><span class="cx"> this._removeAdvancedValues();
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -64,6 +64,11 @@
</span><span class="cx"> display: flex;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child {
+ padding-top: 7px;
+ border-top: none;
+}
+
</ins><span class="cx"> .sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row:last-child {
</span><span class="cx"> padding-bottom: 3px;
</span><span class="cx"> }
</span><span class="lines">@@ -97,6 +102,11 @@
</span><span class="cx"> pointer-events: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row + .row.visual-style-tabbed-properties-row,
</ins><span class="cx"> .sidebar > .panel.details.css-style .visual > .details-section.background .details-section.background-style .visual-style-property-container.comma-separated-keyword-editor.background {
</span><span class="cx"> margin-top: 3px;
</span><span class="cx"> }
</span><ins>+
+.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.border .visual-style-property-container.keyword-checkbox.border-image-slice {
+ flex: 1;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -962,10 +962,74 @@
</span><span class="cx"> this._addMetricsMouseListeners(group.properties.borderLeftWidth, highlightMode);
</span><span class="cx"> this._addMetricsMouseListeners(group.properties.borderRightWidth, highlightMode);
</span><span class="cx">
</span><ins>+ let borderGroup = new WebInspector.DetailsSectionGroup([borderTabController, borderAllGroup, borderTopGroup, borderRightGroup, borderBottomGroup, borderLeftGroup]);
+
+ let borderImageSourceRow = new WebInspector.DetailsSectionRow;
+
+ properties.borderImageSource = new WebInspector.VisualStyleURLInput("border-image-source", WebInspector.UIString("Image"), this._keywords.defaults.concat(["None"]));
+
+ borderImageSourceRow.element.appendChild(properties.borderImageSource.element);
+
+ let borderImageRepeatRow = new WebInspector.DetailsSectionRow;
+
+ let borderImageSliceFill = new WebInspector.VisualStyleKeywordCheckbox("border-image-slice", WebInspector.UIString("Fill"), "Fill");
+ borderImageSliceFill.optionalProperty = true;
+ properties.borderImageRepeat = new WebInspector.VisualStyleKeywordPicker("border-image-repeat", WebInspector.UIString("Repeat"), this._keywords.defaults.concat(["Stretch", "Repeat", "Round", "Space"]));
+
+ borderImageRepeatRow.element.appendChild(borderImageSliceFill.element);
+ borderImageRepeatRow.element.appendChild(properties.borderImageRepeat.element);
+
+ function generateBorderImagePropertyEditors(propertyName, keywords, units) {
+ let vertical = new WebInspector.DetailsSectionRow;
+
+ let top = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Top"), keywords, units);
+ top.masterProperty = true;
+ let bottom = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Bottom"), keywords, units);
+ bottom.masterProperty = true;
+
+ vertical.element.appendChild(top.element);
+ vertical.element.appendChild(bottom.element);
+
+ let horizontal = new WebInspector.DetailsSectionRow;
+
+ let left = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Left"), keywords, units);
+ left.masterProperty = true;
+ let right = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Right"), keywords, units);
+ right.masterProperty = true;
+
+ horizontal.element.appendChild(left.element);
+ horizontal.element.appendChild(right.element);
+
+ return {group: new WebInspector.DetailsSectionGroup([vertical, horizontal]), properties: [top, bottom, left, right]};
+ }
+
+ let nonKeywordUnits = [WebInspector.UIString("Number")];
+
+ let borderImageUnits = this._units.defaults;
+ borderImageUnits.basic = nonKeywordUnits.concat(borderImageUnits.basic);
+ let borderImageWidth = generateBorderImagePropertyEditors("border-image-width", this._keywords.boxModel, borderImageUnits);
+ properties.borderImageWidth = new WebInspector.VisualStylePropertyCombiner("border-image-width", borderImageWidth.properties, true);
+
+ let borderOutsetUnits = this._units.defaultsSansPercent;
+ borderOutsetUnits.basic = nonKeywordUnits.concat(borderOutsetUnits.basic);
+ let borderImageOutset = generateBorderImagePropertyEditors("border-image-outset", this._keywords.defaults, borderOutsetUnits);
+ properties.borderImageOutset = new WebInspector.VisualStylePropertyCombiner("border-image-outset", borderImageOutset.properties, true);
+
+ let borderImageSlice = generateBorderImagePropertyEditors("border-image-slice", this._keywords.defaults, ["%"].concat(nonKeywordUnits));
+ borderImageSlice.properties.push(borderImageSliceFill);
+ properties.borderImageSlice = new WebInspector.VisualStylePropertyCombiner("border-image-slice", borderImageSlice.properties, true);
+
+ let borderImagePropertiesTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+ "width": {title: WebInspector.UIString("Width"), element: borderImageWidth.group.element, properties: [properties.borderImageWidth]},
+ "outset": {title: WebInspector.UIString("Outset"), element: borderImageOutset.group.element, properties: [properties.borderImageOutset]},
+ "slice": {title: WebInspector.UIString("Slice"), element: borderImageSlice.group.element, properties: [properties.borderImageSlice]}
+ });
+
+ let borderImageGroup = new WebInspector.DetailsSectionGroup([borderImageSourceRow, borderImageRepeatRow, borderImagePropertiesTabController, borderImageWidth.group, borderImageOutset.group, borderImageSlice.group]);
+
</ins><span class="cx"> group.autocompleteCompatibleProperties = [properties.borderColor, properties.borderTopColor, properties.borderBottomColor, properties.borderLeftColor, properties.borderRightColor];
</span><span class="cx">
</span><del>- let borderGroup = new WebInspector.DetailsSectionGroup([borderTabController, borderAllGroup, borderTopGroup, borderRightGroup, borderBottomGroup, borderLeftGroup]);
- this._populateSection(group, [borderGroup]);
</del><ins>+ this._populateSection(group, [borderGroup, borderImageGroup]);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _populateOutlineSection()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordPickerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -129,7 +129,7 @@
</span><span class="cx"> {
</span><span class="cx"> if (event.altKey)
</span><span class="cx"> this._addAdvancedValues();
</span><del>- else if (!this._valueIsSupportedAdvancedKeyword())
</del><ins>+ else if (!this._valueIsSupportedAdvancedKeyword(this.value))
</ins><span class="cx"> this._removeAdvancedValues();
</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 (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -27,9 +27,13 @@
</span><span class="cx"> {
</span><span class="cx"> constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
</span><span class="cx"> {
</span><del>- super(propertyNames, text, possibleValues, possibleUnits || [WebInspector.UIString("Number")], "number-input-box", layoutReversed);
</del><ins>+ let unitlessNumberUnit = WebInspector.UIString("Number");
</ins><span class="cx">
</span><del>- this._hasUnits = !!possibleUnits;
</del><ins>+ super(propertyNames, text, possibleValues, possibleUnits || [unitlessNumberUnit], "number-input-box", layoutReversed);
+
+ this._unitlessNumberUnit = unitlessNumberUnit;
+
+ this._hasUnits = this._possibleUnits.basic.some((unit) => unit !== unitlessNumberUnit);
</ins><span class="cx"> this._allowNegativeValues = !!allowNegativeValues || false;
</span><span class="cx">
</span><span class="cx"> this.contentElement.classList.toggle("no-values", !possibleValues || !possibleValues.length);
</span><span class="lines">@@ -89,8 +93,8 @@
</span><span class="cx"> this.contentElement.classList.add("number-input-editable");
</span><span class="cx"> this._valueNumberInputElement.value = null;
</span><span class="cx"> this._valueNumberInputElement.setAttribute("placeholder", 0);
</span><del>- if (this._hasUnits && this.valueIsSupportedUnit("px"))
- this._unitsElementTextContent = this._keywordSelectElement.value = "px";
</del><ins>+ if (this._hasUnits)
+ this._unitsElementTextContent = this._keywordSelectElement.value = this.valueIsSupportedUnit("px") ? "px" : this._possibleUnits.basic[0];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -159,20 +163,17 @@
</span><span class="cx">
</span><span class="cx"> set units(unit)
</span><span class="cx"> {
</span><del>- if (this._unchangedOptionElement.selected)
</del><ins>+ if (this._unchangedOptionElement.selected || unit === this.units)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- if (!unit || unit === this.units)
</del><ins>+ if (!unit && !this._possibleUnits.basic.includes(this._unitlessNumberUnit) && !this.valueIsSupportedUnit(unit))
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- if (!this.valueIsSupportedUnit(unit))
- return;
-
</del><span class="cx"> if (this._valueIsSupportedAdvancedUnit(unit))
</span><span class="cx"> this._addAdvancedUnits();
</span><span class="cx">
</span><span class="cx"> this._setNumberInputIsEditable(true);
</span><del>- this._keywordSelectElement.value = unit;
</del><ins>+ this._keywordSelectElement.value = unit || this._unitlessNumberUnit;
</ins><span class="cx"> this._unitsElementTextContent = unit;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -203,7 +204,7 @@
</span><span class="cx"> return null;
</span><span class="cx">
</span><span class="cx"> let keyword = this._keywordSelectElement.value;
</span><del>- return this.valueIsSupportedUnit(keyword) ? value + (this._hasUnits ? keyword : "") : keyword;
</del><ins>+ return this.valueIsSupportedUnit(keyword) ? value + (keyword === this._unitlessNumberUnit ? "" : keyword) : keyword;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> updateValueFromText(text, value)
</span><span class="lines">@@ -228,7 +229,7 @@
</span><span class="cx"> if (!this._hasUnits)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._unitsElement.textContent = text;
</del><ins>+ this._unitsElement.textContent = text === this._unitlessNumberUnit ? "" : text;
</ins><span class="cx"> this._markUnitsContainerIfInputHasValue();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -323,7 +324,7 @@
</span><span class="cx"> {
</span><span class="cx"> if (event.altKey)
</span><span class="cx"> this._addAdvancedUnits();
</span><del>- else if (!this._valueIsSupportedAdvancedUnit())
</del><ins>+ else if (!this._valueIsSupportedAdvancedUnit(this._keywordSelectElement.value))
</ins><span class="cx"> this._removeAdvancedUnits();
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyCombinerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -25,7 +25,7 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.VisualStylePropertyCombiner = class VisualStylePropertyCombiner extends WebInspector.Object
</span><span class="cx"> {
</span><del>- constructor(propertyName, propertyEditors)
</del><ins>+ constructor(propertyName, propertyEditors, spreadNumberValues)
</ins><span class="cx"> {
</span><span class="cx"> super();
</span><span class="cx">
</span><span class="lines">@@ -33,6 +33,7 @@
</span><span class="cx"> this._propertyName = propertyName;
</span><span class="cx"> this._propertyMissing = false;
</span><span class="cx"> this._propertyEditors = propertyEditors || [];
</span><ins>+ this._spreadNumberValues = !!spreadNumberValues && this._propertyEditors.length >= 4;
</ins><span class="cx">
</span><span class="cx"> for (let editor of this._propertyEditors) {
</span><span class="cx"> editor.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._handlePropertyEditorValueChanged, this);
</span><span class="lines">@@ -60,7 +61,7 @@
</span><span class="cx"> else if (editor.optionalProperty)
</span><span class="cx"> continue;
</span><span class="cx">
</span><del>- if (editor.masterProperty && editor.valueIsSupportedKeyword()) {
</del><ins>+ if (editor.masterProperty && editor.valueIsSupportedKeyword(editor.value)) {
</ins><span class="cx"> this._markEditors(editor, true);
</span><span class="cx"> return editorValue;
</span><span class="cx"> }
</span><span class="lines">@@ -117,6 +118,34 @@
</span><span class="cx"> for (let editor of this._propertyEditors)
</span><span class="cx"> editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = false;
</span><span class="cx">
</span><ins>+ function updateEditor(editor, value) {
+ let updatedValues = editor.getValuesFromText(value || "", propertyMissing);
+ if (!updatedValues)
+ return;
+
+ editor.updateEditorValues(updatedValues);
+ editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = true;
+ }
+
+ if (this._spreadNumberValues) {
+ let numberValues = styleText.match(/\d+[\w%]*/g);
+ let count = numberValues && numberValues.length;
+ if (count === 1) {
+ for (let editor of this._propertyEditors)
+ updateEditor(editor, numberValues[0]);
+ } else if (count === 2) {
+ for (let i = 0; i < count; ++i) {
+ updateEditor(this._propertyEditors[i], numberValues[i]);
+ updateEditor(this._propertyEditors[i + 2], numberValues[i]);
+ }
+ } else if (count === 3) {
+ updateEditor(this._propertyEditors[0], numberValues[0]);
+ updateEditor(this._propertyEditors[1], numberValues[1]);
+ updateEditor(this._propertyEditors[2], numberValues[2]);
+ updateEditor(this._propertyEditors[3], numberValues[1]);
+ }
+ }
+
</ins><span class="cx"> function updateCompatibleEditor(value) {
</span><span class="cx"> for (let editor of this._propertyEditors) {
</span><span class="cx"> if (value && !editor.valueIsCompatible(value) || editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol])
</span><span class="lines">@@ -125,11 +154,7 @@
</span><span class="cx"> if (this._currentValueIsKeyword && editor.disabled)
</span><span class="cx"> continue;
</span><span class="cx">
</span><del>- let updatedValues = editor.getValuesFromText(value || "", propertyMissing);
- if (updatedValues)
- editor.updateEditorValues(updatedValues);
- editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = true;
-
</del><ins>+ updateEditor(editor, value);
</ins><span class="cx"> if (value)
</span><span class="cx"> return;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (194727 => 194728)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-01-07 22:31:27 UTC (rev 194727)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-01-07 22:36:51 UTC (rev 194728)
</span><span class="lines">@@ -379,7 +379,6 @@
</span><span class="cx"> if (!this._possibleValues)
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- value = value || this.value;
</del><span class="cx"> if (Object.keys(this._possibleValues.basic).includes(value))
</span><span class="cx"> return true;
</span><span class="cx">
</span><span class="lines">@@ -391,7 +390,6 @@
</span><span class="cx"> if (!this._possibleUnits)
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- unit = unit || this.units;
</del><span class="cx"> if (this._possibleUnits.basic.includes(unit))
</span><span class="cx"> return true;
</span><span class="cx">
</span><span class="lines">@@ -419,12 +417,12 @@
</span><span class="cx">
</span><span class="cx"> _valueIsSupportedAdvancedKeyword(value)
</span><span class="cx"> {
</span><del>- return this._possibleValues.advanced && Object.keys(this._possibleValues.advanced).includes(value || this.value);
</del><ins>+ return this._possibleValues.advanced && Object.keys(this._possibleValues.advanced).includes(value);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _valueIsSupportedAdvancedUnit(unit)
</span><span class="cx"> {
</span><del>- return this._possibleUnits.advanced && this._possibleUnits.advanced.includes(unit || this.units);
</del><ins>+ return this._possibleUnits.advanced && this._possibleUnits.advanced.includes(unit);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _canonicalizedKeywordForKey(value)
</span></span></pre>
</div>
</div>
</body>
</html>