[elements] Update working copy from Styles tab.

When modifying CSS, the Styles tab previously wrote straight to disk
when a workspace folder was connected, instead of updating the working
copy (like the Sources panel does). This is a very inconsistent and
confusing behavior, and doesn't align with the intended use cases that
we're working on for Workspace feature.

Also show an asterisk in the Styles tab for modified CSS files, similar
to what we do in the Sources panel.

Bug: 405312529
Screenshot: https://i.imgur.com/iXDyU1S.png
Change-Id: I980cb87a8d985f4cab6b6b26fa2618ee6001d24c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6382153
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: bmeurer

front_end/models/bindings/StylesSourceMapping.ts

@@ -271,7 +271,7 @@ export class StyleFile implements TextUtils.ContentProvider.ContentProvider {
 
     if (fromProvider !== this.uiSourceCode) {
       this.#isAddingRevision = true;
-      this.uiSourceCode.addRevision(newContent);
+      this.uiSourceCode.setWorkingCopy(newContent);
       this.#isAddingRevision = false;
     }
 

front_end/models/workspace/UISourceCode.ts

@@ -590,7 +590,11 @@ export class UILocation {
   linkText(skipTrim = false, showColumnNumber = false): string {
     const displayName = this.uiSourceCode.displayName(skipTrim);
     const lineAndColumnText = this.lineAndColumnText(showColumnNumber);
-    return lineAndColumnText ? displayName + ':' + lineAndColumnText : displayName;
+    let text = lineAndColumnText ? displayName + ':' + lineAndColumnText : displayName;
+    if (this.uiSourceCode.isDirty()) {
+      text = '*' + text;
+    }
+    return text;
   }
 
   lineAndColumnText(showColumnNumber = false): string|undefined {

front_end/ui/legacy/components/utils/Linkifier.ts

@@ -94,13 +94,35 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
   private readonly anchorsByTarget = new Map<SDK.Target.Target, Element[]>();
   private readonly locationPoolByTarget = new Map<SDK.Target.Target, Bindings.LiveLocation.LiveLocationPool>();
   private useLinkDecorator: boolean;
+  readonly #anchorUpdaters: WeakMap<Element, (this: Linkifier, anchor: HTMLElement) => void>;
 
   constructor(maxLengthForDisplayedURLs?: number, useLinkDecorator?: boolean) {
     super();
     this.maxLength = maxLengthForDisplayedURLs || UI.UIUtils.MaxLengthForDisplayedURLs;
     this.useLinkDecorator = Boolean(useLinkDecorator);
+    this.#anchorUpdaters = new WeakMap();
     instances.add(this);
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
+    Workspace.Workspace.WorkspaceImpl.instance().addEventListener(
+        Workspace.Workspace.Events.WorkingCopyChanged, this.#onWorkingCopyChangedOrCommitted, this);
+    Workspace.Workspace.WorkspaceImpl.instance().addEventListener(
+        Workspace.Workspace.Events.WorkingCopyCommitted, this.#onWorkingCopyChangedOrCommitted, this);
+  }
+
+  #onWorkingCopyChangedOrCommitted({
+    data: {uiSourceCode}
+  }: Common.EventTarget.EventTargetEvent<{uiSourceCode: Workspace.UISourceCode.UISourceCode}>): void {
+    const anchors = anchorsByUISourceCode.get(uiSourceCode);
+    if (!anchors) {
+      return;
+    }
+    for (const anchor of anchors) {
+      const updater = this.#anchorUpdaters.get(anchor);
+      if (!updater) {
+        continue;
+      }
+      updater.call(this, anchor as HTMLElement);
+    }
   }
 
   static setLinkDecorator(linkDecorator: LinkDecorator): void {
@@ -436,6 +458,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
   }
 
   dispose(): void {
+    Workspace.Workspace.WorkspaceImpl.instance().removeEventListener(
+        Workspace.Workspace.Events.WorkingCopyChanged, this.#onWorkingCopyChangedOrCommitted, this);
+    Workspace.Workspace.WorkspaceImpl.instance().removeEventListener(
+        Workspace.Workspace.Events.WorkingCopyCommitted, this.#onWorkingCopyChangedOrCommitted, this);
     // Create a copy of {keys} so {targetRemoved} can safely modify the map.
     for (const target of [...this.anchorsByTarget.keys()]) {
       this.targetRemoved(target);
@@ -473,8 +499,12 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     if (options.revealBreakpoint) {
       Linkifier.bindBreakpoint(anchor, uiLocation);
     }
+
     const text = uiLocation.linkText(true /* skipTrim */, options.showColumnNumber);
     Linkifier.setTrimmedText(anchor, text, this.maxLength);
+    this.#anchorUpdaters.set(anchor, function(this: Linkifier, anchor: HTMLElement) {
+      void this.updateAnchor(anchor, options, liveLocation);
+    });
 
     let titleText: string = uiLocation.uiSourceCode.url();
     if (uiLocation.uiSourceCode.mimeType() === 'application/wasm') {