From 271aa75cf2685ff62932863c1b1eaf08b1898d1a Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 31 Jul 2019 11:36:01 -0700 Subject: [PATCH] Removed the Profiler screenshot capture feature This wasn't reliable because of browser extension API limitations and required serious throttling to avoid harming performance, so I've decided to just remove it entirely for now. --- OVERVIEW.md | 4 +- package.json | 1 - shells/browser/shared/src/background.js | 26 --------- shells/browser/shared/src/contentScript.js | 12 ---- shells/browser/shared/src/main.js | 11 ---- shells/dev/src/backend.js | 11 ---- shells/dev/src/devtools.js | 2 +- .../__snapshots__/profilingCache-test.js.snap | 36 ------------ src/backend/agent.js | 24 -------- src/bridge.js | 5 -- src/devtools/ProfilerStore.js | 49 ---------------- src/devtools/store.js | 31 ---------- .../views/Profiler/SidebarCommitInfo.css | 37 ------------ .../views/Profiler/SidebarCommitInfo.js | 56 +------------------ src/devtools/views/Profiler/types.js | 4 -- src/devtools/views/Profiler/utils.js | 9 --- .../views/Settings/ProfilerSettings.js | 49 +--------------- .../views/Settings/SettingsShared.css | 7 --- yarn.lock | 19 ------- 19 files changed, 5 insertions(+), 388 deletions(-) diff --git a/OVERVIEW.md b/OVERVIEW.md index f4f849096a..3cd314d888 100644 --- a/OVERVIEW.md +++ b/OVERVIEW.md @@ -262,6 +262,4 @@ Once profiling is finished, the frontend requests profiling data from the backen ### Importing/exporting data -Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as JSON), enabling profiling sessions to be shared between users. - -At the moment, screenshots are not included in the exported data (to keep the export filesize small) but this could be changed in the future. \ No newline at end of file +Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as JSON), enabling profiling sessions to be shared between users. \ No newline at end of file diff --git a/package.json b/package.json index a2615e14a2..cdfd58da14 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,6 @@ "flow-bin": "^0.103.0", "fs-extra": "^3.0.1", "gh-pages": "^1.0.0", - "html2canvas": "^1.0.0-alpha.12", "immutable": "3.7.6", "jest": "^24.7.1", "lerna": "^2.8.0", diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js index 1090ef76d8..e22071b3aa 100644 --- a/shells/browser/shared/src/background.js +++ b/shells/browser/shared/src/background.js @@ -109,31 +109,5 @@ chrome.runtime.onMessage.addListener((request, sender) => { setIconAndPopup(reactBuildType, sender.tab.id); } - - if (request.captureScreenshot) { - const { commitIndex, rootID } = request; - try { - chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => { - // TODO For some reason, sending a response using the third param (sendResponse) doesn't work, - // so we have to use the chrome.tabs API for this instead. - chrome.tabs.query({ active: true, currentWindow: true }, tabs => { - if (tabs.length > 0) { - chrome.tabs.sendMessage(tabs[0].id, { - event: 'screenshotCaptured', - payload: { - commitIndex, - dataURL, - rootID, - }, - }); - } - }); - }); - } catch (error) { - // Screen captures may not always be allowed. - // DevTools is robust enough to handle missing images in this case. - // See https://stackoverflow.com/questions/55504938 - } - } } }); diff --git a/shells/browser/shared/src/contentScript.js b/shells/browser/shared/src/contentScript.js index af4e328f0d..68a44e21af 100644 --- a/shells/browser/shared/src/contentScript.js +++ b/shells/browser/shared/src/contentScript.js @@ -75,15 +75,3 @@ if (!backendInitialized) { } }, 500); } - -chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { - if (request.event === 'screenshotCaptured') { - window.postMessage( - { - source: 'react-devtools-content-script', - payload: request, - }, - '*' - ); - } -}); diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js index 8263adab53..8ce8782216 100644 --- a/shells/browser/shared/src/main.js +++ b/shells/browser/shared/src/main.js @@ -97,16 +97,6 @@ function createPanelIfReactLoaded() { localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true'); chrome.devtools.inspectedWindow.eval('window.location.reload();'); }); - bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => { - chrome.runtime.sendMessage( - { - captureScreenshot: true, - commitIndex, - rootID, - }, - response => bridge.send('screenshotCaptured', response) - ); - }); bridge.addListener('syncSelectionToNativeElementsPanel', () => { setBrowserSelectionFromReact(); }); @@ -126,7 +116,6 @@ function createPanelIfReactLoaded() { store = new Store(bridge, { isProfiling, - supportsCaptureScreenshots: true, supportsReloadAndProfile: true, supportsProfiling, }); diff --git a/shells/dev/src/backend.js b/shells/dev/src/backend.js index 808230b82d..6d0af11c43 100644 --- a/shells/dev/src/backend.js +++ b/shells/dev/src/backend.js @@ -1,6 +1,5 @@ /** @flow */ -import html2canvas from 'html2canvas'; import Agent from 'src/backend/agent'; import Bridge from 'src/bridge'; import { initBackend } from 'src/backend'; @@ -21,16 +20,6 @@ const bridge = new Bridge({ }, }); -bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => { - html2canvas(document.body, { logging: false }).then(canvas => { - bridge.send('screenshotCaptured', { - commitIndex, - dataURL: canvas.toDataURL(), - rootID, - }); - }); -}); - const agent = new Agent(bridge); const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/shells/dev/src/devtools.js b/shells/dev/src/devtools.js index 5727856dd9..c8f5ba036f 100644 --- a/shells/dev/src/devtools.js +++ b/shells/dev/src/devtools.js @@ -67,7 +67,7 @@ inject('dist/app.js', () => { cb(bridge); - const store = new Store(bridge, { supportsCaptureScreenshots: true }); + const store = new Store(bridge); const root = createRoot(container); const batch = root.createBatch(); diff --git a/src/__tests__/__snapshots__/profilingCache-test.js.snap b/src/__tests__/__snapshots__/profilingCache-test.js.snap index 8485313a29..82438ada7c 100644 --- a/src/__tests__/__snapshots__/profilingCache-test.js.snap +++ b/src/__tests__/__snapshots__/profilingCache-test.js.snap @@ -40,7 +40,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 16, } `; @@ -78,7 +77,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 15, } `; @@ -105,7 +103,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 18, } `; @@ -159,7 +156,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 12, } `; @@ -215,7 +211,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 25, } `; @@ -253,7 +248,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 35, } `; @@ -282,7 +276,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 45, } `; @@ -382,7 +375,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 12, }, Object { @@ -477,7 +469,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 25, }, Object { @@ -536,7 +527,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 35, }, Object { @@ -577,7 +567,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 45, }, ], @@ -841,7 +830,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 11, }, Object { @@ -918,7 +906,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 22, }, Object { @@ -1013,7 +1000,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 35, }, ], @@ -1213,7 +1199,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 13, }, Object { @@ -1248,7 +1233,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 34, }, Object { @@ -1274,7 +1258,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 44, }, ], @@ -1443,7 +1426,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 24, }, ], @@ -1526,7 +1508,6 @@ Object { "fiberSelfDurations": Map {}, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 34, }, ], @@ -1688,7 +1669,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 13, }, Object { @@ -1747,7 +1727,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 34, }, Object { @@ -1788,7 +1767,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 44, }, ], @@ -2017,7 +1995,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 24, }, ], @@ -2097,7 +2074,6 @@ Object { "fiberSelfDurations": Array [], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 34, }, ], @@ -2249,7 +2225,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, } `; @@ -2320,7 +2295,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, } `; @@ -2387,7 +2361,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, } `; @@ -2455,7 +2428,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, } `; @@ -2522,7 +2494,6 @@ Object { }, "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, } `; @@ -2648,7 +2619,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, }, Object { @@ -2767,7 +2737,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, }, Object { @@ -2888,7 +2857,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, }, Object { @@ -3010,7 +2978,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, }, Object { @@ -3131,7 +3098,6 @@ Object { ], "interactionIDs": Array [], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 0, }, ], @@ -3445,7 +3411,6 @@ Object { 0, ], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 11, }, Object { @@ -3524,7 +3489,6 @@ Object { 1, ], "priorityLevel": "Immediate", - "screenshot": null, "timestamp": 22, }, ], diff --git a/src/backend/agent.js b/src/backend/agent.js index a711080827..fa2df90f73 100644 --- a/src/backend/agent.js +++ b/src/backend/agent.js @@ -113,7 +113,6 @@ export default class Agent extends EventEmitter<{| this._bridge = bridge; - bridge.addListener('captureScreenshot', this.captureScreenshot); bridge.addListener('getProfilingData', this.getProfilingData); bridge.addListener('getProfilingStatus', this.getProfilingStatus); bridge.addListener('getOwnersList', this.getOwnersList); @@ -125,7 +124,6 @@ export default class Agent extends EventEmitter<{| bridge.addListener('overrideState', this.overrideState); bridge.addListener('overrideSuspense', this.overrideSuspense); bridge.addListener('reloadAndProfile', this.reloadAndProfile); - bridge.addListener('screenshotCaptured', this.screenshotCaptured); bridge.addListener('selectElement', this.selectElement); bridge.addListener('startProfiling', this.startProfiling); bridge.addListener('stopProfiling', this.stopProfiling); @@ -161,16 +159,6 @@ export default class Agent extends EventEmitter<{| return this._rendererInterfaces; } - captureScreenshot = ({ - commitIndex, - rootID, - }: { - commitIndex: number, - rootID: number, - }) => { - this._bridge.send('captureScreenshot', { commitIndex, rootID }); - }; - getInstanceAndStyle({ id, rendererID, @@ -256,18 +244,6 @@ export default class Agent extends EventEmitter<{| this._bridge.send('reloadAppForProfiling'); }; - screenshotCaptured = ({ - commitIndex, - dataURL, - rootID, - }: {| - commitIndex: number, - dataURL: string, - rootID: number, - |}) => { - this._bridge.send('screenshotCaptured', { commitIndex, dataURL, rootID }); - }; - selectElement = ({ id, rendererID }: ElementAndRendererID) => { const renderer = this._rendererInterfaces[rendererID]; if (renderer == null) { diff --git a/src/bridge.js b/src/bridge.js index b8ab73e710..f9101e582b 100644 --- a/src/bridge.js +++ b/src/bridge.js @@ -63,7 +63,6 @@ type NativeStyleEditor_SetValueParams = {| |}; type BackendEvents = {| - captureScreenshot: [{| commitIndex: number, rootID: number |}], inspectedElement: [InspectedElementPayload], isBackendStorageAPISupported: [boolean], operations: [Array], @@ -72,9 +71,6 @@ type BackendEvents = {| profilingData: [ProfilingDataBackend], profilingStatus: [boolean], reloadAppForProfiling: [], - screenshotCaptured: [ - {| commitIndex: number, dataURL: string, rootID: number |}, - ], selectFiber: [number], shutdown: [], stopInspectingNative: [boolean], @@ -89,7 +85,6 @@ type BackendEvents = {| |}; type FrontendEvents = {| - captureScreenshot: [{| commitIndex: number, rootID: number |}], clearNativeElementHighlight: [], getOwnersList: [ElementAndRendererID], getProfilingData: [{| rendererID: RendererID |}], diff --git a/src/devtools/ProfilerStore.js b/src/devtools/ProfilerStore.js index eb79c41e65..103947ac8c 100644 --- a/src/devtools/ProfilerStore.js +++ b/src/devtools/ProfilerStore.js @@ -1,8 +1,6 @@ // @flow import EventEmitter from 'events'; -import memoize from 'memoize-one'; -import throttle from 'lodash.throttle'; import { prepareProfilingDataFrontendFromBackendAndStore } from './views/Profiler/utils'; import ProfilingCache from './ProfilingCache'; import Store from './store'; @@ -16,8 +14,6 @@ import type { SnapshotNode, } from './views/Profiler/types'; -const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500; - export default class ProfilerStore extends EventEmitter<{| isProcessingData: [], isProfiling: [], @@ -62,13 +58,6 @@ export default class ProfilerStore extends EventEmitter<{| // Upon completion, it is converted into the exportable ProfilingDataFrontend format. _inProgressOperationsByRootID: Map>> = new Map(); - // Map of root (id) to a Map of screenshots by commit ID. - // Stores screenshots for each commit (when profiling). - // - // This map is only updated while profiling is in progress; - // Upon completion, it is converted into the exportable ProfilingDataFrontend format. - _inProgressScreenshotsByRootID: Map> = new Map(); - // The backend is currently profiling. // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees. _isProfiling: boolean = false; @@ -164,7 +153,6 @@ export default class ProfilerStore extends EventEmitter<{| this._initialRendererIDs.clear(); this._initialSnapshotsByRootID.clear(); this._inProgressOperationsByRootID.clear(); - this._inProgressScreenshotsByRootID.clear(); this._cache.invalidate(); this.emit('profilingData'); @@ -176,7 +164,6 @@ export default class ProfilerStore extends EventEmitter<{| this._initialRendererIDs.clear(); this._initialSnapshotsByRootID.clear(); this._inProgressOperationsByRootID.clear(); - this._inProgressScreenshotsByRootID.clear(); this._rendererQueue.clear(); // Invalidate suspense cache if profiling data is being (re-)recorded. @@ -204,13 +191,6 @@ export default class ProfilerStore extends EventEmitter<{| // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors. } - _captureScreenshot = throttle( - memoize((rootID: number, commitIndex: number) => { - this._bridge.send('captureScreenshot', { commitIndex, rootID }); - }), - THROTTLE_CAPTURE_SCREENSHOT_DURATION - ); - _takeProfilingSnapshotRecursive = ( elementID: number, profilingSnapshots: Map @@ -253,11 +233,6 @@ export default class ProfilerStore extends EventEmitter<{| if (!this._initialSnapshotsByRootID.has(rootID)) { this._initialSnapshotsByRootID.set(rootID, new Map()); } - - if (this._store.captureScreenshots) { - const commitIndex = profilingOperations.length - 1; - this._captureScreenshot(rootID, commitIndex); - } } }; @@ -282,7 +257,6 @@ export default class ProfilerStore extends EventEmitter<{| this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore( this._dataBackends, this._inProgressOperationsByRootID, - this._inProgressScreenshotsByRootID, this._initialSnapshotsByRootID ); @@ -306,7 +280,6 @@ export default class ProfilerStore extends EventEmitter<{| this._initialRendererIDs.clear(); this._initialSnapshotsByRootID.clear(); this._inProgressOperationsByRootID.clear(); - this._inProgressScreenshotsByRootID.clear(); this._rendererQueue.clear(); // Record all renderer IDs initially too (in case of unmount) @@ -354,26 +327,4 @@ export default class ProfilerStore extends EventEmitter<{| } } }; - - onScreenshotCaptured = ({ - commitIndex, - dataURL, - rootID, - }: {| - commitIndex: number, - dataURL: string, - rootID: number, - |}) => { - let screenshotsForRootByCommitIndex = this._inProgressScreenshotsByRootID.get( - rootID - ); - if (!screenshotsForRootByCommitIndex) { - screenshotsForRootByCommitIndex = new Map(); - this._inProgressScreenshotsByRootID.set( - rootID, - screenshotsForRootByCommitIndex - ); - } - screenshotsForRootByCommitIndex.set(commitIndex, dataURL); - }; } diff --git a/src/devtools/store.js b/src/devtools/store.js index adaccfe24b..41db44634f 100644 --- a/src/devtools/store.js +++ b/src/devtools/store.js @@ -36,8 +36,6 @@ const debug = (methodName, ...args) => { } }; -const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY = - 'React::DevTools::captureScreenshots'; const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY = 'React::DevTools::collapseNodesByDefault'; const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY = @@ -45,7 +43,6 @@ const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY = type Config = {| isProfiling?: boolean, - supportsCaptureScreenshots?: boolean, supportsNativeInspection?: boolean, supportsReloadAndProfile?: boolean, supportsProfiling?: boolean, @@ -61,7 +58,6 @@ export type Capabilities = {| * ContextProviders can subscribe to the Store for specific things they want to provide. */ export default class Store extends EventEmitter<{| - captureScreenshots: [], collapseNodesByDefault: [], componentFilters: [], mutated: [[Array, Map]], @@ -73,8 +69,6 @@ export default class Store extends EventEmitter<{| |}> { _bridge: FrontendBridge; - _captureScreenshots: boolean = false; - // Should new nodes be collapsed by default when added to the tree? _collapseNodesByDefault: boolean = true; @@ -120,7 +114,6 @@ export default class Store extends EventEmitter<{| // These options may be initially set by a confiugraiton option when constructing the Store. // In the case of "supportsProfiling", the option may be updated based on the injected renderers. - _supportsCaptureScreenshots: boolean = false; _supportsNativeInspection: boolean = false; _supportsProfiling: boolean = false; _supportsReloadAndProfile: boolean = false; @@ -151,16 +144,10 @@ export default class Store extends EventEmitter<{| isProfiling = config.isProfiling === true; const { - supportsCaptureScreenshots, supportsNativeInspection, supportsProfiling, supportsReloadAndProfile, } = config; - if (supportsCaptureScreenshots) { - this._supportsCaptureScreenshots = true; - this._captureScreenshots = - localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true'; - } this._supportsNativeInspection = supportsNativeInspection !== false; if (supportsProfiling) { this._supportsProfiling = true; @@ -222,20 +209,6 @@ export default class Store extends EventEmitter<{| } } - get captureScreenshots(): boolean { - return this._captureScreenshots; - } - set captureScreenshots(value: boolean): void { - this._captureScreenshots = value; - - localStorageSetItem( - LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY, - value ? 'true' : 'false' - ); - - this.emit('captureScreenshots'); - } - get collapseNodesByDefault(): boolean { return this._collapseNodesByDefault; } @@ -338,10 +311,6 @@ export default class Store extends EventEmitter<{| return this._roots; } - get supportsCaptureScreenshots(): boolean { - return this._supportsCaptureScreenshots; - } - get supportsNativeInspection(): boolean { return this._supportsNativeInspection; } diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css index 6a835e64a2..c0564e0d8c 100644 --- a/src/devtools/views/Profiler/SidebarCommitInfo.css +++ b/src/devtools/views/Profiler/SidebarCommitInfo.css @@ -63,40 +63,3 @@ height: 100%; color: var(--color-dim); } - -.Screenshot { - width: 100%; - border: 1px solid var(--color-border); - border-radius: 0.25rem; - cursor: pointer; -} - -.Modal { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--color-modal-background); - padding: 0.5rem; -} - -.ModalImage { - max-height: 100%; - max-width: 100%; - border: 1px solid var(--color-border); - border-radius: 0.5rem; -} - -.NoScreenshot { - width: 100%; - height: 200px; - background-color: var(--color-button-background-focus); - border-radius: 0.25rem; - display: flex; - align-items: center; - justify-content: center; -} diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js index f4b7ea9a24..527d0ebffa 100644 --- a/src/devtools/views/Profiler/SidebarCommitInfo.js +++ b/src/devtools/views/Profiler/SidebarCommitInfo.js @@ -1,6 +1,6 @@ // @flow -import React, { Fragment, useCallback, useContext, useState } from 'react'; +import React, { Fragment, useContext } from 'react'; import { ProfilerContext } from './ProfilerContext'; import { formatDuration, formatTime } from './utils'; import { StoreContext } from '../context'; @@ -17,21 +17,7 @@ export default function SidebarCommitInfo(_: Props) { selectTab, } = useContext(ProfilerContext); - const { captureScreenshots, profilerStore } = useContext(StoreContext); - - const [ - isScreenshotModalVisible, - setIsScreenshotModalVisible, - ] = useState(false); - - const hideScreenshotModal = useCallback( - () => setIsScreenshotModalVisible(false), - [] - ); - const showScreenshotModal = useCallback( - () => setIsScreenshotModalVisible(true), - [] - ); + const { profilerStore } = useContext(StoreContext); if (rootID === null || selectedCommitIndex === null) { return
Nothing selected
; @@ -42,7 +28,6 @@ export default function SidebarCommitInfo(_: Props) { duration, interactionIDs, priorityLevel, - screenshot, timestamp, } = profilerStore.getCommitData(rootID, selectedCommitIndex); @@ -93,45 +78,8 @@ export default function SidebarCommitInfo(_: Props) { })} - {captureScreenshots && ( -
  • - : - {screenshot != null ? ( - Screenshot - ) : ( -
    - No screenshot available -
    - )} -
    • - )} - {screenshot != null && isScreenshotModalVisible && ( - - )} ); } - -function ScreenshotModal({ - hideScreenshotModal, - screenshot, -}: {| - hideScreenshotModal: Function, - screenshot: string, -|}) { - return ( -
    - Screenshot -
    - ); -} diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js index b6c2fcc2fd..d8c954e5b7 100644 --- a/src/devtools/views/Profiler/types.js +++ b/src/devtools/views/Profiler/types.js @@ -60,9 +60,6 @@ export type CommitDataFrontend = {| // Priority level of the commit (if React provided this info) priorityLevel: string | null, - // Screenshot data for this commit (if available). - screenshot: string | null, - // When did this commit occur (relative to the start of profiling) timestamp: number, |}; @@ -112,7 +109,6 @@ export type CommitDataExport = {| fiberSelfDurations: Array<[number, number]>, interactionIDs: Array, priorityLevel: string | null, - screenshot: string | null, timestamp: number, |}; diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js index e0f1dcdd83..973d5ba2d5 100644 --- a/src/devtools/views/Profiler/utils.js +++ b/src/devtools/views/Profiler/utils.js @@ -29,7 +29,6 @@ const commitGradient = [ export function prepareProfilingDataFrontendFromBackendAndStore( dataBackends: Array, operationsByRootID: Map>>, - screenshotsByRootID: Map>, snapshotsByRootID: Map> ): ProfilingDataFrontend { const dataForRoots: Map = new Map(); @@ -44,8 +43,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore( interactions, rootID, }) => { - const screenshots = screenshotsByRootID.get(rootID) || null; - const operations = operationsByRootID.get(rootID); if (operations == null) { throw Error(`Could not find profiling operations for root ${rootID}`); @@ -69,8 +66,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore( fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations), interactionIDs: commitDataBackend.interactionIDs, priorityLevel: commitDataBackend.priorityLevel, - screenshot: - (screenshots !== null && screenshots.get(commitIndex)) || null, timestamp: commitDataBackend.timestamp, })), displayName, @@ -119,7 +114,6 @@ export function prepareProfilingDataFrontendFromExport( fiberSelfDurations, interactionIDs, priorityLevel, - screenshot, timestamp, }) => ({ changeDescriptions: @@ -129,7 +123,6 @@ export function prepareProfilingDataFrontendFromExport( fiberSelfDurations: new Map(fiberSelfDurations), interactionIDs, priorityLevel, - screenshot, timestamp, }) ), @@ -172,7 +165,6 @@ export function prepareProfilingDataExport( fiberSelfDurations, interactionIDs, priorityLevel, - screenshot, timestamp, }) => ({ changeDescriptions: @@ -184,7 +176,6 @@ export function prepareProfilingDataExport( fiberSelfDurations: Array.from(fiberSelfDurations.entries()), interactionIDs, priorityLevel, - screenshot, timestamp, }) ), diff --git a/src/devtools/views/Settings/ProfilerSettings.js b/src/devtools/views/Settings/ProfilerSettings.js index a52597d2eb..b13f7ad6e8 100644 --- a/src/devtools/views/Settings/ProfilerSettings.js +++ b/src/devtools/views/Settings/ProfilerSettings.js @@ -1,12 +1,6 @@ // @flow -import React, { - Fragment, - useCallback, - useContext, - useMemo, - useRef, -} from 'react'; +import React, { useCallback, useContext, useMemo, useRef } from 'react'; import { useSubscription } from '../hooks'; import { StoreContext } from '../context'; import { ProfilerContext } from 'src/devtools/views/Profiler/ProfilerContext'; @@ -23,20 +17,6 @@ export default function ProfilerSettings(_: {||}) { } = useContext(ProfilerContext); const store = useContext(StoreContext); - const captureScreenshotsSubscription = useMemo( - () => ({ - getCurrentValue: () => store.captureScreenshots, - subscribe: (callback: Function) => { - store.addListener('captureScreenshots', callback); - return () => store.removeListener('captureScreenshots', callback); - }, - }), - [store] - ); - const captureScreenshots = useSubscription( - captureScreenshotsSubscription - ); - const recordChangeDescriptionsSubscription = useMemo( () => ({ getCurrentValue: () => store.recordChangeDescriptions, @@ -51,12 +31,6 @@ export default function ProfilerSettings(_: {||}) { recordChangeDescriptionsSubscription ); - const updateCaptureScreenshotsWhileProfiling = useCallback( - ({ currentTarget }) => { - store.captureScreenshots = currentTarget.checked; - }, - [store] - ); const updateRecordChangeDescriptions = useCallback( ({ currentTarget }) => { store.recordChangeDescriptions = currentTarget.checked; @@ -118,27 +92,6 @@ export default function ProfilerSettings(_: {||}) { />{' '} (ms) - - {store.supportsCaptureScreenshots && ( - -
    - -
    - {captureScreenshots && ( -
    - Screenshots will be throttled in order to reduce the negative - impact on performance. -
    - )} -     - )} ); } diff --git a/src/devtools/views/Settings/SettingsShared.css b/src/devtools/views/Settings/SettingsShared.css index cafbe1bede..bcdc427668 100644 --- a/src/devtools/views/Settings/SettingsShared.css +++ b/src/devtools/views/Settings/SettingsShared.css @@ -38,13 +38,6 @@ padding: 0 0 0.5rem; } -.ScreenshotThrottling { - display: inline-block; - background-color: var(--color-background-hover); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; -} - .HRule { height: 1px; background-color: var(--color-border); diff --git a/yarn.lock b/yarn.lock index 3f8a3dd8fe..86531c672e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2414,11 +2414,6 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= -base64-arraybuffer@^0.1.5: - version "0.1.5" - resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8" - integrity sha1-c5JncZI7Whl0etZmqlzUv5xunOg= - base64-js@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978" @@ -3788,13 +3783,6 @@ css-in-js-utils@^2.0.0: hyphenate-style-name "^1.0.2" isobject "^3.0.1" -css-line-break@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a" - integrity sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo= - dependencies: - base64-arraybuffer "^0.1.5" - css-loader@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe" @@ -6262,13 +6250,6 @@ html-entities@^1.2.1: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f" integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8= -html2canvas@^1.0.0-alpha.12: - version "1.0.0-alpha.12" - resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz#3b1992e3c9b3f56063c35fd620494f37eba88513" - integrity sha1-OxmS48mz9WBjw1/WIElPN+uohRM= - dependencies: - css-line-break "1.0.1" - htmlparser2@^3.9.1: version "3.10.1" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"