Web Inspector: gradient editor should provide horizontal slider for '…

…angle' value where applicable

https://bugs.webkit.org/show_bug.cgi?id=166937

Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2017-01-27
Reviewed by Joseph Pecoraro.

* UserInterface/Views/GradientEditor.css:
(.gradient-editor):
(.gradient-editor > .gradient-angle):
(.gradient-editor > .gradient-angle > input[type="range"]):
(.gradient-editor > .gradient-angle > input[type="number"]):
(.gradient-editor > .gradient-angle > input::-webkit-inner-spin-button):
(.gradient-editor > .gradient-angle > input): Deleted.

* UserInterface/Views/GradientEditor.js:
(WebInspector.GradientEditor):
(WebInspector.GradientEditor.prototype.set gradient):
(WebInspector.GradientEditor.prototype.gradientSliderStopWasSelected):
(WebInspector.GradientEditor.prototype._gradientTypeChanged):
(WebInspector.GradientEditor.prototype._angleChanged):
(WebInspector.GradientEditor.prototype.dragToAdjustControllerWasAdjustedByAmount): Deleted.
(WebInspector.GradientEditor.prototype._angleInputValueDidChange): Deleted.
Remove the DragToAdjustController and replace with an <input type="range">.

Canonical link: https://commits.webkit.org/184567@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@211318 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,28 @@
+2017-01-27  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: gradient editor should provide horizontal slider for 'angle' value where applicable
+        https://bugs.webkit.org/show_bug.cgi?id=166937
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/GradientEditor.css:
+        (.gradient-editor):
+        (.gradient-editor > .gradient-angle):
+        (.gradient-editor > .gradient-angle > input[type="range"]):
+        (.gradient-editor > .gradient-angle > input[type="number"]):
+        (.gradient-editor > .gradient-angle > input::-webkit-inner-spin-button):
+        (.gradient-editor > .gradient-angle > input): Deleted.
+
+        * UserInterface/Views/GradientEditor.js:
+        (WebInspector.GradientEditor):
+        (WebInspector.GradientEditor.prototype.set gradient):
+        (WebInspector.GradientEditor.prototype.gradientSliderStopWasSelected):
+        (WebInspector.GradientEditor.prototype._gradientTypeChanged):
+        (WebInspector.GradientEditor.prototype._angleChanged):
+        (WebInspector.GradientEditor.prototype.dragToAdjustControllerWasAdjustedByAmount): Deleted.
+        (WebInspector.GradientEditor.prototype._angleInputValueDidChange): Deleted.
+        Remove the DragToAdjustController and replace with an <input type="range">.
+
 2017-01-23  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Provide a way to trigger a Garbage Collection

Source/WebInspectorUI/UserInterface/Views/GradientEditor.css

@@ -26,7 +26,7 @@
 .gradient-editor {
     position: relative;
     margin: 5px 11px;
-    padding-bottom: 45px;
+    padding-bottom: 40px;
 }
 
 .gradient-editor.radial-gradient {
@@ -74,20 +74,27 @@
 }
 
 .gradient-editor > .gradient-angle {
+    display: flex;
+    align-items: center;
     position: absolute;
     right: 0;
     bottom: 0;
-    text-align: right;
+    left: 0;
     font-size: 13px;
 }
 
 .gradient-editor.radial-gradient > .gradient-angle {
     display: none;
 }
 
-.gradient-editor > .gradient-angle > input {
-    width: 48px;
-    margin-left: 5px;
+.gradient-editor > .gradient-angle > input[type="range"] {
+    width: 100%;
+    margin: 0 4px;
+}
+
+.gradient-editor > .gradient-angle > input[type="number"] {
+    width: 60px;
+    margin-right: 2px;
     padding-right: 4px;
     text-align: right;
     font-size: 13px;
@@ -97,3 +104,7 @@
     box-shadow: inset 0 0 1px 1px hsl(0, 0%, 89%);
     outline: none;
 }
+
+.gradient-editor > .gradient-angle > input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}

Source/WebInspectorUI/UserInterface/Views/GradientEditor.js

@@ -75,17 +75,25 @@ WebInspector.GradientEditor = class GradientEditor extends WebInspector.Object
         this._colorPicker.enableColorComponentInputs = false;
         this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
 
-        let angleLabel = this._element.appendChild(document.createElement("label"));
-        angleLabel.classList.add("gradient-angle");
-        angleLabel.append(WebInspector.UIString("Angle"));
+        let angleContainerElement = this._element.appendChild(document.createElement("div"));
+        angleContainerElement.classList.add("gradient-angle");
+        angleContainerElement.append(WebInspector.UIString("Angle"));
 
-        this._angleInput = angleLabel.appendChild(document.createElement("input"));
-        this._angleInput.type = "text";
-        this._angleInput.addEventListener("input", this._angleChanged.bind(this));
+        let boundAngleChanged = this._angleChanged.bind(this);
 
-        let dragToAdjustController = new WebInspector.DragToAdjustController(this);
-        dragToAdjustController.element = angleLabel;
-        dragToAdjustController.enabled = true;
+        this._angleSliderElement = angleContainerElement.appendChild(document.createElement("input"));
+        this._angleSliderElement.type = "range";
+        this._angleSliderElement.min = 0;
+        this._angleSliderElement.max = 360;
+        this._angleSliderElement.addEventListener("input", boundAngleChanged);
+
+        this._angleInputElement = angleContainerElement.appendChild(document.createElement("input"));
+        this._angleInputElement.type = "number";
+        this._angleInputElement.min = 0;
+        this._angleInputElement.max = 360;
+        this._angleInputElement.addEventListener("input", boundAngleChanged);
+
+        angleContainerElement.append("deg");
     }
 
     get element()
@@ -108,7 +116,7 @@ WebInspector.GradientEditor = class GradientEditor extends WebInspector.Object
         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";
+            this._angleSliderElement.value = this._angleInputElement.value = this._gradient.angle;
         } else
             this._gradientTypePicker.value = this._gradient.repeats ? "repeating-radial-gradient" : "radial-gradient";
 
@@ -145,26 +153,12 @@ WebInspector.GradientEditor = class GradientEditor extends WebInspector.Object
 
         // 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._angleInputElement.blur();
 
         this.dispatchEventToListeners(WebInspector.GradientEditor.Event.ColorPickerToggled);
         this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
     }
 
-    dragToAdjustControllerWasAdjustedByAmount(dragToAdjustController, amount)
-    {
-        const angleInputValue = parseFloat(this._angleInput.value);
-        if (isNaN(angleInputValue))
-            return;
-
-        let angle = angleInputValue + amount;
-        if (Math.round(angle) !== angle)
-            angle = angle.toFixed(1);
-
-        this._angleInput.value = angle;
-        this._angleInputValueDidChange(angle);
-    }
-
     // Private
 
     _updateCSSClassForGradientType()
@@ -181,7 +175,7 @@ WebInspector.GradientEditor = class GradientEditor extends WebInspector.Object
         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";
+                this._angleSliderElement.value = this._angleInputElement.value = 180;
             } else
                 this._gradient = new WebInspector.RadialGradient("", this._gradient.stops);
 
@@ -202,22 +196,16 @@ WebInspector.GradientEditor = class GradientEditor extends WebInspector.Object
 
     _angleChanged(event)
     {
-        const angle = parseFloat(this._angleInput.value) || 0;
-        if (isNaN(angle))
+        switch (event.target) {
+        case this._angleInputElement:
+            this._gradient.angle = this._angleSliderElement.value = parseFloat(this._angleInputElement.value) || 0;
+            break;
+        case this._angleSliderElement:
+            this._gradient.angle = this._angleInputElement.value = parseFloat(this._angleSliderElement.value) || 0;
+            break;
+        default:
+            WebInspector.reportInternalError("Input event fired for disabled color component input");
             return;
-
-        this._angleInputValueDidChange(angle);
-    }
-
-    _angleInputValueDidChange(angle)
-    {
-        this._gradient.angle = angle;
-        const matches = this._angleInput.value.match(/\u00B0/g);
-        if (!matches || matches.length !== 1) {
-            const 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});