Web Inspector: Rearrange Gradient Editor to be able to show the color…

… component input fields

https://bugs.webkit.org/show_bug.cgi?id=243352
rdar://97803004

Reviewed by Devin Rousso.

Move the angle control above the color controls so that controls become more specific as you move from top to bottom of
the gradient editor. This also affords us the breathing room to show the color component fields at the bottom of the
color picker.

* Source/WebInspectorUI/UserInterface/Views/ColorPicker.js:
(WI.ColorPicker.prototype.async colorInputsWrapperElement):
(WI.ColorPicker.prototype._showColorComponentInputs):
(WI.ColorPicker.set enableColorComponentInputs): Deleted.
* Source/WebInspectorUI/UserInterface/Views/GradientEditor.css:
(.gradient-editor):
(.gradient-editor > .gradient-type-select):
(.gradient-editor > .gradient-slider):
(.gradient-editor > .color-picker):
(.gradient-editor > .gradient-angle):
(.gradient-editor.radial-gradient): Deleted.
(.gradient-editor.editing-color): Deleted.
(.gradient-editor.radial-gradient.editing-color): Deleted.
* Source/WebInspectorUI/UserInterface/Views/GradientEditor.js:
(WI.GradientEditor):

Canonical link: https://commits.webkit.org/252971@main

Source/WebInspectorUI/UserInterface/Views/ColorPicker.css

@@ -33,10 +33,6 @@
     --color-picker-opacity-offset-start: 18px;
 }
 
-.color-picker.hide-inputs {
-    height: 210px;
-}
-
 .color-picker .wrapper {
     white-space: nowrap;
 }

Source/WebInspectorUI/UserInterface/Views/ColorPicker.js

@@ -90,8 +90,6 @@ WI.ColorPicker = class ColorPicker extends WI.Object
         this._color = WI.Color.fromString("white");
 
         this._dontUpdateColor = false;
-
-        this._enableColorComponentInputs = true;
     }
 
     // Static
@@ -161,12 +159,6 @@ WI.ColorPicker = class ColorPicker extends WI.Object
         this._dontUpdateColor = false;
     }
 
-    set enableColorComponentInputs(value)
-    {
-        this._enableColorComponentInputs = value;
-        this._element.classList.toggle("hide-inputs", !this._enableColorComponentInputs);
-    }
-
     focus()
     {
         this._colorSquare.element.focus();
@@ -308,9 +300,6 @@ WI.ColorPicker = class ColorPicker extends WI.Object
 
     _showColorComponentInputs()
     {
-        if (!this._enableColorComponentInputs)
-            return;
-
         this._createColorInputsIfNeeded();
 
         let components = [];

Source/WebInspectorUI/UserInterface/Views/GradientEditor.css

@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2015 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
+ * Copyright (C) 2022 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -24,25 +25,13 @@
  */
 
 .gradient-editor {
+    width: 237px;
     position: relative;
     margin: 5px 11px;
-    padding-bottom: 40px;
-}
-
-.gradient-editor.radial-gradient {
-    padding-bottom: 15px;
-}
-
-.gradient-editor.editing-color {
-    padding-bottom: 24px;
-}
-
-.gradient-editor.radial-gradient.editing-color {
-    padding-bottom: 0;
 }
 
 .gradient-editor > .gradient-type-select {
-    width: 237px;
+    width: 100%;
     margin-left: 1px;
     font-size: 16px;
 }
@@ -51,12 +40,12 @@
     position: relative;
     left: auto;
     margin-top: 7px;
+    margin-bottom: 25px;
 }
 
 .gradient-editor > .color-picker {
-    width: 238px;
+    width: 100%;
     height: auto;
-    margin-top: 25px;
     padding: 0;
 }
 
@@ -65,12 +54,11 @@
 }
 
 .gradient-editor > .gradient-angle {
+    width: 100%;
+    margin-top: 4px;
+    margin-left: 1px;
     display: flex;
     align-items: center;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
     font-size: 13px;
 }
 

Source/WebInspectorUI/UserInterface/Views/GradientEditor.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2014, 2021 Apple Inc. All rights reserved.
+ * Copyright (C) 2014-2022 Apple Inc. All rights reserved.
  * Copyright (C) 2015 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -77,14 +77,6 @@ WI.GradientEditor = class GradientEditor extends WI.Object
         }
         this._gradientTypePicker.addEventListener("change", this._gradientTypeChanged.bind(this));
 
-        this._gradientSlider = new WI.GradientSlider(this);
-        this._element.appendChild(this._gradientSlider.element);
-
-        this._colorPicker = new WI.ColorPicker;
-        this._colorPicker.colorSquare.dimension = 195;
-        this._colorPicker.enableColorComponentInputs = false;
-        this._colorPicker.addEventListener(WI.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
-
         let angleContainerElement = this._element.appendChild(document.createElement("div"));
         angleContainerElement.classList.add("gradient-angle");
         angleContainerElement.append(WI.UIString("Angle"));
@@ -115,6 +107,13 @@ WI.GradientEditor = class GradientEditor extends WI.Object
 
             return [name, {element: optionElement, min, max, step}];
         }));
+
+        this._gradientSlider = new WI.GradientSlider(this);
+        this._element.appendChild(this._gradientSlider.element);
+
+        this._colorPicker = new WI.ColorPicker;
+        this._colorPicker.colorSquare.dimension = 195;
+        this._colorPicker.addEventListener(WI.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
     }
 
     get element()
@@ -168,12 +167,10 @@ WI.GradientEditor = class GradientEditor extends WI.Object
         const selectedStop = gradientSlider.selectedStop;
         if (selectedStop && !this._editingColor) {
             this._element.appendChild(this._colorPicker.element);
-            this._element.classList.add("editing-color");
             this._colorPicker.color = selectedStop.color;
             this._editingColor = true;
         } else if (!selectedStop) {
             this._colorPicker.element.remove();
-            this._element.classList.remove("editing-color");
             this._editingColor = false;
         }