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"