Web Inspector: spring function editor has unusual layout, should have left-aligned...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 12 Jan 2017 04:11:32 +0000 (04:11 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 12 Jan 2017 04:11:32 +0000 (04:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=166933

Patch by Devin Rousso <dcrousso+webkit@gmail.com> 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`).

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@210618 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/SpringEditor.css
Source/WebInspectorUI/UserInterface/Views/SpringEditor.js

index f968bbb..e38362f 100644 (file)
@@ -1,5 +1,34 @@
 2017-01-11  Devin Rousso  <dcrousso+webkit@gmail.com>
 
 2017-01-11  Devin Rousso  <dcrousso+webkit@gmail.com>
 
+        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  <dcrousso+webkit@gmail.com>
+
         Web Inspector: color, gradient, cubic-bezier, spring editors should be dismissable using ESC
         https://bugs.webkit.org/show_bug.cgi?id=166934
 
         Web Inspector: color, gradient, cubic-bezier, spring editors should be dismissable using ESC
         https://bugs.webkit.org/show_bug.cgi?id=166934
 
index 5d215ea..d99a9b2 100644 (file)
@@ -102,12 +102,14 @@ input[type=range] {
     -webkit-appearance: none;
 }
 
     -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;
     height: 1px;
-    margin: 8px 2px -8px 2px;
+    margin-top: 1px;
+    background-color: var(--selected-background-color);
 }
 
 #main {
 }
 
 #main {
index e222051..03e42a7 100644 (file)
 
 .spring-editor {
     width: 200px;
 
 .spring-editor {
     width: 200px;
-    height: 210px;
+    height: 200px;
+    --spring-editor-horizontal-margin: 5px;
 }
 
 .spring-editor > .spring-preview {
     width: calc(100% - 10px);
     height: 25px;
 }
 
 .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;
 }
 
     border-bottom: 1px solid lightgrey;
 }
 
@@ -45,7 +46,8 @@
 
 .spring-editor > .spring-timing {
     position: relative;
 
 .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 {
 }
 
 .spring-editor > .spring-timing > div {
 
 .spring-editor > .number-input-container > .number-input-row > .number-input-row-title {
     width: 100%;
 
 .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 {
 }
 
 .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"] {
 }
 
 .spring-editor > .number-input-container > .number-input-row > input[type="range"] {
+    width: calc(75% - 2 * var(--spring-editor-horizontal-margin));
     background-color: transparent;
 }
     background-color: transparent;
 }
index db4a905..9e8d99f 100644 (file)
@@ -132,8 +132,10 @@ WebInspector.SpringEditor = class SpringEditor extends WebInspector.Object
         else if (event.altKey)
             shift /= 10;
 
         else if (event.altKey)
             shift /= 10;
 
+        let value = parseFloat(event.target.value) || 0;
+        this._changeSpringForInput(event.target, value + shift);
+
         event.preventDefault();
         event.preventDefault();
-        this._changeSpringForInput(event.target, parseFloat(event.target.value) + shift);
     }
 
     _handleNumberSliderInput(event)
     }
 
     _handleNumberSliderInput(event)
@@ -153,30 +155,43 @@ WebInspector.SpringEditor = class SpringEditor extends WebInspector.Object
 
     _changeSpringForInput(target, value)
     {
 
     _changeSpringForInput(target, value)
     {
-        value = parseFloat(value);
+        value = parseFloat(value) || 0;
 
         switch (target) {
         case this._massInput:
         case this._massSlider:
 
         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:
             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:
             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:
             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:
             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;
         }
 
             return;
         }