From 233f1874da372f93a29c519cb7ec2266e9aced4b Mon Sep 17 00:00:00 2001 From: Dmitry Gozman Date: Fri, 4 Jun 2021 10:47:19 -0700 Subject: [PATCH] feat(inspector): remove snapshots (#6909) --- src/server/supplements/injected/recorder.ts | 42 +---------------- .../supplements/recorder/recorderTypes.ts | 8 +--- .../supplements/recorder/recorderUtils.ts | 19 +------- src/server/supplements/recorderSupplement.ts | 47 +++---------------- src/web/recorder/callLog.css | 8 ++++ src/web/recorder/callLog.tsx | 10 +--- src/web/recorder/recorder.tsx | 4 +- 7 files changed, 21 insertions(+), 117 deletions(-) diff --git a/src/server/supplements/injected/recorder.ts b/src/server/supplements/injected/recorder.ts index 6f9db0f2d8084..6b1b74158228a 100644 --- a/src/server/supplements/injected/recorder.ts +++ b/src/server/supplements/injected/recorder.ts @@ -50,11 +50,8 @@ export class Recorder { private _actionPoint: Point | undefined; private _actionSelector: string | undefined; private _params: { isUnderTest: boolean; }; - private _snapshotIframe: HTMLIFrameElement | undefined; - private _snapshotUrl: string | undefined; - private _snapshotBaseUrl: string; - constructor(injectedScript: InjectedScript, params: { isUnderTest: boolean, snapshotBaseUrl: string }) { + constructor(injectedScript: InjectedScript, params: { isUnderTest: boolean }) { this._params = params; this._injectedScript = injectedScript; this._outerGlassPaneElement = document.createElement('x-pw-glass'); @@ -66,7 +63,6 @@ export class Recorder { this._outerGlassPaneElement.style.zIndex = '2147483647'; this._outerGlassPaneElement.style.pointerEvents = 'none'; this._outerGlassPaneElement.style.display = 'flex'; - this._snapshotBaseUrl = params.snapshotBaseUrl; this._tooltipElement = document.createElement('x-pw-tooltip'); this._actionPointElement = document.createElement('x-pw-action-point'); @@ -160,28 +156,6 @@ export class Recorder { document.documentElement.appendChild(this._outerGlassPaneElement); } - private _createSnapshotIframeIfNeeded(): HTMLIFrameElement | undefined { - if (this._snapshotIframe) - return this._snapshotIframe; - if (window.top === window) { - this._snapshotIframe = document.createElement('iframe'); - this._snapshotIframe.src = this._snapshotBaseUrl; - this._snapshotIframe.style.background = '#ff000060'; - this._snapshotIframe.style.position = 'fixed'; - this._snapshotIframe.style.top = '0'; - this._snapshotIframe.style.right = '0'; - this._snapshotIframe.style.bottom = '0'; - this._snapshotIframe.style.left = '0'; - this._snapshotIframe.style.border = 'none'; - this._snapshotIframe.style.width = '100%'; - this._snapshotIframe.style.height = '100%'; - this._snapshotIframe.style.zIndex = '2147483647'; - this._snapshotIframe.style.visibility = 'hidden'; - document.documentElement.appendChild(this._snapshotIframe); - } - return this._snapshotIframe; - } - private async _pollRecorderMode() { const pollPeriod = 1000; if (this._pollRecorderModeTimer) @@ -192,7 +166,7 @@ export class Recorder { return; } - const { mode, actionPoint, actionSelector, snapshotUrl } = state; + const { mode, actionPoint, actionSelector } = state; if (mode !== this._mode) { this._mode = mode; this._clearHighlight(); @@ -221,18 +195,6 @@ export class Recorder { this._updateHighlight(); this._actionSelector = actionSelector; } - if (snapshotUrl !== this._snapshotUrl) { - this._snapshotUrl = snapshotUrl; - const snapshotIframe = this._createSnapshotIframeIfNeeded(); - if (snapshotIframe) { - if (!snapshotUrl) { - snapshotIframe.style.visibility = 'hidden'; - } else { - snapshotIframe.style.visibility = 'visible'; - snapshotIframe.contentWindow?.postMessage({ snapshotUrl }, '*'); - } - } - } this._pollRecorderModeTimer = setTimeout(() => this._pollRecorderMode(), pollPeriod); } diff --git a/src/server/supplements/recorder/recorderTypes.ts b/src/server/supplements/recorder/recorderTypes.ts index 038b058aa35dc..1dcd9fedc2929 100644 --- a/src/server/supplements/recorder/recorderTypes.ts +++ b/src/server/supplements/recorder/recorderTypes.ts @@ -19,7 +19,7 @@ import { Point } from '../../../common/types'; export type Mode = 'inspecting' | 'recording' | 'none'; export type EventData = { - event: 'clear' | 'resume' | 'step' | 'pause' | 'setMode' | 'selectorUpdated' | 'callLogHovered'; + event: 'clear' | 'resume' | 'step' | 'pause' | 'setMode' | 'selectorUpdated'; params: any; }; @@ -27,7 +27,6 @@ export type UIState = { mode: Mode; actionPoint?: Point; actionSelector?: string; - snapshotUrl?: string; }; export type CallLogStatus = 'in-progress' | 'done' | 'error' | 'paused'; @@ -44,11 +43,6 @@ export type CallLog = { url?: string, selector?: string, }; - snapshots: { - before: boolean, - action: boolean, - after: boolean, - } }; export type SourceHighlight = { diff --git a/src/server/supplements/recorder/recorderUtils.ts b/src/server/supplements/recorder/recorderUtils.ts index 7fe390778b296..b0336245b5f64 100644 --- a/src/server/supplements/recorder/recorderUtils.ts +++ b/src/server/supplements/recorder/recorderUtils.ts @@ -17,7 +17,7 @@ import { CallMetadata } from '../../instrumentation'; import { CallLog, CallLogStatus } from './recorderTypes'; -export function metadataToCallLog(metadata: CallMetadata, status: CallLogStatus, snapshots: Set): CallLog { +export function metadataToCallLog(metadata: CallMetadata, status: CallLogStatus): CallLog { const title = metadata.apiName || metadata.method; if (metadata.error) status = 'error'; @@ -38,23 +38,6 @@ export function metadataToCallLog(metadata: CallMetadata, status: CallLogStatus, error: metadata.error, params, duration, - snapshots: { - before: showBeforeSnapshot(metadata) && snapshots.has(`before@${metadata.id}`), - action: showActionSnapshot(metadata) && snapshots.has(`action@${metadata.id}`), - after: showAfterSnapshot(metadata) && snapshots.has(`after@${metadata.id}`), - } }; return callLog; } - -function showBeforeSnapshot(metadata: CallMetadata): boolean { - return metadata.method === 'close'; -} - -function showActionSnapshot(metadata: CallMetadata): boolean { - return ['click', 'dblclick', 'check', 'uncheck', 'fill', 'press'].includes(metadata.method); -} - -function showAfterSnapshot(metadata: CallMetadata): boolean { - return ['goto', 'click', 'dblclick', 'dblclick', 'check', 'uncheck', 'fill', 'press'].includes(metadata.method); -} diff --git a/src/server/supplements/recorderSupplement.ts b/src/server/supplements/recorderSupplement.ts index 2efb5a161134f..ccd040a37ca59 100644 --- a/src/server/supplements/recorderSupplement.ts +++ b/src/server/supplements/recorderSupplement.ts @@ -33,7 +33,6 @@ import { CallMetadata, InstrumentationListener, internalCallMetadata, SdkObject import { Point } from '../../common/types'; import { CallLog, CallLogStatus, EventData, Mode, Source, UIState } from './recorder/recorderTypes'; import { isUnderTest } from '../../utils/utils'; -import { InMemorySnapshotter } from '../snapshot/inMemorySnapshotter'; import { metadataToCallLog } from './recorder/recorderUtils'; import { Debugger } from './debugger'; @@ -56,9 +55,6 @@ export class RecorderSupplement implements InstrumentationListener { private _currentCallsMetadata = new Map(); private _recorderSources: Source[]; private _userSources = new Map(); - private _snapshotter: InMemorySnapshotter; - private _hoveredSnapshot: { callLogId: string, phase: 'before' | 'after' | 'action' } | undefined; - private _snapshots = new Set(); private _allMetadatas = new Map(); private _debugger: Debugger; @@ -129,14 +125,12 @@ export class RecorderSupplement implements InstrumentationListener { }); } this._generator = generator; - this._snapshotter = new InMemorySnapshotter(context); } async install() { const recorderApp = await RecorderApp.open(this._context); this._recorderApp = recorderApp; recorderApp.once('close', () => { - this._snapshotter.dispose().catch(() => {}); this._recorderApp = null; }); recorderApp.on('event', (data: EventData) => { @@ -150,13 +144,6 @@ export class RecorderSupplement implements InstrumentationListener { this._refreshOverlay(); return; } - if (data.event === 'callLogHovered') { - this._hoveredSnapshot = undefined; - if (this._debugger.isPaused() && data.params.callLogId) - this._hoveredSnapshot = data.params; - this._refreshOverlay(); - return; - } if (data.event === 'step') { this._debugger.resume(true); return; @@ -202,26 +189,18 @@ export class RecorderSupplement implements InstrumentationListener { (source: BindingSource, action: actions.Action) => this._recordAction(source.frame, action), 'utility'); await this._context.exposeBinding('_playwrightRecorderState', false, source => { - let snapshotUrl: string | undefined; let actionSelector = this._highlightedSelector; let actionPoint: Point | undefined; - if (this._hoveredSnapshot) { - const metadata = this._allMetadatas.get(this._hoveredSnapshot.callLogId)!; - snapshotUrl = `${metadata.pageId}?name=${this._hoveredSnapshot.phase}@${this._hoveredSnapshot.callLogId}`; - actionPoint = this._hoveredSnapshot.phase === 'action' ? metadata?.point : undefined; - } else { - for (const [metadata, sdkObject] of this._currentCallsMetadata) { - if (source.page === sdkObject.attribution.page) { - actionPoint = metadata.point || actionPoint; - actionSelector = actionSelector || metadata.params.selector; - } + for (const [metadata, sdkObject] of this._currentCallsMetadata) { + if (source.page === sdkObject.attribution.page) { + actionPoint = metadata.point || actionPoint; + actionSelector = actionSelector || metadata.params.selector; } } const uiState: UIState = { mode: this._mode, actionPoint, actionSelector, - snapshotUrl, }; return uiState; }, 'utility'); @@ -236,8 +215,7 @@ export class RecorderSupplement implements InstrumentationListener { this._debugger.resume(false); }, 'main'); - const snapshotBaseUrl = await this._snapshotter.initialize() + '/snapshot/'; - await this._context.extendInjectedScript('utility', recorderSource.source, { isUnderTest: isUnderTest(), snapshotBaseUrl }); + await this._context.extendInjectedScript('utility', recorderSource.source, { isUnderTest: isUnderTest() }); await this._context.extendInjectedScript('main', consoleApiSource.source); if (this._debugger.isPaused()) @@ -391,18 +369,9 @@ export class RecorderSupplement implements InstrumentationListener { this._generator.signal(pageAlias, page.mainFrame(), { name: 'dialog', dialogAlias: String(++this._lastDialogOrdinal) }); } - _captureSnapshot(sdkObject: SdkObject, metadata: CallMetadata, phase: 'before' | 'after' | 'action') { - if (sdkObject.attribution.page) { - const snapshotName = `${phase}@${metadata.id}`; - this._snapshots.add(snapshotName); - this._snapshotter.captureSnapshot(sdkObject.attribution.page, snapshotName); - } - } - async onBeforeCall(sdkObject: SdkObject, metadata: CallMetadata) { if (this._mode === 'recording') return; - this._captureSnapshot(sdkObject, metadata, 'before'); this._currentCallsMetadata.set(metadata, sdkObject); this._allMetadatas.set(metadata.id, metadata); this._updateUserSources(); @@ -416,7 +385,6 @@ export class RecorderSupplement implements InstrumentationListener { async onAfterCall(sdkObject: SdkObject, metadata: CallMetadata) { if (this._mode === 'recording') return; - this._captureSnapshot(sdkObject, metadata, 'after'); if (!metadata.error) this._currentCallsMetadata.delete(metadata); this._updateUserSources(); @@ -458,9 +426,6 @@ export class RecorderSupplement implements InstrumentationListener { } async onBeforeInputAction(sdkObject: SdkObject, metadata: CallMetadata) { - if (this._mode === 'recording') - return; - this._captureSnapshot(sdkObject, metadata, 'action'); } async onCallLog(logName: string, message: string, sdkObject: SdkObject, metadata: CallMetadata): Promise { @@ -479,7 +444,7 @@ export class RecorderSupplement implements InstrumentationListener { status = 'in-progress'; if (this._debugger.isPaused(metadata)) status = 'paused'; - logs.push(metadataToCallLog(metadata, status, this._snapshots)); + logs.push(metadataToCallLog(metadata, status)); } this._recorderApp?.updateCallLogs(logs); } diff --git a/src/web/recorder/callLog.css b/src/web/recorder/callLog.css index a6a36bf89d581..d6bfebe92ae98 100644 --- a/src/web/recorder/callLog.css +++ b/src/web/recorder/callLog.css @@ -48,6 +48,7 @@ .call-log-call .codicon { padding: 0 4px; + flex: none; } .call-log .codicon-check { @@ -66,6 +67,12 @@ color: red; } +.call-log-details { + flex: 0 1 auto; + overflow-x: hidden; + text-overflow: ellipsis; +} + .call-log-url { color: var(--blue); } @@ -75,6 +82,7 @@ } .call-log-time { + flex: none; margin-left: 4px; color: var(--gray); } diff --git a/src/web/recorder/callLog.tsx b/src/web/recorder/callLog.tsx index bb5d07685fcf9..c1286c6d12607 100644 --- a/src/web/recorder/callLog.tsx +++ b/src/web/recorder/callLog.tsx @@ -21,12 +21,10 @@ import { msToString } from '../uiUtils'; export interface CallLogProps { log: CallLog[], - onHover: (callLog: CallLog | undefined, phase?: 'before' | 'after' | 'action') => void } export const CallLogView: React.FC = ({ log, - onHover, }) => { const messagesEndRef = React.createRef(); const [expandOverrides, setExpandOverrides] = React.useState>(new Map()); @@ -47,14 +45,10 @@ export const CallLogView: React.FC = ({ setExpandOverrides(newOverrides); }}> { callLog.title } - { callLog.params.url ? ({callLog.params.url}) : undefined } - { callLog.params.selector ? ({callLog.params.selector}) : undefined } + { callLog.params.url ? ({callLog.params.url}) : undefined } + { callLog.params.selector ? ({callLog.params.selector}) : undefined } { typeof callLog.duration === 'number' ? — {msToString(callLog.duration)} : undefined} - {
} - onHover(callLog, 'before')} onMouseLeave={() => onHover(undefined)}> - onHover(callLog, 'action')} onMouseLeave={() => onHover(undefined)}> - onHover(callLog, 'after')} onMouseLeave={() => onHover(undefined)}> { (isExpanded ? callLog.messages : []).map((message, i) => { return
diff --git a/src/web/recorder/recorder.tsx b/src/web/recorder/recorder.tsx index efc22558b00a2..019dbed497743 100644 --- a/src/web/recorder/recorder.tsx +++ b/src/web/recorder/recorder.tsx @@ -121,9 +121,7 @@ export const Recorder: React.FC = ({ window.dispatch({ event: 'selectorUpdated', params: { selector: event.target.value } }); }} /> - { - window.dispatch({ event: 'callLogHovered', params: { callLogId: callLog?.id, phase } }); - }}/> +
;