<!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>[193332] 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/193332">193332</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 11:11:49 -0800 (Thu, 03 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/192705">r192705</a>. rdar://problem/23221163</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceControllersCodeMirrorGradientEditingControllerjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceModelsGradientjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Gradient.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorLinkcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsGradientEditorcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsGradientEditorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickercss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickerjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceControllersCodeMirrorGradientEditingControllercss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleURLInputjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.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 (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -1,5 +1,122 @@
</span><span class="cx"> 2015-12-03 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Merge r192705. rdar://problem/23221163
+
+ 2015-11-20 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: Add support for Gradients in the Visual sidebar background editor
+ https://bugs.webkit.org/show_bug.cgi?id=150494
+
+ Reviewed by Timothy Hatcher.
+
+ Allows the editors in the Visual sidebar Background Style section to
+ work with gradients and data URIs.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Controllers/CodeMirrorGradientEditingController.css: Deleted.
+ Some styling was reused in VisualStyleBackgroundPicker.css.
+
+ * UserInterface/Controllers/CodeMirrorGradientEditingController.js:
+ (WebInspector.CodeMirrorGradientEditingController):
+ (WebInspector.CodeMirrorGradientEditingController.prototype.popoverWillPresent):
+ (WebInspector.CodeMirrorGradientEditingController.prototype.popoverDidPresent):
+ (WebInspector.CodeMirrorGradientEditingController.prototype._gradientEditorGradientChanged):
+ (WebInspector.CodeMirrorGradientEditingController.prototype.handleEvent): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype.gradientSliderStopsDidChange): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype.gradientSliderStopWasSelected): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype.dragToAdjustControllerWasAdjustedByAmount): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype._handleInputEvent): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype._angleInputValueDidChange): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype._handleChangeEvent): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype._colorPickerColorChanged): Deleted.
+ (WebInspector.CodeMirrorGradientEditingController.prototype._updateCSSClassForGradientType): Deleted.
+ Reworked gradient editor popup into WebInspector.GradientEditor.
+
+ * UserInterface/Main.html:
+ * UserInterface/Models/Gradient.js:
+ (WebInspector.Gradient.fromString):
+ (WebInspector.Gradient.stopsWithComponents):
+ (WebInspector.LinearGradient.linearGradientWithComponents):
+ Removed console.error statements as they didn't do anything but clog the console.
+
+ * UserInterface/Views/GradientEditor.css: Added.
+ (.gradient-editor):
+ (.gradient-editor.radial-gradient):
+ (.gradient-editor.editing-color):
+ (.gradient-editor.radial-gradient.editing-color):
+ (.gradient-editor > .gradient-type-select):
+ (.gradient-editor > .gradient-slider):
+ (.gradient-editor > .color-picker):
+ (.gradient-editor > .color-picker > .slider):
+ (.gradient-editor > .color-picker > .brightness):
+ (.gradient-editor > .color-picker > .opacity):
+ (.gradient-editor > .gradient-angle):
+ (.gradient-editor.radial-gradient > .gradient-angle):
+ (.gradient-editor > .gradient-angle > input):
+
+ * UserInterface/Views/GradientEditor.js: Added.
+ (WebInspector.GradientEditor):
+ (WebInspector.GradientEditor.prototype.get element):
+ (WebInspector.GradientEditor.prototype.set gradient):
+ (WebInspector.GradientEditor.prototype.get gradient):
+ (WebInspector.GradientEditor.prototype.gradientSliderStopsDidChange):
+ (WebInspector.GradientEditor.prototype.gradientSliderStopWasSelected):
+ (WebInspector.GradientEditor.prototype.dragToAdjustControllerWasAdjustedByAmount):
+ (WebInspector.GradientEditor.prototype._updateCSSClassForGradientType):
+ (WebInspector.GradientEditor.prototype._gradientTypeChanged):
+ (WebInspector.GradientEditor.prototype._colorPickerColorChanged):
+ (WebInspector.GradientEditor.prototype._angleChanged):
+ (WebInspector.GradientEditor.prototype._angleInputValueDidChange):
+ New standalone editor for CSS Gradients.
+
+ * UserInterface/Views/VisualStyleBackgroundPicker.css: Added.
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:hover):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:active):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch > span):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch + .value-input):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-input):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-input[disabled]):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-type-picker-select):
+
+ * UserInterface/Views/VisualStyleBackgroundPicker.js: Added.
+ (WebInspector.VisualStyleBackgroundPicker):
+ (WebInspector.VisualStyleBackgroundPicker.prototype.get value):
+ (WebInspector.VisualStyleBackgroundPicker.prototype.set value):
+ (WebInspector.VisualStyleBackgroundPicker.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleBackgroundPicker.prototype.parseValue):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._updateValueInput):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._updateGradientSwatch):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._gradientEditorGradientChanged):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._valueInputValueChanged):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._keywordSelectMouseDown):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._handleKeywordChanged):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._createValueOptions):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._addAdvancedValues):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._removeAdvancedValues):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._toggleTabbingOfSelectableElements):
+ Visual property editor for the CSS background-image property. Supports
+ limited keywords, as well as url() and gradients.
+
+ * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:
+ (WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype.set value):
+ Fixed regular expression parsing to not match commas inside parenthesis.
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection):
+
+ * UserInterface/Views/VisualStylePropertyEditorLink.css:
+ (.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-border):
+ Fixed spacing of link line.
+
+ * UserInterface/Views/VisualStyleURLInput.js: Removed.
+ Reworked into VisualStyleBackgroundPicker.js.
+
+2015-12-03 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Merge r192662. rdar://problem/23221163
</span><span class="cx">
</span><span class="cx"> 2015-11-19 Brian Burg <bburg@apple.com>
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -133,6 +133,7 @@
</span><span class="cx"> localizedStrings["Click to remove the selected item."] = "Click to remove the selected item.";
</span><span class="cx"> localizedStrings["Click to restart the animation"] = "Click to restart the animation";
</span><span class="cx"> localizedStrings["Click to select a color. Shift-click to switch color formats."] = "Click to select a color. Shift-click to switch color formats.";
</span><ins>+localizedStrings["Click to select a gradient"] = "Click to select a gradient";
</ins><span class="cx"> localizedStrings["Clickable"] = "Clickable";
</span><span class="cx"> localizedStrings["Clip"] = "Clip";
</span><span class="cx"> localizedStrings["Close"] = "Close";
</span><span class="lines">@@ -257,6 +258,7 @@
</span><span class="cx"> localizedStrings["Encoded"] = "Encoded";
</span><span class="cx"> localizedStrings["Encoding"] = "Encoding";
</span><span class="cx"> localizedStrings["End Capturing"] = "End Capturing";
</span><ins>+localizedStrings["Enter a Gradient"] = "Enter a Gradient";
</ins><span class="cx"> localizedStrings["Enter a URL"] = "Enter a URL";
</span><span class="cx"> localizedStrings["Enter a name."] = "Enter a name.";
</span><span class="cx"> localizedStrings["Error: "] = "Error: ";
</span><span class="lines">@@ -620,6 +622,7 @@
</span><span class="cx"> localizedStrings["Untitled"] = "Untitled";
</span><span class="cx"> localizedStrings["User Agent Stylesheet"] = "User Agent Stylesheet";
</span><span class="cx"> localizedStrings["User Stylesheet"] = "User Stylesheet";
</span><ins>+localizedStrings["Using Keyword Value"] = "Using Keyword Value";
</ins><span class="cx"> localizedStrings["Using the previous selector '%s'."] = "Using the previous selector '%s'.";
</span><span class="cx"> localizedStrings["Value"] = "Value";
</span><span class="cx"> localizedStrings["Variant"] = "Variant";
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceControllersCodeMirrorGradientEditingControllercss"></a>
<div class="delfile"><h4>Deleted: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.css (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.css 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.css 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -1,117 +0,0 @@
</span><del>-/*
- * Copyright (C) 2014 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.
- */
-
-.gradient-editing-controller {
- width: 260px;
- height: 109px;
-}
-
-.gradient-editing-controller.edits-color {
- height: 306px;
-}
-
-.gradient-editing-controller.radial-gradient {
- height: 78px;
-}
-
-.gradient-editing-controller.edits-color.radial-gradient {
- height: 275px;
-}
-
-.gradient-editing-controller select {
- position: absolute;
- left: 17px;
- top: 9px;
- width: 237px;
-
- font-size: 16px;
-}
-
-.gradient-editing-controller .gradient-slider {
- left: 16px;
- right: 26px;
- top: 42px;
-}
-
-.gradient-editing-controller .color-picker {
- position: absolute;
-
- top: 86px;
- width: 202px;
- height: 172px;
- padding: 0 10px;
-}
-
-.gradient-editing-controller > .color-picker > .slider {
- top: 2px;
- width: 186px;
-}
-
-.gradient-editing-controller > .color-picker > .brightness {
- left: 214px;
-}
-
-.gradient-editing-controller > .color-picker > .opacity {
- left: 237px;
-}
-
-.gradient-editing-controller > label {
- position: absolute;
- top: 85px;
- right: 16px;
-
- text-align: right;
- font-size: 13px;
-}
-
-.gradient-editing-controller.radial-gradient > label {
- display: none;
-}
-
-.gradient-editing-controller.edits-color > label {
- top: 283px;
-}
-
-.gradient-editing-controller > label > input {
- width: 48px;
-
- padding-right: 4px;
- margin-left: 5px;
-
- background-color: white;
-
- border-radius: 4px;
- border: 1px solid hsl(0, 0%, 60%);
- box-shadow: inset 0 0 1px 1px hsl(0, 0%, 89%);
- outline: 0;
-
- font-size: 13px;
- text-align: right;
-}
-
-.gradient-editing-controller > label.drag-to-adjust,
-.gradient-editing-controller > label.drag-to-adjust > input {
- cursor: col-resize;
-}
</del></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceControllersCodeMirrorGradientEditingControllerjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.js (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.js 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -28,34 +28,6 @@
</span><span class="cx"> constructor(codeMirror, marker)
</span><span class="cx"> {
</span><span class="cx"> super(codeMirror, marker);
</span><del>-
- if (!WebInspector.CodeMirrorGradientEditingController.GradientTypes) {
- WebInspector.CodeMirrorGradientEditingController.GradientTypes = {
- "linear-gradient": {
- type: WebInspector.LinearGradient,
- label: WebInspector.UIString("Linear Gradient"),
- repeats: false
- },
-
- "radial-gradient": {
- type: WebInspector.RadialGradient,
- label: WebInspector.UIString("Radial Gradient"),
- repeats: false
- },
-
- "repeating-linear-gradient": {
- type: WebInspector.LinearGradient,
- label: WebInspector.UIString("Repeating Linear Gradient"),
- repeats: true
- },
-
- "repeating-radial-gradient": {
- type: WebInspector.RadialGradient,
- label: WebInspector.UIString("Repeating Radial Gradient"),
- repeats: true
- }
- };
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -86,162 +58,26 @@
</span><span class="cx">
</span><span class="cx"> popoverWillPresent(popover)
</span><span class="cx"> {
</span><del>- this._container = document.createElement("div");
- this._container.className = WebInspector.CodeMirrorGradientEditingController.StyleClassName;
-
- this._gradientTypePicker = this._container.appendChild(document.createElement("select"));
- for (var type in WebInspector.CodeMirrorGradientEditingController.GradientTypes) {
- var option = this._gradientTypePicker.appendChild(document.createElement("option"));
- option.value = type;
- option.innerText = WebInspector.CodeMirrorGradientEditingController.GradientTypes[type].label;
</del><ins>+ function handleColorPickerToggled(event)
+ {
+ popover.update();
</ins><span class="cx"> }
</span><del>- this._gradientTypePicker.addEventListener("change", this);
</del><span class="cx">
</span><del>- this._gradientSlider = new WebInspector.GradientSlider;
- this._container.appendChild(this._gradientSlider.element);
-
- this._colorPicker = new WebInspector.ColorPicker;
- this._colorPicker.colorWheel.dimension = 190;
- this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
-
- var angleLabel = this._container.appendChild(document.createElement("label"));
- angleLabel.textContent = WebInspector.UIString("Angle");
-
- this._angleInput = document.createElement("input");
- this._angleInput.type = "text";
- this._angleInput.size = 3;
- this._angleInput.addEventListener("input", this);
- angleLabel.appendChild(this._angleInput);
-
- var dragToAdjustController = new WebInspector.DragToAdjustController(this);
- dragToAdjustController.element = angleLabel;
- dragToAdjustController.enabled = true;
-
- this._updateCSSClassForGradientType();
-
- popover.content = this._container;
</del><ins>+ this._gradientEditor = new WebInspector.GradientEditor;
+ this._gradientEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._gradientEditorGradientChanged, this);
+ this._gradientEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, handleColorPickerToggled, this);
+ popover.content = this._gradientEditor.element;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> popoverDidPresent(popover)
</span><span class="cx"> {
</span><del>- this._gradientSlider.stops = this.value.stops;
-
- if (this.value instanceof WebInspector.LinearGradient) {
- this._gradientTypePicker.value = this.value.repeats ? "repeating-linear-gradient" : "linear-gradient";
- this._angleInput.value = this.value.angle + "\u00B0";
- } else
- this._gradientTypePicker.value = this.value.repeats ? "repeating-radial-gradient" : "radial-gradient";
-
- this._gradientSlider.delegate = this;
</del><ins>+ this._gradientEditor.gradient = this.value;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- // Protected
-
- handleEvent(event)
- {
- if (event.type === "input")
- this._handleInputEvent(event);
- else if (event.type === "change")
- this._handleChangeEvent(event);
- }
-
- gradientSliderStopsDidChange(gradientSlider)
- {
- this.text = this.value.toString();
- }
-
- gradientSliderStopWasSelected(gradientSlider, stop)
- {
- var selectedStop = gradientSlider.selectedStop;
-
- if (selectedStop && !this._container.classList.contains(WebInspector.CodeMirrorGradientEditingController.EditsColorClassName)) {
- this._container.appendChild(this._colorPicker.element);
- this._container.classList.add(WebInspector.CodeMirrorGradientEditingController.EditsColorClassName);
- this._colorPicker.color = selectedStop.color;
- } else if (!selectedStop) {
- this._colorPicker.element.remove();
- this._container.classList.remove(WebInspector.CodeMirrorGradientEditingController.EditsColorClassName);
- }
-
- // Ensure the angle input is not focused since, if it were, it'd make a scrollbar appear as we
- // animate the popover's frame to fit its new content.
- this._angleInput.blur();
-
- this.popover.update();
- }
-
- dragToAdjustControllerWasAdjustedByAmount(dragToAdjustController, amount)
- {
- var angle = parseFloat(this._angleInput.value) + amount;
- if (Math.round(angle) !== angle)
- angle = angle.toFixed(1);
-
- this._angleInput.value = angle;
- this._angleInputValueDidChange(angle);
- }
-
</del><span class="cx"> // Private
</span><span class="cx">
</span><del>- _handleInputEvent(event)
</del><ins>+ _gradientEditorGradientChanged(event)
</ins><span class="cx"> {
</span><del>- var angle = parseFloat(this._angleInput.value);
- if (isNaN(angle))
- return;
-
- this._angleInputValueDidChange(angle);
</del><ins>+ this.value = event.data.gradient;
</ins><span class="cx"> }
</span><del>-
- _angleInputValueDidChange(angle)
- {
- this.value.angle = angle;
- this.text = this.value.toString();
-
- var matches = this._angleInput.value.match(/\u00B0/g);
- if (!matches || matches.length !== 1) {
- var selectionStart = this._angleInput.selectionStart;
- this._angleInput.value = angle + "\u00B0";
- this._angleInput.selectionStart = selectionStart;
- this._angleInput.selectionEnd = selectionStart;
- }
- }
-
- _handleChangeEvent(event)
- {
- var descriptor = WebInspector.CodeMirrorGradientEditingController.GradientTypes[this._gradientTypePicker.value];
- if (!(this.value instanceof descriptor.type)) {
- if (descriptor.type === WebInspector.LinearGradient) {
- this.value = new WebInspector.LinearGradient(180, this.value.stops);
- this._angleInput.value = "180\u00B0";
- } else
- this.value = new WebInspector.RadialGradient("", this.value.stops);
-
- this._updateCSSClassForGradientType();
- this.popover.update();
- }
- this.value.repeats = descriptor.repeats;
- this.text = this.value.toString();
- }
-
- _colorPickerColorChanged(event)
- {
- this._gradientSlider.selectedStop.color = event.target.color;
- this._gradientSlider.stops = this.value.stops;
- this.text = this.value.toString();
- }
-
- _updateCSSClassForGradientType()
- {
- if (this.value instanceof WebInspector.LinearGradient)
- this._container.classList.remove(WebInspector.CodeMirrorGradientEditingController.RadialGradientClassName);
- else
- this._container.classList.add(WebInspector.CodeMirrorGradientEditingController.RadialGradientClassName);
- }
</del><span class="cx"> };
</span><del>-
-WebInspector.CodeMirrorGradientEditingController.StyleClassName = "gradient-editing-controller";
-WebInspector.CodeMirrorGradientEditingController.EditsColorClassName = "edits-color";
-WebInspector.CodeMirrorGradientEditingController.RadialGradientClassName = "radial-gradient";
-
-// Lazily populated in the WebInspector.CodeMirrorGradientEditingController constructor.
-// It needs to be lazy to use UIString after Main.js and localizedStrings.js loads.
-WebInspector.CodeMirrorGradientEditingController.GradientTypes = null;
</del></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -87,6 +87,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/FontResourceContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/FormattedValue.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/GoToLineDialog.css">
</span><ins>+ <link rel="stylesheet" href="Views/GradientEditor.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/GradientSlider.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/HierarchicalPathComponent.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/HoverMenu.css">
</span><span class="lines">@@ -163,6 +164,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/TypeTokenView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TypeTreeElement.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/TypeTreeView.css">
</span><ins>+ <link rel="stylesheet" href="Views/VisualStyleBackgroundPicker.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/VisualStyleColorPicker.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/VisualStyleCommaSeparatedKeywordEditor.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/VisualStyleDetailsPanel.css">
</span><span class="lines">@@ -180,7 +182,6 @@
</span><span class="cx">
</span><span class="cx"> <link rel="stylesheet" href="Controllers/CodeMirrorCompletionController.css">
</span><span class="cx"> <link rel="stylesheet" href="Controllers/CodeMirrorDragToAdjustNumberController.css">
</span><del>- <link rel="stylesheet" href="Controllers/CodeMirrorGradientEditingController.css">
</del><span class="cx"> <link rel="stylesheet" href="Controllers/CodeMirrorTokenTrackingController.css">
</span><span class="cx">
</span><span class="cx"> <script src="External/CodeMirror/codemirror.js"></script>
</span><span class="lines">@@ -467,6 +468,7 @@
</span><span class="cx"> <script src="Views/GeneralTreeElementPathComponent.js"></script>
</span><span class="cx"> <script src="Views/GenericResourceContentView.js"></script>
</span><span class="cx"> <script src="Views/GoToLineDialog.js"></script>
</span><ins>+ <script src="Views/GradientEditor.js"></script>
</ins><span class="cx"> <script src="Views/GradientSlider.js"></script>
</span><span class="cx"> <script src="Views/HierarchicalPathNavigationItem.js"></script>
</span><span class="cx"> <script src="Views/HoverMenu.js"></script>
</span><span class="lines">@@ -563,6 +565,7 @@
</span><span class="cx">
</span><span class="cx"> <script src="Views/VisualStyleDetailsPanel.js"></script>
</span><span class="cx"> <script src="Views/VisualStylePropertyEditor.js"></script>
</span><ins>+ <script src="Views/VisualStyleBackgroundPicker.js"></script>
</ins><span class="cx"> <script src="Views/VisualStyleColorPicker.js"></script>
</span><span class="cx"> <script src="Views/VisualStyleCommaSeparatedKeywordEditor.js"></script>
</span><span class="cx"> <script src="Views/VisualStyleFontFamilyListEditor.js"></script>
</span><span class="lines">@@ -580,7 +583,6 @@
</span><span class="cx"> <script src="Views/VisualStyleTabbedPropertiesRow.js"></script>
</span><span class="cx"> <script src="Views/VisualStyleTimingEditor.js"></script>
</span><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="branchessafari601branchSourceWebInspectorUIUserInterfaceModelsGradientjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Gradient.js (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Gradient.js 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Gradient.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -39,10 +39,8 @@
</span><span class="cx"> type = WebInspector.Gradient.Types.Linear;
</span><span class="cx"> else if (typeString.indexOf(WebInspector.Gradient.Types.Radial) !== -1)
</span><span class="cx"> type = WebInspector.Gradient.Types.Radial;
</span><del>- else {
- console.error("Couldn't parse angle \"" + typeString + "\"");
</del><ins>+ else
</ins><span class="cx"> return null;
</span><del>- }
</del><span class="cx">
</span><span class="cx"> var components = [];
</span><span class="cx"> var currentParams = [];
</span><span class="lines">@@ -112,10 +110,8 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- if (!stops.length) {
- console.error("Couldn't parse any stops");
</del><ins>+ if (!stops.length)
</ins><span class="cx"> return null;
</span><del>- }
</del><span class="cx">
</span><span class="cx"> for (var i = 0, count = stops.length; i < count; ++i) {
</span><span class="cx"> var stop = stops[i];
</span><span class="lines">@@ -190,7 +186,6 @@
</span><span class="cx"> angle = 315;
</span><span class="cx"> break;
</span><span class="cx"> default:
</span><del>- console.error("Couldn't parse angle \"to " + components[0].join(" ") + "\"");
</del><span class="cx"> return null;
</span><span class="cx"> }
</span><span class="cx"> components.shift();
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsGradientEditorcssfromrev193331branchessafari601branchSourceWebInspectorUIUserInterfaceControllersCodeMirrorGradientEditingControllercss"></a>
<div class="copfile"><h4>Copied: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css (from rev 193331, branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.css) (0 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -0,0 +1,99 @@
</span><ins>+/*
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. 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.
+ */
+
+.gradient-editor {
+ position: relative;
+ margin: 5px 11px;
+ padding-bottom: 45px;
+}
+
+.gradient-editor.radial-gradient {
+ padding-bottom: 15px;
+}
+
+.gradient-editor.editing-color {
+ padding-bottom: 30px;
+}
+
+.gradient-editor.radial-gradient.editing-color {
+ padding-bottom: 0;
+}
+
+.gradient-editor > .gradient-type-select {
+ width: 237px;
+ margin-left: 1px;
+ font-size: 16px;
+}
+
+.gradient-editor > .gradient-slider {
+ position: relative;
+ left: auto;
+ margin-top: 7px;
+}
+
+.gradient-editor > .color-picker {
+ width: 238px;
+ height: auto;
+ margin-top: 25px;
+ padding: 0;
+}
+
+.gradient-editor > .color-picker > .slider {
+ top: 2px;
+ width: 186px;
+}
+
+.gradient-editor > .color-picker > .brightness {
+ left: 202px;
+}
+
+.gradient-editor > .color-picker > .opacity {
+ left: 228px;
+}
+
+.gradient-editor > .gradient-angle {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ text-align: right;
+ font-size: 13px;
+}
+
+.gradient-editor.radial-gradient > .gradient-angle {
+ display: none;
+}
+
+.gradient-editor > .gradient-angle > input {
+ width: 48px;
+ margin-left: 5px;
+ padding-right: 4px;
+ text-align: right;
+ font-size: 13px;
+ background-color: white;
+ border-radius: 4px;
+ border: 1px solid hsl(0, 0%, 60%);
+ box-shadow: inset 0 0 1px 1px hsl(0, 0%, 89%);
+ outline: none;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsGradientEditorjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js (0 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -0,0 +1,229 @@
</span><ins>+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. 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.GradientEditor = class GradientEditor extends WebInspector.Object
+{
+ constructor()
+ {
+ super();
+
+ this._element = document.createElement("div");
+ this._element.classList.add("gradient-editor");
+
+ this._gradient = null;
+ this._gradientTypes = {
+ "linear-gradient": {
+ type: WebInspector.LinearGradient,
+ label: WebInspector.UIString("Linear Gradient"),
+ repeats: false
+ },
+ "radial-gradient": {
+ type: WebInspector.RadialGradient,
+ label: WebInspector.UIString("Radial Gradient"),
+ repeats: false
+ },
+ "repeating-linear-gradient": {
+ type: WebInspector.LinearGradient,
+ label: WebInspector.UIString("Repeating Linear Gradient"),
+ repeats: true
+ },
+ "repeating-radial-gradient": {
+ type: WebInspector.RadialGradient,
+ label: WebInspector.UIString("Repeating Radial Gradient"),
+ repeats: true
+ }
+ };
+ this._editingColor = false;
+
+ this._gradientTypePicker = this._element.appendChild(document.createElement("select"));
+ this._gradientTypePicker.classList.add("gradient-type-select");
+ for (var type in this._gradientTypes) {
+ var option = this._gradientTypePicker.appendChild(document.createElement("option"));
+ option.value = type;
+ option.text = this._gradientTypes[type].label;
+ }
+ this._gradientTypePicker.addEventListener("change", this._gradientTypeChanged.bind(this));
+
+ this._gradientSlider = new WebInspector.GradientSlider(this);
+ this._element.appendChild(this._gradientSlider.element);
+
+ this._colorPicker = new WebInspector.ColorPicker;
+ this._colorPicker.colorWheel.dimension = 190;
+ this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
+
+ var angleLabel = this._element.appendChild(document.createElement("label"));
+ angleLabel.classList.add("gradient-angle");
+ angleLabel.append(WebInspector.UIString("Angle"));
+
+ this._angleInput = angleLabel.appendChild(document.createElement("input"));
+ this._angleInput.type = "text";
+ this._angleInput.addEventListener("input", this._angleChanged.bind(this));
+
+ var dragToAdjustController = new WebInspector.DragToAdjustController(this);
+ dragToAdjustController.element = angleLabel;
+ dragToAdjustController.enabled = true;
+ }
+
+ get element()
+ {
+ return this._element;
+ }
+
+ set gradient(gradient)
+ {
+ if (!gradient)
+ return;
+
+ var isLinear = gradient instanceof WebInspector.LinearGradient;
+ var isRadial = gradient instanceof WebInspector.RadialGradient;
+ console.assert(isLinear || isRadial);
+ if (!isLinear && !isRadial)
+ return;
+
+ this._gradient = gradient;
+ this._gradientSlider.stops = this._gradient.stops;
+ if (isLinear) {
+ this._gradientTypePicker.value = this._gradient.repeats ? "repeating-linear-gradient" : "linear-gradient";
+ this._angleInput.value = this._gradient.angle + "\u00B0";
+ } else
+ this._gradientTypePicker.value = this._gradient.repeats ? "repeating-radial-gradient" : "radial-gradient";
+
+ this._updateCSSClassForGradientType();
+ }
+
+ get gradient()
+ {
+ return this._gradient;
+ }
+
+ // Protected
+
+ gradientSliderStopsDidChange(gradientSlider)
+ {
+ this._gradient.stops = gradientSlider.stops;
+
+ this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+ }
+
+ gradientSliderStopWasSelected(gradientSlider, stop)
+ {
+ var selectedStop = gradientSlider.selectedStop;
+ if (selectedStop && !this._editingColor) {
+ this._element.appendChild(this._colorPicker.element);
+ this._element.classList.add("editing-color");
+ this._colorPicker.color = selectedStop.color;
+ this._editingColor = true;
+ } else if (!selectedStop) {
+ this._colorPicker.element.remove();
+ this._element.classList.remove("editing-color");
+ this._editingColor = false;
+ }
+
+ // Ensure the angle input is not focused since, if it were, it'd make a scrollbar appear as we
+ // animate the popover's frame to fit its new content.
+ this._angleInput.blur();
+
+ this.dispatchEventToListeners(WebInspector.GradientEditor.Event.ColorPickerToggled);
+ this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+ }
+
+ dragToAdjustControllerWasAdjustedByAmount(dragToAdjustController, amount)
+ {
+ var angleInputValue = parseFloat(this._angleInput.value);
+ if (isNaN(angleInputValue))
+ return;
+
+ var angle = angleInputValue + amount;
+ if (Math.round(angle) !== angle)
+ angle = angle.toFixed(1);
+
+ this._angleInput.value = angle;
+ this._angleInputValueDidChange(angle);
+ }
+
+ // Private
+
+ _updateCSSClassForGradientType()
+ {
+ var isRadial = this._gradient instanceof WebInspector.RadialGradient;
+ this._element.classList.toggle("radial-gradient", isRadial);
+
+ this.dispatchEventToListeners(WebInspector.GradientEditor.Event.ColorPickerToggled);
+ }
+
+ _gradientTypeChanged(event)
+ {
+ var descriptor = this._gradientTypes[this._gradientTypePicker.value];
+ if (!(this._gradient instanceof descriptor.type)) {
+ if (descriptor.type === WebInspector.LinearGradient) {
+ this._gradient = new WebInspector.LinearGradient(180, this._gradient.stops);
+ this._angleInput.value = "180\u00B0";
+ } else
+ this._gradient = new WebInspector.RadialGradient("", this._gradient.stops);
+
+ this._updateCSSClassForGradientType();
+ }
+ this._gradient.repeats = descriptor.repeats;
+
+ this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+ }
+
+ _colorPickerColorChanged(event)
+ {
+ this._gradientSlider.selectedStop.color = event.target.color;
+ this._gradientSlider.stops = this._gradient.stops;
+
+ this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+ }
+
+ _angleChanged(event)
+ {
+ var angle = parseFloat(this._angleInput.value) || 0;
+ if (isNaN(angle))
+ return;
+
+ this._angleInputValueDidChange(angle);
+ }
+
+ _angleInputValueDidChange(angle)
+ {
+ this._gradient.angle = angle;
+ var matches = this._angleInput.value.match(/\u00B0/g);
+ if (!matches || matches.length !== 1) {
+ var savedStart = this._angleInput.selectionStart;
+ this._angleInput.value = angle + "\u00B0";
+ this._angleInput.selectionStart = savedStart;
+ this._angleInput.selectionEnd = savedStart;
+ }
+
+ this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+ }
+}
+
+WebInspector.GradientEditor.Event = {
+ GradientChanged: "gradient-editor-gradient-changed",
+ ColorPickerToggled: "gradient-editor-color-picker-toggled"
+};
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickercss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css (0 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+/*
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. 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.background-picker > .visual-style-property-value-container {
+ display: flex;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch {
+ display: none;
+ position: relative;
+ width: 38px;
+ height: 18px;
+ margin-top: 1px;
+ /* Make a checkered background for transparent colors to show against. */
+ background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
+ linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
+ background-color: white;
+ background-size: 50%;
+ background-position: top left, bottom right;
+ background-repeat: no-repeat;
+ border: 1px solid hsla(0, 0%, 25%, 0.4);
+ border-radius: 4px;
+ overflow: hidden;
+ cursor: default;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:hover {
+ border-color: hsla(0, 0%, 25%, 0.8);
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:active {
+ border-color: hsl(0, 0%, 25%);
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch > span {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch {
+ display: block;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch + .value-input {
+ margin-left: -3px;
+ padding-left: 5px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left: none;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-input {
+ margin: 1px 4px 3px 0;
+ padding: 0 3px;
+ border-radius: 4px;
+ border: solid 1px hsl(0, 0%, 83%);
+ text-align: left;
+ font-size: 10px;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-input[disabled] {
+ opacity: 0.7;
+ pointer-events: none;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-type-picker-select {
+ max-width: 170px;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickerjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js (0 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -0,0 +1,261 @@
</span><ins>+/*
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. 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.VisualStyleBackgroundPicker = class VisualStyleBackgroundPicker extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, possibleValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, null, "background-picker", layoutReversed);
+
+ this._gradientSwatchElement = document.createElement("span");
+ this._gradientSwatchElement.classList.add("color-gradient-swatch");
+ this._gradientSwatchElement.title = WebInspector.UIString("Click to select a gradient");
+ this._gradientSwatchElement.addEventListener("click", this._gradientSwatchClicked.bind(this));
+
+ var gradientSwatchInnerElement = document.createElement("span");
+ this._gradientSwatchElement.appendChild(gradientSwatchInnerElement);
+
+ this.contentElement.appendChild(this._gradientSwatchElement);
+
+ this._valueInputElement = document.createElement("input");
+ this._valueInputElement.classList.add("value-input");
+ this._valueInputElement.type = "url";
+ this._valueInputElement.placeholder = WebInspector.UIString("Enter a URL");
+ this._valueInputElement.addEventListener("input", this._valueInputValueChanged.bind(this));
+ this.contentElement.appendChild(this._valueInputElement);
+
+ this._valueTypePickerElement = document.createElement("select");
+ this._valueTypePickerElement.classList.add("value-type-picker-select");
+ if (this._possibleValues.advanced)
+ this._valueTypePickerElement.title = WebInspector.UIString("Option-click to show all values");
+
+ var imageOption = document.createElement("option");
+ imageOption.value = "url";
+ imageOption.text = WebInspector.UIString("Image");
+ this._valueTypePickerElement.appendChild(imageOption);
+
+ var linearGradientOption = document.createElement("option");
+ linearGradientOption.value = "linear-gradient";
+ linearGradientOption.text = WebInspector.UIString("Linear Gradient");
+ this._valueTypePickerElement.appendChild(linearGradientOption);
+
+ var radialGradientOption = document.createElement("option");
+ radialGradientOption.value = "radial-gradient";
+ radialGradientOption.text = WebInspector.UIString("Radial Gradient");
+ this._valueTypePickerElement.appendChild(radialGradientOption);
+
+ var repeatingLinearGradientOption = document.createElement("option");
+ repeatingLinearGradientOption.value = "repeating-linear-gradient";
+ repeatingLinearGradientOption.text = WebInspector.UIString("Repeating Linear Gradient");
+ this._valueTypePickerElement.appendChild(repeatingLinearGradientOption);
+
+ var repeatingRadialGradientOption = document.createElement("option");
+ repeatingRadialGradientOption.value = "repeating-radial-gradient";
+ repeatingRadialGradientOption.text = WebInspector.UIString("Repeating Radial Gradient");
+ this._valueTypePickerElement.appendChild(repeatingRadialGradientOption);
+
+ this._valueTypePickerElement.appendChild(document.createElement("hr"));
+
+ this._createValueOptions(this._possibleValues.basic);
+ this._advancedValuesElements = null;
+
+ this._valueTypePickerElement.addEventListener("mousedown", this._keywordSelectMouseDown.bind(this));
+ this._valueTypePickerElement.addEventListener("change", this._handleKeywordChanged.bind(this));
+ this.contentElement.appendChild(this._valueTypePickerElement);
+
+ this._currentType = "url";
+ this._gradient = null;
+
+ this._updateGradientSwatch();
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._valueInputElement.value;
+ }
+
+ set value(value)
+ {
+ if (!value || !value.length || value === this.value)
+ return;
+
+ var isKeyword = this.valueIsSupportedKeyword(value);
+ this._currentType = isKeyword ? value : value.substring(0, value.indexOf("("));
+ this._updateValueInput();
+ if (!isKeyword)
+ this._valueInputElement.value = value.substring(value.indexOf("(") + 1, value.length - 1);
+
+ this._valueTypePickerElement.value = this._currentType;
+
+ if (!this._currentType.includes("gradient"))
+ return;
+
+ this._gradient = WebInspector.Gradient.fromString(value);
+ if (!this._gradient)
+ return;
+
+ this._updateGradientSwatch();
+ }
+
+ get synthesizedValue()
+ {
+ if (this.valueIsSupportedKeyword(this._currentType))
+ return this._currentType;
+
+ return this._currentType + "(" + this.value + ")";
+ }
+
+ // Protected
+
+ parseValue(text)
+ {
+ var validPrefixes = ["url", "linear-gradient", "radial-gradient", "repeating-linear-gradient", "repeating-radial-gradient"];
+ return validPrefixes.some((item) => text.startsWith(item)) ? [text, text] : null;
+ }
+
+ // Private
+
+ _updateValueInput()
+ {
+ var supportedKeyword = this.valueIsSupportedKeyword(this._currentType);
+ var gradientValue = this._currentType.includes("gradient");
+ this.contentElement.classList.toggle("gradient-value", !supportedKeyword && gradientValue);
+ this._valueInputElement.disabled = supportedKeyword;
+ if (supportedKeyword) {
+ this._valueInputElement.value = "";
+ this._valueInputElement.placeholder = WebInspector.UIString("Using Keyword Value");
+ } else {
+ if (this._currentType === "image") {
+ this._valueInputElement.type = "url";
+ this._valueInputElement.placeholder = WebInspector.UIString("Enter a URL");
+ } else if (gradientValue) {
+ this._valueInputElement.type = "text";
+ this._valueInputElement.placeholder = WebInspector.UIString("Enter a Gradient");
+ }
+ }
+ }
+
+ _updateGradientSwatch()
+ {
+ this._gradientSwatchElement.firstChild.style.background = "";
+ var value = this.synthesizedValue;
+ if (!value || value === this._currentType)
+ return;
+
+ this._gradient = WebInspector.Gradient.fromString(value);
+ this._gradientSwatchElement.firstChild.style.background = this._gradient ? value : null;
+ }
+
+ _gradientSwatchClicked(event)
+ {
+ var bounds = WebInspector.Rect.rectFromClientRect(this._gradientSwatchElement.getBoundingClientRect());
+ var popover = new WebInspector.Popover(this);
+
+ function handleColorPickerToggled(event)
+ {
+ popover.update();
+ }
+
+ var gradientEditor = new WebInspector.GradientEditor;
+ gradientEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._gradientEditorGradientChanged, this);
+ gradientEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, handleColorPickerToggled, this);
+
+ popover.content = gradientEditor.element;
+ popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+
+ gradientEditor.gradient = this._gradient;
+ }
+
+ _gradientEditorGradientChanged(event)
+ {
+ this.value = event.data.gradient.toString();
+ this._valueDidChange();
+ }
+
+ _valueInputValueChanged(event)
+ {
+ this._updateGradientSwatch();
+ this._valueDidChange();
+ }
+
+ _keywordSelectMouseDown(event)
+ {
+ if (event.altKey)
+ this._addAdvancedValues();
+ else if (!this._valueIsSupportedAdvancedKeyword())
+ this._removeAdvancedValues();
+ }
+
+ _handleKeywordChanged(event)
+ {
+ this._currentType = this._valueTypePickerElement.value;
+ this._updateValueInput();
+ this._updateGradientSwatch();
+ this._valueDidChange();
+ }
+
+ _createValueOptions(values)
+ {
+ var addedElements = [];
+ for (var key in values) {
+ var option = document.createElement("option");
+ option.value = key;
+ option.text = values[key];
+ this._valueTypePickerElement.appendChild(option);
+ addedElements.push(option);
+ }
+ return addedElements;
+ }
+
+ _addAdvancedValues()
+ {
+ if (this._advancedValuesElements)
+ return;
+
+ this._valueTypePickerElement.appendChild(document.createElement("hr"));
+ this._advancedValuesElements = this._createValueOptions(this._possibleValues.advanced);
+ }
+
+ _removeAdvancedValues()
+ {
+ if (!this._advancedValuesElements)
+ return;
+
+ this._valueTypePickerElement.removeChild(this._advancedValuesElements[0].previousSibling);
+ for (var element of this._advancedValuesElements)
+ this._valueTypePickerElement.removeChild(element);
+
+ this._advancedValuesElements = null;
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ var tabIndex = disabled ? "-1" : null;
+ this._valueInputElement.tabIndex = tabIndex;
+ this._valueTypePickerElement.tabIndex = tabIndex;
+ }
+};
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -100,9 +100,10 @@
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var values = commaSeparatedValue.split(/\s*,\s*(?![^\(]*\))/);
</del><ins>+ // It is necessary to add the beginning \) to ensure inner parenthesis are not matched.
+ var values = commaSeparatedValue.split(/\)\s*,\s*(?![^\(\)]*\))/);
</ins><span class="cx"> for (var value of values)
</span><del>- this._addCommaSeparatedKeyword(value);
</del><ins>+ this._addCommaSeparatedKeyword(value + (value.endsWith(")") ? "" : ")"));
</ins><span class="cx">
</span><span class="cx"> this._commaSeparatedKeywords.children[0].select(true);
</span><span class="cx"> }
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -790,7 +790,7 @@
</span><span class="cx">
</span><span class="cx"> var backgroundImageRow = new WebInspector.DetailsSectionRow;
</span><span class="cx">
</span><del>- var backgroundImage = new WebInspector.VisualStyleURLInput("background-image", WebInspector.UIString("Image"), this._keywords.defaults.concat(["None"]));
</del><ins>+ var backgroundImage = new WebInspector.VisualStyleBackgroundPicker("background-image", WebInspector.UIString("Type"), this._keywords.defaults.concat(["None"]));
</ins><span class="cx">
</span><span class="cx"> backgroundImageRow.element.appendChild(backgroundImage.element);
</span><span class="cx">
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorLinkcss"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -89,7 +89,7 @@
</span><span class="cx">
</span><span class="cx"> .visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-border {
</span><span class="cx"> width: 10px;
</span><del>- top: -webkit-calc(50% - 1px);
</del><ins>+ top: 50%;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-editor-link:not(.link-all).linked > .visual-style-property-editor-link-border {
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleURLInputjs"></a>
<div class="delfile"><h4>Deleted: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js (193331 => 193332)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js 2015-12-03 19:11:38 UTC (rev 193331)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js 2015-12-03 19:11:49 UTC (rev 193332)
</span><span class="lines">@@ -1,75 +0,0 @@
</span><del>-/*
- * 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.VisualStyleURLInput = class VisualStyleURLInput extends WebInspector.VisualStylePropertyEditor
-{
- constructor(propertyNames, text, possibleValues, layoutReversed)
- {
- super(propertyNames, text, possibleValues, null, "url-input", layoutReversed);
-
- this._urlInputElement = document.createElement("input");
- this._urlInputElement.type = "url";
- this._urlInputElement.placeholder = WebInspector.UIString("Enter a URL");
- this._urlInputElement.addEventListener("keyup", this._valueDidChange.bind(this));
- this.contentElement.appendChild(this._urlInputElement);
- }
-
- // Public
-
- get value()
- {
- return this._urlInputElement.value;
- }
-
- set value(value)
- {
- if (value && value === this.value)
- return;
-
- this._urlInputElement.value = value;
- }
-
- get synthesizedValue()
- {
- var value = this.value;
- if (!value || !value.length)
- return null;
-
- if (this.valueIsSupportedKeyword(value))
- return value;
-
- return "url(" + value + ")";
- }
-
- // Protected
-
- parseValue(text)
- {
- if (this.valueIsSupportedKeyword(text))
- return [text, text];
-
- return /^(?:url\(\s*)([^\)]*)(?:\s*\)\s*;?)$/.exec(text);
- }
-};
</del></span></pre>
</div>
</div>
</body>
</html>