Changeset 211318 in webkit

Timestamp:

Jan 27, 2017, 6:27:56 PM (10 years ago)

Author:

commit-queue@webkit.org

Message:

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 <Devin Rousso> 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">.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/GradientEditor.css (modified) (4 diffs)
• UserInterface/Views/GradientEditor.js (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css

@@ -27 +27 @@
     position: relative;
     margin: 5px 11px;
-    padding-bottom: 45px;
+    padding-bottom: 40px;
 }
 
@@ -75 +75 @@
 
 .gradient-editor > .gradient-angle {
+    display: flex;
+    align-items: center;
     position: absolute;
     right: 0;
     bottom: 0;
-    text-align: right;
+    left: 0;
     font-size: 13px;
 }
@@ -86 +88 @@
 }
 
-.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;
@@ -98 +105 @@
     outline: none;
 }
+
+.gradient-editor > .gradient-angle > input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}

trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js

@@ -76 +76 @@
         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"));
-
-        this._angleInput = angleLabel.appendChild(document.createElement("input"));
-        this._angleInput.type = "text";
-        this._angleInput.addEventListener("input", this._angleChanged.bind(this));
-
-        let dragToAdjustController = new WebInspector.DragToAdjustController(this);
-        dragToAdjustController.element = angleLabel;
-        dragToAdjustController.enabled = true;
+        let angleContainerElement = this._element.appendChild(document.createElement("div"));
+        angleContainerElement.classList.add("gradient-angle");
+        angleContainerElement.append(WebInspector.UIString("Angle"));
+
+        let boundAngleChanged = this._angleChanged.bind(this);
+
+        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");
     }
 
@@ -109 +117 @@
         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";
@@ -146 +154 @@
         // 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);
     }
 
@@ -182 +176 @@
             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);
@@ -203 +197 @@
     _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;
         }