Title: [210674] trunk/Source/WebInspectorUI
- Revision
- 210674
- Author
- commit-qu...@webkit.org
- Date
- 2017-01-12 12:21:58 -0800 (Thu, 12 Jan 2017)
Log Message
Web Inspector: cubic-bezier editor behaves poorly for invalid inputs in component fields
https://bugs.webkit.org/show_bug.cgi?id=166928
Patch by Devin Rousso <dcrousso+web...@gmail.com> on 2017-01-12
Reviewed by Brian Burg.
* UserInterface/Views/BezierEditor.css:
(.bezier-editor):
(.bezier-editor > .number-input-container > input):
* UserInterface/Views/BezierEditor.js:
(WebInspector.BezierEditor.createBezierInput):
(WebInspector.BezierEditor):
Add type, step, min, and max to the bezier component inputs to better control user input.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (210673 => 210674)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-01-12 19:32:20 UTC (rev 210673)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-01-12 20:21:58 UTC (rev 210674)
@@ -1,3 +1,19 @@
+2017-01-12 Devin Rousso <dcrousso+web...@gmail.com>
+
+ Web Inspector: cubic-bezier editor behaves poorly for invalid inputs in component fields
+ https://bugs.webkit.org/show_bug.cgi?id=166928
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Views/BezierEditor.css:
+ (.bezier-editor):
+ (.bezier-editor > .number-input-container > input):
+
+ * UserInterface/Views/BezierEditor.js:
+ (WebInspector.BezierEditor.createBezierInput):
+ (WebInspector.BezierEditor):
+ Add type, step, min, and max to the bezier component inputs to better control user input.
+
2017-01-11 Joseph Pecoraro <pecor...@apple.com>
Web Inspector: Add another Protocol Version
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (210673 => 210674)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css 2017-01-12 19:32:20 UTC (rev 210673)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css 2017-01-12 20:21:58 UTC (rev 210674)
@@ -25,7 +25,7 @@
.bezier-editor {
width: 200px;
- height: 260px;
+ height: 258px;
}
.bezier-editor > .bezier-preview {
@@ -107,10 +107,10 @@
.bezier-editor > .number-input-container > input {
width: 100%;
- margin: 0 5px;
- padding: 1px 2px 1px 1px;
+ margin: 0 2px;
+ padding: 1px 0 1px 1px;
text-align: right;
- font-size: 13px;
+ font-size: 12px;
background-color: white;
border: 1px solid hsl(0, 0%, 60%);
border-radius: 4px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js (210673 => 210674)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js 2017-01-12 19:32:20 UTC (rev 210673)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js 2017-01-12 20:21:58 UTC (rev 210674)
@@ -88,18 +88,27 @@
this._numberInputContainer = this._element.createChild("div", "number-input-container");
- function createBezierInput(id, className)
+ function createBezierInput(id, {min, max} = {})
{
let key = "_bezier" + id + "Input";
- this[key] = this._numberInputContainer.createChild("input", className);
+ this[key] = this._numberInputContainer.createChild("input");
+ this[key].type = "number";
+ this[key].step = 0.01;
+
+ if (!isNaN(min))
+ this[key].min = min;
+
+ if (!isNaN(max))
+ this[key].max = max;
+
this[key].addEventListener("input", this.debounce(250)._handleNumberInputInput);
this[key].addEventListener("keydown", this._handleNumberInputKeydown.bind(this));
}
- createBezierInput.call(this, "InX", "in-x");
- createBezierInput.call(this, "InY", "in-y");
- createBezierInput.call(this, "OutX", "out-x");
- createBezierInput.call(this, "OutY", "out-y");
+ createBezierInput.call(this, "InX", {min: 0, max: 1});
+ createBezierInput.call(this, "InY");
+ createBezierInput.call(this, "OutX", {min: 0, max: 1});
+ createBezierInput.call(this, "OutY");
this._selectedControl = null;
this._mouseDownPosition = null;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
