Web Inspector: Layout overlay color swatches don't update saved color…

… until popover is dismissed

https://bugs.webkit.org/show_bug.cgi?id=241244
rdar://94318762

Reviewed by Devin Rousso.

We should save all changes to layout overlay color, not just the state when you close the color picker popover. Not
doing this causes a few issues:
1. DOM node badge colors don't update as you dynamically adjust the color for an overlay.
2. The new "sample color from screen" can be used without opening the popover for the color picker, which means these
changes are never saved.

Canonical link: https://commits.webkit.org/251248@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295164 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/UserInterface/Models/DOMNode.js

@@ -709,6 +709,9 @@ WI.DOMNode = class DOMNode extends WI.Object
 
         this._createLayoutOverlayColorSettingIfNeeded();
         this._layoutOverlayColorSetting.value = color.hsl;
+
+        if (this._layoutOverlayShowing)
+            this.showLayoutOverlay({color});
     }
 
     scrollIntoView()

Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js

@@ -125,11 +125,6 @@ WI.NodeOverlayListSection = class NodeOverlayListSection extends WI.View
             itemContainerElement.append(swatch.element);
 
             swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {
-                if (checkboxElement?.checked)
-                    domNode.showLayoutOverlay({color: event.data.value});
-            }, swatch);
-
-            swatch.addEventListener(WI.InlineSwatch.Event.Deactivated, (event) => {
                 domNode.layoutOverlayColor = event.target.value;
             }, swatch);