Apply style change after dragging is finished for CSSLength

Previously we did not apply style text after dragging is finished, which
means we did not "commit" the change and therefore lost important calls
to update the status of the changed declaration. This CL ensures this,
which is consistent with other style widgets' behaviors.

Fixed: 356039089
Change-Id: I8650031d4df3cc6a07f564aebd38ed53edc66d22
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6124760
Auto-Submit: Changhao Han <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: hanselfmu-chromium

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1186,6 +1186,7 @@ export class LengthRenderer implements MatchRenderer<LengthMatch> {
 
     const onDraggingFinished = (): void => {
       this.#treeElement.parentPane().setEditingStyle(false);
+      void this.#treeElement.applyStyleText(this.#treeElement.renderedPropertyText(), true);
     };
 
     cssLength.addEventListener('valuechanged', onValueChanged);
@@ -2189,7 +2190,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     this.originalPropertyText = this.property.propertyText || '';
 
-    this.parentPaneInternal.setEditingStyle(true, this);
+    this.parentPaneInternal.setEditingStyle(true);
     selectedElement.parentElement?.scrollIntoViewIfNeeded(false);
 
     this.prompt = new CSSPropertyPrompt(this, context.isEditingName, Array.from(this.#gridNames ?? []));
@@ -2586,7 +2587,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
   private async innerApplyStyleText(
       styleText: string, majorChange: boolean, property?: SDK.CSSProperty.CSSProperty|null): Promise<void> {
-    // this.property might have been nulled at the end of the last innerApplyStyleText
+    // this.property might have been nulled at the end of the last innerApplyStyleText.
     if (!this.treeOutline || !this.property) {
       return;
     }

front_end/panels/elements/StylesSidebarPane.ts

@@ -808,7 +808,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  setEditingStyle(editing: boolean, _treeElement?: StylePropertyTreeElement): void {
+  setEditingStyle(editing: boolean): void {
     if (this.isEditingStyle === editing) {
       return;
     }