@samitouri / QOS-React-2 / commits / 271aa75cf2

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.

Brian Vaughn committed Jul 31, 2019 at 11:36 UTC 271aa75cf2685ff62932863c1b1eaf08b1898d1a
19 files changed +5 -388
OVERVIEW.md
+1 -3
@@ -262,6 +262,4 @@ Once profiling is finished, the frontend requests profiling data from the backen
262
263 ### Importing/exporting data
264
265 -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.
266 -
267 -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
265 +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
package.json
-1
@@ -122,7 +122,6 @@
122 "flow-bin": "^0.103.0",
123 "fs-extra": "^3.0.1",
124 "gh-pages": "^1.0.0",
125 - "html2canvas": "^1.0.0-alpha.12",
125 "immutable": "3.7.6",
126 "jest": "^24.7.1",
127 "lerna": "^2.8.0",
shells/browser/shared/src/background.js
-26
@@ -109,31 +109,5 @@ chrome.runtime.onMessage.addListener((request, sender) => {
109
110 setIconAndPopup(reactBuildType, sender.tab.id);
111 }
112 -
113 - if (request.captureScreenshot) {
114 - const { commitIndex, rootID } = request;
115 - try {
116 - chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => {
117 - // TODO For some reason, sending a response using the third param (sendResponse) doesn't work,
118 - // so we have to use the chrome.tabs API for this instead.
119 - chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
120 - if (tabs.length > 0) {
121 - chrome.tabs.sendMessage(tabs[0].id, {
122 - event: 'screenshotCaptured',
123 - payload: {
124 - commitIndex,
125 - dataURL,
126 - rootID,
127 - },
128 - });
129 - }
130 - });
131 - });
132 - } catch (error) {
133 - // Screen captures may not always be allowed.
134 - // DevTools is robust enough to handle missing images in this case.
135 - // See https://stackoverflow.com/questions/55504938
136 - }
137 - }
112 }
113 });
shells/browser/shared/src/contentScript.js
-12
@@ -75,15 +75,3 @@ if (!backendInitialized) {
75 }
76 }, 500);
77 }
78 -
79 -chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
80 - if (request.event === 'screenshotCaptured') {
81 - window.postMessage(
82 - {
83 - source: 'react-devtools-content-script',
84 - payload: request,
85 - },
86 - '*'
87 - );
88 - }
89 -});
shells/browser/shared/src/main.js
-11
@@ -97,16 +97,6 @@ function createPanelIfReactLoaded() {
97 localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
98 chrome.devtools.inspectedWindow.eval('window.location.reload();');
99 });
100 - bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
101 - chrome.runtime.sendMessage(
102 - {
103 - captureScreenshot: true,
104 - commitIndex,
105 - rootID,
106 - },
107 - response => bridge.send('screenshotCaptured', response)
108 - );
109 - });
100 bridge.addListener('syncSelectionToNativeElementsPanel', () => {
101 setBrowserSelectionFromReact();
102 });
@@ -126,7 +116,6 @@ function createPanelIfReactLoaded() {
116
117 store = new Store(bridge, {
118 isProfiling,
129 - supportsCaptureScreenshots: true,
119 supportsReloadAndProfile: true,
120 supportsProfiling,
121 });
shells/dev/src/backend.js
-11
@@ -1,6 +1,5 @@
1 /** @flow */
2
3 -import html2canvas from 'html2canvas';
3 import Agent from 'src/backend/agent';
4 import Bridge from 'src/bridge';
5 import { initBackend } from 'src/backend';
@@ -21,16 +20,6 @@ const bridge = new Bridge({
20 },
21 });
22
24 -bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
25 - html2canvas(document.body, { logging: false }).then(canvas => {
26 - bridge.send('screenshotCaptured', {
27 - commitIndex,
28 - dataURL: canvas.toDataURL(),
29 - rootID,
30 - });
31 - });
32 -});
33 -
23 const agent = new Agent(bridge);
24
25 const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
shells/dev/src/devtools.js
+1 -1
@@ -67,7 +67,7 @@ inject('dist/app.js', () => {
67
68 cb(bridge);
69
70 - const store = new Store(bridge, { supportsCaptureScreenshots: true });
70 + const store = new Store(bridge);
71
72 const root = createRoot(container);
73 const batch = root.createBatch();
src/__tests__/__snapshots__/profilingCache-test.js.snap
-36
@@ -40,7 +40,6 @@ Object {
40 },
41 "interactionIDs": Array [],
42 "priorityLevel": "Immediate",
43 - "screenshot": null,
43 "timestamp": 16,
44 }
45 `;
@@ -78,7 +77,6 @@ Object {
77 },
78 "interactionIDs": Array [],
79 "priorityLevel": "Immediate",
81 - "screenshot": null,
80 "timestamp": 15,
81 }
82 `;
@@ -105,7 +103,6 @@ Object {
103 },
104 "interactionIDs": Array [],
105 "priorityLevel": "Immediate",
108 - "screenshot": null,
106 "timestamp": 18,
107 }
108 `;
@@ -159,7 +156,6 @@ Object {
156 },
157 "interactionIDs": Array [],
158 "priorityLevel": "Immediate",
162 - "screenshot": null,
159 "timestamp": 12,
160 }
161 `;
@@ -215,7 +211,6 @@ Object {
211 },
212 "interactionIDs": Array [],
213 "priorityLevel": "Immediate",
218 - "screenshot": null,
214 "timestamp": 25,
215 }
216 `;
@@ -253,7 +248,6 @@ Object {
248 },
249 "interactionIDs": Array [],
250 "priorityLevel": "Immediate",
256 - "screenshot": null,
251 "timestamp": 35,
252 }
253 `;
@@ -282,7 +276,6 @@ Object {
276 },
277 "interactionIDs": Array [],
278 "priorityLevel": "Immediate",
285 - "screenshot": null,
279 "timestamp": 45,
280 }
281 `;
@@ -382,7 +375,6 @@ Object {
375 ],
376 "interactionIDs": Array [],
377 "priorityLevel": "Immediate",
385 - "screenshot": null,
378 "timestamp": 12,
379 },
380 Object {
@@ -477,7 +469,6 @@ Object {
469 ],
470 "interactionIDs": Array [],
471 "priorityLevel": "Immediate",
480 - "screenshot": null,
472 "timestamp": 25,
473 },
474 Object {
@@ -536,7 +527,6 @@ Object {
527 ],
528 "interactionIDs": Array [],
529 "priorityLevel": "Immediate",
539 - "screenshot": null,
530 "timestamp": 35,
531 },
532 Object {
@@ -577,7 +567,6 @@ Object {
567 ],
568 "interactionIDs": Array [],
569 "priorityLevel": "Immediate",
580 - "screenshot": null,
570 "timestamp": 45,
571 },
572 ],
@@ -841,7 +830,6 @@ Object {
830 ],
831 "interactionIDs": Array [],
832 "priorityLevel": "Immediate",
844 - "screenshot": null,
833 "timestamp": 11,
834 },
835 Object {
@@ -918,7 +906,6 @@ Object {
906 ],
907 "interactionIDs": Array [],
908 "priorityLevel": "Immediate",
921 - "screenshot": null,
909 "timestamp": 22,
910 },
911 Object {
@@ -1013,7 +1000,6 @@ Object {
1000 ],
1001 "interactionIDs": Array [],
1002 "priorityLevel": "Immediate",
1016 - "screenshot": null,
1003 "timestamp": 35,
1004 },
1005 ],
@@ -1213,7 +1199,6 @@ Object {
1199 },
1200 "interactionIDs": Array [],
1201 "priorityLevel": "Immediate",
1216 - "screenshot": null,
1202 "timestamp": 13,
1203 },
1204 Object {
@@ -1248,7 +1233,6 @@ Object {
1233 },
1234 "interactionIDs": Array [],
1235 "priorityLevel": "Immediate",
1251 - "screenshot": null,
1236 "timestamp": 34,
1237 },
1238 Object {
@@ -1274,7 +1258,6 @@ Object {
1258 },
1259 "interactionIDs": Array [],
1260 "priorityLevel": "Immediate",
1277 - "screenshot": null,
1261 "timestamp": 44,
1262 },
1263 ],
@@ -1443,7 +1426,6 @@ Object {
1426 },
1427 "interactionIDs": Array [],
1428 "priorityLevel": "Immediate",
1446 - "screenshot": null,
1429 "timestamp": 24,
1430 },
1431 ],
@@ -1526,7 +1508,6 @@ Object {
1508 "fiberSelfDurations": Map {},
1509 "interactionIDs": Array [],
1510 "priorityLevel": "Immediate",
1529 - "screenshot": null,
1511 "timestamp": 34,
1512 },
1513 ],
@@ -1688,7 +1669,6 @@ Object {
1669 ],
1670 "interactionIDs": Array [],
1671 "priorityLevel": "Immediate",
1691 - "screenshot": null,
1672 "timestamp": 13,
1673 },
1674 Object {
@@ -1747,7 +1727,6 @@ Object {
1727 ],
1728 "interactionIDs": Array [],
1729 "priorityLevel": "Immediate",
1750 - "screenshot": null,
1730 "timestamp": 34,
1731 },
1732 Object {
@@ -1788,7 +1767,6 @@ Object {
1767 ],
1768 "interactionIDs": Array [],
1769 "priorityLevel": "Immediate",
1791 - "screenshot": null,
1770 "timestamp": 44,
1771 },
1772 ],
@@ -2017,7 +1995,6 @@ Object {
1995 ],
1996 "interactionIDs": Array [],
1997 "priorityLevel": "Immediate",
2020 - "screenshot": null,
1998 "timestamp": 24,
1999 },
2000 ],
@@ -2097,7 +2074,6 @@ Object {
2074 "fiberSelfDurations": Array [],
2075 "interactionIDs": Array [],
2076 "priorityLevel": "Immediate",
2100 - "screenshot": null,
2077 "timestamp": 34,
2078 },
2079 ],
@@ -2249,7 +2225,6 @@ Object {
2225 },
2226 "interactionIDs": Array [],
2227 "priorityLevel": "Immediate",
2252 - "screenshot": null,
2228 "timestamp": 0,
2229 }
2230 `;
@@ -2320,7 +2295,6 @@ Object {
2295 },
2296 "interactionIDs": Array [],
2297 "priorityLevel": "Immediate",
2323 - "screenshot": null,
2298 "timestamp": 0,
2299 }
2300 `;
@@ -2387,7 +2361,6 @@ Object {
2361 },
2362 "interactionIDs": Array [],
2363 "priorityLevel": "Immediate",
2390 - "screenshot": null,
2364 "timestamp": 0,
2365 }
2366 `;
@@ -2455,7 +2428,6 @@ Object {
2428 },
2429 "interactionIDs": Array [],
2430 "priorityLevel": "Immediate",
2458 - "screenshot": null,
2431 "timestamp": 0,
2432 }
2433 `;
@@ -2522,7 +2494,6 @@ Object {
2494 },
2495 "interactionIDs": Array [],
2496 "priorityLevel": "Immediate",
2525 - "screenshot": null,
2497 "timestamp": 0,
2498 }
2499 `;
@@ -2648,7 +2619,6 @@ Object {
2619 ],
2620 "interactionIDs": Array [],
2621 "priorityLevel": "Immediate",
2651 - "screenshot": null,
2622 "timestamp": 0,
2623 },
2624 Object {
@@ -2767,7 +2737,6 @@ Object {
2737 ],
2738 "interactionIDs": Array [],
2739 "priorityLevel": "Immediate",
2770 - "screenshot": null,
2740 "timestamp": 0,
2741 },
2742 Object {
@@ -2888,7 +2857,6 @@ Object {
2857 ],
2858 "interactionIDs": Array [],
2859 "priorityLevel": "Immediate",
2891 - "screenshot": null,
2860 "timestamp": 0,
2861 },
2862 Object {
@@ -3010,7 +2978,6 @@ Object {
2978 ],
2979 "interactionIDs": Array [],
2980 "priorityLevel": "Immediate",
3013 - "screenshot": null,
2981 "timestamp": 0,
2982 },
2983 Object {
@@ -3131,7 +3098,6 @@ Object {
3098 ],
3099 "interactionIDs": Array [],
3100 "priorityLevel": "Immediate",
3134 - "screenshot": null,
3101 "timestamp": 0,
3102 },
3103 ],
@@ -3445,7 +3411,6 @@ Object {
3411 0,
3412 ],
3413 "priorityLevel": "Immediate",
3448 - "screenshot": null,
3414 "timestamp": 11,
3415 },
3416 Object {
@@ -3524,7 +3489,6 @@ Object {
3489 1,
3490 ],
3491 "priorityLevel": "Immediate",
3527 - "screenshot": null,
3492 "timestamp": 22,
3493 },
3494 ],
src/backend/agent.js
-24
@@ -113,7 +113,6 @@ export default class Agent extends EventEmitter<{|
113
114 this._bridge = bridge;
115
116 - bridge.addListener('captureScreenshot', this.captureScreenshot);
116 bridge.addListener('getProfilingData', this.getProfilingData);
117 bridge.addListener('getProfilingStatus', this.getProfilingStatus);
118 bridge.addListener('getOwnersList', this.getOwnersList);
@@ -125,7 +124,6 @@ export default class Agent extends EventEmitter<{|
124 bridge.addListener('overrideState', this.overrideState);
125 bridge.addListener('overrideSuspense', this.overrideSuspense);
126 bridge.addListener('reloadAndProfile', this.reloadAndProfile);
128 - bridge.addListener('screenshotCaptured', this.screenshotCaptured);
127 bridge.addListener('selectElement', this.selectElement);
128 bridge.addListener('startProfiling', this.startProfiling);
129 bridge.addListener('stopProfiling', this.stopProfiling);
@@ -161,16 +159,6 @@ export default class Agent extends EventEmitter<{|
159 return this._rendererInterfaces;
160 }
161
164 - captureScreenshot = ({
165 - commitIndex,
166 - rootID,
167 - }: {
168 - commitIndex: number,
169 - rootID: number,
170 - }) => {
171 - this._bridge.send('captureScreenshot', { commitIndex, rootID });
172 - };
173 -
162 getInstanceAndStyle({
163 id,
164 rendererID,
@@ -256,18 +244,6 @@ export default class Agent extends EventEmitter<{|
244 this._bridge.send('reloadAppForProfiling');
245 };
246
259 - screenshotCaptured = ({
260 - commitIndex,
261 - dataURL,
262 - rootID,
263 - }: {|
264 - commitIndex: number,
265 - dataURL: string,
266 - rootID: number,
267 - |}) => {
268 - this._bridge.send('screenshotCaptured', { commitIndex, dataURL, rootID });
269 - };
270 -
247 selectElement = ({ id, rendererID }: ElementAndRendererID) => {
248 const renderer = this._rendererInterfaces[rendererID];
249 if (renderer == null) {
src/bridge.js
-5
@@ -63,7 +63,6 @@ type NativeStyleEditor_SetValueParams = {|
63 |};
64
65 type BackendEvents = {|
66 - captureScreenshot: [{| commitIndex: number, rootID: number |}],
66 inspectedElement: [InspectedElementPayload],
67 isBackendStorageAPISupported: [boolean],
68 operations: [Array<number>],
@@ -72,9 +71,6 @@ type BackendEvents = {|
71 profilingData: [ProfilingDataBackend],
72 profilingStatus: [boolean],
73 reloadAppForProfiling: [],
75 - screenshotCaptured: [
76 - {| commitIndex: number, dataURL: string, rootID: number |},
77 - ],
74 selectFiber: [number],
75 shutdown: [],
76 stopInspectingNative: [boolean],
@@ -89,7 +85,6 @@ type BackendEvents = {|
85 |};
86
87 type FrontendEvents = {|
92 - captureScreenshot: [{| commitIndex: number, rootID: number |}],
88 clearNativeElementHighlight: [],
89 getOwnersList: [ElementAndRendererID],
90 getProfilingData: [{| rendererID: RendererID |}],
src/devtools/ProfilerStore.js
-49
@@ -1,8 +1,6 @@
1 // @flow
2
3 import EventEmitter from 'events';
4 -import memoize from 'memoize-one';
5 -import throttle from 'lodash.throttle';
4 import { prepareProfilingDataFrontendFromBackendAndStore } from './views/Profiler/utils';
5 import ProfilingCache from './ProfilingCache';
6 import Store from './store';
@@ -16,8 +14,6 @@ import type {
14 SnapshotNode,
15 } from './views/Profiler/types';
16
19 -const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;
20 -
17 export default class ProfilerStore extends EventEmitter<{|
18 isProcessingData: [],
19 isProfiling: [],
@@ -62,13 +58,6 @@ export default class ProfilerStore extends EventEmitter<{|
58 // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
59 _inProgressOperationsByRootID: Map<number, Array<Array<number>>> = new Map();
60
65 - // Map of root (id) to a Map of screenshots by commit ID.
66 - // Stores screenshots for each commit (when profiling).
67 - //
68 - // This map is only updated while profiling is in progress;
69 - // Upon completion, it is converted into the exportable ProfilingDataFrontend format.
70 - _inProgressScreenshotsByRootID: Map<number, Map<number, string>> = new Map();
71 -
61 // The backend is currently profiling.
62 // When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.
63 _isProfiling: boolean = false;
@@ -164,7 +153,6 @@ export default class ProfilerStore extends EventEmitter<{|
153 this._initialRendererIDs.clear();
154 this._initialSnapshotsByRootID.clear();
155 this._inProgressOperationsByRootID.clear();
167 - this._inProgressScreenshotsByRootID.clear();
156 this._cache.invalidate();
157
158 this.emit('profilingData');
@@ -176,7 +164,6 @@ export default class ProfilerStore extends EventEmitter<{|
164 this._initialRendererIDs.clear();
165 this._initialSnapshotsByRootID.clear();
166 this._inProgressOperationsByRootID.clear();
179 - this._inProgressScreenshotsByRootID.clear();
167 this._rendererQueue.clear();
168
169 // Invalidate suspense cache if profiling data is being (re-)recorded.
@@ -204,13 +191,6 @@ export default class ProfilerStore extends EventEmitter<{|
191 // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
192 }
193
207 - _captureScreenshot = throttle(
208 - memoize((rootID: number, commitIndex: number) => {
209 - this._bridge.send('captureScreenshot', { commitIndex, rootID });
210 - }),
211 - THROTTLE_CAPTURE_SCREENSHOT_DURATION
212 - );
213 -
194 _takeProfilingSnapshotRecursive = (
195 elementID: number,
196 profilingSnapshots: Map<number, SnapshotNode>
@@ -253,11 +233,6 @@ export default class ProfilerStore extends EventEmitter<{|
233 if (!this._initialSnapshotsByRootID.has(rootID)) {
234 this._initialSnapshotsByRootID.set(rootID, new Map());
235 }
256 -
257 - if (this._store.captureScreenshots) {
258 - const commitIndex = profilingOperations.length - 1;
259 - this._captureScreenshot(rootID, commitIndex);
260 - }
236 }
237 };
238
@@ -282,7 +257,6 @@ export default class ProfilerStore extends EventEmitter<{|
257 this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(
258 this._dataBackends,
259 this._inProgressOperationsByRootID,
285 - this._inProgressScreenshotsByRootID,
260 this._initialSnapshotsByRootID
261 );
262
@@ -306,7 +280,6 @@ export default class ProfilerStore extends EventEmitter<{|
280 this._initialRendererIDs.clear();
281 this._initialSnapshotsByRootID.clear();
282 this._inProgressOperationsByRootID.clear();
309 - this._inProgressScreenshotsByRootID.clear();
283 this._rendererQueue.clear();
284
285 // Record all renderer IDs initially too (in case of unmount)
@@ -354,26 +327,4 @@ export default class ProfilerStore extends EventEmitter<{|
327 }
328 }
329 };
357 -
358 - onScreenshotCaptured = ({
359 - commitIndex,
360 - dataURL,
361 - rootID,
362 - }: {|
363 - commitIndex: number,
364 - dataURL: string,
365 - rootID: number,
366 - |}) => {
367 - let screenshotsForRootByCommitIndex = this._inProgressScreenshotsByRootID.get(
368 - rootID
369 - );
370 - if (!screenshotsForRootByCommitIndex) {
371 - screenshotsForRootByCommitIndex = new Map();
372 - this._inProgressScreenshotsByRootID.set(
373 - rootID,
374 - screenshotsForRootByCommitIndex
375 - );
376 - }
377 - screenshotsForRootByCommitIndex.set(commitIndex, dataURL);
378 - };
330 }
src/devtools/store.js
-31
@@ -36,8 +36,6 @@ const debug = (methodName, ...args) => {
36 }
37 };
38
39 -const LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY =
40 - 'React::DevTools::captureScreenshots';
39 const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
40 'React::DevTools::collapseNodesByDefault';
41 const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
@@ -45,7 +43,6 @@ const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
43
44 type Config = {|
45 isProfiling?: boolean,
48 - supportsCaptureScreenshots?: boolean,
46 supportsNativeInspection?: boolean,
47 supportsReloadAndProfile?: boolean,
48 supportsProfiling?: boolean,
@@ -61,7 +58,6 @@ export type Capabilities = {|
58 * ContextProviders can subscribe to the Store for specific things they want to provide.
59 */
60 export default class Store extends EventEmitter<{|
64 - captureScreenshots: [],
61 collapseNodesByDefault: [],
62 componentFilters: [],
63 mutated: [[Array<number>, Map<number, number>]],
@@ -73,8 +69,6 @@ export default class Store extends EventEmitter<{|
69 |}> {
70 _bridge: FrontendBridge;
71
76 - _captureScreenshots: boolean = false;
77 -
72 // Should new nodes be collapsed by default when added to the tree?
73 _collapseNodesByDefault: boolean = true;
74
@@ -120,7 +114,6 @@ export default class Store extends EventEmitter<{|
114
115 // These options may be initially set by a confiugraiton option when constructing the Store.
116 // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
123 - _supportsCaptureScreenshots: boolean = false;
117 _supportsNativeInspection: boolean = false;
118 _supportsProfiling: boolean = false;
119 _supportsReloadAndProfile: boolean = false;
@@ -151,16 +144,10 @@ export default class Store extends EventEmitter<{|
144 isProfiling = config.isProfiling === true;
145
146 const {
154 - supportsCaptureScreenshots,
147 supportsNativeInspection,
148 supportsProfiling,
149 supportsReloadAndProfile,
150 } = config;
159 - if (supportsCaptureScreenshots) {
160 - this._supportsCaptureScreenshots = true;
161 - this._captureScreenshots =
162 - localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true';
163 - }
151 this._supportsNativeInspection = supportsNativeInspection !== false;
152 if (supportsProfiling) {
153 this._supportsProfiling = true;
@@ -222,20 +209,6 @@ export default class Store extends EventEmitter<{|
209 }
210 }
211
225 - get captureScreenshots(): boolean {
226 - return this._captureScreenshots;
227 - }
228 - set captureScreenshots(value: boolean): void {
229 - this._captureScreenshots = value;
230 -
231 - localStorageSetItem(
232 - LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY,
233 - value ? 'true' : 'false'
234 - );
235 -
236 - this.emit('captureScreenshots');
237 - }
238 -
212 get collapseNodesByDefault(): boolean {
213 return this._collapseNodesByDefault;
214 }
@@ -338,10 +311,6 @@ export default class Store extends EventEmitter<{|
311 return this._roots;
312 }
313
341 - get supportsCaptureScreenshots(): boolean {
342 - return this._supportsCaptureScreenshots;
343 - }
344 -
314 get supportsNativeInspection(): boolean {
315 return this._supportsNativeInspection;
316 }
src/devtools/views/Profiler/SidebarCommitInfo.css
-37
@@ -63,40 +63,3 @@
63 height: 100%;
64 color: var(--color-dim);
65 }
66 -
67 -.Screenshot {
68 - width: 100%;
69 - border: 1px solid var(--color-border);
70 - border-radius: 0.25rem;
71 - cursor: pointer;
72 -}
73 -
74 -.Modal {
75 - position: absolute;
76 - top: 0;
77 - bottom: 0;
78 - left: 0;
79 - right: 0;
80 - display: flex;
81 - align-items: center;
82 - justify-content: center;
83 - background-color: var(--color-modal-background);
84 - padding: 0.5rem;
85 -}
86 -
87 -.ModalImage {
88 - max-height: 100%;
89 - max-width: 100%;
90 - border: 1px solid var(--color-border);
91 - border-radius: 0.5rem;
92 -}
93 -
94 -.NoScreenshot {
95 - width: 100%;
96 - height: 200px;
97 - background-color: var(--color-button-background-focus);
98 - border-radius: 0.25rem;
99 - display: flex;
100 - align-items: center;
101 - justify-content: center;
102 -}
src/devtools/views/Profiler/SidebarCommitInfo.js
+2 -54
@@ -1,6 +1,6 @@
1 // @flow
2
3 -import React, { Fragment, useCallback, useContext, useState } from 'react';
3 +import React, { Fragment, useContext } from 'react';
4 import { ProfilerContext } from './ProfilerContext';
5 import { formatDuration, formatTime } from './utils';
6 import { StoreContext } from '../context';
@@ -17,21 +17,7 @@ export default function SidebarCommitInfo(_: Props) {
17 selectTab,
18 } = useContext(ProfilerContext);
19
20 - const { captureScreenshots, profilerStore } = useContext(StoreContext);
21 -
22 - const [
23 - isScreenshotModalVisible,
24 - setIsScreenshotModalVisible,
25 - ] = useState<boolean>(false);
26 -
27 - const hideScreenshotModal = useCallback(
28 - () => setIsScreenshotModalVisible(false),
29 - []
30 - );
31 - const showScreenshotModal = useCallback(
32 - () => setIsScreenshotModalVisible(true),
33 - []
34 - );
20 + const { profilerStore } = useContext(StoreContext);
21
22 if (rootID === null || selectedCommitIndex === null) {
23 return <div className={styles.NothingSelected}>Nothing selected</div>;
@@ -42,7 +28,6 @@ export default function SidebarCommitInfo(_: Props) {
28 duration,
29 interactionIDs,
30 priorityLevel,
45 - screenshot,
31 timestamp,
32 } = profilerStore.getCommitData(rootID, selectedCommitIndex);
33
@@ -93,45 +78,8 @@ export default function SidebarCommitInfo(_: Props) {
78 })}
79 </div>
80 </li>
96 - {captureScreenshots && (
97 - <li>
98 - <label className={styles.Label}>Screenshot</label>:
99 - {screenshot != null ? (
100 - <img
101 - alt="Screenshot"
102 - className={styles.Screenshot}
103 - onClick={showScreenshotModal}
104 - src={screenshot}
105 - />
106 - ) : (
107 - <div className={styles.NoScreenshot}>
108 - No screenshot available
109 - </div>
110 - )}
111 - </li>
112 - )}
113 - {screenshot != null && isScreenshotModalVisible && (
114 - <ScreenshotModal
115 - hideScreenshotModal={hideScreenshotModal}
116 - screenshot={screenshot}
117 - />
118 - )}
81 </ul>
82 </div>
83 </Fragment>
84 );
85 }
124 -
125 -function ScreenshotModal({
126 - hideScreenshotModal,
127 - screenshot,
128 -}: {|
129 - hideScreenshotModal: Function,
130 - screenshot: string,
131 -|}) {
132 - return (
133 - <div className={styles.Modal} onClick={hideScreenshotModal}>
134 - <img alt="Screenshot" className={styles.ModalImage} src={screenshot} />
135 - </div>
136 - );
137 -}
src/devtools/views/Profiler/types.js
-4
@@ -60,9 +60,6 @@ export type CommitDataFrontend = {|
60 // Priority level of the commit (if React provided this info)
61 priorityLevel: string | null,
62
63 - // Screenshot data for this commit (if available).
64 - screenshot: string | null,
65 -
63 // When did this commit occur (relative to the start of profiling)
64 timestamp: number,
65 |};
@@ -112,7 +109,6 @@ export type CommitDataExport = {|
109 fiberSelfDurations: Array<[number, number]>,
110 interactionIDs: Array<number>,
111 priorityLevel: string | null,
115 - screenshot: string | null,
112 timestamp: number,
113 |};
114
src/devtools/views/Profiler/utils.js
-9
@@ -29,7 +29,6 @@ const commitGradient = [
29 export function prepareProfilingDataFrontendFromBackendAndStore(
30 dataBackends: Array<ProfilingDataBackend>,
31 operationsByRootID: Map<number, Array<Array<number>>>,
32 - screenshotsByRootID: Map<number, Map<number, string>>,
32 snapshotsByRootID: Map<number, Map<number, SnapshotNode>>
33 ): ProfilingDataFrontend {
34 const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
@@ -44,8 +43,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
43 interactions,
44 rootID,
45 }) => {
47 - const screenshots = screenshotsByRootID.get(rootID) || null;
48 -
46 const operations = operationsByRootID.get(rootID);
47 if (operations == null) {
48 throw Error(`Could not find profiling operations for root ${rootID}`);
@@ -69,8 +66,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
66 fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
67 interactionIDs: commitDataBackend.interactionIDs,
68 priorityLevel: commitDataBackend.priorityLevel,
72 - screenshot:
73 - (screenshots !== null && screenshots.get(commitIndex)) || null,
69 timestamp: commitDataBackend.timestamp,
70 })),
71 displayName,
@@ -119,7 +114,6 @@ export function prepareProfilingDataFrontendFromExport(
114 fiberSelfDurations,
115 interactionIDs,
116 priorityLevel,
122 - screenshot,
117 timestamp,
118 }) => ({
119 changeDescriptions:
@@ -129,7 +123,6 @@ export function prepareProfilingDataFrontendFromExport(
123 fiberSelfDurations: new Map(fiberSelfDurations),
124 interactionIDs,
125 priorityLevel,
132 - screenshot,
126 timestamp,
127 })
128 ),
@@ -172,7 +165,6 @@ export function prepareProfilingDataExport(
165 fiberSelfDurations,
166 interactionIDs,
167 priorityLevel,
175 - screenshot,
168 timestamp,
169 }) => ({
170 changeDescriptions:
@@ -184,7 +176,6 @@ export function prepareProfilingDataExport(
176 fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
177 interactionIDs,
178 priorityLevel,
187 - screenshot,
179 timestamp,
180 })
181 ),
src/devtools/views/Settings/ProfilerSettings.js
+1 -48
@@ -1,12 +1,6 @@
1 // @flow
2
3 -import React, {
4 - Fragment,
5 - useCallback,
6 - useContext,
7 - useMemo,
8 - useRef,
9 -} from 'react';
3 +import React, { useCallback, useContext, useMemo, useRef } from 'react';
4 import { useSubscription } from '../hooks';
5 import { StoreContext } from '../context';
6 import { ProfilerContext } from 'src/devtools/views/Profiler/ProfilerContext';
@@ -23,20 +17,6 @@ export default function ProfilerSettings(_: {||}) {
17 } = useContext(ProfilerContext);
18 const store = useContext(StoreContext);
19
26 - const captureScreenshotsSubscription = useMemo(
27 - () => ({
28 - getCurrentValue: () => store.captureScreenshots,
29 - subscribe: (callback: Function) => {
30 - store.addListener('captureScreenshots', callback);
31 - return () => store.removeListener('captureScreenshots', callback);
32 - },
33 - }),
34 - [store]
35 - );
36 - const captureScreenshots = useSubscription<boolean, Store>(
37 - captureScreenshotsSubscription
38 - );
39 -
20 const recordChangeDescriptionsSubscription = useMemo(
21 () => ({
22 getCurrentValue: () => store.recordChangeDescriptions,
@@ -51,12 +31,6 @@ export default function ProfilerSettings(_: {||}) {
31 recordChangeDescriptionsSubscription
32 );
33
54 - const updateCaptureScreenshotsWhileProfiling = useCallback(
55 - ({ currentTarget }) => {
56 - store.captureScreenshots = currentTarget.checked;
57 - },
58 - [store]
59 - );
34 const updateRecordChangeDescriptions = useCallback(
35 ({ currentTarget }) => {
36 store.recordChangeDescriptions = currentTarget.checked;
@@ -118,27 +92,6 @@ export default function ProfilerSettings(_: {||}) {
92 />{' '}
93 (ms)
94 </div>
121 -
122 - {store.supportsCaptureScreenshots && (
123 - <Fragment>
124 - <div className={styles.Setting}>
125 - <label>
126 - <input
127 - type="checkbox"
128 - checked={captureScreenshots}
129 - onChange={updateCaptureScreenshotsWhileProfiling}
130 - />{' '}
131 - Capture screenshots while profiling
132 - </label>
133 - </div>
134 - {captureScreenshots && (
135 - <div className={styles.ScreenshotThrottling}>
136 - Screenshots will be throttled in order to reduce the negative
137 - impact on performance.
138 - </div>
139 - )}
140 - </Fragment>
141 - )}
95 </div>
96 );
97 }
src/devtools/views/Settings/SettingsShared.css
-7
@@ -38,13 +38,6 @@
38 padding: 0 0 0.5rem;
39 }
40
41 -.ScreenshotThrottling {
42 - display: inline-block;
43 - background-color: var(--color-background-hover);
44 - padding: 0.25rem 0.5rem;
45 - border-radius: 0.25rem;
46 -}
47 -
41 .HRule {
42 height: 1px;
43 background-color: var(--color-border);
yarn.lock
-19
@@ -2414,11 +2414,6 @@ balanced-match@^1.0.0:
2414 resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
2415 integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
2416
2417 -base64-arraybuffer@^0.1.5:
2418 - version "0.1.5"
2419 - resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
2420 - integrity sha1-c5JncZI7Whl0etZmqlzUv5xunOg=
2421 -
2417 base64-js@0.0.8:
2418 version "0.0.8"
2419 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:
3783 hyphenate-style-name "^1.0.2"
3784 isobject "^3.0.1"
3785
3791 -css-line-break@1.0.1:
3792 - version "1.0.1"
3793 - resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a"
3794 - integrity sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=
3795 - dependencies:
3796 - base64-arraybuffer "^0.1.5"
3797 -
3786 css-loader@^1.0.1:
3787 version "1.0.1"
3788 resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
@@ -6262,13 +6250,6 @@ html-entities@^1.2.1:
6250 resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
6251 integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
6252
6265 -html2canvas@^1.0.0-alpha.12:
6266 - version "1.0.0-alpha.12"
6267 - resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz#3b1992e3c9b3f56063c35fd620494f37eba88513"
6268 - integrity sha1-OxmS48mz9WBjw1/WIElPN+uohRM=
6269 - dependencies:
6270 - css-line-break "1.0.1"
6271 -
6253 htmlparser2@^3.9.1:
6254 version "3.10.1"
6255 resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"