Title: [211318] trunk/Source/WebInspectorUI
- Revision
- 211318
- Author
- [email protected]
- Date
- 2017-01-27 18:27:56 -0800 (Fri, 27 Jan 2017)
Log 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 <[email protected]> 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">.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (211317 => 211318)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-01-28 01:50:28 UTC (rev 211317)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-01-28 02:27:56 UTC (rev 211318)
@@ -1,3 +1,28 @@
+2017-01-27 Devin Rousso <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: Provide a way to trigger a Garbage Collection
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css (211317 => 211318)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css 2017-01-28 01:50:28 UTC (rev 211317)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css 2017-01-28 02:27:56 UTC (rev 211318)
@@ -26,7 +26,7 @@
.gradient-editor {
position: relative;
margin: 5px 11px;
- padding-bottom: 45px;
+ padding-bottom: 40px;
}
.gradient-editor.radial-gradient {
@@ -74,10 +74,12 @@
}
.gradient-editor > .gradient-angle {
+ display: flex;
+ align-items: center;
position: absolute;
right: 0;
bottom: 0;
- text-align: right;
+ left: 0;
font-size: 13px;
}
@@ -85,9 +87,14 @@
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;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js (211317 => 211318)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2017-01-28 01:50:28 UTC (rev 211317)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2017-01-28 02:27:56 UTC (rev 211318)
@@ -75,17 +75,25 @@
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 @@
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 @@
// 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 @@
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 @@
_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});
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
