Title: [210618] trunk/Source/WebInspectorUI
- Revision
- 210618
- Author
- [email protected]
- Date
- 2017-01-11 20:11:32 -0800 (Wed, 11 Jan 2017)
Log Message
Web Inspector: spring function editor has unusual layout, should have left-aligned labels and slider tracks
https://bugs.webkit.org/show_bug.cgi?id=166933
Patch by Devin Rousso <[email protected]> on 2017-01-11
Reviewed by Brian Burg.
* UserInterface/Views/Main.css:
(input[type=range]::-webkit-slider-thumb):
(input[type=range]::-webkit-slider-runnable-track):
(input[type=range]::-webkit-slider-runnable-track::before): Deleted.
Fix slider styles.
* UserInterface/Views/SpringEditor.css:
(.spring-editor):
(.spring-editor > .spring-preview):
(.spring-editor > .spring-timing):
(.spring-editor > .number-input-container > .number-input-row > .number-input-row-title):
(.spring-editor > .number-input-container > .number-input-row > input):
(.spring-editor > .number-input-container > .number-input-row > input::-webkit-inner-spin-button):
(.spring-editor > .number-input-container > .number-input-row > input[type="range"]):
Decrease spacing and left-align text.
* UserInterface/Views/SpringEditor.js:
(WebInspector.SpringEditor.prototype._handleNumberInputKeydown):
(WebInspector.SpringEditor.prototype._changeSpringForInput):
Only update editor values when the new value of any input has changed. This allows users to
enter decimal values ("." was being stripped by `parseFloat`).
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (210617 => 210618)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-01-12 04:03:15 UTC (rev 210617)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-01-12 04:11:32 UTC (rev 210618)
@@ -1,5 +1,34 @@
2017-01-11 Devin Rousso <[email protected]>
+ Web Inspector: spring function editor has unusual layout, should have left-aligned labels and slider tracks
+ https://bugs.webkit.org/show_bug.cgi?id=166933
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Views/Main.css:
+ (input[type=range]::-webkit-slider-thumb):
+ (input[type=range]::-webkit-slider-runnable-track):
+ (input[type=range]::-webkit-slider-runnable-track::before): Deleted.
+ Fix slider styles.
+
+ * UserInterface/Views/SpringEditor.css:
+ (.spring-editor):
+ (.spring-editor > .spring-preview):
+ (.spring-editor > .spring-timing):
+ (.spring-editor > .number-input-container > .number-input-row > .number-input-row-title):
+ (.spring-editor > .number-input-container > .number-input-row > input):
+ (.spring-editor > .number-input-container > .number-input-row > input::-webkit-inner-spin-button):
+ (.spring-editor > .number-input-container > .number-input-row > input[type="range"]):
+ Decrease spacing and left-align text.
+
+ * UserInterface/Views/SpringEditor.js:
+ (WebInspector.SpringEditor.prototype._handleNumberInputKeydown):
+ (WebInspector.SpringEditor.prototype._changeSpringForInput):
+ Only update editor values when the new value of any input has changed. This allows users to
+ enter decimal values ("." was being stripped by `parseFloat`).
+
+2017-01-11 Devin Rousso <[email protected]>
+
Web Inspector: color, gradient, cubic-bezier, spring editors should be dismissable using ESC
https://bugs.webkit.org/show_bug.cgi?id=166934
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (210617 => 210618)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2017-01-12 04:03:15 UTC (rev 210617)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2017-01-12 04:11:32 UTC (rev 210618)
@@ -102,12 +102,14 @@
-webkit-appearance: none;
}
-input[type=range]::-webkit-slider-runnable-track::before {
- content: "";
- display: block;
- background: var(--selected-background-color);
+input[type=range]::-webkit-slider-thumb {
+ margin-top: -7px;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
height: 1px;
- margin: 8px 2px -8px 2px;
+ margin-top: 1px;
+ background-color: var(--selected-background-color);
}
#main {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpringEditor.css (210617 => 210618)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpringEditor.css 2017-01-12 04:03:15 UTC (rev 210617)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpringEditor.css 2017-01-12 04:11:32 UTC (rev 210618)
@@ -25,13 +25,14 @@
.spring-editor {
width: 200px;
- height: 210px;
+ height: 200px;
+ --spring-editor-horizontal-margin: 5px;
}
.spring-editor > .spring-preview {
width: calc(100% - 10px);
height: 25px;
- margin: 5px 5px 0;
+ margin: 5px var(--spring-editor-horizontal-margin) 0;
border-bottom: 1px solid lightgrey;
}
@@ -45,7 +46,8 @@
.spring-editor > .spring-timing {
position: relative;
- margin: -0.5px 11px 0;
+ margin: -0.5px calc(2 * var(--spring-editor-horizontal-margin)) 10px;
+ padding: 0 1px;
}
.spring-editor > .spring-timing > div {
@@ -88,15 +90,20 @@
.spring-editor > .number-input-container > .number-input-row > .number-input-row-title {
width: 100%;
- margin: 7px 0 3px;
- text-align: center;
+ margin: 5px var(--spring-editor-horizontal-margin) 0;
}
.spring-editor > .number-input-container > .number-input-row > input {
- width: calc(50% - 10px);
- margin: 0 5px;
+ width: calc(25% - 2 * var(--spring-editor-horizontal-margin));
+ text-align: right;
+ margin: 0 var(--spring-editor-horizontal-margin);
}
+.spring-editor > .number-input-container > .number-input-row > input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+}
+
.spring-editor > .number-input-container > .number-input-row > input[type="range"] {
+ width: calc(75% - 2 * var(--spring-editor-horizontal-margin));
background-color: transparent;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js (210617 => 210618)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js 2017-01-12 04:03:15 UTC (rev 210617)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js 2017-01-12 04:11:32 UTC (rev 210618)
@@ -132,8 +132,10 @@
else if (event.altKey)
shift /= 10;
+ let value = parseFloat(event.target.value) || 0;
+ this._changeSpringForInput(event.target, value + shift);
+
event.preventDefault();
- this._changeSpringForInput(event.target, parseFloat(event.target.value) + shift);
}
_handleNumberSliderInput(event)
@@ -153,30 +155,43 @@
_changeSpringForInput(target, value)
{
- value = parseFloat(value);
+ value = parseFloat(value) || 0;
switch (target) {
case this._massInput:
case this._massSlider:
+ if (this._spring.mass === value)
+ return;
+
this._spring.mass = Math.max(1, value);
this._massInput.value = this._massSlider.value = this._spring.mass.maxDecimals(3);
break;
case this._stiffnessInput:
case this._stiffnessSlider:
+ if (this._spring.stiffness === value)
+ return;
+
this._spring.stiffness = Math.max(1, value);
this._stiffnessInput.value = this._stiffnessSlider.value = this._spring.stiffness.maxDecimals(3);
break;
case this._dampingInput:
case this._dampingSlider:
+ if (this._spring.damping === value)
+ return;
+
this._spring.damping = Math.max(0, value);
this._dampingInput.value = this._dampingSlider.value = this._spring.damping.maxDecimals(3);
break;
case this._initialVelocityInput:
case this._initialVelocitySlider:
+ if (this._spring.initialVelocity === value)
+ return;
+
this._spring.initialVelocity = value;
this._initialVelocityInput.value = this._initialVelocitySlider.value = this._spring.initialVelocity.maxDecimals(3);
break;
default:
+ WebInspector.reportInternalError("Input event fired for unrecognized element");
return;
}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
