<!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>[197233] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/197233">197233</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-26 20:54:36 -0800 (Fri, 26 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Keyboard controls to nudge control points in custom transition bezier curve editor would be nice
https://bugs.webkit.org/show_bug.cgi?id=154739
<rdar://problem/24861498>
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-02-26
Reviewed by Timothy Hatcher.
Adds ability for user to nudge the most recently selected bezier control
handle by using the arrow keys. Also makes the currently selected bezier
control line snap to an axis, which is defined when the user mouses down,
whenever the mouse is dragged while the shift key is pressed.
* UserInterface/Views/BezierEditor.js:
(WebInspector.BezierEditor):
(WebInspector.BezierEditor.prototype.handleKeydownEvent):
(WebInspector.BezierEditor.prototype._handleMouseup):
(WebInspector.BezierEditor.prototype._updateControlPointsForMouseEvent):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBezierEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (197232 => 197233)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-02-27 04:43:57 UTC (rev 197232)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-02-27 04:54:36 UTC (rev 197233)
</span><span class="lines">@@ -1,5 +1,25 @@
</span><span class="cx"> 2016-02-26 Devin Rousso <dcrousso+webkit@gmail.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Keyboard controls to nudge control points in custom transition bezier curve editor would be nice
+ https://bugs.webkit.org/show_bug.cgi?id=154739
+ <rdar://problem/24861498>
+
+ Reviewed by Timothy Hatcher.
+
+ Adds ability for user to nudge the most recently selected bezier control
+ handle by using the arrow keys. Also makes the currently selected bezier
+ control line snap to an axis, which is defined when the user mouses down,
+ whenever the mouse is dragged while the shift key is pressed.
+
+
+ * UserInterface/Views/BezierEditor.js:
+ (WebInspector.BezierEditor):
+ (WebInspector.BezierEditor.prototype.handleKeydownEvent):
+ (WebInspector.BezierEditor.prototype._handleMouseup):
+ (WebInspector.BezierEditor.prototype._updateControlPointsForMouseEvent):
+
+2016-02-26 Devin Rousso <dcrousso+webkit@gmail.com>
+
</ins><span class="cx"> Web Inspector: Option-clicking on the a CSS property sometimes doesn't work
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=154384
</span><span class="cx"> <rdar://problem/24714755>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBezierEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js (197232 => 197233)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js 2016-02-27 04:43:57 UTC (rev 197232)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js 2016-02-27 04:54:36 UTC (rev 197233)
</span><span class="lines">@@ -103,7 +103,10 @@
</span><span class="cx"> this._element.appendChild(this._bezierPreviewTiming);
</span><span class="cx">
</span><span class="cx"> this._selectedControl = null;
</span><ins>+ this._mouseDownPosition = null;
</ins><span class="cx"> this._bezierContainer.addEventListener("mousedown", this);
</span><ins>+
+ WebInspector.addWindowKeydownListener(this);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -153,6 +156,47 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ handleKeydownEvent(event)
+ {
+ if (!this._selectedControl || !this._element.parentNode)
+ return false;
+
+
+ let horizontal = 0;
+ let vertical = 0;
+ switch (event.keyCode) {
+ case WebInspector.KeyboardShortcut.Key.Up.keyCode:
+ vertical = -1;
+ break;
+ case WebInspector.KeyboardShortcut.Key.Right.keyCode:
+ horizontal = 1;
+ break;
+ case WebInspector.KeyboardShortcut.Key.Down.keyCode:
+ vertical = 1;
+ break;
+ case WebInspector.KeyboardShortcut.Key.Left.keyCode:
+ horizontal = -1;
+ break;
+ default:
+ return false;
+ }
+
+ if (event.shiftKey) {
+ horizontal *= 10;
+ vertical *= 10;
+ }
+
+ vertical *= this._bezierWidth / 100;
+ horizontal *= this._bezierHeight / 100;
+
+ this._selectedControl.point.x = Number.constrain(this._selectedControl.point.x + horizontal, 0, this._bezierWidth);
+ this._selectedControl.point.y += vertical;
+ this._updateControl(this._selectedControl);
+ this._updateValue();
+
+ return true;
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _handleMousedown(event)
</span><span class="lines">@@ -177,7 +221,7 @@
</span><span class="cx"> _handleMouseup(event)
</span><span class="cx"> {
</span><span class="cx"> this._selectedControl.handle.classList.remove("selected");
</span><del>- this._selectedControl = null;
</del><ins>+ this._mouseDownPosition = null;
</ins><span class="cx"> this._triggerPreviewAnimation();
</span><span class="cx">
</span><span class="cx"> window.removeEventListener("mousemove", this, true);
</span><span class="lines">@@ -191,12 +235,21 @@
</span><span class="cx"> point.y -= this._controlHandleRadius + this._padding;
</span><span class="cx">
</span><span class="cx"> if (calculateSelectedControlPoint) {
</span><ins>+ this._mouseDownPosition = point;
+
</ins><span class="cx"> if (this._inControl.point.distance(point) < this._outControl.point.distance(point))
</span><span class="cx"> this._selectedControl = this._inControl;
</span><span class="cx"> else
</span><span class="cx"> this._selectedControl = this._outControl;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (event.shiftKey && this._mouseDownPosition) {
+ if (Math.abs(this._mouseDownPosition.x - point.x) > Math.abs(this._mouseDownPosition.y - point.y))
+ point.y = this._mouseDownPosition.y;
+ else
+ point.x = this._mouseDownPosition.x;
+ }
+
</ins><span class="cx"> this._selectedControl.point = point;
</span><span class="cx"> this._selectedControl.handle.classList.add("selected");
</span><span class="cx"> this._updateValue();
</span></span></pre>
</div>
</div>
</body>
</html>