<!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>[193080] branches/safari-601-branch/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/193080">193080</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 10:44:18 -0800 (Thu, 03 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/188238">r188238</a>. rdar://problem/23221163</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceImagesVisualStylePropertyLinkedsvg">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyLinked.svg</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceImagesVisualStylePropertyUnlinkedsvg">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorLinkcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorLinkjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleRelativeNumberSlidercss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleRelativeNumberSliderjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193079 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:44:09 UTC (rev 193079)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -1,5 +1,103 @@
</span><span class="cx"> 2015-12-02 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Merge r188238. rdar://problem/23221163
+
+ 2015-08-10 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Add numerical input and slider based Visual editors for CSS properties
+ https://bugs.webkit.org/show_bug.cgi?id=147712
+
+ Reviewed by Brian Burg.
+
+ Added editors for CSS properties with numerical values for use in the Visual style
+ details panel in the CSS sidebar, in the form of a combined select and input or an
+ input range. Also added optional visual linkages to sync values between multiple
+ editors of this type.
+
+ * UserInterface/Images/VisualStylePropertyLinked.svg: Added.
+ * UserInterface/Images/VisualStylePropertyUnlinked.svg: Added.
+
+ * UserInterface/Views/VisualStyleNumberInputBox.css: Added.
+ (.visual-style-property-container > .visual-style-property-value-container.focused > .focus-ring):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-keyword-select):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container):
+ (.visual-style-property-container > .visual-style-property-value-container:not(.number-input-editable) > .number-input-container):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container > span):
+
+ * UserInterface/Views/VisualStyleNumberInputBox.js: Added.
+ (WebInspector.VisualStyleNumberInputBox):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get value):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set value):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get units):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set units):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get placeholder):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set placeholder):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get numberInputEditable):
+ (WebInspector.VisualStyleNumberInputBox.prototype.updateValueFromText):
+ (WebInspector.VisualStyleNumberInputBox.prototype.parseValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype._keywordChanged):
+ (WebInspector.VisualStyleNumberInputBox.prototype._valueNumberInputKeyDown.shiftValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype._valueNumberInputKeyDown):
+ (WebInspector.VisualStyleNumberInputBox.prototype._numberInputChanged):
+ (WebInspector.VisualStyleNumberInputBox.prototype._keywordSelectMouseDown):
+ (WebInspector.VisualStyleNumberInputBox.prototype._createValueOptions):
+ (WebInspector.VisualStyleNumberInputBox.prototype._createUnitOptions):
+ (WebInspector.VisualStyleNumberInputBox.prototype._addAdvancedUnits):
+ (WebInspector.VisualStyleNumberInputBox.prototype._removeAdvancedUnits):
+ (WebInspector.VisualStyleNumberInputBox.prototype._focusContentElement):
+ (WebInspector.VisualStyleNumberInputBox.prototype._blurContentElement):
+ (WebInspector.VisualStyleNumberInputBox.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStylePropertyEditorLink.css: Added.
+ (.visual-style-property-editor-link):
+ (.visual-style-property-editor-link.disabled):
+ (.visual-style-property-editor-link.link-all):
+ (.visual-style-property-editor-link.link-all.linked):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right):
+ (.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-border.left):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-border.right):
+ (.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link:not(.link-all).linked > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .filled):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .stroked):
+ (.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon):
+ (.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-icon):
+
+ * UserInterface/Views/VisualStylePropertyEditorLink.js: Added.
+ (WebInspector.VisualStylePropertyEditorLink):
+ (WebInspector.VisualStylePropertyEditorLink.prototype.get element):
+ (WebInspector.VisualStylePropertyEditorLink.prototype.set disabled):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._linkedPropertyValueChanged):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._updateLinkedEditors):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._iconMouseover):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._iconMouseout):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._iconClicked):
+
+ * UserInterface/Views/VisualStyleRelativeNumberSlider.css: Added.
+ (.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-title):
+ (.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container):
+ (.visual-style-property-container.number-input-box.relative-number-slider.disabled > .relative-slider):
+ (.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container.no-values.no-units):
+ (.visual-style-property-container.number-input-box.relative-number-slider > .relative-slider):
+
+ * UserInterface/Views/VisualStyleRelativeNumberSlider.js: Added.
+ (WebInspector.VisualStyleRelativeNumberSlider):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype.set scale):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype.updateEditorValues):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._resetSlider):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._sliderChanged):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._numberInputChanged):
+
+2015-12-02 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Merge r188229. rdar://problem/23221163
</span><span class="cx">
</span><span class="cx"> 2015-08-10 Devin Rousso <drousso@apple.com>
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceImagesVisualStylePropertyLinkedsvg"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyLinked.svg (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyLinked.svg (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyLinked.svg 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <circle class="filled" cx="8" cy="8" r="4" fill="black" stroke="none" />
+</svg>
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceImagesVisualStylePropertyUnlinkedsvg"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path class="filled" d="M 10 4 C 16 4 16 12 10 12" stroke="none" />
+ <path class="filled" d="M 6 4 C 0 4 0 12 6 12" stroke="none" />
+</svg>
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container > .visual-style-property-value-container.focused > .focus-ring {
+ position: absolute;
+ top: 2px;
+ left: 1px;
+ width: calc(100% - 2px);
+ height: 16px;
+ border-radius: 3px;
+ box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.25);
+ pointer-events: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-keyword-select {
+ outline: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container {
+ display: flex;
+ position: absolute;
+ top: 2px;
+ left: 1px;
+ width: calc(100% - 20px);
+ line-height: 16px;
+ text-align: right;
+ border-radius: 4px;
+ background-color: hsl(0, 100%, 100%);
+ pointer-events: none;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.visual-style-property-container > .visual-style-property-value-container:not(.number-input-editable) > .number-input-container {
+ display: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value {
+ width: 100%;
+ height: 16px;
+ margin-right: 1px;
+ padding: 0 0 1px 3px;
+ border-bottom-left-radius: 3px;
+ text-align: right;
+ border: none;
+ outline: none;
+ pointer-events: all;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container > span {
+ min-width: -webkit-fit-content;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleNumberInputBoxjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,334 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, possibleUnits || [WebInspector.UIString("No Units")], "number-input-box", layoutReversed);
+
+ this._hasUnits = !!possibleUnits;
+ this._allowNegativeValues = !!allowNegativeValues || false;
+
+ this.contentElement.classList.toggle("no-values", !possibleValues || !possibleValues.length);
+ this.contentElement.classList.toggle("no-units", !this._hasUnits);
+
+ var focusRingElement = document.createElement("div");
+ focusRingElement.classList.add("focus-ring");
+ this.contentElement.appendChild(focusRingElement);
+
+ this._keywordSelectElement = document.createElement("select");
+ this._keywordSelectElement.classList.add("number-input-keyword-select");
+ if (this._possibleUnits.advanced)
+ this._keywordSelectElement.title = WebInspector.UIString("Option-click to show all units");
+
+ if (this._possibleValues) {
+ this._createValueOptions(this._possibleValues.basic);
+ this._keywordSelectElement.appendChild(document.createElement("hr"));
+ }
+
+ if (this._possibleUnits)
+ this._createUnitOptions(this._possibleUnits.basic);
+
+ this._advancedUnitsElements = null;
+
+ this._keywordSelectElement.addEventListener("focus", this._focusContentElement.bind(this));
+ this._keywordSelectElement.addEventListener("mousedown", this._keywordSelectMouseDown.bind(this));
+ this._keywordSelectElement.addEventListener("change", this._keywordChanged.bind(this));
+ this._keywordSelectElement.addEventListener("blur", this._blurContentElement.bind(this));
+ this.contentElement.appendChild(this._keywordSelectElement);
+
+ this._numberUnitsContainer = document.createElement("div");
+ this._numberUnitsContainer.classList.add("number-input-container");
+
+ this._valueNumberInputElement = document.createElement("input");
+ this._valueNumberInputElement.classList.add("number-input-value");
+ this._valueNumberInputElement.spellcheck = false;
+ this._valueNumberInputElement.addEventListener("focus", this._focusContentElement.bind(this));
+ this._valueNumberInputElement.addEventListener("keydown", this._valueNumberInputKeyDown.bind(this));
+ this._valueNumberInputElement.addEventListener("keyup", this._numberInputChanged.bind(this));
+ this._valueNumberInputElement.addEventListener("blur", this._blurContentElement.bind(this));
+ this._numberUnitsContainer.appendChild(this._valueNumberInputElement);
+
+ this._unitsElement = document.createElement("span");
+ this._numberUnitsContainer.appendChild(this._unitsElement);
+ this.contentElement.appendChild(this._numberUnitsContainer);
+
+ this._numberInputIsEditable = true;
+ this.contentElement.classList.add("number-input-editable");
+ this._valueNumberInputElement.value = null;
+ this._valueNumberInputElement.setAttribute("placeholder", 0);
+ if (this._hasUnits && this.valueIsSupportedUnit("px"))
+ this._unitsElement.textContent = this._keywordSelectElement.value = "px";
+ }
+
+ // Public
+
+ get value()
+ {
+ if (this._numberInputIsEditable)
+ return parseFloat(this._valueNumberInputElement.value);
+
+ if (!this._numberInputIsEditable)
+ return this._keywordSelectElement.value;
+
+ return null;
+ }
+
+ set value(value)
+ {
+ if (value && value === this.value)
+ return;
+
+ if (!isNaN(value)) {
+ this._numberInputIsEditable = true;
+ this.contentElement.classList.add("number-input-editable");
+ this._valueNumberInputElement.value = value;
+ return;
+ }
+
+ if (!value) {
+ this._valueNumberInputElement.value = null;
+ return;
+ }
+
+ if (this.valueIsSupportedKeyword(value)) {
+ this._numberInputIsEditable = false;
+ this.contentElement.classList.remove("number-input-editable");
+ this._keywordSelectElement.value = value;
+ return;
+ }
+ }
+
+ get units()
+ {
+ var keyword = this._keywordSelectElement.value;
+ if (!this.valueIsSupportedUnit(keyword))
+ return;
+
+ return keyword;
+ }
+
+ set units(unit)
+ {
+ if (!unit || unit === this.units)
+ return;
+
+ if (!this.valueIsSupportedUnit(unit))
+ return;
+
+ if (this._valueIsSupportedAdvancedUnit(unit))
+ this._addAdvancedUnits();
+
+ this._numberInputIsEditable = true;
+ this.contentElement.classList.add("number-input-editable");
+ this._keywordSelectElement.value = unit;
+
+ if (this._hasUnits)
+ this._unitsElement.textContent = unit;
+ }
+
+ get placeholder()
+ {
+ return this._valueNumberInputElement.getAttribute("placeholder");
+ }
+
+ set placeholder(text)
+ {
+ if (text === this.placeholder)
+ return;
+
+ var onlyNumericalText = !isNaN(text) && text;
+ this._valueNumberInputElement.setAttribute("placeholder", onlyNumericalText || 0);
+ }
+
+ get synthesizedValue()
+ {
+ var value = this._valueNumberInputElement.value;
+ if (this._numberInputIsEditable && !value)
+ return null;
+
+ var keyword = this._keywordSelectElement.value;
+ return this.valueIsSupportedUnit(keyword) ? value + (this._hasUnits ? keyword : "") : keyword;
+ }
+
+ updateValueFromText(text, value)
+ {
+ var match = this.parseValue(value);
+ this.value = match ? match[1] : value;
+ this.units = match ? match[2] : null;
+ return this.modifyPropertyText(text, value);
+ }
+
+ // Protected
+
+ parseValue(text)
+ {
+ return /^(-?[\d.]+)([^\s\d]{0,4})(?:\s*;?)$/.exec(text);
+ }
+
+ // Private
+
+ _keywordChanged()
+ {
+ var selectedKeywordIsUnit = this.valueIsSupportedUnit(this._keywordSelectElement.value);
+ if (!this._numberInputIsEditable && selectedKeywordIsUnit)
+ this._valueNumberInputElement.value = null;
+
+ if (this._hasUnits)
+ this._unitsElement.textContent = this._keywordSelectElement.value;
+
+ this._numberInputIsEditable = selectedKeywordIsUnit;
+ this.contentElement.classList.toggle("number-input-editable", selectedKeywordIsUnit);
+ this._valueDidChange();
+ }
+
+ _valueNumberInputKeyDown(event)
+ {
+ if (!this._numberInputIsEditable)
+ return;
+
+ function adjustValue(delta)
+ {
+ var newValue;
+ var value = this.value;
+ if (!value && isNaN(value)) {
+ var placeholderValue = this.placeholder && !isNaN(this.placeholder) ? parseFloat(this.placeholder) : 0;
+ newValue = placeholderValue + delta;
+ } else
+ newValue = value + delta;
+
+ if (!this._allowNegativeValues && newValue < 0)
+ newValue = 0;
+
+ this.value = Math.round(newValue * 100) / 100;
+ this._valueDidChange();
+ }
+
+ var shift = 1;
+ if (event.ctrlKey)
+ shift /= 10;
+ else if (event.shiftKey)
+ shift *= 10;
+
+ var key = event.keyIdentifier;
+ if (key.startsWith("Page"))
+ shift *= 10;
+
+ if (key === "Up" || key === "PageUp") {
+ event.preventDefault();
+ adjustValue.call(this, shift);
+ return;
+ }
+
+ if (key === "Down" || key === "PageDown") {
+ event.preventDefault();
+ adjustValue.call(this, -shift);
+ return;
+ }
+
+ this._valueDidChange();
+ }
+
+ _numberInputChanged()
+ {
+ if (!this._numberInputIsEditable)
+ return;
+
+ this._valueDidChange();
+ }
+
+ _keywordSelectMouseDown(event)
+ {
+ if (event.altKey)
+ this._addAdvancedUnits();
+ else if (!this._valueIsSupportedAdvancedUnit())
+ this._removeAdvancedUnits();
+ }
+
+ _createValueOptions(values)
+ {
+ var addedElements = [];
+ for (let key in values) {
+ var option = document.createElement("option");
+ option.value = key;
+ option.text = values[key];
+ this._keywordSelectElement.appendChild(option);
+ addedElements.push(option);
+ }
+
+ return addedElements;
+ }
+
+ _createUnitOptions(units)
+ {
+ var addedElements = [];
+ for (let unit of units) {
+ var option = document.createElement("option");
+ option.text = unit;
+ this._keywordSelectElement.appendChild(option);
+ addedElements.push(option);
+ }
+
+ return addedElements;
+ }
+
+ _addAdvancedUnits()
+ {
+ if (this._advancedUnitsElements)
+ return;
+
+ this._keywordSelectElement.appendChild(document.createElement("hr"));
+ this._advancedUnitsElements = this._createUnitOptions(this._possibleUnits.advanced);
+ }
+
+ _removeAdvancedUnits()
+ {
+ if (!this._advancedUnitsElements)
+ return;
+
+ this._keywordSelectElement.removeChild(this._advancedUnitsElements[0].previousSibling);
+ for (let element of this._advancedUnitsElements)
+ this._keywordSelectElement.removeChild(element);
+
+ this._advancedUnitsElements = null;
+ }
+
+ _focusContentElement(event)
+ {
+ this.contentElement.classList.add("focused");
+ }
+
+ _blurContentElement(event)
+ {
+ this.contentElement.classList.remove("focused");
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ this._keywordSelectElement.tabIndex = disabled ? "-1" : null;
+ this._valueNumberInputElement.tabIndex = disabled ? "-1" : null;
+ }
+};
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorLinkcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,127 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-editor-link {
+ position: relative;
+ min-width: 32px;
+ margin-left: 1px;
+}
+
+.visual-style-property-editor-link.disabled {
+ visibility: hidden;
+}
+
+.visual-style-property-editor-link.link-all {
+ height: 13px;
+ margin: 0 auto 2px;
+ padding: 0 50px;
+ border-top-width: 0;
+ border-right-width: 1px;
+ border-bottom-width: 0;
+ border-left-width: 1px;
+ border-color: hsl(0, 0%, 50%);
+ border-style: dashed;
+}
+
+.visual-style-property-editor-link.link-all.linked {
+ border-color: black;
+ border-style: solid;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border {
+ position: absolute;
+ top: -webkit-calc(50% - 0.5px);
+ width: 48px;
+ border-top: 1px dashed hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left,
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right {
+ width: 49px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
+ width: 52px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right {
+ width: 51px;
+}
+
+.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border {
+ border-top: 1px solid hsl(0, 0, 0);
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border.left {
+ left: 1px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border.right {
+ right: 1px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
+ left: 0;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right {
+ right: 0;
+}
+
+.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-border {
+ width: 10px;
+ top: -webkit-calc(50% - 1px);
+}
+
+.visual-style-property-editor-link:not(.link-all).linked > .visual-style-property-editor-link-border {
+ width: 12px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon {
+ width: 10px;
+ height: 10px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon {
+ position: relative;
+ background-color: hsl(0, 100%, 100%);
+ z-index: 1;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .filled {
+ fill: hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .stroked {
+ stroke: hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon {
+ margin: 5px 0 0 11px;
+}
+
+.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-icon {
+ margin-top: 1px;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorLinkjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,142 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStylePropertyEditorLink = class VisualStylePropertyEditorLink extends WebInspector.Object
+{
+ constructor(linkedProperties, className, linksToHideWhenLinked)
+ {
+ super();
+
+ this._linkedProperties = linkedProperties || [];
+ this._linksToHideWhenLinked = linksToHideWhenLinked || [];
+ this._lastPropertyEdited = null;
+
+ for (let property of this._linkedProperties)
+ property.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._linkedPropertyValueChanged, this);
+
+ this._element = document.createElement("div");
+ this._element.classList.add("visual-style-property-editor-link", className || "");
+
+ var leftLineElement = document.createElement("div");
+ leftLineElement.classList.add("visual-style-property-editor-link-border", "left");
+ this._element.appendChild(leftLineElement);
+
+ this._iconElement = document.createElement("div");
+ this._iconElement.classList.add("visual-style-property-editor-link-icon");
+ this._iconElement.title = WebInspector.UIString("Click to link property values");
+ this._iconElement.addEventListener("mouseover", this._iconMouseover.bind(this));
+ this._iconElement.addEventListener("mouseout", this._iconMouseout.bind(this));
+ this._iconElement.addEventListener("click", this._iconClicked.bind(this));
+
+ wrappedSVGDocument("Images/VisualStylePropertyUnlinked.svg", "unlinked-icon", null, function(wrapper) {
+ this._iconElement.appendChild(wrapper);
+ this._unlinkedIcon = wrapper;
+ }.bind(this));
+
+ wrappedSVGDocument("Images/VisualStylePropertyLinked.svg", "linked-icon", null, function(wrapper) {
+ this._iconElement.appendChild(wrapper);
+ this._linkedIcon = wrapper;
+ this._linkedIcon.hidden = true;
+ }.bind(this));
+
+ this._element.appendChild(this._iconElement);
+
+ var rightLineElement = document.createElement("div");
+ rightLineElement.classList.add("visual-style-property-editor-link-border", "right");
+ this._element.appendChild(rightLineElement);
+
+ this._linked = false;
+ this._disabled = false;
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ }
+
+ set disabled(flag)
+ {
+ this._disabled = flag;
+ this._element.classList.toggle("disabled", this._disabled);
+ }
+
+ // Private
+
+ _linkedPropertyValueChanged(event)
+ {
+ if (!event)
+ return;
+
+ var property = event.target;
+ if (!property)
+ return;
+
+ this._lastPropertyEdited = property;
+ if (!this._linked)
+ return;
+
+ this._updateLinkedEditors(property);
+ }
+
+ _updateLinkedEditors(property)
+ {
+ var style = property.style;
+ var text = style.text;
+ var value = property.synthesizedValue || null;
+
+ for (let linkedProperty of this._linkedProperties)
+ text = linkedProperty.updateValueFromText(text, value);
+
+ style.text = text;
+ }
+
+ _iconMouseover()
+ {
+ this._linkedIcon.hidden = this._linked;
+ this._unlinkedIcon.hidden = !this._linked;
+ }
+
+ _iconMouseout()
+ {
+ this._linkedIcon.hidden = !this._linked;
+ this._unlinkedIcon.hidden = this._linked;
+ }
+
+ _iconClicked()
+ {
+ this._linked = !this._linked;
+ this._element.classList.toggle("linked", this._linked);
+ this._linkedIcon.hidden = !this._linked;
+ this._unlinkedIcon.hidden = this._linked;
+
+ this._iconElement.title = this._linked ? WebInspector.UIString("Click to remove link") : WebInspector.UIString("Click to link property values");
+
+ this._updateLinkedEditors(this._lastPropertyEdited || this._linkedProperties[0]);
+ for (let linkToHide of this._linksToHideWhenLinked)
+ linkToHide.disabled = this._linked;
+ }
+};
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleRelativeNumberSlidercss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-title {
+ margin-right: 3px;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container {
+ order: 2;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container:not(.number-input-editable) + .relative-slider,
+.visual-style-property-container.number-input-box.relative-number-slider.disabled > .relative-slider {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container.no-values.no-units {
+ display: none;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .relative-slider {
+ width: 47%;
+ margin-right: 7px;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleRelativeNumberSliderjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js (0 => 193080)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js 2015-12-03 18:44:18 UTC (rev 193080)
</span><span class="lines">@@ -0,0 +1,88 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleRelativeNumberSlider = class VisualStyleRelativeNumberSlider extends WebInspector.VisualStyleNumberInputBox
+{
+ constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed);
+
+ this._element.classList.add("relative-number-slider");
+
+ this._sliderElement = document.createElement("input");
+ this._sliderElement.classList.add("relative-slider");
+ this._sliderElement.type = "range";
+ this._sliderElement.addEventListener("input", this._sliderChanged.bind(this));
+ this._element.appendChild(this._sliderElement);
+
+ this._startingValue = null;
+ this._scale = 100;
+ }
+
+ // Public
+
+ set scale(scale)
+ {
+ this._scale = scale || 1;
+ }
+
+ updateEditorValues(updatedValues)
+ {
+ super.updateEditorValues(updatedValues);
+ this._resetSlider();
+ }
+
+ // Private
+
+ _resetSlider()
+ {
+ this._startingValue = parseFloat(this._valueNumberInputElement.value);
+ if (isNaN(this._startingValue))
+ this._startingValue = parseFloat(this.placeholder) || 0;
+
+ var origin = this._scale / 2;
+ if (this._allowNegativeValues || this._startingValue > origin) {
+ this._sliderElement.min = -origin;
+ this._sliderElement.max = origin;
+ this._sliderElement.value = 0;
+ } else {
+ this._sliderElement.min = 0;
+ this._sliderElement.max = this._scale;
+ this._sliderElement.value = this._startingValue;
+ }
+ }
+
+ _sliderChanged()
+ {
+ this.value = this._startingValue + Math.round(parseFloat(this._sliderElement.value) * 100) / 100;
+ this._valueDidChange();
+ }
+
+ _numberInputChanged()
+ {
+ super._numberInputChanged();
+ this._resetSlider();
+ }
+};
</ins></span></pre>
</div>
</div>
</body>
</html>