[cleanup] Remove styles-pane-css-changes experiment.

The feature hasn't been actively developed and maintained, and is mostly
broken by now. It also has unclear implications for how we think about
Workspaces and the Patch Agent integration with Freestyler these days.
Therefore I'm removing the support for the experiment.

Later this year we will likely start investigating a solution which
tracks changes to the CSSOM (by DevTools) and provides users with the
ability to "sourcify" and persist them to their project.

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

Author: bmeurer

front_end/core/host/UserMetrics.ts

@@ -967,7 +967,6 @@ export enum DevtoolsExperiments {
   'full-accessibility-tree' = 42,
   'contrast-issues' = 44,
   'experimental-cookie-features' = 45,
-  'styles-pane-css-changes' = 55,
   'instrumentation-breakpoints' = 61,
   'authored-deployed-grouping' = 63,
   'just-my-code' = 65,

front_end/core/root/Runtime.ts

@@ -308,7 +308,6 @@ export const enum ExperimentName {
   ALL = '*',
   PROTOCOL_MONITOR = 'protocol-monitor',
   FULL_ACCESSIBILITY_TREE = 'full-accessibility-tree',
-  STYLES_PANE_CSS_CHANGES = 'styles-pane-css-changes',
   HEADER_OVERRIDES = 'header-overrides',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentation-breakpoints',
   AUTHORED_DEPLOYED_GROUPING = 'authored-deployed-grouping',

front_end/core/sdk/CSSStyleSheetHeader.ts

@@ -7,7 +7,6 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
 import * as Platform from '../platform/platform.js';
-import * as Root from '../root/root.js';
 
 import type {CSSModel} from './CSSModel.js';
 import {DeferredDOMNode} from './DOMModel.js';
@@ -107,11 +106,7 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
   }
 
   resourceURL(): Platform.DevToolsPath.UrlString {
-    const url = this.isViaInspector() ? this.viaInspectorResourceURL() : this.sourceURL;
-    if (!url && Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-      return this.dynamicStyleURL();
-    }
-    return url;
+    return this.isViaInspector() ? this.viaInspectorResourceURL() : this.sourceURL;
   }
 
   private getFrameURLPath(): string {
@@ -137,10 +132,6 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
     return `inspector:///inspector-stylesheet#${this.id}` as Platform.DevToolsPath.UrlString;
   }
 
-  private dynamicStyleURL(): Platform.DevToolsPath.UrlString {
-    return `stylesheet://${this.getFrameURLPath()}style#${this.id}` as Platform.DevToolsPath.UrlString;
-  }
-
   lineNumberInSource(lineNumberInStyleSheet: number): number {
     return this.startLine + lineNumberInStyleSheet;
   }

front_end/entrypoints/main/MainImpl.ts

@@ -330,10 +330,6 @@ export class MainImpl {
     // New cookie features.
     Root.Runtime.experiments.register('experimental-cookie-features', 'Enable experimental cookie features');
 
-    // Integrate CSS changes in the Styles pane.
-    Root.Runtime.experiments.register(
-        Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES, 'Sync CSS changes in the Styles tab');
-
     // Highlights a violating node or attribute by rendering a squiggly line under it and adding a tooltip linking to the issues panel.
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL,

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1610,7 +1610,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private computedStyles: Map<string, string>|null = null;
   private parentsComputedStyles: Map<string, string>|null = null;
   private contextForTest!: Context|undefined;
-  #propertyTextFromSource: string;
   #gridNames: Set<string>|undefined = undefined;
 
   constructor(
@@ -1634,8 +1633,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.listItemElement.textContent = '';
     }
 
-    this.#propertyTextFromSource = property.propertyText || '';
-
     this.property.addEventListener(SDK.CSSProperty.Events.LOCAL_VALUE_UPDATED, () => {
       this.updateTitle();
     });
@@ -1800,8 +1797,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     } else {
       this.listItemElement.classList.remove('disabled');
     }
-
-    this.listItemElement.classList.toggle('changed', this.isPropertyChanged(this.property));
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -1838,14 +1833,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.styleTextAppliedForTest();
   }
 
-  private isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-      return false;
-    }
-    // Check local cache first, then check against diffs from the workspace.
-    return this.#propertyTextFromSource !== property.propertyText || this.parentPane().isPropertyChanged(property);
-  }
-
   async #getLonghandProperties(): Promise<SDK.CSSProperty.CSSProperty[]> {
     const staticLonghandProperties = this.property.getLonghandProperties();
 
@@ -2104,14 +2091,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         UI.ARIAUtils.setLabel(
             enabledCheckboxElement, `${this.nameElement.textContent} ${this.valueElement.textContent}`);
       }
-
-      const copyIcon = IconButton.Icon.create('copy', 'copy');
-      UI.Tooltip.Tooltip.install(copyIcon, i18nString(UIStrings.copyDeclaration));
-      copyIcon.addEventListener('click', () => {
-        const propertyText = `${this.property.name}: ${this.property.value};`;
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(propertyText);
-      });
-      this.listItemElement.append(copyIcon);
       this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild);
     }
   }
@@ -2922,10 +2901,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.styleTextAppliedForTest();
       return;
     }
-    if (updatedProperty) {
-      this.listItemElement.classList.toggle('changed', this.isPropertyChanged(updatedProperty));
-      this.parentPane().updateChangeStatus();
-    }
 
     this.matchedStylesInternal.resetActiveProperties();
     this.hasBeenEditedIncrementally = true;

front_end/panels/elements/StylesSidebarPane.ts

@@ -122,14 +122,6 @@ const UIStrings = {
    *@description Rendering emulation option for toggling the automatic dark mode
    */
   automaticDarkMode: 'Automatic dark mode',
-  /**
-   *@description Tooltip text that appears when hovering over the css changes button in the Styles Sidebar Pane of the Elements panel
-   */
-  copyAllCSSChanges: 'Copy CSS changes',
-  /**
-   *@description Tooltip text that appears after clicking on the copy CSS changes button
-   */
-  copiedToClipboard: 'Copied to clipboard',
   /**
    *@description Text displayed on layer separators in the styles sidebar pane.
    */
@@ -211,7 +203,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
   #urlToChangeTracker = new Map<Platform.DevToolsPath.UrlString, ChangeTracker>();
-  #copyChangesButton?: UI.Toolbar.ToolbarButton;
   #updateAbortController?: AbortController;
   #updateComputedStylesAbortController?: AbortController;
 
@@ -586,11 +577,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
       this.appendToolbarItem(this.createRenderingShortcuts());
-      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-        this.#copyChangesButton = this.createCopyAllChangesButton();
-        this.appendToolbarItem(this.#copyChangesButton);
-        this.#copyChangesButton.element.classList.add('hidden');
-      }
       this.dispatchEventToListeners(Events.INITIAL_UPDATE_COMPLETED);
     }
 
@@ -1057,16 +1043,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // the matched styles we reenable the button.
     LayersWidget.ButtonProvider.instance().item().setVisible(false);
 
-    const refreshedURLs = new Set<string>();
     for (const style of matchedStyles.nodeStyles()) {
-      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES) && style.parentRule) {
-        const url = style.parentRule.resourceURL();
-        if (url && !refreshedURLs.has(url)) {
-          await this.trackURLForChanges(url);
-          refreshedURLs.add(url);
-        }
-      }
-
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
@@ -1394,22 +1371,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return changedLines.has(formattedLineNumber + 1);
   }
 
-  updateChangeStatus(): void {
-    if (!this.#copyChangesButton) {
-      return;
-    }
-
-    let hasChangedStyles = false;
-    for (const changeTracker of this.#urlToChangeTracker.values()) {
-      if (changeTracker.changedLines.size > 0) {
-        hasChangedStyles = true;
-        break;
-      }
-    }
-
-    this.#copyChangesButton.element.classList.toggle('hidden', !hasChangedStyles);
-  }
-
   private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     const changeTracker = this.#urlToChangeTracker.get(uiSourceCode.url());
     if (!changeTracker) {
@@ -1586,27 +1547,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     return button;
   }
-
-  private createCopyAllChangesButton(): UI.Toolbar.ToolbarButton {
-    const copyAllChangesButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyAllCSSChanges), 'copy');
-    // TODO(1296947): implement a dedicated component to share between all copy buttons
-    copyAllChangesButton.element.setAttribute('data-content', i18nString(UIStrings.copiedToClipboard));
-    let timeout: number|undefined;
-    copyAllChangesButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, async () => {
-      const allChanges = await this.getFormattedChanges();
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allChanges);
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = undefined;
-      }
-      copyAllChangesButton.element.classList.add('copied-to-clipboard');
-      timeout = window.setTimeout(() => {
-        copyAllChangesButton.element.classList.remove('copied-to-clipboard');
-        timeout = undefined;
-      }, 2000);
-    });
-    return copyAllChangesButton;
-  }
 }
 
 export const enum Events {

front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -148,35 +148,6 @@ input.enabled-button.small {
   opacity: 50%;
 }
 
-.changed {
-  background-color: var(--sys-color-tertiary-container);
-
-  &::after {
-    content: "";
-    position: absolute;
-    left: -4px;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: var(--sys-color-tertiary);
-  }
-}
-
-.copy {
-  display: none;
-
-  .changed:hover & {
-    position: absolute;
-    right: -4px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    display: inline-block;
-    cursor: pointer;
-    transform: scale(0.9);
-  }
-}
-
 .hint-wrapper {
   align-items: center;
   display: inline-block;

front_end/testing/EnvironmentHelpers.ts

@@ -116,7 +116,6 @@ const REGISTERED_EXPERIMENTS = [
   'timeline-v8-runtime-call-stats',
   'timeline-invalidation-tracking',
   Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS,
-  Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES,
   Root.Runtime.ExperimentName.HEADER_OVERRIDES,
   Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL,
   Root.Runtime.ExperimentName.USE_SOURCE_MAP_SCOPES,

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3380,7 +3380,6 @@ export const knownContextValues = new Set([
   'style-sheet-id',
   'styles',
   'styles-metrics',
-  'styles-pane-css-changes',
   'stylesheet',
   'subdomain',
   'subgrid',