Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (253858 => 253859)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-12-21 01:52:11 UTC (rev 253859)
@@ -1,3 +1,51 @@
+2019-12-20 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Gradient editor: opacity slider is too close to the right edge of the popover
+ https://bugs.webkit.org/show_bug.cgi?id=203643
+ <rdar://problem/56762879>
+
+ Reviewed by Devin Rousso.
+
+ Replace absolute positioning in the color picker with static layout.
+
+ * UserInterface/Views/ColorPicker.css:
+ (.color-picker .wrapper):
+ (.color-picker :matches(.color-square, .slider)):
+ (.color-picker .slider):
+ (.color-picker .hue):
+ (@media (color-gamut: p3) .color-picker.gamut-p3 > .hue):
+ (.color-picker > .color-inputs):
+ (.color-picker > .color-inputs > div):
+ (.color-picker > .color-inputs > div:not([hidden]) + div):
+ The 1st visible div should have no left margin even if it's preceded by a hidden div.
+
+ * UserInterface/Views/ColorPicker.js:
+ (WI.ColorPicker):
+ (WI.ColorPicker.prototype._updateOpacitySlider):
+ * UserInterface/Views/GradientEditor.css:
+ (.gradient-editor.editing-color):
+ (.gradient-editor > .color-picker .slider):
+ * UserInterface/Views/GradientEditor.js:
+ (WI.GradientEditor):
+ * UserInterface/Views/Slider.css:
+ (.slider):
+ (.slider > img):
+ (body[dir=ltr] .slider > img):
+ (body[dir=rtl] .slider > img):
+ * UserInterface/Views/Slider.js:
+ (WI.Slider):
+ (WI.Slider.prototype.set value):
+ (WI.Slider.prototype.set knobY):
+ (WI.Slider.prototype.get maxY):
+ (WI.Slider.prototype.recalculateKnobY):
+ (WI.Slider.prototype._handleMousedown):
+ (WI.Slider.prototype._handleMousemove):
+ * UserInterface/Views/Variables.css:
+ (:root):
+ Convert WI.Slider to be vertical by default. WI.Slider used to define a hozirontal slider.
+ It is only used by the color picker, where it's vertical. The slider was rotated with CSS
+ transformation. This made it problematic to use in the static layout.
+
2019-12-20 Brian Burg <bb...@apple.com>
Web Inspector: convert some InspectorFrontendHost methods to getters
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css (253858 => 253859)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css 2019-12-21 01:52:11 UTC (rev 253859)
@@ -38,24 +38,21 @@
height: 210px;
}
-.color-picker > * {
- position: absolute;
+.color-picker .wrapper {
+ white-space: nowrap;
}
-.color-picker > .slider {
- top: 7px;
- width: 196px;
- transform: rotate(-90deg) translateX(-100%);
- transform-origin: 0 0;
+.color-picker :matches(.color-square, .slider) {
+ display: inline-block;
}
-.color-picker > .slider > img {
- left: -4px;
- top: 0;
+.color-picker .slider {
+ height: 200px;
+ -webkit-margin-start: 10px;
}
-.color-picker > .hue {
- background-image: linear-gradient(to right,
+.color-picker .hue {
+ background-image: linear-gradient(to top,
red 0%,
yellow 16.6%,
lime 33.2%,
@@ -68,7 +65,7 @@
@media (color-gamut: p3) {
.color-picker.gamut-p3 > .hue {
- background-image: linear-gradient(to right,
+ background-image: linear-gradient(to top,
color(display-p3 1 0 0) 0%,
color(display-p3 1 1 0) 16.6%,
color(display-p3 0 1 0) 33.2%,
@@ -80,28 +77,10 @@
}
}
-body[dir=ltr] .color-picker > .hue {
- left: calc(var(--color-picker-width) - var(--color-picker-hue-offset-start));
-}
-
-body[dir=rtl] .color-picker > .hue {
- left: calc(var(--color-picker-hue-offset-start) - var(--slider-height));
-}
-
-body[dir=ltr] .color-picker > .opacity {
- left: calc(var(--color-picker-width) - var(--color-picker-opacity-offset-start));
-}
-
-body[dir=rtl] .color-picker > .opacity {
- left: calc(var(--color-picker-opacity-offset-start) - var(--slider-height));
-}
-
.color-picker > .color-inputs {
display: flex;
justify-content: space-between;
- top: 212px;
- right: 0;
- left: 0;
+ margin-top: 8px;
}
.color-picker > .color-inputs > div {
@@ -108,7 +87,6 @@
display: flex;
align-items: center;
width: 100%;
- margin: 0 4px;
}
.color-picker > .color-inputs > div[hidden] {
@@ -115,6 +93,10 @@
display: none;
}
+.color-picker > .color-inputs > div:not([hidden]) + div {
+ -webkit-margin-start: 4px;
+}
+
.color-picker > .color-inputs input {
width: 100%;
margin: 0 0.25em;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js (253858 => 253859)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2019-12-21 01:52:11 UTC (rev 253859)
@@ -74,10 +74,12 @@
this._element = document.createElement("div");
this._element.classList.add("color-picker");
- this._element.append(this._colorSquare.element);
- this._element.append(this._hueSlider.element);
+ let wrapper = this._element.appendChild(document.createElement("div"));
+ wrapper.className = "wrapper";
+ wrapper.appendChild(this._colorSquare.element);
+ wrapper.appendChild(this._hueSlider.element);
+ wrapper.appendChild(this._opacitySlider.element);
- this._element.appendChild(this._opacitySlider.element);
this._element.appendChild(colorInputsContainerElement);
this._opacity = 0;
@@ -203,7 +205,7 @@
let format = gamut === WI.Color.Gamut.DisplayP3 ? WI.Color.Format.ColorFunction : WI.Color.Format.RGBA;
let opaque = new WI.Color(format, rgb.concat(1), gamut).toString();
let transparent = new WI.Color(format, rgb.concat(0), gamut).toString();
- this._opacitySlider.element.style.setProperty("background-image", "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern);
+ this._opacitySlider.element.style.setProperty("background-image", "linear-gradient(0deg, " + transparent + ", " + opaque + "), " + this._opacityPattern);
}
_handleFormatChange()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css (253858 => 253859)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css 2019-12-21 01:52:11 UTC (rev 253859)
@@ -34,7 +34,7 @@
}
.gradient-editor.editing-color {
- padding-bottom: 30px;
+ padding-bottom: 24px;
}
.gradient-editor.radial-gradient.editing-color {
@@ -60,19 +60,10 @@
padding: 0;
}
-.gradient-editor > .color-picker > .slider {
- top: 2px;
- width: 186px;
+.gradient-editor > .color-picker .slider {
+ height: 195px;
}
-.gradient-editor > .color-picker > .brightness {
- left: 202px;
-}
-
-.gradient-editor > .color-picker > .opacity {
- left: 228px;
-}
-
.gradient-editor > .gradient-angle {
display: flex;
align-items: center;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js (253858 => 253859)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2019-12-21 01:52:11 UTC (rev 253859)
@@ -71,7 +71,7 @@
this._element.appendChild(this._gradientSlider.element);
this._colorPicker = new WI.ColorPicker;
- this._colorPicker.colorSquare.dimension = 190;
+ this._colorPicker.colorSquare.dimension = 195;
this._colorPicker.enableColorComponentInputs = false;
this._colorPicker.addEventListener(WI.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Slider.css (253858 => 253859)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Slider.css 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Slider.css 2019-12-21 01:52:11 UTC (rev 253859)
@@ -24,14 +24,13 @@
*/
.slider {
- position: absolute;
- height: var(--slider-height);
+ position: relative;
+ width: var(--slider-width);
border: 1px solid hsl(0, 0%, 75%);
}
.slider > img {
position: absolute;
- left: -5px;
top: -5px;
width: 14px;
height: 17px;
@@ -38,6 +37,16 @@
content: image-set(url(../Images/SliderThumb.png) 1x, url(../Images/sliderth...@2x.png) 2x);
}
+body[dir=ltr] .slider > img {
+ left: 2px;
+ transform: translateY(var(--translate-y, 0px)) rotate(270deg);
+}
+
+body[dir=rtl] .slider > img {
+ left: -6px;
+ transform: translateY(var(--translate-y, 0px)) rotate(90deg);
+}
+
.slider > img.dragging {
content: image-set(url(../Images/SliderThumbPressed.png) 1x, url(../Images/sliderthumbpres...@2x.png) 2x);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js (253858 => 253859)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js 2019-12-21 01:52:11 UTC (rev 253859)
@@ -35,8 +35,8 @@
this._knob = this._element.appendChild(document.createElement("img"));
this._value = 0;
- this._knobX = 0;
- this._maxX = 0;
+ this._knobY = 0;
+ this._maxY = 0;
this._element.addEventListener("mousedown", this);
}
@@ -60,31 +60,31 @@
if (value === this._value)
return;
- this.knobX = value;
+ this.knobY = value;
if (this.delegate && typeof this.delegate.sliderValueDidChange === "function")
this.delegate.sliderValueDidChange(this, value);
}
- set knobX(value)
+ set knobY(value)
{
this._value = value;
- this._knobX = Math.round(value * this.maxX);
- this._knob.style.webkitTransform = "translate3d(" + this._knobX + "px, 0, 0)";
+ this._knobY = Math.round((1 - value) * this.maxY);
+ this._knob.style.setProperty("--translate-y", `${this._knobY}px`);
}
- get maxX()
+ get maxY()
{
- if (this._maxX <= 0 && document.body.contains(this._element))
- this._maxX = Math.max(this._element.offsetWidth - Math.ceil(WI.Slider.KnobWidth / 2), 0);
+ if (this._maxY <= 0 && document.body.contains(this._element))
+ this._maxY = Math.max(this._element.offsetHeight - Math.ceil(WI.Slider.KnobWidth / 2), 0);
- return this._maxX;
+ return this._maxY;
}
- recalculateKnobX()
+ recalculateKnobY()
{
- this._maxX = 0;
- this.knobX = this._value;
+ this._maxY = 0;
+ this.knobY = this._value;
}
// Protected
@@ -109,10 +109,10 @@
_handleMousedown(event)
{
if (event.target !== this._knob)
- this.value = (this._localPointForEvent(event).x - 3) / this.maxX;
+ this.value = 1 - ((this._localPointForEvent(event).y - 3) / this.maxY);
- this._startKnobX = this._knobX;
- this._startMouseX = this._localPointForEvent(event).x;
+ this._startKnobY = this._knobY;
+ this._startMouseY = this._localPointForEvent(event).y;
this._element.classList.add("dragging");
@@ -122,10 +122,10 @@
_handleMousemove(event)
{
- var dx = this._localPointForEvent(event).x - this._startMouseX;
- var x = Math.max(Math.min(this._startKnobX + dx, this.maxX), 0);
+ let dy = this._localPointForEvent(event).y - this._startMouseY;
+ let y = Math.max(Math.min(this._startKnobY + dy, this.maxY), 0);
- this.value = x / this.maxX;
+ this.value = 1 - (y / this.maxY);
}
_handleMouseup(event)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (253858 => 253859)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-12-21 01:49:05 UTC (rev 253858)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-12-21 01:52:11 UTC (rev 253859)
@@ -183,7 +183,7 @@
--tab-bar-height: 24px;
--navigation-bar-height: 29px;
- --slider-height: 11px;
+ --slider-width: 11px;
--css-declaration-vertical-padding: 4px;
--css-declaration-horizontal-padding: 6px;
