Skip to content
Permalink
Browse files
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
  • Loading branch information
dcrousso authored and webkit-commit-queue committed Jan 28, 2017
1 parent cceac96 commit 8c6ee834d479b232114b670e8d5edc07ecfef030
Showing with 70 additions and 46 deletions.
  1. +25 −0 Source/WebInspectorUI/ChangeLog
  2. +16 −5 Source/WebInspectorUI/UserInterface/Views/GradientEditor.css
  3. +29 −41 Source/WebInspectorUI/UserInterface/Views/GradientEditor.js
@@ -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
@@ -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;
}
@@ -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});

0 comments on commit 8c6ee83

Please sign in to comment.