chrome-devtools-frontend 1.0.939144 → 1.0.939277

package/front_end/core/sdk/CSSModel.ts

@@ -47,6 +47,7 @@ import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
 import {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 import type {DOMNode} from './DOMModel.js';
 import {DOMModel} from './DOMModel.js';
+import type {ResourceTreeFrame} from './ResourceTreeModel.js';
 import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTreeModel.js';
 import type {Target} from './Target.js';
 import {Capability} from './Target.js';
@@ -54,37 +55,37 @@ import {SDKModel} from './SDKModel.js';
 import {SourceMapManager} from './SourceMapManager.js';
 
 export class CSSModel extends SDKModel<EventTypes> {
-  #isEnabledInternal: boolean;
-  #cachedMatchedCascadeNode: DOMNode|null;
-  #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null;
-  readonly #domModelInternal: DOMModel;
-  readonly #sourceMapManagerInternal: SourceMapManager<CSSStyleSheetHeader>;
-  agent: ProtocolProxyApi.CSSApi;
-  readonly #styleLoader: ComputedStyleLoader;
+  readonly agent: ProtocolProxyApi.CSSApi;
+  readonly #domModel: DOMModel;
+  readonly #fontFaces: Map<string, CSSFontFace>;
+  readonly #originalStyleSheetText: Map<CSSStyleSheetHeader, Promise<string|null>>;
   readonly #resourceTreeModel: ResourceTreeModel|null;
-  #styleSheetIdToHeader: Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>;
+  readonly #sourceMapManager: SourceMapManager<CSSStyleSheetHeader>;
+  readonly #styleLoader: ComputedStyleLoader;
+  readonly #stylePollingThrottler: Common.Throttler.Throttler;
   readonly #styleSheetIdsForURL: Map<string, Map<string, Set<Protocol.CSS.StyleSheetId>>>;
-  readonly #originalStyleSheetTextInternal: Map<CSSStyleSheetHeader, Promise<string|null>>;
-  #isRuleUsageTrackingEnabled: boolean;
-  readonly #fontFacesInternal: Map<string, CSSFontFace>;
+  readonly #styleSheetIdToHeader: Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>;
+  #cachedMatchedCascadeNode: DOMNode|null;
+  #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null;
   #cssPropertyTracker: CSSPropertyTracker|null;
   #isCSSPropertyTrackingEnabled: boolean;
+  #isEnabled: boolean;
+  #isRuleUsageTrackingEnabled: boolean;
   #isTrackingRequestPending: boolean;
-  readonly #trackedCSSProperties: Map<number, Protocol.CSS.CSSComputedStyleProperty[]>;
-  readonly #stylePollingThrottler: Common.Throttler.Throttler;
 
   constructor(target: Target) {
     super(target);
-    this.#isEnabledInternal = false;
+    this.#isEnabled = false;
     this.#cachedMatchedCascadeNode = null;
     this.#cachedMatchedCascadePromise = null;
-    this.#domModelInternal = (target.model(DOMModel) as DOMModel);
-    this.#sourceMapManagerInternal = new SourceMapManager(target);
+    this.#domModel = (target.model(DOMModel) as DOMModel);
+    this.#sourceMapManager = new SourceMapManager(target);
     this.agent = target.cssAgent();
     this.#styleLoader = new ComputedStyleLoader(this);
     this.#resourceTreeModel = target.model(ResourceTreeModel);
     if (this.#resourceTreeModel) {
-      this.#resourceTreeModel.addEventListener(ResourceTreeModelEvents.MainFrameNavigated, this.resetStyleSheets, this);
+      this.#resourceTreeModel.addEventListener(
+          ResourceTreeModelEvents.MainFrameNavigated, this.onMainFrameNavigated, this);
     }
     target.registerCSSDispatcher(new CSSDispatcher(this));
     if (!target.suspended()) {
@@ -93,23 +94,21 @@ export class CSSModel extends SDKModel<EventTypes> {
     this.#styleSheetIdToHeader = new Map();
     this.#styleSheetIdsForURL = new Map();
 
-    this.#originalStyleSheetTextInternal = new Map();
+    this.#originalStyleSheetText = new Map();
 
     this.#isRuleUsageTrackingEnabled = false;
 
-    this.#fontFacesInternal = new Map();
+    this.#fontFaces = new Map();
 
     this.#cssPropertyTracker = null;  // TODO: support multiple trackers when we refactor the backend
     this.#isCSSPropertyTrackingEnabled = false;
     this.#isTrackingRequestPending = false;
-    this.#trackedCSSProperties = new Map();
     this.#stylePollingThrottler = new Common.Throttler.Throttler(StylePollingInterval);
 
-    this.#sourceMapManagerInternal.setEnabled(
-        Common.Settings.Settings.instance().moduleSetting('cssSourceMapsEnabled').get());
+    this.#sourceMapManager.setEnabled(Common.Settings.Settings.instance().moduleSetting('cssSourceMapsEnabled').get());
     Common.Settings.Settings.instance()
         .moduleSetting('cssSourceMapsEnabled')
-        .addChangeListener(event => this.#sourceMapManagerInternal.setEnabled((event.data as boolean)));
+        .addChangeListener(event => this.#sourceMapManager.setEnabled((event.data as boolean)));
   }
 
   headersForSourceURL(sourceURL: string): CSSStyleSheetHeader[] {
@@ -148,7 +147,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   sourceMapManager(): SourceMapManager<CSSStyleSheetHeader> {
-    return this.#sourceMapManagerInternal;
+    return this.#sourceMapManager;
   }
 
   static trimSourceURL(text: string): string {
@@ -172,7 +171,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   domModel(): DOMModel {
-    return this.#domModelInternal;
+    return this.#domModel;
   }
 
   async setStyleText(
@@ -187,7 +186,7 @@ export class CSSModel extends SDKModel<EventTypes> {
         return false;
       }
 
-      this.#domModelInternal.markUndoableState(!majorChange);
+      this.#domModel.markUndoableState(!majorChange);
       const edit = new Edit(styleSheetId, range, text, styles[0]);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -207,7 +206,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!selectorList) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, text, selectorList);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -227,7 +226,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!keyText) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, text, keyText);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -268,12 +267,12 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   isEnabled(): boolean {
-    return this.#isEnabledInternal;
+    return this.#isEnabled;
   }
 
   private async enable(): Promise<void> {
     await this.agent.invoke_enable();
-    this.#isEnabledInternal = true;
+    this.#isEnabled = true;
     if (this.#isRuleUsageTrackingEnabled) {
       await this.startCoverage();
     }
@@ -287,7 +286,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       return null;
     }
 
-    const node = this.#domModelInternal.nodeForId(nodeId);
+    const node = this.#domModel.nodeForId(nodeId);
     if (!node) {
       return null;
     }
@@ -399,7 +398,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!media) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, newMediaText, media);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -421,7 +420,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!containerQuery) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, newContainerQueryText, containerQuery);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -439,7 +438,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!rule) {
         return null;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, ruleLocation, ruleText, rule);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return new CSSStyleRule(this, rule);
@@ -477,13 +476,13 @@ export class CSSModel extends SDKModel<EventTypes> {
 
   fontsUpdated(fontFace?: Protocol.CSS.FontFace|null): void {
     if (fontFace) {
-      this.#fontFacesInternal.set(fontFace.src, new CSSFontFace(fontFace));
+      this.#fontFaces.set(fontFace.src, new CSSFontFace(fontFace));
     }
     this.dispatchEventToListeners(Events.FontsUpdated);
   }
 
   fontFaces(): CSSFontFace[] {
-    return [...this.#fontFacesInternal.values()];
+    return [...this.#fontFaces.values()];
   }
 
   styleSheetHeaderForId(id: Protocol.CSS.StyleSheetId): CSSStyleSheetHeader|null {
@@ -503,10 +502,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     if (!header) {
       return Promise.resolve(null);
     }
-    let promise = this.#originalStyleSheetTextInternal.get(header);
+    let promise = this.#originalStyleSheetText.get(header);
     if (!promise) {
       promise = this.getStyleSheetText(header.id);
-      this.#originalStyleSheetTextInternal.set(header, promise);
+      this.#originalStyleSheetText.set(header, promise);
       this.originalContentRequestedForTest(header);
     }
     return promise;
@@ -541,8 +540,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       }
       styleSheetIds.add(styleSheetHeader.id);
     }
-    this.#sourceMapManagerInternal.attachSourceMap(
-        styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
     this.dispatchEventToListeners(Events.StyleSheetAdded, styleSheetHeader);
   }
 
@@ -569,8 +567,8 @@ export class CSSModel extends SDKModel<EventTypes> {
         }
       }
     }
-    this.#originalStyleSheetTextInternal.delete(header);
-    this.#sourceMapManagerInternal.detachSourceMap(header);
+    this.#originalStyleSheetText.delete(header);
+    this.#sourceMapManager.detachSourceMap(header);
     this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
   }
 
@@ -602,13 +600,13 @@ export class CSSModel extends SDKModel<EventTypes> {
     const response = await this.agent.invoke_setStyleSheetText({styleSheetId: header.id, text: newText});
     const sourceMapURL = response.sourceMapURL;
 
-    this.#sourceMapManagerInternal.detachSourceMap(header);
+    this.#sourceMapManager.detachSourceMap(header);
     header.setSourceMapURL(sourceMapURL);
-    this.#sourceMapManagerInternal.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
     if (sourceMapURL === null) {
       return 'Error in CSS.setStyleSheetText';
     }
-    this.#domModelInternal.markUndoableState(!majorChange);
+    this.#domModel.markUndoableState(!majorChange);
     this.fireStyleSheetChanged(styleSheetId);
     return null;
   }
@@ -622,22 +620,38 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
+  private async onMainFrameNavigated(event: Common.EventTarget.EventTargetEvent<ResourceTreeFrame>): Promise<void> {
+    // If the main frame was restored from the back-forward cache, the order of CDP
+    // is different from the regular navigations. In this case, events about CSS
+    // stylesheet has already been received and they are mixed with the previous page
+    // stylesheets. Therefore, we re-enable the CSS agent to get fresh events.
+    // For the regular navigatons, we can just clear the local data because events about
+    // stylesheets will arrive later.
+    if (event.data.backForwardCacheDetails.restoredFromCache) {
+      await this.suspendModel();
+      await this.resumeModel();
+    } else {
+      this.resetStyleSheets();
+      this.resetFontFaces();
+    }
+  }
+
   private resetStyleSheets(): void {
     const headers = [...this.#styleSheetIdToHeader.values()];
     this.#styleSheetIdsForURL.clear();
     this.#styleSheetIdToHeader.clear();
     for (const header of headers) {
-      this.#sourceMapManagerInternal.detachSourceMap(header);
+      this.#sourceMapManager.detachSourceMap(header);
       this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
     }
   }
 
   private resetFontFaces(): void {
-    this.#fontFacesInternal.clear();
+    this.#fontFaces.clear();
   }
 
   async suspendModel(): Promise<void> {
-    this.#isEnabledInternal = false;
+    this.#isEnabled = false;
     await this.agent.invoke_disable();
     this.resetStyleSheets();
     this.resetFontFaces();
@@ -713,7 +727,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (this.#cssPropertyTracker) {
         this.#cssPropertyTracker.dispatchEventToListeners(
             CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,
-            result.nodeIds.map(nodeId => this.#domModelInternal.nodeForId(nodeId)));
+            result.nodeIds.map(nodeId => this.#domModel.nodeForId(nodeId)));
       }
     }
 
@@ -725,7 +739,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   dispose(): void {
     this.disableCSSPropertyTracker();
     super.dispose();
-    this.#sourceMapManagerInternal.dispose();
+    this.#sourceMapManager.dispose();
   }
 
   getAgent(): ProtocolProxyApi.CSSApi {

package/front_end/panels/network/NetworkLogView.ts

@@ -958,11 +958,24 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           (initiatorLink as HTMLElement).focus();
         }
       }
+
       if (isEnterOrSpaceKey(event)) {
         this.dispatchEventToListeners(Events.RequestActivated, {showPanel: true, takeFocus: true});
         event.consume(true);
       }
     });
+    this.dataGrid.element.addEventListener('keyup', event => {
+      if ((event.key === 'r' || event.key === 'R') && this.dataGrid.selectedNode) {
+        const request = (this.dataGrid.selectedNode as NetworkNode).request();
+        if (!request) {
+          return;
+        }
+
+        if (SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {
+          SDK.NetworkManager.NetworkManager.replayRequest(request);
+        }
+      }
+    });
     this.dataGrid.element.addEventListener('focus', this.onDataGridFocus.bind(this), true);
     this.dataGrid.element.addEventListener('blur', this.onDataGridBlur.bind(this), true);
     return this.dataGrid;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.939144"
+  "version": "1.0.939277"
 }