maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Brian Vaughn 2019-07-31 11:36:01 -07:00
parent 4f8b7864ee
commit 271aa75cf2
19 changed files with 5 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
OVERVIEW.md
View File

@ -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.
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.

1
package.json
View File

@ -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",

26
shells/browser/shared/src/background.js
View File

@ -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
}
}
}
});

12
shells/browser/shared/src/contentScript.js
View File

@ -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,
},
'*'
);
}
});

11
shells/browser/shared/src/main.js
View File

@ -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,
});

11
shells/dev/src/backend.js
View File

@ -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__;

2
shells/dev/src/devtools.js
View File

@ -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();

36
src/__tests__/__snapshots__/profilingCache-test.js.snap
View File

@ -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,
},
],

24
src/backend/agent.js
View File

@ -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) {

5
src/bridge.js
View File

@ -63,7 +63,6 @@ type NativeStyleEditor_SetValueParams = {|
|};
type BackendEvents = {|
captureScreenshot: [{| commitIndex: number, rootID: number |}],
inspectedElement: [InspectedElementPayload],
isBackendStorageAPISupported: [boolean],
operations: [Array<number>],
@ -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 |}],

49
src/devtools/ProfilerStore.js
View File

@ -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<number, Array<Array<number>>> = 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<number, Map<number, string>> = 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<number, SnapshotNode>
@ -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);
};
}

31
src/devtools/store.js
View File

@ -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<number>, Map<number, number>]],
@ -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;
}

37
src/devtools/views/Profiler/SidebarCommitInfo.css
View File

@ -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;
}

56
src/devtools/views/Profiler/SidebarCommitInfo.js
View File

@ -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<boolean>(false);
const hideScreenshotModal = useCallback(
() => setIsScreenshotModalVisible(false),
[]
);
const showScreenshotModal = useCallback(
() => setIsScreenshotModalVisible(true),
[]
);
const { profilerStore } = useContext(StoreContext);
if (rootID === null || selectedCommitIndex === null) {
return <div className={styles.NothingSelected}>Nothing selected</div>;
@ -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) {
})}
</div>
</li>
{captureScreenshots && (
<li>
<label className={styles.Label}>Screenshot</label>:
{screenshot != null ? (
<img
alt="Screenshot"
className={styles.Screenshot}
onClick={showScreenshotModal}
src={screenshot}
/>
) : (
<div className={styles.NoScreenshot}>
No screenshot available
</div>
)}
</li>
)}
{screenshot != null && isScreenshotModalVisible && (
<ScreenshotModal
hideScreenshotModal={hideScreenshotModal}
screenshot={screenshot}
/>
)}
</ul>
</div>
</Fragment>
);
}
function ScreenshotModal({
hideScreenshotModal,
screenshot,
}: {|
hideScreenshotModal: Function,
screenshot: string,
|}) {
return (
<div className={styles.Modal} onClick={hideScreenshotModal}>
<img alt="Screenshot" className={styles.ModalImage} src={screenshot} />
</div>
);
}

4
src/devtools/views/Profiler/types.js
View File

@ -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<number>,
priorityLevel: string | null,
screenshot: string | null,
timestamp: number,
|};

9
src/devtools/views/Profiler/utils.js
View File

@ -29,7 +29,6 @@ const commitGradient = [
export function prepareProfilingDataFrontendFromBackendAndStore(
dataBackends: Array<ProfilingDataBackend>,
operationsByRootID: Map<number, Array<Array<number>>>,
screenshotsByRootID: Map<number, Map<number, string>>,
snapshotsByRootID: Map<number, Map<number, SnapshotNode>>
): ProfilingDataFrontend {
const dataForRoots: Map<number, ProfilingDataForRootFrontend> = 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,
})
),

49
src/devtools/views/Settings/ProfilerSettings.js
View File

@ -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<boolean, Store>(
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)
</div>
{store.supportsCaptureScreenshots && (
<Fragment>
<div className={styles.Setting}>
<label>
<input
type="checkbox"
checked={captureScreenshots}
onChange={updateCaptureScreenshotsWhileProfiling}
/>{' '}
Capture screenshots while profiling
</label>
</div>
{captureScreenshots && (
<div className={styles.ScreenshotThrottling}>
Screenshots will be throttled in order to reduce the negative
impact on performance.
</div>
)}
</Fragment>
)}
</div>
);
}

7
src/devtools/views/Settings/SettingsShared.css
View File

@ -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);

19
yarn.lock
View File

@ -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"