diff options
Diffstat (limited to 'devtools/client/memory')
155 files changed, 16347 insertions, 0 deletions
diff --git a/devtools/client/memory/.eslintrc.js b/devtools/client/memory/.eslintrc.js new file mode 100644 index 0000000000..5500a7eb10 --- /dev/null +++ b/devtools/client/memory/.eslintrc.js @@ -0,0 +1,15 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +module.exports = { + env: { + browser: true, + }, + globals: { + d3: true, + dagreD3: true, + }, +}; diff --git a/devtools/client/memory/actions/allocations.js b/devtools/client/memory/actions/allocations.js new file mode 100644 index 0000000000..47bc68e1c2 --- /dev/null +++ b/devtools/client/memory/actions/allocations.js @@ -0,0 +1,32 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { + actions, + ALLOCATION_RECORDING_OPTIONS, +} = require("resource://devtools/client/memory/constants.js"); + +exports.toggleRecordingAllocationStacks = function (commands) { + return async function ({ dispatch, getState }) { + dispatch({ type: actions.TOGGLE_RECORD_ALLOCATION_STACKS_START }); + + if (commands.targetCommand.hasTargetWatcherSupport()) { + await commands.targetConfigurationCommand.updateConfiguration({ + recordAllocations: getState().recordingAllocationStacks + ? null + : ALLOCATION_RECORDING_OPTIONS, + }); + } else { + const front = await commands.targetCommand.targetFront.getFront("memory"); + if (getState().recordingAllocationStacks) { + await front.stopRecordingAllocations(); + } else { + await front.startRecordingAllocations(ALLOCATION_RECORDING_OPTIONS); + } + } + + dispatch({ type: actions.TOGGLE_RECORD_ALLOCATION_STACKS_END }); + }; +}; diff --git a/devtools/client/memory/actions/census-display.js b/devtools/client/memory/actions/census-display.js new file mode 100644 index 0000000000..d266fe04a5 --- /dev/null +++ b/devtools/client/memory/actions/census-display.js @@ -0,0 +1,39 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { actions } = require("resource://devtools/client/memory/constants.js"); +const { + refresh, +} = require("resource://devtools/client/memory/actions/refresh.js"); + +exports.setCensusDisplayAndRefresh = function (heapWorker, display) { + return async function ({ dispatch, getState }) { + dispatch(setCensusDisplay(display)); + await dispatch(refresh(heapWorker)); + }; +}; + +/** + * Clears out all cached census data in the snapshots and sets new display data + * for censuses. + * + * @param {censusDisplayModel} display + */ +const setCensusDisplay = (exports.setCensusDisplay = function (display) { + assert( + typeof display === "object" && + display && + display.breakdown && + display.breakdown.by, + "Breakdowns must be an object with a `by` property, attempted to set: " + + JSON.stringify(display) + ); + + return { + type: actions.SET_CENSUS_DISPLAY, + display, + }; +}); diff --git a/devtools/client/memory/actions/diffing.js b/devtools/client/memory/actions/diffing.js new file mode 100644 index 0000000000..1442cbc0a7 --- /dev/null +++ b/devtools/client/memory/actions/diffing.js @@ -0,0 +1,221 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + assert, + reportException, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const { + actions, + diffingState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + getSnapshot, + censusIsUpToDate, + snapshotIsDiffable, + findSelectedSnapshot, +} = require("resource://devtools/client/memory/utils.js"); + +/** + * Toggle diffing mode on or off. + */ +exports.toggleDiffing = function () { + return function ({ dispatch, getState }) { + dispatch({ + type: actions.CHANGE_VIEW, + newViewState: getState().diffing ? viewState.CENSUS : viewState.DIFFING, + oldDiffing: getState().diffing, + oldSelected: findSelectedSnapshot(getState()), + }); + }; +}; + +/** + * Select the given snapshot for diffing. + * + * @param {snapshotModel} snapshot + */ +const selectSnapshotForDiffing = (exports.selectSnapshotForDiffing = function ( + snapshot +) { + assert( + snapshotIsDiffable(snapshot), + "To select a snapshot for diffing, it must be diffable" + ); + return { type: actions.SELECT_SNAPSHOT_FOR_DIFFING, snapshot }; +}); + +/** + * Compute the difference between the first and second snapshots. + * + * @param {HeapAnalysesClient} heapWorker + * @param {snapshotModel} first + * @param {snapshotModel} second + */ +const takeCensusDiff = (exports.takeCensusDiff = function ( + heapWorker, + first, + second +) { + return async function ({ dispatch, getState }) { + assert( + snapshotIsDiffable(first), + `First snapshot must be in a diffable state, found ${first.state}` + ); + assert( + snapshotIsDiffable(second), + `Second snapshot must be in a diffable state, found ${second.state}` + ); + + let report, parentMap; + let display = getState().censusDisplay; + let filter = getState().filter; + + if (censusIsUpToDate(filter, display, getState().diffing.census)) { + return; + } + + do { + if ( + !getState().diffing || + getState().diffing.firstSnapshotId !== first.id || + getState().diffing.secondSnapshotId !== second.id + ) { + // If we stopped diffing or stopped and then started diffing a different + // pair of snapshots, then just give up with diffing this pair. In the + // latter case, a newly spawned task will handle the diffing for the new + // pair. + return; + } + + display = getState().censusDisplay; + filter = getState().filter; + + dispatch({ + type: actions.TAKE_CENSUS_DIFF_START, + first, + second, + filter, + display, + }); + + const opts = display.inverted + ? { asInvertedTreeNode: true } + : { asTreeNode: true }; + opts.filter = filter || null; + + try { + ({ delta: report, parentMap } = await heapWorker.takeCensusDiff( + first.path, + second.path, + { breakdown: display.breakdown }, + opts + )); + } catch (error) { + reportException("actions/diffing/takeCensusDiff", error); + dispatch({ type: actions.DIFFING_ERROR, error }); + return; + } + } while ( + filter !== getState().filter || + display !== getState().censusDisplay + ); + + dispatch({ + type: actions.TAKE_CENSUS_DIFF_END, + first, + second, + report, + parentMap, + filter, + display, + }); + }; +}); + +/** + * Ensure that the current diffing data is up to date with the currently + * selected display, filter, etc. If the state is not up-to-date, then a + * recompute is triggered. + * + * @param {HeapAnalysesClient} heapWorker + */ +const refreshDiffing = (exports.refreshDiffing = function (heapWorker) { + return function ({ dispatch, getState }) { + if (getState().diffing.secondSnapshotId === null) { + return; + } + + assert(getState().diffing.firstSnapshotId, "Should have first snapshot id"); + + if (getState().diffing.state === diffingState.TAKING_DIFF) { + // There is an existing task that will ensure that the diffing data is + // up-to-date. + return; + } + + const { firstSnapshotId, secondSnapshotId } = getState().diffing; + + const first = getSnapshot(getState(), firstSnapshotId); + const second = getSnapshot(getState(), secondSnapshotId); + dispatch(takeCensusDiff(heapWorker, first, second)); + }; +}); + +/** + * Select the given snapshot for diffing and refresh the diffing data if + * necessary (for example, if two snapshots are now selected for diffing). + * + * @param {HeapAnalysesClient} heapWorker + * @param {snapshotModel} snapshot + */ +exports.selectSnapshotForDiffingAndRefresh = function (heapWorker, snapshot) { + return async function ({ dispatch, getState }) { + assert( + getState().diffing, + "If we are selecting for diffing, we must be in diffing mode" + ); + dispatch(selectSnapshotForDiffing(snapshot)); + await dispatch(refreshDiffing(heapWorker)); + }; +}; + +/** + * Expand the given node in the diffing's census's delta-report. + * + * @param {CensusTreeNode} node + */ +exports.expandDiffingCensusNode = function (node) { + return { + type: actions.EXPAND_DIFFING_CENSUS_NODE, + node, + }; +}; + +/** + * Collapse the given node in the diffing's census's delta-report. + * + * @param {CensusTreeNode} node + */ +exports.collapseDiffingCensusNode = function (node) { + return { + type: actions.COLLAPSE_DIFFING_CENSUS_NODE, + node, + }; +}; + +/** + * Focus the given node in the snapshot's census's report. + * + * @param {DominatorTreeNode} node + */ +exports.focusDiffingCensusNode = function (node) { + return { + type: actions.FOCUS_DIFFING_CENSUS_NODE, + node, + }; +}; diff --git a/devtools/client/memory/actions/filter.js b/devtools/client/memory/actions/filter.js new file mode 100644 index 0000000000..1bc9fd35db --- /dev/null +++ b/devtools/client/memory/actions/filter.js @@ -0,0 +1,33 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { actions } = require("resource://devtools/client/memory/constants.js"); +const { + refresh, +} = require("resource://devtools/client/memory/actions/refresh.js"); +const { debounce } = require("resource://devtools/shared/debounce.js"); + +const setFilterString = (exports.setFilterString = function (filterString) { + return { + type: actions.SET_FILTER_STRING, + filter: filterString, + }; +}); + +// The number of milliseconds we should wait before kicking off a new census +// when the filter string is updated. This helps us avoid doing any work while +// the user is still typing. +const FILTER_INPUT_DEBOUNCE_MS = 250; +const debouncedRefreshDispatcher = debounce( + (dispatch, heapWorker) => dispatch(refresh(heapWorker)), + FILTER_INPUT_DEBOUNCE_MS +); + +exports.setFilterStringAndRefresh = function (filterString, heapWorker) { + return ({ dispatch, getState }) => { + dispatch(setFilterString(filterString)); + debouncedRefreshDispatcher(dispatch, heapWorker); + }; +}; diff --git a/devtools/client/memory/actions/front.js b/devtools/client/memory/actions/front.js new file mode 100644 index 0000000000..3ae10ea9cc --- /dev/null +++ b/devtools/client/memory/actions/front.js @@ -0,0 +1,17 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { actions } = require("resource://devtools/client/memory/constants.js"); + +/** + * Update the memory front. + */ +exports.updateMemoryFront = front => { + return { + type: actions.UPDATE_MEMORY_FRONT, + front, + }; +}; diff --git a/devtools/client/memory/actions/io.js b/devtools/client/memory/actions/io.js new file mode 100644 index 0000000000..c811478df5 --- /dev/null +++ b/devtools/client/memory/actions/io.js @@ -0,0 +1,103 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { + immutableUpdate, + reportException, + assert, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const { + snapshotState: states, + actions, +} = require("resource://devtools/client/memory/constants.js"); +const { + L10N, + openFilePicker, + createSnapshot, +} = require("resource://devtools/client/memory/utils.js"); +const { + selectSnapshot, + computeSnapshotData, + readSnapshot, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const VALID_EXPORT_STATES = [states.SAVED, states.READ]; + +exports.pickFileAndExportSnapshot = function (snapshot) { + return async function ({ dispatch, getState }) { + const outputFile = await openFilePicker({ + title: L10N.getFormatStr("snapshot.io.save.window"), + defaultName: PathUtils.filename(snapshot.path), + filters: [[L10N.getFormatStr("snapshot.io.filter"), "*.fxsnapshot"]], + mode: "save", + }); + + if (!outputFile) { + return; + } + + await dispatch(exportSnapshot(snapshot, outputFile.path)); + }; +}; + +const exportSnapshot = (exports.exportSnapshot = function (snapshot, dest) { + return async function ({ dispatch, getState }) { + dispatch({ type: actions.EXPORT_SNAPSHOT_START, snapshot }); + + assert( + VALID_EXPORT_STATES.includes(snapshot.state), + `Snapshot is in invalid state for exporting: ${snapshot.state}` + ); + + try { + await IOUtils.copy(snapshot.path, dest); + } catch (error) { + reportException("exportSnapshot", error); + dispatch({ type: actions.EXPORT_SNAPSHOT_ERROR, snapshot, error }); + } + + dispatch({ type: actions.EXPORT_SNAPSHOT_END, snapshot }); + }; +}); + +exports.pickFileAndImportSnapshotAndCensus = function (heapWorker) { + return async function ({ dispatch, getState }) { + const input = await openFilePicker({ + title: L10N.getFormatStr("snapshot.io.import.window"), + filters: [[L10N.getFormatStr("snapshot.io.filter"), "*.fxsnapshot"]], + mode: "open", + }); + + if (!input) { + return; + } + + await dispatch(importSnapshotAndCensus(heapWorker, input.path)); + }; +}; + +const importSnapshotAndCensus = function (heapWorker, path) { + return async function ({ dispatch, getState }) { + const snapshot = immutableUpdate(createSnapshot(getState()), { + path, + state: states.IMPORTING, + imported: true, + }); + const id = snapshot.id; + + dispatch({ type: actions.IMPORT_SNAPSHOT_START, snapshot }); + dispatch(selectSnapshot(snapshot.id)); + + try { + await dispatch(readSnapshot(heapWorker, id)); + await dispatch(computeSnapshotData(heapWorker, id)); + } catch (error) { + reportException("importSnapshot", error); + dispatch({ type: actions.IMPORT_SNAPSHOT_ERROR, error, id }); + } + + dispatch({ type: actions.IMPORT_SNAPSHOT_END, id }); + }; +}; +exports.importSnapshotAndCensus = importSnapshotAndCensus; diff --git a/devtools/client/memory/actions/label-display.js b/devtools/client/memory/actions/label-display.js new file mode 100644 index 0000000000..c8a6db35ec --- /dev/null +++ b/devtools/client/memory/actions/label-display.js @@ -0,0 +1,43 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { actions } = require("resource://devtools/client/memory/constants.js"); +const { + refresh, +} = require("resource://devtools/client/memory/actions/refresh.js"); + +/** + * Change the display we use for labeling individual nodes and refresh the + * current data. + */ +exports.setLabelDisplayAndRefresh = function (heapWorker, display) { + return async function ({ dispatch, getState }) { + // Clears out all stored census data and sets the display. + dispatch(setLabelDisplay(display)); + await dispatch(refresh(heapWorker)); + }; +}; + +/** + * Change the display we use for labeling individual nodes. + * + * @param {labelDisplayModel} display + */ +const setLabelDisplay = (exports.setLabelDisplay = function (display) { + assert( + typeof display === "object" && + display && + display.breakdown && + display.breakdown.by, + "Breakdowns must be an object with a `by` property, attempted to set: " + + JSON.stringify(display) + ); + + return { + type: actions.SET_LABEL_DISPLAY, + display, + }; +}); diff --git a/devtools/client/memory/actions/moz.build b/devtools/client/memory/actions/moz.build new file mode 100644 index 0000000000..939712ca32 --- /dev/null +++ b/devtools/client/memory/actions/moz.build @@ -0,0 +1,20 @@ +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +DevToolsModules( + "allocations.js", + "census-display.js", + "diffing.js", + "filter.js", + "front.js", + "io.js", + "label-display.js", + "refresh.js", + "sizes.js", + "snapshot.js", + "task-cache.js", + "tree-map-display.js", + "view.js", +) diff --git a/devtools/client/memory/actions/refresh.js b/devtools/client/memory/actions/refresh.js new file mode 100644 index 0000000000..33401fa299 --- /dev/null +++ b/devtools/client/memory/actions/refresh.js @@ -0,0 +1,49 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + refreshDiffing, +} = require("resource://devtools/client/memory/actions/diffing.js"); +const snapshot = require("resource://devtools/client/memory/actions/snapshot.js"); + +/** + * Refresh the main thread's data from the heap analyses worker, if needed. + * + * @param {HeapAnalysesWorker} heapWorker + */ +exports.refresh = function (heapWorker) { + return async function ({ dispatch, getState }) { + switch (getState().view.state) { + case viewState.DIFFING: + assert( + getState().diffing, + "Should have diffing state if in diffing view" + ); + await dispatch(refreshDiffing(heapWorker)); + return; + + case viewState.CENSUS: + await dispatch(snapshot.refreshSelectedCensus(heapWorker)); + return; + + case viewState.DOMINATOR_TREE: + await dispatch(snapshot.refreshSelectedDominatorTree(heapWorker)); + return; + + case viewState.TREE_MAP: + await dispatch(snapshot.refreshSelectedTreeMap(heapWorker)); + return; + + case viewState.INDIVIDUALS: + await dispatch(snapshot.refreshIndividuals(heapWorker)); + return; + + default: + assert(false, `Unexpected view state: ${getState().view.state}`); + } + }; +}; diff --git a/devtools/client/memory/actions/sizes.js b/devtools/client/memory/actions/sizes.js new file mode 100644 index 0000000000..c5a98e23e9 --- /dev/null +++ b/devtools/client/memory/actions/sizes.js @@ -0,0 +1,13 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { actions } = require("resource://devtools/client/memory/constants.js"); + +exports.resizeShortestPaths = function (newSize) { + return { + type: actions.RESIZE_SHORTEST_PATHS, + size: newSize, + }; +}; diff --git a/devtools/client/memory/actions/snapshot.js b/devtools/client/memory/actions/snapshot.js new file mode 100644 index 0000000000..63885be251 --- /dev/null +++ b/devtools/client/memory/actions/snapshot.js @@ -0,0 +1,938 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { + assert, + reportException, + isSet, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const { + censusIsUpToDate, + getSnapshot, + createSnapshot, + dominatorTreeIsComputed, +} = require("resource://devtools/client/memory/utils.js"); +const { + actions, + snapshotState: states, + viewState, + censusState, + treeMapState, + dominatorTreeState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const view = require("resource://devtools/client/memory/actions/view.js"); +const refresh = require("resource://devtools/client/memory/actions/refresh.js"); +const diffing = require("resource://devtools/client/memory/actions/diffing.js"); +const TaskCache = require("resource://devtools/client/memory/actions/task-cache.js"); + +/** + * A series of actions are fired from this task to save, read and generate the + * initial census from a snapshot. + * + * @param {MemoryFront} + * @param {HeapAnalysesClient} + * @param {Object} + */ +exports.takeSnapshotAndCensus = function (front, heapWorker) { + return async function ({ dispatch, getState }) { + const id = await dispatch(takeSnapshot(front)); + if (id === null) { + return; + } + + await dispatch(readSnapshot(heapWorker, id)); + if (getSnapshot(getState(), id).state !== states.READ) { + return; + } + + await dispatch(computeSnapshotData(heapWorker, id)); + }; +}; + +/** + * Create the census for the snapshot with the provided snapshot id. If the + * current view is the DOMINATOR_TREE view, create the dominator tree for this + * snapshot as well. + * + * @param {HeapAnalysesClient} heapWorker + * @param {snapshotId} id + */ +const computeSnapshotData = (exports.computeSnapshotData = function ( + heapWorker, + id +) { + return async function ({ dispatch, getState }) { + if (getSnapshot(getState(), id).state !== states.READ) { + return; + } + + // Decide which type of census to take. + const censusTaker = getCurrentCensusTaker(getState().view.state); + await dispatch(censusTaker(heapWorker, id)); + + if ( + getState().view.state === viewState.DOMINATOR_TREE && + !getSnapshot(getState(), id).dominatorTree + ) { + await dispatch(computeAndFetchDominatorTree(heapWorker, id)); + } + }; +}); + +/** + * Selects a snapshot and if the snapshot's census is using a different + * display, take a new census. + * + * @param {HeapAnalysesClient} heapWorker + * @param {snapshotId} id + */ +exports.selectSnapshotAndRefresh = function (heapWorker, id) { + return async function ({ dispatch, getState }) { + if (getState().diffing || getState().individuals) { + dispatch(view.changeView(viewState.CENSUS)); + } + + dispatch(selectSnapshot(id)); + await dispatch(refresh.refresh(heapWorker)); + }; +}; + +/** + * Take a snapshot and return its id on success, or null on failure. + * + * @param {MemoryFront} front + * @returns {Number|null} + */ +const takeSnapshot = (exports.takeSnapshot = function (front) { + return async function ({ dispatch, getState }) { + if (getState().diffing || getState().individuals) { + dispatch(view.changeView(viewState.CENSUS)); + } + + const snapshot = createSnapshot(getState()); + const id = snapshot.id; + dispatch({ type: actions.TAKE_SNAPSHOT_START, snapshot }); + dispatch(selectSnapshot(id)); + + let path; + try { + path = await front.saveHeapSnapshot(); + } catch (error) { + reportException("takeSnapshot", error); + dispatch({ type: actions.SNAPSHOT_ERROR, id, error }); + return null; + } + + dispatch({ type: actions.TAKE_SNAPSHOT_END, id, path }); + return snapshot.id; + }; +}); + +/** + * Reads a snapshot into memory; necessary to do before taking + * a census on the snapshot. May only be called once per snapshot. + * + * @param {HeapAnalysesClient} heapWorker + * @param {snapshotId} id + */ +const readSnapshot = (exports.readSnapshot = TaskCache.declareCacheableTask({ + getCacheKey(_, id) { + return id; + }, + + async task(heapWorker, id, removeFromCache, dispatch, getState) { + const snapshot = getSnapshot(getState(), id); + assert( + [states.SAVED, states.IMPORTING].includes(snapshot.state), + `Should only read a snapshot once. Found snapshot in state ${snapshot.state}` + ); + + let creationTime; + + dispatch({ type: actions.READ_SNAPSHOT_START, id }); + try { + await heapWorker.readHeapSnapshot(snapshot.path); + creationTime = await heapWorker.getCreationTime(snapshot.path); + } catch (error) { + removeFromCache(); + reportException("readSnapshot", error); + dispatch({ type: actions.SNAPSHOT_ERROR, id, error }); + return; + } + + removeFromCache(); + dispatch({ type: actions.READ_SNAPSHOT_END, id, creationTime }); + }, +})); + +let takeCensusTaskCounter = 0; + +/** + * Census and tree maps both require snapshots. This function shares the logic + * of creating snapshots, but is configurable with specific actions for the + * individual census types. + * + * @param {getDisplay} Get the display object from the state. + * @param {getCensus} Get the census from the snapshot. + * @param {beginAction} Action to send at the beginning of a heap snapshot. + * @param {endAction} Action to send at the end of a heap snapshot. + * @param {errorAction} Action to send if a snapshot has an error. + */ +function makeTakeCensusTask({ + getDisplay, + getFilter, + getCensus, + beginAction, + endAction, + errorAction, + canTakeCensus, +}) { + /** + * @param {HeapAnalysesClient} heapWorker + * @param {snapshotId} id + * + * @see {Snapshot} model defined in devtools/client/memory/models.js + * @see `devtools/shared/heapsnapshot/HeapAnalysesClient.js` + * @see `js/src/doc/Debugger/Debugger.Memory.md` for breakdown details + */ + const thisTakeCensusTaskId = ++takeCensusTaskCounter; + return TaskCache.declareCacheableTask({ + getCacheKey(_, id) { + return `take-census-task-${thisTakeCensusTaskId}-${id}`; + }, + + async task(heapWorker, id, removeFromCache, dispatch, getState) { + const snapshot = getSnapshot(getState(), id); + if (!snapshot) { + removeFromCache(); + return; + } + + // Assert that snapshot is in a valid state + assert( + canTakeCensus(snapshot), + "Attempting to take a census when the snapshot is not in a ready state. " + + `snapshot.state = ${snapshot.state}, ` + + `census.state = ${(getCensus(snapshot) || { state: null }).state}` + ); + + let report, parentMap; + let display = getDisplay(getState()); + let filter = getFilter(getState()); + + // If display, filter and inversion haven't changed, don't do anything. + if (censusIsUpToDate(filter, display, getCensus(snapshot))) { + removeFromCache(); + return; + } + + // Keep taking a census if the display changes while our request is in + // flight. Recheck that the display used for the census is the same as the + // state's display. + do { + display = getDisplay(getState()); + filter = getState().filter; + + dispatch({ + type: beginAction, + id, + filter, + display, + }); + + const opts = display.inverted + ? { asInvertedTreeNode: true } + : { asTreeNode: true }; + + opts.filter = filter || null; + + try { + ({ report, parentMap } = await heapWorker.takeCensus( + snapshot.path, + { breakdown: display.breakdown }, + opts + )); + } catch (error) { + removeFromCache(); + reportException("takeCensus", error); + dispatch({ type: errorAction, id, error }); + return; + } + } while ( + filter !== getState().filter || + display !== getDisplay(getState()) + ); + + removeFromCache(); + dispatch({ + type: endAction, + id, + display, + filter, + report, + parentMap, + }); + }, + }); +} + +/** + * Take a census. + */ +const takeCensus = (exports.takeCensus = makeTakeCensusTask({ + getDisplay: state => state.censusDisplay, + getFilter: state => state.filter, + getCensus: snapshot => snapshot.census, + beginAction: actions.TAKE_CENSUS_START, + endAction: actions.TAKE_CENSUS_END, + errorAction: actions.TAKE_CENSUS_ERROR, + canTakeCensus: snapshot => + snapshot.state === states.READ && + (!snapshot.census || snapshot.census.state === censusState.SAVED), +})); + +/** + * Take a census for the treemap. + */ +const takeTreeMap = (exports.takeTreeMap = makeTakeCensusTask({ + getDisplay: state => state.treeMapDisplay, + getFilter: () => null, + getCensus: snapshot => snapshot.treeMap, + beginAction: actions.TAKE_TREE_MAP_START, + endAction: actions.TAKE_TREE_MAP_END, + errorAction: actions.TAKE_TREE_MAP_ERROR, + canTakeCensus: snapshot => + snapshot.state === states.READ && + (!snapshot.treeMap || snapshot.treeMap.state === treeMapState.SAVED), +})); + +/** + * Define what should be the default mode for taking a census based on the + * default view of the tool. + */ +const defaultCensusTaker = takeTreeMap; + +/** + * Pick the default census taker when taking a snapshot. This should be + * determined by the current view. If the view doesn't include a census, then + * use the default one defined above. Some census information is always needed + * to display some basic information about a snapshot. + * + * @param {string} value from viewState + */ +const getCurrentCensusTaker = (exports.getCurrentCensusTaker = function ( + currentView +) { + switch (currentView) { + case viewState.TREE_MAP: + return takeTreeMap; + case viewState.CENSUS: + return takeCensus; + default: + return defaultCensusTaker; + } +}); + +/** + * Focus the given node in the individuals view. + * + * @param {DominatorTreeNode} node. + */ +exports.focusIndividual = function (node) { + return { + type: actions.FOCUS_INDIVIDUAL, + node, + }; +}; + +/** + * Fetch the individual `DominatorTreeNodes` for the census group specified by + * `censusBreakdown` and `reportLeafIndex`. + * + * @param {HeapAnalysesClient} heapWorker + * @param {SnapshotId} id + * @param {Object} censusBreakdown + * @param {Set<Number> | Number} reportLeafIndex + */ +const fetchIndividuals = (exports.fetchIndividuals = function ( + heapWorker, + id, + censusBreakdown, + reportLeafIndex +) { + return async function ({ dispatch, getState }) { + if (getState().view.state !== viewState.INDIVIDUALS) { + dispatch(view.changeView(viewState.INDIVIDUALS)); + } + + const snapshot = getSnapshot(getState(), id); + assert( + snapshot && snapshot.state === states.READ, + "The snapshot should already be read into memory" + ); + + if (!dominatorTreeIsComputed(snapshot)) { + await dispatch(computeAndFetchDominatorTree(heapWorker, id)); + } + + const snapshot_ = getSnapshot(getState(), id); + assert( + snapshot_.dominatorTree?.root, + "Should have a dominator tree with a root." + ); + + const dominatorTreeId = snapshot_.dominatorTree.dominatorTreeId; + + const indices = isSet(reportLeafIndex) + ? reportLeafIndex + : new Set([reportLeafIndex]); + + let labelDisplay; + let nodes; + do { + labelDisplay = getState().labelDisplay; + assert( + labelDisplay?.breakdown?.by, + `Should have a breakdown to label nodes with, got: ${JSON.stringify( + labelDisplay + )}` + ); + + if (getState().view.state !== viewState.INDIVIDUALS) { + // We switched views while in the process of fetching individuals -- any + // further work is useless. + return; + } + + dispatch({ type: actions.FETCH_INDIVIDUALS_START }); + + try { + ({ nodes } = await heapWorker.getCensusIndividuals({ + dominatorTreeId, + indices, + censusBreakdown, + labelBreakdown: labelDisplay.breakdown, + maxRetainingPaths: Services.prefs.getIntPref( + "devtools.memory.max-retaining-paths" + ), + maxIndividuals: Services.prefs.getIntPref( + "devtools.memory.max-individuals" + ), + })); + } catch (error) { + reportException("actions/snapshot/fetchIndividuals", error); + dispatch({ type: actions.INDIVIDUALS_ERROR, error }); + return; + } + } while (labelDisplay !== getState().labelDisplay); + + dispatch({ + type: actions.FETCH_INDIVIDUALS_END, + id, + censusBreakdown, + indices, + labelDisplay, + nodes, + dominatorTree: snapshot_.dominatorTree, + }); + }; +}); + +/** + * Refresh the current individuals view. + * + * @param {HeapAnalysesClient} heapWorker + */ +exports.refreshIndividuals = function (heapWorker) { + return async function ({ dispatch, getState }) { + assert( + getState().view.state === viewState.INDIVIDUALS, + "Should be in INDIVIDUALS view." + ); + + const { individuals } = getState(); + + switch (individuals.state) { + case individualsState.COMPUTING_DOMINATOR_TREE: + case individualsState.FETCHING: + // Nothing to do here. + return; + + case individualsState.FETCHED: + if (getState().individuals.labelDisplay === getState().labelDisplay) { + return; + } + break; + + case individualsState.ERROR: + // Doesn't hurt to retry: maybe we won't get an error this time around? + break; + + default: + assert(false, `Unexpected individuals state: ${individuals.state}`); + return; + } + + await dispatch( + fetchIndividuals( + heapWorker, + individuals.id, + individuals.censusBreakdown, + individuals.indices + ) + ); + }; +}; + +/** + * Refresh the selected snapshot's census data, if need be (for example, + * display configuration changed). + * + * @param {HeapAnalysesClient} heapWorker + */ +exports.refreshSelectedCensus = function (heapWorker) { + return async function ({ dispatch, getState }) { + const snapshot = getState().snapshots.find(s => s.selected); + if (!snapshot || snapshot.state !== states.READ) { + return; + } + + // Intermediate snapshot states will get handled by the task action that is + // orchestrating them. For example, if the snapshot census's state is + // SAVING, then the takeCensus action will keep taking a census until + // the inverted property matches the inverted state. If the snapshot is + // still in the process of being saved or read, the takeSnapshotAndCensus + // task action will follow through and ensure that a census is taken. + if ( + (snapshot.census && snapshot.census.state === censusState.SAVED) || + !snapshot.census + ) { + await dispatch(takeCensus(heapWorker, snapshot.id)); + } + }; +}; + +/** + * Refresh the selected snapshot's tree map data, if need be (for example, + * display configuration changed). + * + * @param {HeapAnalysesClient} heapWorker + */ +exports.refreshSelectedTreeMap = function (heapWorker) { + return async function ({ dispatch, getState }) { + const snapshot = getState().snapshots.find(s => s.selected); + if (!snapshot || snapshot.state !== states.READ) { + return; + } + + // Intermediate snapshot states will get handled by the task action that is + // orchestrating them. For example, if the snapshot census's state is + // SAVING, then the takeCensus action will keep taking a census until + // the inverted property matches the inverted state. If the snapshot is + // still in the process of being saved or read, the takeSnapshotAndCensus + // task action will follow through and ensure that a census is taken. + if ( + (snapshot.treeMap && snapshot.treeMap.state === treeMapState.SAVED) || + !snapshot.treeMap + ) { + await dispatch(takeTreeMap(heapWorker, snapshot.id)); + } + }; +}; + +/** + * Request that the `HeapAnalysesWorker` compute the dominator tree for the + * snapshot with the given `id`. + * + * @param {HeapAnalysesClient} heapWorker + * @param {SnapshotId} id + * + * @returns {Promise<DominatorTreeId>} + */ +const computeDominatorTree = (exports.computeDominatorTree = + TaskCache.declareCacheableTask({ + getCacheKey(_, id) { + return id; + }, + + async task(heapWorker, id, removeFromCache, dispatch, getState) { + const snapshot = getSnapshot(getState(), id); + assert( + !snapshot.dominatorTree?.dominatorTreeId, + "Should not re-compute dominator trees" + ); + + dispatch({ type: actions.COMPUTE_DOMINATOR_TREE_START, id }); + + let dominatorTreeId; + try { + dominatorTreeId = await heapWorker.computeDominatorTree(snapshot.path); + } catch (error) { + removeFromCache(); + reportException("actions/snapshot/computeDominatorTree", error); + dispatch({ type: actions.DOMINATOR_TREE_ERROR, id, error }); + return null; + } + + removeFromCache(); + dispatch({ + type: actions.COMPUTE_DOMINATOR_TREE_END, + id, + dominatorTreeId, + }); + return dominatorTreeId; + }, + })); + +/** + * Get the partial subtree, starting from the root, of the + * snapshot-with-the-given-id's dominator tree. + * + * @param {HeapAnalysesClient} heapWorker + * @param {SnapshotId} id + * + * @returns {Promise<DominatorTreeNode>} + */ +const fetchDominatorTree = (exports.fetchDominatorTree = + TaskCache.declareCacheableTask({ + getCacheKey(_, id) { + return id; + }, + + async task(heapWorker, id, removeFromCache, dispatch, getState) { + const snapshot = getSnapshot(getState(), id); + assert( + dominatorTreeIsComputed(snapshot), + "Should have dominator tree model and it should be computed" + ); + + let display; + let root; + do { + display = getState().labelDisplay; + assert( + display?.breakdown, + `Should have a breakdown to describe nodes with, got: ${JSON.stringify( + display + )}` + ); + + dispatch({ type: actions.FETCH_DOMINATOR_TREE_START, id, display }); + + try { + root = await heapWorker.getDominatorTree({ + dominatorTreeId: snapshot.dominatorTree.dominatorTreeId, + breakdown: display.breakdown, + maxRetainingPaths: Services.prefs.getIntPref( + "devtools.memory.max-retaining-paths" + ), + }); + } catch (error) { + removeFromCache(); + reportException("actions/snapshot/fetchDominatorTree", error); + dispatch({ type: actions.DOMINATOR_TREE_ERROR, id, error }); + return null; + } + } while (display !== getState().labelDisplay); + + removeFromCache(); + dispatch({ type: actions.FETCH_DOMINATOR_TREE_END, id, root }); + return root; + }, + })); + +/** + * Fetch the immediately dominated children represented by the placeholder + * `lazyChildren` from snapshot-with-the-given-id's dominator tree. + * + * @param {HeapAnalysesClient} heapWorker + * @param {SnapshotId} id + * @param {DominatorTreeLazyChildren} lazyChildren + */ +exports.fetchImmediatelyDominated = TaskCache.declareCacheableTask({ + getCacheKey(_, id, lazyChildren) { + return `${id}-${lazyChildren.key()}`; + }, + + async task( + heapWorker, + id, + lazyChildren, + removeFromCache, + dispatch, + getState + ) { + const snapshot = getSnapshot(getState(), id); + assert(snapshot.dominatorTree, "Should have dominator tree model"); + assert( + snapshot.dominatorTree.state === dominatorTreeState.LOADED || + snapshot.dominatorTree.state === + dominatorTreeState.INCREMENTAL_FETCHING, + "Cannot fetch immediately dominated nodes in a dominator tree unless " + + " the dominator tree has already been computed" + ); + + let display; + let response; + do { + display = getState().labelDisplay; + assert(display, "Should have a display to describe nodes with."); + + dispatch({ type: actions.FETCH_IMMEDIATELY_DOMINATED_START, id }); + + try { + response = await heapWorker.getImmediatelyDominated({ + dominatorTreeId: snapshot.dominatorTree.dominatorTreeId, + breakdown: display.breakdown, + nodeId: lazyChildren.parentNodeId(), + startIndex: lazyChildren.siblingIndex(), + maxRetainingPaths: Services.prefs.getIntPref( + "devtools.memory.max-retaining-paths" + ), + }); + } catch (error) { + removeFromCache(); + reportException("actions/snapshot/fetchImmediatelyDominated", error); + dispatch({ type: actions.DOMINATOR_TREE_ERROR, id, error }); + return; + } + } while (display !== getState().labelDisplay); + + removeFromCache(); + dispatch({ + type: actions.FETCH_IMMEDIATELY_DOMINATED_END, + id, + path: response.path, + nodes: response.nodes, + moreChildrenAvailable: response.moreChildrenAvailable, + }); + }, +}); + +/** + * Compute and then fetch the dominator tree of the snapshot with the given + * `id`. + * + * @param {HeapAnalysesClient} heapWorker + * @param {SnapshotId} id + * + * @returns {Promise<DominatorTreeNode>} + */ +const computeAndFetchDominatorTree = (exports.computeAndFetchDominatorTree = + TaskCache.declareCacheableTask({ + getCacheKey(_, id) { + return id; + }, + + async task(heapWorker, id, removeFromCache, dispatch, getState) { + const dominatorTreeId = await dispatch( + computeDominatorTree(heapWorker, id) + ); + if (dominatorTreeId === null) { + removeFromCache(); + return null; + } + + const root = await dispatch(fetchDominatorTree(heapWorker, id)); + removeFromCache(); + + if (!root) { + return null; + } + + return root; + }, + })); + +/** + * Update the currently selected snapshot's dominator tree. + * + * @param {HeapAnalysesClient} heapWorker + */ +exports.refreshSelectedDominatorTree = function (heapWorker) { + return async function ({ dispatch, getState }) { + const snapshot = getState().snapshots.find(s => s.selected); + if (!snapshot) { + return; + } + + if ( + snapshot.dominatorTree && + !( + snapshot.dominatorTree.state === dominatorTreeState.COMPUTED || + snapshot.dominatorTree.state === dominatorTreeState.LOADED || + snapshot.dominatorTree.state === dominatorTreeState.INCREMENTAL_FETCHING + ) + ) { + return; + } + + // We need to check for the snapshot state because if there was an error, + // we can't continue and if we are still saving or reading the snapshot, + // then takeSnapshotAndCensus will finish the job for us + if (snapshot.state === states.READ) { + if (snapshot.dominatorTree) { + await dispatch(fetchDominatorTree(heapWorker, snapshot.id)); + } else { + await dispatch(computeAndFetchDominatorTree(heapWorker, snapshot.id)); + } + } + }; +}; + +/** + * Select the snapshot with the given id. + * + * @param {snapshotId} id + * @see {Snapshot} model defined in devtools/client/memory/models.js + */ +const selectSnapshot = (exports.selectSnapshot = function (id) { + return { + type: actions.SELECT_SNAPSHOT, + id, + }; +}); + +/** + * Delete all snapshots that are in the READ or ERROR state + * + * @param {HeapAnalysesClient} heapWorker + */ +exports.clearSnapshots = function (heapWorker) { + return async function ({ dispatch, getState }) { + const snapshots = getState().snapshots.filter(s => { + const snapshotReady = s.state === states.READ || s.state === states.ERROR; + const censusReady = + (s.treeMap && s.treeMap.state === treeMapState.SAVED) || + (s.census && s.census.state === censusState.SAVED); + + return snapshotReady && censusReady; + }); + + const ids = snapshots.map(s => s.id); + + dispatch({ type: actions.DELETE_SNAPSHOTS_START, ids }); + + if (getState().diffing) { + dispatch(diffing.toggleDiffing()); + } + if (getState().individuals) { + dispatch(view.popView()); + } + + await Promise.all( + snapshots.map(snapshot => { + return heapWorker.deleteHeapSnapshot(snapshot.path).catch(error => { + reportException("clearSnapshots", error); + dispatch({ type: actions.SNAPSHOT_ERROR, id: snapshot.id, error }); + }); + }) + ); + + dispatch({ type: actions.DELETE_SNAPSHOTS_END, ids }); + }; +}; + +/** + * Delete a snapshot + * + * @param {HeapAnalysesClient} heapWorker + * @param {snapshotModel} snapshot + */ +exports.deleteSnapshot = function (heapWorker, snapshot) { + return async function ({ dispatch, getState }) { + dispatch({ type: actions.DELETE_SNAPSHOTS_START, ids: [snapshot.id] }); + + try { + await heapWorker.deleteHeapSnapshot(snapshot.path); + } catch (error) { + reportException("deleteSnapshot", error); + dispatch({ type: actions.SNAPSHOT_ERROR, id: snapshot.id, error }); + } + + dispatch({ type: actions.DELETE_SNAPSHOTS_END, ids: [snapshot.id] }); + }; +}; + +/** + * Expand the given node in the snapshot's census report. + * + * @param {CensusTreeNode} node + */ +exports.expandCensusNode = function (id, node) { + return { + type: actions.EXPAND_CENSUS_NODE, + id, + node, + }; +}; + +/** + * Collapse the given node in the snapshot's census report. + * + * @param {CensusTreeNode} node + */ +exports.collapseCensusNode = function (id, node) { + return { + type: actions.COLLAPSE_CENSUS_NODE, + id, + node, + }; +}; + +/** + * Focus the given node in the snapshot's census's report. + * + * @param {SnapshotId} id + * @param {DominatorTreeNode} node + */ +exports.focusCensusNode = function (id, node) { + return { + type: actions.FOCUS_CENSUS_NODE, + id, + node, + }; +}; + +/** + * Expand the given node in the snapshot's dominator tree. + * + * @param {DominatorTreeTreeNode} node + */ +exports.expandDominatorTreeNode = function (id, node) { + return { + type: actions.EXPAND_DOMINATOR_TREE_NODE, + id, + node, + }; +}; + +/** + * Collapse the given node in the snapshot's dominator tree. + * + * @param {DominatorTreeTreeNode} node + */ +exports.collapseDominatorTreeNode = function (id, node) { + return { + type: actions.COLLAPSE_DOMINATOR_TREE_NODE, + id, + node, + }; +}; + +/** + * Focus the given node in the snapshot's dominator tree. + * + * @param {SnapshotId} id + * @param {DominatorTreeNode} node + */ +exports.focusDominatorTreeNode = function (id, node) { + return { + type: actions.FOCUS_DOMINATOR_TREE_NODE, + id, + node, + }; +}; diff --git a/devtools/client/memory/actions/task-cache.js b/devtools/client/memory/actions/task-cache.js new file mode 100644 index 0000000000..c472cb69da --- /dev/null +++ b/devtools/client/memory/actions/task-cache.js @@ -0,0 +1,105 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); + +/** + * The `TaskCache` allows for re-using active tasks when spawning a second task + * would simply duplicate work and is unnecessary. It maps from a task's unique + * key to the promise of its result. + */ +const TaskCache = (module.exports = class TaskCache { + constructor() { + this._cache = new Map(); + } + + /** + * Get the promise keyed by the given unique `key`, if one exists. + * + * @param {Any} key + * @returns {Promise<Any> | undefined} + */ + get(key) { + return this._cache.get(key); + } + + /** + * Put the task result promise in the cache and associate it with the given + * `key` which must not already have an entry in the cache. + * + * @param {Any} key + * @param {Promise<Any>} promise + */ + put(key, promise) { + assert(!this._cache.has(key), "We should not override extant entries"); + + this._cache.set(key, promise); + } + + /** + * Remove the cache entry with the given key. + * + * @param {Any} key + */ + remove(key) { + assert( + this._cache.has(key), + `Should have an extant entry for key = ${key}` + ); + + this._cache.delete(key); + } +}); + +/** + * Create a new action-orchestrating task that is automatically cached. The + * tasks themselves are responsible from removing themselves from the cache. + * + * @param {Function(...args) -> Any} getCacheKey + * @param {Generator(...args) -> Any} task + * + * @returns Cacheable, Action-Creating Task + */ +TaskCache.declareCacheableTask = function ({ getCacheKey, task }) { + const cache = new TaskCache(); + + return function (...args) { + return async function ({ dispatch, getState }) { + const key = getCacheKey(...args); + + const extantResult = cache.get(key); + if (extantResult) { + return extantResult; + } + + // Ensure that we have our new entry in the cache *before* dispatching the + // task! + let resolve; + cache.put( + key, + new Promise(r => { + resolve = r; + }) + ); + + resolve( + dispatch(async function () { + try { + args.push(() => cache.remove(key), dispatch, getState); + return await task(...args); + } catch (error) { + // Don't perma-cache errors. + if (cache.get(key)) { + cache.remove(key); + } + throw error; + } + }) + ); + + return cache.get(key); + }; + }; +}; diff --git a/devtools/client/memory/actions/tree-map-display.js b/devtools/client/memory/actions/tree-map-display.js new file mode 100644 index 0000000000..e1c4a21132 --- /dev/null +++ b/devtools/client/memory/actions/tree-map-display.js @@ -0,0 +1,42 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { actions } = require("resource://devtools/client/memory/constants.js"); +const { + refresh, +} = require("resource://devtools/client/memory/actions/refresh.js"); +/** + * Sets the tree map display as the current display and refreshes the tree map + * census. + */ +exports.setTreeMapAndRefresh = function (heapWorker, display) { + return async function ({ dispatch, getState }) { + dispatch(setTreeMap(display)); + await dispatch(refresh(heapWorker)); + }; +}; + +/** + * Clears out all cached census data in the snapshots and sets new display data + * for tree maps. + * + * @param {treeMapModel} display + */ +const setTreeMap = (exports.setTreeMap = function (display) { + assert( + typeof display === "object" && + display && + display.breakdown && + display.breakdown.by, + "Breakdowns must be an object with a `by` property, attempted to set: " + + JSON.stringify(display) + ); + + return { + type: actions.SET_TREE_MAP_DISPLAY, + display, + }; +}); diff --git a/devtools/client/memory/actions/view.js b/devtools/client/memory/actions/view.js new file mode 100644 index 0000000000..af1bc7b21a --- /dev/null +++ b/devtools/client/memory/actions/view.js @@ -0,0 +1,69 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { actions } = require("resource://devtools/client/memory/constants.js"); +const { + findSelectedSnapshot, +} = require("resource://devtools/client/memory/utils.js"); +const refresh = require("resource://devtools/client/memory/actions/refresh.js"); + +/** + * Change the currently selected view. + * + * @param {viewState} view + */ +const changeView = (exports.changeView = function (view) { + return function ({ dispatch, getState }) { + dispatch({ + type: actions.CHANGE_VIEW, + newViewState: view, + oldDiffing: getState().diffing, + oldSelected: findSelectedSnapshot(getState()), + }); + }; +}); + +/** + * Given that we are in the INDIVIDUALS view state, go back to the state we were + * in before. + */ +const popView = (exports.popView = function () { + return function ({ dispatch, getState }) { + const { previous } = getState().view; + assert(previous); + dispatch({ + type: actions.POP_VIEW, + previousView: previous, + }); + }; +}); + +/** + * Change the currently selected view and ensure all our data is up to date from + * the heap worker. + * + * @param {viewState} view + * @param {HeapAnalysesClient} heapWorker + */ +exports.changeViewAndRefresh = function (view, heapWorker) { + return async function ({ dispatch, getState }) { + dispatch(changeView(view)); + await dispatch(refresh.refresh(heapWorker)); + }; +}; + +/** + * Given that we are in the INDIVIDUALS view state, go back to the state we were + * previously in and refresh our data. + * + * @param {HeapAnalysesClient} heapWorker + */ +exports.popViewAndRefresh = function (heapWorker) { + return async function ({ dispatch, getState }) { + dispatch(popView()); + await dispatch(refresh.refresh(heapWorker)); + }; +}; diff --git a/devtools/client/memory/app.js b/devtools/client/memory/app.js new file mode 100644 index 0000000000..1549cf23eb --- /dev/null +++ b/devtools/client/memory/app.js @@ -0,0 +1,441 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const { + censusDisplays, + labelDisplays, + treeMapDisplays, + diffingState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + toggleRecordingAllocationStacks, +} = require("resource://devtools/client/memory/actions/allocations.js"); +const { + setCensusDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + setLabelDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/label-display.js"); +const { + setTreeMapDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/tree-map-display.js"); + +const { + getCustomCensusDisplays, + getCustomLabelDisplays, + getCustomTreeMapDisplays, +} = require("resource://devtools/client/memory/utils.js"); +const { + selectSnapshotForDiffingAndRefresh, + toggleDiffing, + expandDiffingCensusNode, + collapseDiffingCensusNode, + focusDiffingCensusNode, +} = require("resource://devtools/client/memory/actions/diffing.js"); +const { + setFilterStringAndRefresh, +} = require("resource://devtools/client/memory/actions/filter.js"); +const { + pickFileAndExportSnapshot, + pickFileAndImportSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/io.js"); +const { + selectSnapshotAndRefresh, + takeSnapshotAndCensus, + clearSnapshots, + deleteSnapshot, + fetchImmediatelyDominated, + expandCensusNode, + collapseCensusNode, + focusCensusNode, + expandDominatorTreeNode, + collapseDominatorTreeNode, + focusDominatorTreeNode, + fetchIndividuals, + focusIndividual, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeViewAndRefresh, + popViewAndRefresh, +} = require("resource://devtools/client/memory/actions/view.js"); +const { + resizeShortestPaths, +} = require("resource://devtools/client/memory/actions/sizes.js"); +const Toolbar = createFactory( + require("resource://devtools/client/memory/components/Toolbar.js") +); +const List = createFactory( + require("resource://devtools/client/memory/components/List.js") +); +const SnapshotListItem = createFactory( + require("resource://devtools/client/memory/components/SnapshotListItem.js") +); +const Heap = createFactory( + require("resource://devtools/client/memory/components/Heap.js") +); +const { + app: appModel, +} = require("resource://devtools/client/memory/models.js"); + +class MemoryApp extends Component { + static get propTypes() { + return { + allocations: appModel.allocations, + censusDisplay: appModel.censusDisplay, + commands: appModel.commands, + diffing: appModel.diffing, + dispatch: PropTypes.func, + filter: appModel.filter, + front: appModel.front, + heapWorker: appModel.heapWorker, + individuals: appModel.individuals, + labelDisplay: appModel.labelDisplay, + sizes: PropTypes.object, + snapshots: appModel.snapshots, + toolbox: PropTypes.object, + view: appModel.view, + }; + } + + static get childContextTypes() { + return { + front: PropTypes.any, + heapWorker: PropTypes.any, + toolbox: PropTypes.any, + }; + } + + static get defaultProps() { + return {}; + } + + constructor(props) { + super(props); + this.onKeyDown = this.onKeyDown.bind(this); + this._getCensusDisplays = this._getCensusDisplays.bind(this); + this._getLabelDisplays = this._getLabelDisplays.bind(this); + this._getTreeMapDisplays = this._getTreeMapDisplays.bind(this); + } + + getChildContext() { + return { + front: this.props.front, + heapWorker: this.props.heapWorker, + toolbox: this.props.toolbox, + }; + } + + componentDidMount() { + // Attach the keydown listener directly to the window. When an element that + // has the focus (such as a tree node) is removed from the DOM, the focus + // falls back to the body. + window.addEventListener("keydown", this.onKeyDown); + } + + componentWillUnmount() { + window.removeEventListener("keydown", this.onKeyDown); + } + + onKeyDown(e) { + const { snapshots, dispatch, heapWorker } = this.props; + const selectedSnapshot = snapshots.find(s => s.selected); + const selectedIndex = snapshots.indexOf(selectedSnapshot); + + const isOSX = Services.appinfo.OS == "Darwin"; + const isAccelKey = (isOSX && e.metaKey) || (!isOSX && e.ctrlKey); + + // On ACCEL+UP, select previous snapshot. + if (isAccelKey && e.key === "ArrowUp") { + const previousIndex = Math.max(0, selectedIndex - 1); + const previousSnapshotId = snapshots[previousIndex].id; + dispatch(selectSnapshotAndRefresh(heapWorker, previousSnapshotId)); + } + + // On ACCEL+DOWN, select next snapshot. + if (isAccelKey && e.key === "ArrowDown") { + const nextIndex = Math.min(snapshots.length - 1, selectedIndex + 1); + const nextSnapshotId = snapshots[nextIndex].id; + dispatch(selectSnapshotAndRefresh(heapWorker, nextSnapshotId)); + } + } + + _getCensusDisplays() { + const customDisplays = getCustomCensusDisplays(); + const custom = Object.keys(customDisplays).reduce((arr, key) => { + arr.push(customDisplays[key]); + return arr; + }, []); + + return [ + censusDisplays.coarseType, + censusDisplays.allocationStack, + censusDisplays.invertedAllocationStack, + ].concat(custom); + } + + _getLabelDisplays() { + const customDisplays = getCustomLabelDisplays(); + const custom = Object.keys(customDisplays).reduce((arr, key) => { + arr.push(customDisplays[key]); + return arr; + }, []); + + return [labelDisplays.coarseType, labelDisplays.allocationStack].concat( + custom + ); + } + + _getTreeMapDisplays() { + const customDisplays = getCustomTreeMapDisplays(); + const custom = Object.keys(customDisplays).reduce((arr, key) => { + arr.push(customDisplays[key]); + return arr; + }, []); + + return [treeMapDisplays.coarseType].concat(custom); + } + + render() { + const { + commands, + dispatch, + snapshots, + front, + heapWorker, + allocations, + toolbox, + filter, + diffing, + view, + sizes, + censusDisplay, + labelDisplay, + individuals, + } = this.props; + + const selectedSnapshot = snapshots.find(s => s.selected); + + const onClickSnapshotListItem = + diffing && diffing.state === diffingState.SELECTING + ? snapshot => + dispatch(selectSnapshotForDiffingAndRefresh(heapWorker, snapshot)) + : snapshot => + dispatch(selectSnapshotAndRefresh(heapWorker, snapshot.id)); + + return dom.div( + { + id: "memory-tool", + }, + + Toolbar({ + snapshots, + censusDisplays: this._getCensusDisplays(), + censusDisplay, + onCensusDisplayChange: newDisplay => + dispatch(setCensusDisplayAndRefresh(heapWorker, newDisplay)), + onImportClick: () => + dispatch(pickFileAndImportSnapshotAndCensus(heapWorker)), + onClearSnapshotsClick: () => dispatch(clearSnapshots(heapWorker)), + onTakeSnapshotClick: () => + dispatch(takeSnapshotAndCensus(front, heapWorker)), + onToggleRecordAllocationStacks: () => + dispatch(toggleRecordingAllocationStacks(commands)), + allocations, + filterString: filter, + setFilterString: filterString => + dispatch(setFilterStringAndRefresh(filterString, heapWorker)), + diffing, + onToggleDiffing: () => dispatch(toggleDiffing()), + view, + labelDisplays: this._getLabelDisplays(), + labelDisplay, + onLabelDisplayChange: newDisplay => + dispatch(setLabelDisplayAndRefresh(heapWorker, newDisplay)), + treeMapDisplays: this._getTreeMapDisplays(), + onTreeMapDisplayChange: newDisplay => + dispatch(setTreeMapDisplayAndRefresh(heapWorker, newDisplay)), + onViewChange: v => dispatch(changeViewAndRefresh(v, heapWorker)), + }), + + dom.div( + { + id: "memory-tool-container", + }, + + List({ + itemComponent: SnapshotListItem, + items: snapshots, + onSave: snapshot => dispatch(pickFileAndExportSnapshot(snapshot)), + onDelete: snapshot => dispatch(deleteSnapshot(heapWorker, snapshot)), + onClick: onClickSnapshotListItem, + diffing, + }), + + Heap({ + snapshot: selectedSnapshot, + diffing, + onViewSourceInDebugger: ({ url, line, column }) => { + toolbox.viewSourceInDebugger(url, line, column); + }, + onSnapshotClick: () => + dispatch(takeSnapshotAndCensus(front, heapWorker)), + onLoadMoreSiblings: lazyChildren => + dispatch( + fetchImmediatelyDominated( + heapWorker, + selectedSnapshot.id, + lazyChildren + ) + ), + onPopView: () => dispatch(popViewAndRefresh(heapWorker)), + individuals, + onViewIndividuals: node => { + const snapshotId = diffing + ? diffing.secondSnapshotId + : selectedSnapshot.id; + dispatch( + fetchIndividuals( + heapWorker, + snapshotId, + censusDisplay.breakdown, + node.reportLeafIndex + ) + ); + }, + onFocusIndividual: node => { + assert( + view.state === viewState.INDIVIDUALS, + "Should be in the individuals view" + ); + dispatch(focusIndividual(node)); + }, + onCensusExpand: (census, node) => { + if (diffing) { + assert( + diffing.census === census, + "Should only expand active census" + ); + dispatch(expandDiffingCensusNode(node)); + } else { + assert( + selectedSnapshot && selectedSnapshot.census === census, + "If not diffing, " + + "should be expanding on selected snapshot's census" + ); + dispatch(expandCensusNode(selectedSnapshot.id, node)); + } + }, + onCensusCollapse: (census, node) => { + if (diffing) { + assert( + diffing.census === census, + "Should only collapse active census" + ); + dispatch(collapseDiffingCensusNode(node)); + } else { + assert( + selectedSnapshot && selectedSnapshot.census === census, + "If not diffing, " + + "should be collapsing on selected snapshot's census" + ); + dispatch(collapseCensusNode(selectedSnapshot.id, node)); + } + }, + onCensusFocus: (census, node) => { + if (diffing) { + assert( + diffing.census === census, + "Should only focus nodes in active census" + ); + dispatch(focusDiffingCensusNode(node)); + } else { + assert( + selectedSnapshot && selectedSnapshot.census === census, + "If not diffing, " + + "should be focusing on nodes in selected snapshot's census" + ); + dispatch(focusCensusNode(selectedSnapshot.id, node)); + } + }, + onDominatorTreeExpand: node => { + assert( + view.state === viewState.DOMINATOR_TREE, + "If expanding dominator tree nodes, " + + "should be in dominator tree view" + ); + assert( + selectedSnapshot, + "...and we should have a selected snapshot" + ); + assert( + selectedSnapshot.dominatorTree, + "...and that snapshot should have a dominator tree" + ); + dispatch(expandDominatorTreeNode(selectedSnapshot.id, node)); + }, + onDominatorTreeCollapse: node => { + assert( + view.state === viewState.DOMINATOR_TREE, + "If collapsing dominator tree nodes, " + + "should be in dominator tree view" + ); + assert( + selectedSnapshot, + "...and we should have a selected snapshot" + ); + assert( + selectedSnapshot.dominatorTree, + "...and that snapshot should have a dominator tree" + ); + dispatch(collapseDominatorTreeNode(selectedSnapshot.id, node)); + }, + onDominatorTreeFocus: node => { + assert( + view.state === viewState.DOMINATOR_TREE, + "If focusing dominator tree nodes, " + + "should be in dominator tree view" + ); + assert( + selectedSnapshot, + "...and we should have a selected snapshot" + ); + assert( + selectedSnapshot.dominatorTree, + "...and that snapshot should have a dominator tree" + ); + dispatch(focusDominatorTreeNode(selectedSnapshot.id, node)); + }, + onShortestPathsResize: newSize => { + dispatch(resizeShortestPaths(newSize)); + }, + sizes, + view, + }) + ) + ); + } +} + +/** + * Passed into react-redux's `connect` method that is called on store change + * and passed to components. + */ +function mapStateToProps(state) { + return state; +} + +module.exports = connect(mapStateToProps)(MemoryApp); diff --git a/devtools/client/memory/components/Census.js b/devtools/client/memory/components/Census.js new file mode 100644 index 0000000000..d33050b019 --- /dev/null +++ b/devtools/client/memory/components/Census.js @@ -0,0 +1,94 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const Tree = createFactory( + require("resource://devtools/client/shared/components/VirtualizedTree.js") +); +const CensusTreeItem = createFactory( + require("resource://devtools/client/memory/components/CensusTreeItem.js") +); +const { + TREE_ROW_HEIGHT, +} = require("resource://devtools/client/memory/constants.js"); +const { + censusModel, + diffingModel, +} = require("resource://devtools/client/memory/models.js"); + +class Census extends Component { + static get propTypes() { + return { + census: censusModel, + onExpand: PropTypes.func.isRequired, + onCollapse: PropTypes.func.isRequired, + onFocus: PropTypes.func.isRequired, + onViewSourceInDebugger: PropTypes.func.isRequired, + onViewIndividuals: PropTypes.func.isRequired, + diffing: diffingModel, + }; + } + + render() { + const { + census, + onExpand, + onCollapse, + onFocus, + diffing, + onViewSourceInDebugger, + onViewIndividuals, + } = this.props; + + const report = census.report; + const parentMap = census.parentMap; + const { totalBytes, totalCount } = report; + + const getPercentBytes = + totalBytes === 0 ? _ => 0 : bytes => (bytes / totalBytes) * 100; + + const getPercentCount = + totalCount === 0 ? _ => 0 : count => (count / totalCount) * 100; + + return Tree({ + autoExpandDepth: 0, + preventNavigationOnArrowRight: false, + focused: census.focused, + getParent: node => { + const parent = parentMap[node.id]; + return parent === report ? null : parent; + }, + getChildren: node => node.children || [], + isExpanded: node => census.expanded.has(node.id), + onExpand, + onCollapse, + onFocus, + renderItem: (item, depth, focused, arrow, expanded) => + new CensusTreeItem({ + onViewSourceInDebugger, + item, + depth, + focused, + arrow, + expanded, + getPercentBytes, + getPercentCount, + diffing, + inverted: census.display.inverted, + onViewIndividuals, + }), + getRoots: () => report.children || [], + getKey: node => node.id, + itemHeight: TREE_ROW_HEIGHT, + }); + } +} + +module.exports = Census; diff --git a/devtools/client/memory/components/CensusHeader.js b/devtools/client/memory/components/CensusHeader.js new file mode 100644 index 0000000000..bdd9d15087 --- /dev/null +++ b/devtools/client/memory/components/CensusHeader.js @@ -0,0 +1,79 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { L10N } = require("resource://devtools/client/memory/utils.js"); +const models = require("resource://devtools/client/memory/models.js"); + +class CensusHeader extends Component { + static get propTypes() { + return { + diffing: models.diffingModel, + }; + } + + render() { + let individualsCell; + if (!this.props.diffing) { + individualsCell = dom.span({ + className: "heap-tree-item-field heap-tree-item-individuals", + }); + } + + return dom.div( + { + className: "header", + }, + + dom.span( + { + className: "heap-tree-item-bytes", + title: L10N.getStr("heapview.field.bytes.tooltip"), + }, + L10N.getStr("heapview.field.bytes") + ), + + dom.span( + { + className: "heap-tree-item-count", + title: L10N.getStr("heapview.field.count.tooltip"), + }, + L10N.getStr("heapview.field.count") + ), + + dom.span( + { + className: "heap-tree-item-total-bytes", + title: L10N.getStr("heapview.field.totalbytes.tooltip"), + }, + L10N.getStr("heapview.field.totalbytes") + ), + + dom.span( + { + className: "heap-tree-item-total-count", + title: L10N.getStr("heapview.field.totalcount.tooltip"), + }, + L10N.getStr("heapview.field.totalcount") + ), + + individualsCell, + + dom.span( + { + className: "heap-tree-item-name", + title: L10N.getStr("heapview.field.name.tooltip"), + }, + L10N.getStr("heapview.field.name") + ) + ); + } +} + +module.exports = CensusHeader; diff --git a/devtools/client/memory/components/CensusTreeItem.js b/devtools/client/memory/components/CensusTreeItem.js new file mode 100644 index 0000000000..39fdbeb052 --- /dev/null +++ b/devtools/client/memory/components/CensusTreeItem.js @@ -0,0 +1,185 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { isSavedFrame } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + L10N, + formatNumber, + formatPercent, +} = require("resource://devtools/client/memory/utils.js"); +const Frame = createFactory( + require("resource://devtools/client/shared/components/Frame.js") +); +const { + TREE_ROW_HEIGHT, +} = require("resource://devtools/client/memory/constants.js"); +const models = require("resource://devtools/client/memory/models.js"); + +class CensusTreeItem extends Component { + static get propTypes() { + return { + arrow: PropTypes.any, + depth: PropTypes.number.isRequired, + diffing: models.app.diffing, + expanded: PropTypes.bool.isRequired, + focused: PropTypes.bool.isRequired, + getPercentBytes: PropTypes.func.isRequired, + getPercentCount: PropTypes.func.isRequired, + inverted: PropTypes.bool, + item: PropTypes.object.isRequired, + onViewIndividuals: PropTypes.func.isRequired, + onViewSourceInDebugger: PropTypes.func.isRequired, + }; + } + + constructor(props) { + super(props); + this.toLabel = this.toLabel.bind(this); + } + + shouldComponentUpdate(nextProps, nextState) { + return ( + this.props.item != nextProps.item || + this.props.depth != nextProps.depth || + this.props.expanded != nextProps.expanded || + this.props.focused != nextProps.focused || + this.props.diffing != nextProps.diffing + ); + } + + toLabel(name, onViewSourceInDebugger) { + if (isSavedFrame(name)) { + return Frame({ + frame: name, + onClick: onViewSourceInDebugger, + showFunctionName: true, + showHost: true, + }); + } + + if (name === null) { + return L10N.getStr("tree-item.root"); + } + + if (name === "noStack") { + return L10N.getStr("tree-item.nostack"); + } + + if (name === "noFilename") { + return L10N.getStr("tree-item.nofilename"); + } + + return String(name); + } + + render() { + const { + item, + depth, + arrow, + focused, + getPercentBytes, + getPercentCount, + diffing, + onViewSourceInDebugger, + onViewIndividuals, + inverted, + } = this.props; + + const bytes = formatNumber(item.bytes, !!diffing); + const percentBytes = formatPercent(getPercentBytes(item.bytes), !!diffing); + + const count = formatNumber(item.count, !!diffing); + const percentCount = formatPercent(getPercentCount(item.count), !!diffing); + + const totalBytes = formatNumber(item.totalBytes, !!diffing); + const percentTotalBytes = formatPercent( + getPercentBytes(item.totalBytes), + !!diffing + ); + + const totalCount = formatNumber(item.totalCount, !!diffing); + const percentTotalCount = formatPercent( + getPercentCount(item.totalCount), + !!diffing + ); + + let pointer; + if (inverted && depth > 0) { + pointer = dom.span({ className: "children-pointer" }, "↖"); + } else if (!inverted && item.children?.length) { + pointer = dom.span({ className: "children-pointer" }, "↘"); + } + + let individualsCell; + if (!diffing) { + let individualsButton; + if (item.reportLeafIndex !== undefined) { + individualsButton = dom.button( + { + key: `individuals-button-${item.id}`, + title: L10N.getStr("tree-item.view-individuals.tooltip"), + className: "devtools-button individuals-button", + onClick: e => { + // Don't let the event bubble up to cause this item to focus after + // we have switched views, which would lead to assertion failures. + e.preventDefault(); + e.stopPropagation(); + + onViewIndividuals(item); + }, + }, + "⁂" + ); + } + individualsCell = dom.span( + { className: "heap-tree-item-field heap-tree-item-individuals" }, + individualsButton + ); + } + + return dom.div( + { className: `heap-tree-item ${focused ? "focused" : ""}` }, + dom.span( + { className: "heap-tree-item-field heap-tree-item-bytes" }, + dom.span({ className: "heap-tree-number" }, bytes), + dom.span({ className: "heap-tree-percent" }, percentBytes) + ), + dom.span( + { className: "heap-tree-item-field heap-tree-item-count" }, + dom.span({ className: "heap-tree-number" }, count), + dom.span({ className: "heap-tree-percent" }, percentCount) + ), + dom.span( + { className: "heap-tree-item-field heap-tree-item-total-bytes" }, + dom.span({ className: "heap-tree-number" }, totalBytes), + dom.span({ className: "heap-tree-percent" }, percentTotalBytes) + ), + dom.span( + { className: "heap-tree-item-field heap-tree-item-total-count" }, + dom.span({ className: "heap-tree-number" }, totalCount), + dom.span({ className: "heap-tree-percent" }, percentTotalCount) + ), + individualsCell, + dom.span( + { + className: "heap-tree-item-field heap-tree-item-name", + style: { marginInlineStart: depth * TREE_ROW_HEIGHT }, + }, + arrow, + pointer, + this.toLabel(item.name, onViewSourceInDebugger) + ) + ); + } +} + +module.exports = CensusTreeItem; diff --git a/devtools/client/memory/components/DominatorTree.js b/devtools/client/memory/components/DominatorTree.js new file mode 100644 index 0000000000..9c767cece7 --- /dev/null +++ b/devtools/client/memory/components/DominatorTree.js @@ -0,0 +1,250 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + createParentMap, +} = require("resource://devtools/shared/heapsnapshot/CensusUtils.js"); +const Tree = createFactory( + require("resource://devtools/client/shared/components/VirtualizedTree.js") +); +const DominatorTreeItem = createFactory( + require("resource://devtools/client/memory/components/DominatorTreeItem.js") +); +const { L10N } = require("resource://devtools/client/memory/utils.js"); +const { + TREE_ROW_HEIGHT, + dominatorTreeState, +} = require("resource://devtools/client/memory/constants.js"); +const { + dominatorTreeModel, +} = require("resource://devtools/client/memory/models.js"); +const DominatorTreeLazyChildren = require("resource://devtools/client/memory/dominator-tree-lazy-children.js"); + +const DOMINATOR_TREE_AUTO_EXPAND_DEPTH = 3; + +/** + * A throbber that represents a subtree in the dominator tree that is actively + * being incrementally loaded and fetched from the `HeapAnalysesWorker`. + */ +class DominatorTreeSubtreeFetchingClass extends Component { + static get propTypes() { + return { + depth: PropTypes.number.isRequired, + focused: PropTypes.bool.isRequired, + }; + } + + shouldComponentUpdate(nextProps, nextState) { + return ( + this.props.depth !== nextProps.depth || + this.props.focused !== nextProps.focused + ); + } + + render() { + const { depth, focused } = this.props; + + return dom.div( + { + className: `heap-tree-item subtree-fetching ${ + focused ? "focused" : "" + }`, + }, + dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }), + dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }), + dom.span({ + className: "heap-tree-item-field heap-tree-item-name devtools-throbber", + style: { marginInlineStart: depth * TREE_ROW_HEIGHT }, + }) + ); + } +} + +/** + * A link to fetch and load more siblings in the dominator tree, when there are + * already many loaded above. + */ +class DominatorTreeSiblingLinkClass extends Component { + static get propTypes() { + return { + depth: PropTypes.number.isRequired, + focused: PropTypes.bool.isRequired, + item: PropTypes.instanceOf(DominatorTreeLazyChildren).isRequired, + onLoadMoreSiblings: PropTypes.func.isRequired, + }; + } + + shouldComponentUpdate(nextProps, nextState) { + return ( + this.props.depth !== nextProps.depth || + this.props.focused !== nextProps.focused + ); + } + + render() { + const { depth, focused, item, onLoadMoreSiblings } = this.props; + + return dom.div( + { + className: `heap-tree-item more-children ${focused ? "focused" : ""}`, + }, + dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }), + dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }), + dom.span( + { + className: "heap-tree-item-field heap-tree-item-name", + style: { marginInlineStart: depth * TREE_ROW_HEIGHT }, + }, + dom.a( + { + className: "load-more-link", + onClick: () => onLoadMoreSiblings(item), + }, + L10N.getStr("tree-item.load-more") + ) + ) + ); + } +} + +class DominatorTree extends Component { + static get propTypes() { + return { + dominatorTree: dominatorTreeModel.isRequired, + onLoadMoreSiblings: PropTypes.func.isRequired, + onViewSourceInDebugger: PropTypes.func.isRequired, + onExpand: PropTypes.func.isRequired, + onCollapse: PropTypes.func.isRequired, + onFocus: PropTypes.func.isRequired, + }; + } + + shouldComponentUpdate(nextProps, nextState) { + // Safe to use referential equality here because all of our mutations on + // dominator tree models use immutableUpdate in a persistent manner. The + // exception to the rule are mutations of the expanded set, however we take + // care that the dominatorTree model itself is still re-allocated when + // mutations to the expanded set occur. Because of the re-allocations, we + // can continue using referential equality here. + return this.props.dominatorTree !== nextProps.dominatorTree; + } + + render() { + const { dominatorTree, onViewSourceInDebugger, onLoadMoreSiblings } = + this.props; + + const parentMap = createParentMap(dominatorTree.root, node => node.nodeId); + + return Tree({ + key: "dominator-tree-tree", + autoExpandDepth: DOMINATOR_TREE_AUTO_EXPAND_DEPTH, + preventNavigationOnArrowRight: false, + focused: dominatorTree.focused, + getParent: node => + node instanceof DominatorTreeLazyChildren + ? parentMap[node.parentNodeId()] + : parentMap[node.nodeId], + getChildren: node => { + const children = node.children ? node.children.slice() : []; + if (node.moreChildrenAvailable) { + children.push( + new DominatorTreeLazyChildren(node.nodeId, children.length) + ); + } + return children; + }, + isExpanded: node => { + return node instanceof DominatorTreeLazyChildren + ? false + : dominatorTree.expanded.has(node.nodeId); + }, + onExpand: item => { + if (item instanceof DominatorTreeLazyChildren) { + return; + } + + if ( + item.moreChildrenAvailable && + (!item.children || !item.children.length) + ) { + const startIndex = item.children ? item.children.length : 0; + onLoadMoreSiblings( + new DominatorTreeLazyChildren(item.nodeId, startIndex) + ); + } + + this.props.onExpand(item); + }, + onCollapse: item => { + if (item instanceof DominatorTreeLazyChildren) { + return; + } + + this.props.onCollapse(item); + }, + onFocus: item => { + if (item instanceof DominatorTreeLazyChildren) { + return; + } + + this.props.onFocus(item); + }, + renderItem: (item, depth, focused, arrow, expanded) => { + if (item instanceof DominatorTreeLazyChildren) { + if (item.isFirstChild()) { + assert( + dominatorTree.state === dominatorTreeState.INCREMENTAL_FETCHING, + "If we are displaying a throbber for loading a subtree, " + + "then we should be INCREMENTAL_FETCHING those children right now" + ); + return DominatorTreeSubtreeFetching({ + key: item.key(), + depth, + focused, + }); + } + + return DominatorTreeSiblingLink({ + key: item.key(), + item, + depth, + focused, + onLoadMoreSiblings, + }); + } + + return DominatorTreeItem({ + item, + depth, + focused, + arrow, + expanded, + getPercentSize: size => + (size / dominatorTree.root.retainedSize) * 100, + onViewSourceInDebugger, + }); + }, + getRoots: () => [dominatorTree.root], + getKey: node => + node instanceof DominatorTreeLazyChildren ? node.key() : node.nodeId, + itemHeight: TREE_ROW_HEIGHT, + }); + } +} + +const DominatorTreeSubtreeFetching = createFactory( + DominatorTreeSubtreeFetchingClass +); +const DominatorTreeSiblingLink = createFactory(DominatorTreeSiblingLinkClass); + +module.exports = DominatorTree; diff --git a/devtools/client/memory/components/DominatorTreeHeader.js b/devtools/client/memory/components/DominatorTreeHeader.js new file mode 100644 index 0000000000..292b74ea60 --- /dev/null +++ b/devtools/client/memory/components/DominatorTreeHeader.js @@ -0,0 +1,51 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { L10N } = require("resource://devtools/client/memory/utils.js"); + +class DominatorTreeHeader extends Component { + static get propTypes() { + return {}; + } + + render() { + return dom.div( + { + className: "header", + }, + + dom.span( + { + className: "heap-tree-item-bytes", + title: L10N.getStr("heapview.field.retainedSize.tooltip"), + }, + L10N.getStr("heapview.field.retainedSize") + ), + + dom.span( + { + className: "heap-tree-item-bytes", + title: L10N.getStr("heapview.field.shallowSize.tooltip"), + }, + L10N.getStr("heapview.field.shallowSize") + ), + + dom.span( + { + className: "heap-tree-item-name", + title: L10N.getStr("dominatortree.field.label.tooltip"), + }, + L10N.getStr("dominatortree.field.label") + ) + ); + } +} + +module.exports = DominatorTreeHeader; diff --git a/devtools/client/memory/components/DominatorTreeItem.js b/devtools/client/memory/components/DominatorTreeItem.js new file mode 100644 index 0000000000..59cb542a3a --- /dev/null +++ b/devtools/client/memory/components/DominatorTreeItem.js @@ -0,0 +1,174 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + assert, + isSavedFrame, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + L10N, + formatNumber, + formatPercent, +} = require("resource://devtools/client/memory/utils.js"); +const Frame = createFactory( + require("resource://devtools/client/shared/components/Frame.js") +); +const { + TREE_ROW_HEIGHT, +} = require("resource://devtools/client/memory/constants.js"); + +class SeparatorClass extends Component { + render() { + return dom.span({ className: "separator" }, "›"); + } +} + +const Separator = createFactory(SeparatorClass); + +class DominatorTreeItem extends Component { + static get propTypes() { + return { + item: PropTypes.object.isRequired, + depth: PropTypes.number.isRequired, + arrow: PropTypes.object, + expanded: PropTypes.bool.isRequired, + focused: PropTypes.bool.isRequired, + getPercentSize: PropTypes.func.isRequired, + onViewSourceInDebugger: PropTypes.func.isRequired, + }; + } + + shouldComponentUpdate(nextProps, nextState) { + return ( + this.props.item != nextProps.item || + this.props.depth != nextProps.depth || + this.props.expanded != nextProps.expanded || + this.props.focused != nextProps.focused + ); + } + + render() { + const { + item, + depth, + arrow, + focused, + getPercentSize, + onViewSourceInDebugger, + } = this.props; + + const retainedSize = formatNumber(item.retainedSize); + const percentRetainedSize = formatPercent( + getPercentSize(item.retainedSize) + ); + + const shallowSize = formatNumber(item.shallowSize); + const percentShallowSize = formatPercent(getPercentSize(item.shallowSize)); + + // Build up our label UI as an array of each label piece, which is either a + // string or a frame, and separators in between them. + + assert(!!item.label.length, "Our label should not be empty"); + const label = Array(item.label.length * 2 - 1); + label.fill(undefined); + + for (let i = 0, length = item.label.length; i < length; i++) { + const piece = item.label[i]; + const key = `${item.nodeId}-label-${i}`; + + // `i` is the index of the label piece we are rendering, `label[i*2]` is + // where the rendered label piece belngs, and `label[i*2+1]` (if it isn't + // out of bounds) is where the separator belongs. + + if (isSavedFrame(piece)) { + label[i * 2] = Frame({ + key, + onClick: onViewSourceInDebugger, + frame: piece, + showFunctionName: true, + }); + } else if (piece === "noStack") { + label[i * 2] = dom.span( + { key, className: "not-available" }, + L10N.getStr("tree-item.nostack") + ); + } else if (piece === "noFilename") { + label[i * 2] = dom.span( + { key, className: "not-available" }, + L10N.getStr("tree-item.nofilename") + ); + } else if (piece === "JS::ubi::RootList") { + // Don't use the usual labeling machinery for root lists: replace it + // with the "GC Roots" string. + label.splice(0, label.length); + label.push(L10N.getStr("tree-item.rootlist")); + break; + } else { + label[i * 2] = piece; + } + + // If this is not the last piece of the label, add a separator. + if (i < length - 1) { + label[i * 2 + 1] = Separator({ key: `${item.nodeId}-separator-${i}` }); + } + } + + return dom.div( + { + className: `heap-tree-item ${focused ? "focused" : ""} node-${ + item.nodeId + }`, + }, + + dom.span( + { + className: "heap-tree-item-field heap-tree-item-bytes", + }, + dom.span( + { + className: "heap-tree-number", + }, + retainedSize + ), + dom.span({ className: "heap-tree-percent" }, percentRetainedSize) + ), + + dom.span( + { + className: "heap-tree-item-field heap-tree-item-bytes", + }, + dom.span( + { + className: "heap-tree-number", + }, + shallowSize + ), + dom.span({ className: "heap-tree-percent" }, percentShallowSize) + ), + + dom.span( + { + className: "heap-tree-item-field heap-tree-item-name", + style: { marginInlineStart: depth * TREE_ROW_HEIGHT }, + }, + arrow, + label, + dom.span( + { className: "heap-tree-item-address" }, + `@ 0x${item.nodeId.toString(16)}` + ) + ) + ); + } +} + +module.exports = DominatorTreeItem; diff --git a/devtools/client/memory/components/Heap.js b/devtools/client/memory/components/Heap.js new file mode 100644 index 0000000000..2c78a63749 --- /dev/null +++ b/devtools/client/memory/components/Heap.js @@ -0,0 +1,547 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + assert, + safeErrorString, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const Census = createFactory( + require("resource://devtools/client/memory/components/Census.js") +); +const CensusHeader = createFactory( + require("resource://devtools/client/memory/components/CensusHeader.js") +); +const DominatorTree = createFactory( + require("resource://devtools/client/memory/components/DominatorTree.js") +); +const DominatorTreeHeader = createFactory( + require("resource://devtools/client/memory/components/DominatorTreeHeader.js") +); +const TreeMap = createFactory( + require("resource://devtools/client/memory/components/TreeMap.js") +); +const HSplitBox = createFactory( + require("resource://devtools/client/shared/components/HSplitBox.js") +); +const Individuals = createFactory( + require("resource://devtools/client/memory/components/Individuals.js") +); +const IndividualsHeader = createFactory( + require("resource://devtools/client/memory/components/IndividualsHeader.js") +); +const ShortestPaths = createFactory( + require("resource://devtools/client/memory/components/ShortestPaths.js") +); +const { + getStatusTextFull, + L10N, +} = require("resource://devtools/client/memory/utils.js"); +const { + snapshotState: states, + diffingState, + viewState, + censusState, + treeMapState, + dominatorTreeState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const models = require("resource://devtools/client/memory/models.js"); +const { snapshot: snapshotModel, diffingModel } = models; + +/** + * Get the app state's current state atom. + * + * @see the relevant state string constants in `../constants.js`. + * + * @param {models.view} view + * @param {snapshotModel} snapshot + * @param {diffingModel} diffing + * @param {individualsModel} individuals + * + * @return {snapshotState|diffingState|dominatorTreeState} + */ +function getState(view, snapshot, diffing, individuals) { + switch (view.state) { + case viewState.CENSUS: + return snapshot.census ? snapshot.census.state : snapshot.state; + + case viewState.DIFFING: + return diffing.state; + + case viewState.TREE_MAP: + return snapshot.treeMap ? snapshot.treeMap.state : snapshot.state; + + case viewState.DOMINATOR_TREE: + return snapshot.dominatorTree + ? snapshot.dominatorTree.state + : snapshot.state; + + case viewState.INDIVIDUALS: + return individuals.state; + } + + assert(false, `Unexpected view state: ${view.state}`); + return null; +} + +/** + * Return true if we should display a status message when we are in the given + * state. Return false otherwise. + * + * @param {snapshotState|diffingState|dominatorTreeState} state + * @param {models.view} view + * @param {snapshotModel} snapshot + * + * @returns {Boolean} + */ +function shouldDisplayStatus(state, view, snapshot) { + switch (state) { + case states.IMPORTING: + case states.SAVING: + case states.SAVED: + case states.READING: + case censusState.SAVING: + case treeMapState.SAVING: + case diffingState.SELECTING: + case diffingState.TAKING_DIFF: + case dominatorTreeState.COMPUTING: + case dominatorTreeState.COMPUTED: + case dominatorTreeState.FETCHING: + case individualsState.COMPUTING_DOMINATOR_TREE: + case individualsState.FETCHING: + return true; + } + return view.state === viewState.DOMINATOR_TREE && !snapshot.dominatorTree; +} + +/** + * Get the status text to display for the given state. + * + * @param {snapshotState|diffingState|dominatorTreeState} state + * @param {diffingModel} diffing + * + * @returns {String} + */ +function getStateStatusText(state, diffing) { + if (state === diffingState.SELECTING) { + return L10N.getStr( + diffing.firstSnapshotId === null + ? "diffing.prompt.selectBaseline" + : "diffing.prompt.selectComparison" + ); + } + + return getStatusTextFull(state); +} + +/** + * Given that we should display a status message, return true if we should also + * display a throbber along with the status message. Return false otherwise. + * + * @param {diffingModel} diffing + * + * @returns {Boolean} + */ +function shouldDisplayThrobber(diffing) { + return !diffing || diffing.state !== diffingState.SELECTING; +} + +/** + * Get the current state's error, or return null if there is none. + * + * @param {snapshotModel} snapshot + * @param {diffingModel} diffing + * @param {individualsModel} individuals + * + * @returns {Error|null} + */ +function getError(snapshot, diffing, individuals) { + if (diffing) { + if (diffing.state === diffingState.ERROR) { + return diffing.error; + } + if (diffing.census === censusState.ERROR) { + return diffing.census.error; + } + } + + if (snapshot) { + if (snapshot.state === states.ERROR) { + return snapshot.error; + } + + if (snapshot.census === censusState.ERROR) { + return snapshot.census.error; + } + + if (snapshot.treeMap === treeMapState.ERROR) { + return snapshot.treeMap.error; + } + + if ( + snapshot.dominatorTree && + snapshot.dominatorTree.state === dominatorTreeState.ERROR + ) { + return snapshot.dominatorTree.error; + } + } + + if (individuals && individuals.state === individualsState.ERROR) { + return individuals.error; + } + + return null; +} + +/** + * Main view for the memory tool. + * + * The Heap component contains several panels for different states; an initial + * state of only a button to take a snapshot, loading states, the census view + * tree, the dominator tree, etc. + */ +class Heap extends Component { + static get propTypes() { + return { + onSnapshotClick: PropTypes.func.isRequired, + onLoadMoreSiblings: PropTypes.func.isRequired, + onCensusExpand: PropTypes.func.isRequired, + onCensusCollapse: PropTypes.func.isRequired, + onDominatorTreeExpand: PropTypes.func.isRequired, + onDominatorTreeCollapse: PropTypes.func.isRequired, + onCensusFocus: PropTypes.func.isRequired, + onDominatorTreeFocus: PropTypes.func.isRequired, + onShortestPathsResize: PropTypes.func.isRequired, + snapshot: snapshotModel, + onViewSourceInDebugger: PropTypes.func.isRequired, + onPopView: PropTypes.func.isRequired, + individuals: models.individuals, + onViewIndividuals: PropTypes.func.isRequired, + onFocusIndividual: PropTypes.func.isRequired, + diffing: diffingModel, + view: models.view.isRequired, + sizes: PropTypes.object.isRequired, + }; + } + + constructor(props) { + super(props); + this._renderHeapView = this._renderHeapView.bind(this); + this._renderInitial = this._renderInitial.bind(this); + this._renderStatus = this._renderStatus.bind(this); + this._renderError = this._renderError.bind(this); + this._renderCensus = this._renderCensus.bind(this); + this._renderTreeMap = this._renderTreeMap.bind(this); + this._renderIndividuals = this._renderIndividuals.bind(this); + this._renderDominatorTree = this._renderDominatorTree.bind(this); + } + + /** + * Render the heap view's container panel with the given contents inside of + * it. + * + * @param {snapshotState|diffingState|dominatorTreeState} state + * @param {...Any} contents + */ + _renderHeapView(state, ...contents) { + return dom.div( + { + id: "heap-view", + "data-state": state, + }, + dom.div( + { + className: "heap-view-panel", + "data-state": state, + }, + ...contents + ) + ); + } + + _renderInitial(onSnapshotClick) { + return this._renderHeapView( + "initial", + dom.button( + { + className: "devtools-button take-snapshot", + onClick: onSnapshotClick, + "data-standalone": true, + }, + L10N.getStr("take-snapshot") + ) + ); + } + + _renderStatus(state, statusText, diffing) { + let throbber = ""; + if (shouldDisplayThrobber(diffing)) { + throbber = "devtools-throbber"; + } + + return this._renderHeapView( + state, + dom.span( + { + className: `snapshot-status ${throbber}`, + }, + statusText + ) + ); + } + + _renderError(state, statusText, error) { + return this._renderHeapView( + state, + dom.span({ className: "snapshot-status error" }, statusText), + dom.pre({}, safeErrorString(error)) + ); + } + + _renderCensus( + state, + census, + diffing, + onViewSourceInDebugger, + onViewIndividuals + ) { + assert( + census.report, + "Should not render census that does not have a report" + ); + + if (!census.report.children) { + const censusFilterMsg = census.filter + ? L10N.getStr("heapview.none-match") + : L10N.getStr("heapview.empty"); + const msg = diffing + ? L10N.getStr("heapview.no-difference") + : censusFilterMsg; + return this._renderHeapView(state, dom.div({ className: "empty" }, msg)); + } + + const contents = []; + + if ( + census.display.breakdown.by === "allocationStack" && + census.report.children && + census.report.children.length === 1 && + census.report.children[0].name === "noStack" + ) { + contents.push( + dom.div( + { className: "error no-allocation-stacks" }, + L10N.getStr("heapview.noAllocationStacks") + ) + ); + } + + contents.push(CensusHeader({ diffing })); + contents.push( + Census({ + onViewSourceInDebugger, + onViewIndividuals, + diffing, + census, + onExpand: node => this.props.onCensusExpand(census, node), + onCollapse: node => this.props.onCensusCollapse(census, node), + onFocus: node => this.props.onCensusFocus(census, node), + }) + ); + + return this._renderHeapView(state, ...contents); + } + + _renderTreeMap(state, treeMap) { + return this._renderHeapView(state, TreeMap({ treeMap })); + } + + _renderIndividuals( + state, + individuals, + dominatorTree, + onViewSourceInDebugger + ) { + assert( + individuals.state === individualsState.FETCHED, + "Should have fetched individuals" + ); + assert(dominatorTree?.root, "Should have a dominator tree and its root"); + + const tree = dom.div( + { + className: "vbox", + style: { + overflowY: "auto", + }, + }, + IndividualsHeader(), + Individuals({ + individuals, + dominatorTree, + onViewSourceInDebugger, + onFocus: this.props.onFocusIndividual, + }) + ); + + const shortestPaths = ShortestPaths({ + graph: individuals.focused ? individuals.focused.shortestPaths : null, + }); + + return this._renderHeapView( + state, + dom.div( + { className: "hbox devtools-toolbar" }, + dom.label( + { id: "pop-view-button-label" }, + dom.button( + { + id: "pop-view-button", + className: "devtools-button", + onClick: this.props.onPopView, + }, + L10N.getStr("toolbar.pop-view") + ), + L10N.getStr("toolbar.pop-view.label") + ), + dom.span( + { className: "toolbar-text" }, + L10N.getStr("toolbar.viewing-individuals") + ) + ), + HSplitBox({ + start: tree, + end: shortestPaths, + startWidth: this.props.sizes.shortestPathsSize, + onResize: this.props.onShortestPathsResize, + }) + ); + } + + _renderDominatorTree( + state, + onViewSourceInDebugger, + dominatorTree, + onLoadMoreSiblings + ) { + const tree = dom.div( + { + className: "vbox", + style: { + overflowY: "auto", + }, + }, + DominatorTreeHeader(), + DominatorTree({ + onViewSourceInDebugger, + dominatorTree, + onLoadMoreSiblings, + onExpand: this.props.onDominatorTreeExpand, + onCollapse: this.props.onDominatorTreeCollapse, + onFocus: this.props.onDominatorTreeFocus, + }) + ); + + const shortestPaths = ShortestPaths({ + graph: dominatorTree.focused ? dominatorTree.focused.shortestPaths : null, + }); + + return this._renderHeapView( + state, + HSplitBox({ + start: tree, + end: shortestPaths, + startWidth: this.props.sizes.shortestPathsSize, + onResize: this.props.onShortestPathsResize, + }) + ); + } + + render() { + const { + snapshot, + diffing, + onSnapshotClick, + onLoadMoreSiblings, + onViewSourceInDebugger, + onViewIndividuals, + individuals, + view, + } = this.props; + + if (!diffing && !snapshot && !individuals) { + return this._renderInitial(onSnapshotClick); + } + + const state = getState(view, snapshot, diffing, individuals); + const statusText = getStateStatusText(state, diffing); + + if (shouldDisplayStatus(state, view, snapshot)) { + return this._renderStatus(state, statusText, diffing); + } + + const error = getError(snapshot, diffing, individuals); + if (error) { + return this._renderError(state, statusText, error); + } + + if (view.state === viewState.CENSUS || view.state === viewState.DIFFING) { + const census = + view.state === viewState.CENSUS ? snapshot.census : diffing.census; + if (!census) { + return this._renderStatus(state, statusText, diffing); + } + return this._renderCensus( + state, + census, + diffing, + onViewSourceInDebugger, + onViewIndividuals + ); + } + + if (view.state === viewState.TREE_MAP) { + return this._renderTreeMap(state, snapshot.treeMap); + } + + if (view.state === viewState.INDIVIDUALS) { + assert( + individuals.state === individualsState.FETCHED, + "Should have fetched the individuals -- " + + "other states are rendered as statuses" + ); + return this._renderIndividuals( + state, + individuals, + individuals.dominatorTree, + onViewSourceInDebugger + ); + } + + assert( + view.state === viewState.DOMINATOR_TREE, + "If we aren't in progress, looking at a census, or diffing, then we " + + "must be looking at a dominator tree" + ); + assert(!diffing, "Should not have diffing"); + assert(snapshot.dominatorTree, "Should have a dominator tree"); + + return this._renderDominatorTree( + state, + onViewSourceInDebugger, + snapshot.dominatorTree, + onLoadMoreSiblings + ); + } +} + +module.exports = Heap; diff --git a/devtools/client/memory/components/Individuals.js b/devtools/client/memory/components/Individuals.js new file mode 100644 index 0000000000..dd0e9acc81 --- /dev/null +++ b/devtools/client/memory/components/Individuals.js @@ -0,0 +1,70 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const Tree = createFactory( + require("resource://devtools/client/shared/components/VirtualizedTree.js") +); +const DominatorTreeItem = createFactory( + require("resource://devtools/client/memory/components/DominatorTreeItem.js") +); +const { + TREE_ROW_HEIGHT, +} = require("resource://devtools/client/memory/constants.js"); +const models = require("resource://devtools/client/memory/models.js"); + +/** + * The list of individuals in a census group. + */ +class Individuals extends Component { + static get propTypes() { + return { + onViewSourceInDebugger: PropTypes.func.isRequired, + onFocus: PropTypes.func.isRequired, + individuals: models.individuals, + dominatorTree: models.dominatorTreeModel, + }; + } + + render() { + const { individuals, dominatorTree, onViewSourceInDebugger, onFocus } = + this.props; + + return Tree({ + key: "individuals-tree", + autoExpandDepth: 0, + preventNavigationOnArrowRight: false, + focused: individuals.focused, + getParent: node => null, + getChildren: node => [], + isExpanded: node => false, + onExpand: () => {}, + onCollapse: () => {}, + onFocus, + renderItem: (item, depth, focused, _, expanded) => { + return DominatorTreeItem({ + item, + depth, + focused, + arrow: undefined, + expanded, + getPercentSize: size => + (size / dominatorTree.root.retainedSize) * 100, + onViewSourceInDebugger, + }); + }, + getRoots: () => individuals.nodes, + getKey: node => node.nodeId, + itemHeight: TREE_ROW_HEIGHT, + }); + } +} + +module.exports = Individuals; diff --git a/devtools/client/memory/components/IndividualsHeader.js b/devtools/client/memory/components/IndividualsHeader.js new file mode 100644 index 0000000000..abd5a81a36 --- /dev/null +++ b/devtools/client/memory/components/IndividualsHeader.js @@ -0,0 +1,51 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { L10N } = require("resource://devtools/client/memory/utils.js"); + +class IndividualsHeader extends Component { + static get propTypes() { + return {}; + } + + render() { + return dom.div( + { + className: "header", + }, + + dom.span( + { + className: "heap-tree-item-bytes", + title: L10N.getStr("heapview.field.retainedSize.tooltip"), + }, + L10N.getStr("heapview.field.retainedSize") + ), + + dom.span( + { + className: "heap-tree-item-bytes", + title: L10N.getStr("heapview.field.shallowSize.tooltip"), + }, + L10N.getStr("heapview.field.shallowSize") + ), + + dom.span( + { + className: "heap-tree-item-name", + title: L10N.getStr("individuals.field.node.tooltip"), + }, + L10N.getStr("individuals.field.node") + ) + ); + } +} + +module.exports = IndividualsHeader; diff --git a/devtools/client/memory/components/List.js b/devtools/client/memory/components/List.js new file mode 100644 index 0000000000..290b178b7e --- /dev/null +++ b/devtools/client/memory/components/List.js @@ -0,0 +1,46 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +/** + * Generic list component that takes another react component to represent + * the children nodes as `itemComponent`, and a list of items to render + * as that component with a click handler. + */ +class List extends Component { + static get propTypes() { + return { + itemComponent: PropTypes.any.isRequired, + onClick: PropTypes.func, + items: PropTypes.array.isRequired, + }; + } + + render() { + const { items, onClick, itemComponent: Item } = this.props; + + return dom.ul( + { className: "list" }, + ...items.map((item, index) => { + return Item( + Object.assign({}, this.props, { + key: index, + item, + index, + onClick: () => onClick(item), + }) + ); + }) + ); + } +} + +module.exports = List; diff --git a/devtools/client/memory/components/ShortestPaths.js b/devtools/client/memory/components/ShortestPaths.js new file mode 100644 index 0000000000..0dd6e22c33 --- /dev/null +++ b/devtools/client/memory/components/ShortestPaths.js @@ -0,0 +1,196 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { isSavedFrame } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + getSourceNames, +} = require("resource://devtools/client/shared/source-utils.js"); +const { L10N } = require("resource://devtools/client/memory/utils.js"); + +const GRAPH_DEFAULTS = { + translate: [20, 20], + scale: 1, +}; + +const NO_STACK = "noStack"; +const NO_FILENAME = "noFilename"; +const ROOT_LIST = "JS::ubi::RootList"; + +function stringifyLabel(label, id) { + const sanitized = []; + + for (let i = 0, length = label.length; i < length; i++) { + const piece = label[i]; + + if (isSavedFrame(piece)) { + const { short } = getSourceNames(piece.source); + sanitized[i] = + `${piece.functionDisplayName} @ ` + + `${short}:${piece.line}:${piece.column}`; + } else if (piece === NO_STACK) { + sanitized[i] = L10N.getStr("tree-item.nostack"); + } else if (piece === NO_FILENAME) { + sanitized[i] = L10N.getStr("tree-item.nofilename"); + } else if (piece === ROOT_LIST) { + // Don't use the usual labeling machinery for root lists: replace it + // with the "GC Roots" string. + sanitized.splice(0, label.length); + sanitized.push(L10N.getStr("tree-item.rootlist")); + break; + } else { + sanitized[i] = "" + piece; + } + } + + return `${sanitized.join(" › ")} @ 0x${id.toString(16)}`; +} + +class ShortestPaths extends Component { + static get propTypes() { + return { + graph: PropTypes.shape({ + nodes: PropTypes.arrayOf(PropTypes.object), + edges: PropTypes.arrayOf(PropTypes.object), + }), + }; + } + + constructor(props) { + super(props); + this.state = { zoom: null }; + this._renderGraph = this._renderGraph.bind(this); + } + + componentDidMount() { + if (this.props.graph) { + this._renderGraph(this.refs.container, this.props.graph); + } + } + + shouldComponentUpdate(nextProps) { + return this.props.graph != nextProps.graph; + } + + componentDidUpdate() { + if (this.props.graph) { + this._renderGraph(this.refs.container, this.props.graph); + } + } + + componentWillUnmount() { + if (this.state.zoom) { + this.state.zoom.on("zoom", null); + } + } + + _renderGraph(container, { nodes, edges }) { + if (!container.firstChild) { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("id", "graph-svg"); + svg.setAttribute("xlink", "http://www.w3.org/1999/xlink"); + svg.style.width = "100%"; + svg.style.height = "100%"; + + const target = document.createElementNS( + "http://www.w3.org/2000/svg", + "g" + ); + target.setAttribute("id", "graph-target"); + target.style.width = "100%"; + target.style.height = "100%"; + + svg.appendChild(target); + container.appendChild(svg); + } + + const graph = new dagreD3.Digraph(); + + for (let i = 0; i < nodes.length; i++) { + graph.addNode(nodes[i].id, { + id: nodes[i].id, + label: stringifyLabel(nodes[i].label, nodes[i].id), + }); + } + + for (let i = 0; i < edges.length; i++) { + graph.addEdge(null, edges[i].from, edges[i].to, { + label: edges[i].name, + }); + } + + const renderer = new dagreD3.Renderer(); + renderer.drawNodes(); + renderer.drawEdgePaths(); + + const svg = d3.select("#graph-svg"); + const target = d3.select("#graph-target"); + + let zoom = this.state.zoom; + if (!zoom) { + zoom = d3.behavior.zoom().on("zoom", function () { + target.attr( + "transform", + `translate(${d3.event.translate}) scale(${d3.event.scale})` + ); + }); + svg.call(zoom); + this.setState({ zoom }); + } + + const { translate, scale } = GRAPH_DEFAULTS; + zoom.scale(scale); + zoom.translate(translate); + target.attr("transform", `translate(${translate}) scale(${scale})`); + + const layout = dagreD3.layout(); + renderer.layout(layout).run(graph, target); + } + + render() { + let contents; + if (this.props.graph) { + // Let the componentDidMount or componentDidUpdate method draw the graph + // with DagreD3. We just provide the container for the graph here. + contents = dom.div({ + ref: "container", + style: { + flex: 1, + height: "100%", + width: "100%", + }, + }); + } else { + contents = dom.div( + { + id: "shortest-paths-select-node-msg", + }, + L10N.getStr("shortest-paths.select-node") + ); + } + + return dom.div( + { + id: "shortest-paths", + className: "vbox", + }, + dom.label( + { + id: "shortest-paths-header", + className: "header", + }, + L10N.getStr("shortest-paths.header") + ), + contents + ); + } +} + +module.exports = ShortestPaths; diff --git a/devtools/client/memory/components/SnapshotListItem.js b/devtools/client/memory/components/SnapshotListItem.js new file mode 100644 index 0000000000..5a2c24b4e4 --- /dev/null +++ b/devtools/client/memory/components/SnapshotListItem.js @@ -0,0 +1,142 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { + L10N, + getSnapshotTitle, + getSnapshotTotals, + getStatusText, + snapshotIsDiffable, + getSavedCensus, +} = require("resource://devtools/client/memory/utils.js"); +const { + diffingState, +} = require("resource://devtools/client/memory/constants.js"); +const { + snapshot: snapshotModel, + app: appModel, +} = require("resource://devtools/client/memory/models.js"); + +class SnapshotListItem extends Component { + static get propTypes() { + return { + onClick: PropTypes.func.isRequired, + onSave: PropTypes.func.isRequired, + onDelete: PropTypes.func.isRequired, + item: snapshotModel.isRequired, + index: PropTypes.number.isRequired, + diffing: appModel.diffing, + }; + } + + render() { + const { item: snapshot, onClick, onSave, onDelete, diffing } = this.props; + let className = `snapshot-list-item ${ + snapshot.selected ? " selected" : "" + }`; + let statusText = getStatusText(snapshot.state); + let wantThrobber = !!statusText; + const title = getSnapshotTitle(snapshot); + + const selectedForDiffing = + diffing && + (diffing.firstSnapshotId === snapshot.id || + diffing.secondSnapshotId === snapshot.id); + + let checkbox; + if (diffing && snapshotIsDiffable(snapshot)) { + if (diffing.state === diffingState.SELECTING) { + wantThrobber = false; + } + + const checkboxAttrs = { + type: "checkbox", + checked: false, + }; + + if (selectedForDiffing) { + checkboxAttrs.checked = true; + checkboxAttrs.disabled = true; + className += " selected"; + statusText = L10N.getStr( + diffing.firstSnapshotId === snapshot.id + ? "diffing.baseline" + : "diffing.comparison" + ); + } + + if (selectedForDiffing || diffing.state == diffingState.SELECTING) { + checkbox = dom.input(checkboxAttrs); + } + } + + let details; + if (!selectedForDiffing) { + // See if a tree map or census is in the read state. + const census = getSavedCensus(snapshot); + + // If there is census data, fill in the total bytes. + if (census) { + const { bytes } = getSnapshotTotals(census); + const formatBytes = L10N.getFormatStr( + "aggregate.mb", + L10N.numberWithDecimals(bytes / 1000000, 2) + ); + + details = dom.span( + { className: "snapshot-totals" }, + dom.span({ className: "total-bytes" }, formatBytes) + ); + } + } + if (!details) { + details = dom.span({ className: "snapshot-state" }, statusText); + } + + const saveLink = !snapshot.path + ? void 0 + : dom.a( + { + onClick: () => onSave(snapshot), + className: "save", + }, + L10N.getStr("snapshot.io.save") + ); + + const deleteButton = !snapshot.path + ? void 0 + : dom.button({ + onClick: event => { + event.stopPropagation(); + onDelete(snapshot); + }, + className: "delete", + title: L10N.getStr("snapshot.io.delete"), + }); + + return dom.li( + { className, onClick }, + dom.span( + { + className: `snapshot-title ${ + wantThrobber ? " devtools-throbber" : "" + }`, + }, + checkbox, + title, + deleteButton + ), + dom.span({ className: "snapshot-info" }, details, saveLink) + ); + } +} + +module.exports = SnapshotListItem; diff --git a/devtools/client/memory/components/Toolbar.js b/devtools/client/memory/components/Toolbar.js new file mode 100644 index 0000000000..712a04abfe --- /dev/null +++ b/devtools/client/memory/components/Toolbar.js @@ -0,0 +1,309 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { L10N } = require("resource://devtools/client/memory/utils.js"); +const models = require("resource://devtools/client/memory/models.js"); +const { viewState } = require("resource://devtools/client/memory/constants.js"); + +class Toolbar extends Component { + static get propTypes() { + return { + censusDisplays: PropTypes.arrayOf(models.censusDisplay).isRequired, + censusDisplay: models.censusDisplay.isRequired, + onTakeSnapshotClick: PropTypes.func.isRequired, + onImportClick: PropTypes.func.isRequired, + onClearSnapshotsClick: PropTypes.func.isRequired, + onCensusDisplayChange: PropTypes.func.isRequired, + onToggleRecordAllocationStacks: PropTypes.func.isRequired, + allocations: models.allocations, + filterString: PropTypes.string, + setFilterString: PropTypes.func.isRequired, + diffing: models.diffingModel, + onToggleDiffing: PropTypes.func.isRequired, + view: models.view.isRequired, + onViewChange: PropTypes.func.isRequired, + labelDisplays: PropTypes.arrayOf(models.labelDisplay).isRequired, + labelDisplay: models.labelDisplay.isRequired, + onLabelDisplayChange: PropTypes.func.isRequired, + treeMapDisplays: PropTypes.arrayOf(models.treeMapDisplay).isRequired, + onTreeMapDisplayChange: PropTypes.func.isRequired, + snapshots: PropTypes.arrayOf(models.snapshot).isRequired, + }; + } + + render() { + const { + onTakeSnapshotClick, + onImportClick, + onClearSnapshotsClick, + onCensusDisplayChange, + censusDisplays, + censusDisplay, + labelDisplays, + labelDisplay, + onLabelDisplayChange, + treeMapDisplays, + onTreeMapDisplayChange, + onToggleRecordAllocationStacks, + allocations, + filterString, + setFilterString, + snapshots, + diffing, + onToggleDiffing, + view, + onViewChange, + } = this.props; + + let viewToolbarOptions; + if (view.state == viewState.CENSUS || view.state === viewState.DIFFING) { + viewToolbarOptions = dom.div( + { + className: "toolbar-group", + }, + + dom.label( + { + className: "display-by", + title: L10N.getStr("toolbar.displayBy.tooltip"), + }, + L10N.getStr("toolbar.displayBy"), + dom.select( + { + id: "select-display", + className: "devtools-toolbar-select select-display", + onChange: e => { + const newDisplay = censusDisplays.find( + b => b.displayName === e.target.value + ); + onCensusDisplayChange(newDisplay); + }, + value: censusDisplay.displayName, + }, + censusDisplays.map(({ tooltip, displayName }) => + dom.option( + { + key: `display-${displayName}`, + value: displayName, + title: tooltip, + }, + displayName + ) + ) + ) + ), + + dom.span({ className: "devtools-separator" }), + + dom.input({ + id: "filter", + type: "search", + className: "devtools-filterinput", + placeholder: L10N.getStr("filter.placeholder"), + title: L10N.getStr("filter.tooltip"), + onChange: event => setFilterString(event.target.value), + value: filterString || undefined, + }) + ); + } else if (view.state == viewState.TREE_MAP) { + assert( + treeMapDisplays.length >= 1, + "Should always have at least one tree map display" + ); + + // Only show the dropdown if there are multiple display options + viewToolbarOptions = + treeMapDisplays.length > 1 + ? dom.div( + { + className: "toolbar-group", + }, + + dom.label( + { + className: "display-by", + title: L10N.getStr("toolbar.displayBy.tooltip"), + }, + L10N.getStr("toolbar.displayBy"), + dom.select( + { + id: "select-tree-map-display", + onChange: e => { + const newDisplay = treeMapDisplays.find( + b => b.displayName === e.target.value + ); + onTreeMapDisplayChange(newDisplay); + }, + }, + treeMapDisplays.map(({ tooltip, displayName }) => + dom.option( + { + key: `tree-map-display-${displayName}`, + value: displayName, + title: tooltip, + }, + displayName + ) + ) + ) + ) + ) + : null; + } else { + assert( + view.state === viewState.DOMINATOR_TREE || + view.state === viewState.INDIVIDUALS + ); + + viewToolbarOptions = dom.div( + { + className: "toolbar-group", + }, + + dom.label( + { + className: "label-by", + title: L10N.getStr("toolbar.labelBy.tooltip"), + }, + L10N.getStr("toolbar.labelBy"), + dom.select( + { + id: "select-label-display", + className: "devtools-toolbar-select select-label-display", + onChange: e => { + const newDisplay = labelDisplays.find( + b => b.displayName === e.target.value + ); + onLabelDisplayChange(newDisplay); + }, + value: labelDisplay.displayName, + }, + labelDisplays.map(({ tooltip, displayName }) => + dom.option( + { + key: `label-display-${displayName}`, + value: displayName, + title: tooltip, + }, + displayName + ) + ) + ) + ) + ); + } + + let viewSelect; + if ( + view.state !== viewState.DIFFING && + view.state !== viewState.INDIVIDUALS + ) { + viewSelect = dom.label( + { + title: L10N.getStr("toolbar.view.tooltip"), + }, + L10N.getStr("toolbar.view"), + dom.select( + { + id: "select-view", + className: "devtools-toolbar-select select-view", + onChange: e => onViewChange(e.target.value), + value: view.state, + }, + dom.option( + { + value: viewState.TREE_MAP, + title: L10N.getStr("toolbar.view.treemap.tooltip"), + }, + L10N.getStr("toolbar.view.treemap") + ), + dom.option( + { + value: viewState.CENSUS, + title: L10N.getStr("toolbar.view.census.tooltip"), + }, + L10N.getStr("toolbar.view.census") + ), + dom.option( + { + value: viewState.DOMINATOR_TREE, + title: L10N.getStr("toolbar.view.dominators.tooltip"), + }, + L10N.getStr("toolbar.view.dominators") + ) + ) + ); + } + + return dom.div( + { + className: "devtools-toolbar", + }, + + dom.div( + { + className: "toolbar-group", + }, + + dom.button({ + id: "clear-snapshots", + className: "clear-snapshots devtools-button", + disabled: !snapshots.length, + onClick: onClearSnapshotsClick, + title: L10N.getStr("clear-snapshots.tooltip"), + }), + + dom.button({ + id: "take-snapshot", + className: "take-snapshot devtools-button", + onClick: onTakeSnapshotClick, + title: L10N.getStr("take-snapshot"), + }), + + dom.button({ + id: "diff-snapshots", + className: + "devtools-button devtools-monospace" + (diffing ? " checked" : ""), + disabled: snapshots.length < 2, + onClick: onToggleDiffing, + title: L10N.getStr("diff-snapshots.tooltip"), + }), + + dom.button({ + id: "import-snapshot", + className: "import-snapshot devtools-button", + onClick: onImportClick, + title: L10N.getStr("import-snapshot"), + }) + ), + + dom.label( + { + id: "record-allocation-stacks-label", + title: L10N.getStr("checkbox.recordAllocationStacks.tooltip"), + }, + dom.input({ + id: "record-allocation-stacks-checkbox", + type: "checkbox", + checked: allocations.recording, + disabled: allocations.togglingInProgress, + onChange: onToggleRecordAllocationStacks, + }), + L10N.getStr("checkbox.recordAllocationStacks") + ), + + viewSelect, + viewToolbarOptions + ); + } +} + +module.exports = Toolbar; diff --git a/devtools/client/memory/components/TreeMap.js b/devtools/client/memory/components/TreeMap.js new file mode 100644 index 0000000000..b9a3c39495 --- /dev/null +++ b/devtools/client/memory/components/TreeMap.js @@ -0,0 +1,77 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { treeMapModel } = require("resource://devtools/client/memory/models.js"); +const startVisualization = require("resource://devtools/client/memory/components/tree-map/start.js"); + +class TreeMap extends Component { + static get propTypes() { + return { + treeMap: treeMapModel, + }; + } + + constructor(props) { + super(props); + this.state = {}; + this._stopVisualization = this._stopVisualization.bind(this); + this._startVisualization = this._startVisualization.bind(this); + } + + componentDidMount() { + const { treeMap } = this.props; + if (treeMap?.report) { + this._startVisualization(); + } + } + + shouldComponentUpdate(nextProps) { + const oldTreeMap = this.props.treeMap; + const newTreeMap = nextProps.treeMap; + return oldTreeMap !== newTreeMap; + } + + componentDidUpdate(prevProps) { + this._stopVisualization(); + + if (this.props.treeMap && this.props.treeMap.report) { + this._startVisualization(); + } + } + + componentWillUnmount() { + if (this.state.stopVisualization) { + this.state.stopVisualization(); + } + } + + _stopVisualization() { + if (this.state.stopVisualization) { + this.state.stopVisualization(); + this.setState({ stopVisualization: null }); + } + } + + _startVisualization() { + const { container } = this.refs; + const { report } = this.props.treeMap; + const stopVisualization = startVisualization(container, report); + this.setState({ stopVisualization }); + } + + render() { + return dom.div({ + ref: "container", + className: "tree-map-container", + }); + } +} + +module.exports = TreeMap; diff --git a/devtools/client/memory/components/moz.build b/devtools/client/memory/components/moz.build new file mode 100644 index 0000000000..82739bf97f --- /dev/null +++ b/devtools/client/memory/components/moz.build @@ -0,0 +1,25 @@ +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +DIRS += [ + "tree-map", +] + +DevToolsModules( + "Census.js", + "CensusHeader.js", + "CensusTreeItem.js", + "DominatorTree.js", + "DominatorTreeHeader.js", + "DominatorTreeItem.js", + "Heap.js", + "Individuals.js", + "IndividualsHeader.js", + "List.js", + "ShortestPaths.js", + "SnapshotListItem.js", + "Toolbar.js", + "TreeMap.js", +) diff --git a/devtools/client/memory/components/tree-map/canvas-utils.js b/devtools/client/memory/components/tree-map/canvas-utils.js new file mode 100644 index 0000000000..e1bf252057 --- /dev/null +++ b/devtools/client/memory/components/tree-map/canvas-utils.js @@ -0,0 +1,132 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* eslint-env browser */ + +"use strict"; + +/** + * Create 2 canvases and contexts for drawing onto, 1 main canvas, and 1 zoom + * canvas. The main canvas dimensions match the parent div, but the CSS can be + * transformed to be zoomed and dragged around (potentially creating a blurry + * canvas once zoomed in). The zoom canvas is a zoomed in section that matches + * the parent div's dimensions and is kept in place through CSS. A zoomed in + * view of the visualization is drawn onto this canvas, providing a crisp zoomed + * in view of the tree map. + */ +const { debounce } = require("resource://devtools/shared/debounce.js"); +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +const HTML_NS = "http://www.w3.org/1999/xhtml"; +const FULLSCREEN_STYLE = { + width: "100%", + height: "100%", + position: "absolute", +}; + +/** + * Create the canvases, resize handlers, and return references to them all + * + * @param {HTMLDivElement} parentEl + * @param {Number} debounceRate + * @return {Object} + */ +function Canvases(parentEl, debounceRate) { + EventEmitter.decorate(this); + this.container = createContainingDiv(parentEl); + + // This canvas contains all of the treemap + this.main = createCanvas(this.container, "main"); + // This canvas contains only the zoomed in portion, overlaying the main canvas + this.zoom = createCanvas(this.container, "zoom"); + + this.removeHandlers = handleResizes(this, debounceRate); +} + +Canvases.prototype = { + /** + * Remove the handlers and elements + * + * @return {type} description + */ + destroy() { + this.removeHandlers(); + this.container.removeChild(this.main.canvas); + this.container.removeChild(this.zoom.canvas); + }, +}; + +module.exports = Canvases; + +/** + * Create the containing div + * + * @param {HTMLDivElement} parentEl + * @return {HTMLDivElement} + */ +function createContainingDiv(parentEl) { + const div = parentEl.ownerDocument.createElementNS(HTML_NS, "div"); + Object.assign(div.style, FULLSCREEN_STYLE); + parentEl.appendChild(div); + return div; +} + +/** + * Create a canvas and context + * + * @param {HTMLDivElement} container + * @param {String} className + * @return {Object} { canvas, ctx } + */ +function createCanvas(container, className) { + const window = container.ownerDocument.defaultView; + const canvas = container.ownerDocument.createElementNS(HTML_NS, "canvas"); + container.appendChild(canvas); + canvas.width = container.offsetWidth * window.devicePixelRatio; + canvas.height = container.offsetHeight * window.devicePixelRatio; + canvas.className = className; + + Object.assign(canvas.style, FULLSCREEN_STYLE, { + pointerEvents: "none", + }); + + const ctx = canvas.getContext("2d"); + + return { canvas, ctx }; +} + +/** + * Resize the canvases' resolutions, and fires out the onResize callback + * + * @param {HTMLDivElement} container + * @param {Object} canvases + * @param {Number} debounceRate + */ +function handleResizes(canvases, debounceRate) { + const { container, main, zoom } = canvases; + const window = container.ownerDocument.defaultView; + + function resize() { + const width = container.offsetWidth * window.devicePixelRatio; + const height = container.offsetHeight * window.devicePixelRatio; + + main.canvas.width = width; + main.canvas.height = height; + zoom.canvas.width = width; + zoom.canvas.height = height; + + canvases.emit("resize"); + } + + // Tests may not need debouncing + const debouncedResize = + debounceRate > 0 ? debounce(resize, debounceRate) : resize; + + window.addEventListener("resize", debouncedResize); + resize(); + + return function removeResizeHandlers() { + window.removeEventListener("resize", debouncedResize); + }; +} diff --git a/devtools/client/memory/components/tree-map/color-coarse-type.js b/devtools/client/memory/components/tree-map/color-coarse-type.js new file mode 100644 index 0000000000..b511f9f50e --- /dev/null +++ b/devtools/client/memory/components/tree-map/color-coarse-type.js @@ -0,0 +1,70 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +/** + * Color the boxes in the treemap + */ + +const TYPES = ["objects", "other", "strings", "scripts", "domNode"]; + +// The factors determine how much the hue shifts +const TYPE_FACTOR = TYPES.length * 3; +const DEPTH_FACTOR = -10; +const H = 0.5; +const S = 0.6; +const L = 0.9; + +/** + * Recursively find the index of the coarse type of a node + * + * @param {Object} node + * d3 treemap + * @return {Integer} + * index + */ +function findCoarseTypeIndex(node) { + const index = TYPES.indexOf(node.name); + + if (node.parent) { + return index === -1 ? findCoarseTypeIndex(node.parent) : index; + } + + return TYPES.indexOf("other"); +} + +/** + * Decide a color value for depth to be used in the HSL computation + * + * @param {Object} node + * @return {Number} + */ +function depthColorFactor(node) { + return Math.min(1, node.depth / DEPTH_FACTOR); +} + +/** + * Decide a color value for type to be used in the HSL computation + * + * @param {Object} node + * @return {Number} + */ +function typeColorFactor(node) { + return findCoarseTypeIndex(node) / TYPE_FACTOR; +} + +/** + * Color a node + * + * @param {Object} node + * @return {Array} HSL values ranged 0-1 + */ +module.exports = function colorCoarseType(node) { + const h = Math.min(1, H + typeColorFactor(node)); + const s = Math.min(1, S); + const l = Math.min(1, L + depthColorFactor(node)); + + return [h, s, l]; +}; diff --git a/devtools/client/memory/components/tree-map/drag-zoom.js b/devtools/client/memory/components/tree-map/drag-zoom.js new file mode 100644 index 0000000000..034017e086 --- /dev/null +++ b/devtools/client/memory/components/tree-map/drag-zoom.js @@ -0,0 +1,337 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { debounce } = require("resource://devtools/shared/debounce.js"); +const { lerp } = require("resource://devtools/client/memory/utils.js"); +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +const LERP_SPEED = 0.5; +const ZOOM_SPEED = 0.01; +const TRANSLATE_EPSILON = 1; +const ZOOM_EPSILON = 0.001; +const LINE_SCROLL_MODE = 1; +const SCROLL_LINE_SIZE = 15; + +/** + * DragZoom is a constructor that contains the state of the current dragging and + * zooming behavior. It sets the scrolling and zooming behaviors. + * + * @param {HTMLElement} container description + * The container for the canvases + */ +function DragZoom(container, debounceRate, requestAnimationFrame) { + EventEmitter.decorate(this); + + this.isDragging = false; + + // The current mouse position + this.mouseX = container.offsetWidth / 2; + this.mouseY = container.offsetHeight / 2; + + // The total size of the visualization after being zoomed, in pixels + this.zoomedWidth = container.offsetWidth; + this.zoomedHeight = container.offsetHeight; + + // How much the visualization has been zoomed in + this.zoom = 0; + + // The offset of visualization from the container. This is applied after + // the zoom, and the visualization by default is centered + this.translateX = 0; + this.translateY = 0; + + // The size of the offset between the top/left of the container, and the + // top/left of the containing element. This value takes into account + // the device pixel ratio for canvas draws. + this.offsetX = 0; + this.offsetY = 0; + + // The smoothed values that are animated and eventually match the target + // values. The values are updated by the update loop + this.smoothZoom = 0; + this.smoothTranslateX = 0; + this.smoothTranslateY = 0; + + // Add the constant values for testing purposes + this.ZOOM_SPEED = ZOOM_SPEED; + this.ZOOM_EPSILON = ZOOM_EPSILON; + + const update = createUpdateLoop(container, this, requestAnimationFrame); + + this.destroy = setHandlers(this, container, update, debounceRate); +} + +module.exports = DragZoom; + +/** + * Returns an update loop. This loop smoothly updates the visualization when + * actions are performed. Once the animations have reached their target values + * the animation loop is stopped. + * + * Any value in the `dragZoom` object that starts with "smooth" is the + * smoothed version of a value that is interpolating toward the target value. + * For instance `dragZoom.smoothZoom` approaches `dragZoom.zoom` on each + * iteration of the update loop until it's sufficiently close as defined by + * the epsilon values. + * + * Only these smoothed values and the container CSS are updated by the loop. + * + * @param {HTMLDivElement} container + * @param {Object} dragZoom + * The values that represent the current dragZoom state + * @param {Function} requestAnimationFrame + */ +function createUpdateLoop(container, dragZoom, requestAnimationFrame) { + let isLooping = false; + + function update() { + const isScrollChanging = + Math.abs(dragZoom.smoothZoom - dragZoom.zoom) > ZOOM_EPSILON; + const isTranslateChanging = + Math.abs(dragZoom.smoothTranslateX - dragZoom.translateX) > + TRANSLATE_EPSILON || + Math.abs(dragZoom.smoothTranslateY - dragZoom.translateY) > + TRANSLATE_EPSILON; + + isLooping = isScrollChanging || isTranslateChanging; + + if (isScrollChanging) { + dragZoom.smoothZoom = lerp( + dragZoom.smoothZoom, + dragZoom.zoom, + LERP_SPEED + ); + } else { + dragZoom.smoothZoom = dragZoom.zoom; + } + + if (isTranslateChanging) { + dragZoom.smoothTranslateX = lerp( + dragZoom.smoothTranslateX, + dragZoom.translateX, + LERP_SPEED + ); + dragZoom.smoothTranslateY = lerp( + dragZoom.smoothTranslateY, + dragZoom.translateY, + LERP_SPEED + ); + } else { + dragZoom.smoothTranslateX = dragZoom.translateX; + dragZoom.smoothTranslateY = dragZoom.translateY; + } + + const zoom = 1 + dragZoom.smoothZoom; + const x = dragZoom.smoothTranslateX; + const y = dragZoom.smoothTranslateY; + container.style.transform = `translate(${x}px, ${y}px) scale(${zoom})`; + + if (isLooping) { + requestAnimationFrame(update); + } + } + + // Go ahead and start the update loop + update(); + + return function restartLoopingIfStopped() { + if (!isLooping) { + update(); + } + }; +} + +/** + * Set the various event listeners and return a function to remove them + * + * @param {Object} dragZoom + * @param {HTMLElement} container + * @param {Function} update + * @return {Function} The function to remove the handlers + */ +function setHandlers(dragZoom, container, update, debounceRate) { + const emitChanged = debounce(() => dragZoom.emit("change"), debounceRate); + + const removeDragHandlers = setDragHandlers( + container, + dragZoom, + emitChanged, + update + ); + const removeScrollHandlers = setScrollHandlers( + container, + dragZoom, + emitChanged, + update + ); + + return function removeHandlers() { + removeDragHandlers(); + removeScrollHandlers(); + }; +} + +/** + * Sets handlers for when the user drags on the canvas. It will update dragZoom + * object with new translate and offset values. + * + * @param {HTMLElement} container + * @param {Object} dragZoom + * @param {Function} changed + * @param {Function} update + */ +function setDragHandlers(container, dragZoom, emitChanged, update) { + const parentEl = container.parentElement; + + function startDrag() { + dragZoom.isDragging = true; + container.style.cursor = "grabbing"; + } + + function stopDrag() { + dragZoom.isDragging = false; + container.style.cursor = "grab"; + } + + function drag(event) { + const prevMouseX = dragZoom.mouseX; + const prevMouseY = dragZoom.mouseY; + + dragZoom.mouseX = event.clientX - parentEl.offsetLeft; + dragZoom.mouseY = event.clientY - parentEl.offsetTop; + + if (!dragZoom.isDragging) { + return; + } + + dragZoom.translateX += dragZoom.mouseX - prevMouseX; + dragZoom.translateY += dragZoom.mouseY - prevMouseY; + + keepInView(container, dragZoom); + + emitChanged(); + update(); + } + + parentEl.addEventListener("mousedown", startDrag); + parentEl.addEventListener("mouseup", stopDrag); + parentEl.addEventListener("mouseout", stopDrag); + parentEl.addEventListener("mousemove", drag); + + return function removeListeners() { + parentEl.removeEventListener("mousedown", startDrag); + parentEl.removeEventListener("mouseup", stopDrag); + parentEl.removeEventListener("mouseout", stopDrag); + parentEl.removeEventListener("mousemove", drag); + }; +} + +/** + * Sets the handlers for when the user scrolls. It updates the dragZoom object + * and keeps the canvases all within the view. After changing values update + * loop is called, and the changed event is emitted. + * + * @param {HTMLDivElement} container + * @param {Object} dragZoom + * @param {Function} changed + * @param {Function} update + */ +function setScrollHandlers(container, dragZoom, emitChanged, update) { + const window = container.ownerDocument.defaultView; + + function handleWheel(event) { + event.preventDefault(); + + if (dragZoom.isDragging) { + return; + } + + // Update the zoom level + const scrollDelta = getScrollDelta(event, window); + const prevZoom = dragZoom.zoom; + dragZoom.zoom = Math.max(0, dragZoom.zoom - scrollDelta * ZOOM_SPEED); + + // Calculate the updated width and height + const prevZoomedWidth = container.offsetWidth * (1 + prevZoom); + const prevZoomedHeight = container.offsetHeight * (1 + prevZoom); + dragZoom.zoomedWidth = container.offsetWidth * (1 + dragZoom.zoom); + dragZoom.zoomedHeight = container.offsetHeight * (1 + dragZoom.zoom); + const deltaWidth = dragZoom.zoomedWidth - prevZoomedWidth; + const deltaHeight = dragZoom.zoomedHeight - prevZoomedHeight; + + const mouseOffsetX = dragZoom.mouseX - container.offsetWidth / 2; + const mouseOffsetY = dragZoom.mouseY - container.offsetHeight / 2; + + // The ratio of where the center of the mouse is in regards to the total + // zoomed width/height + const ratioZoomX = + (prevZoomedWidth / 2 + mouseOffsetX - dragZoom.translateX) / + prevZoomedWidth; + const ratioZoomY = + (prevZoomedHeight / 2 + mouseOffsetY - dragZoom.translateY) / + prevZoomedHeight; + + // Distribute the change in width and height based on the above ratio + dragZoom.translateX -= lerp(-deltaWidth / 2, deltaWidth / 2, ratioZoomX); + dragZoom.translateY -= lerp(-deltaHeight / 2, deltaHeight / 2, ratioZoomY); + + // Keep the canvas in range of the container + keepInView(container, dragZoom); + emitChanged(); + update(); + } + + container.addEventListener("wheel", handleWheel); + + return function removeListener() { + container.removeEventListener("wheel", handleWheel); + }; +} + +/** + * Account for the various mouse wheel event types, per pixel or per line + * + * @param {WheelEvent} event + * @param {Window} window + * @return {Number} The scroll size in pixels + */ +function getScrollDelta(event, window) { + if (event.deltaMode === LINE_SCROLL_MODE) { + // Update by a fixed arbitrary value to normalize scroll types + return event.deltaY * SCROLL_LINE_SIZE; + } + return event.deltaY; +} + +/** + * Keep the dragging and zooming within the view by updating the values in the + * `dragZoom` object. + * + * @param {HTMLDivElement} container + * @param {Object} dragZoom + */ +function keepInView(container, dragZoom) { + const { devicePixelRatio } = container.ownerDocument.defaultView; + const overdrawX = (dragZoom.zoomedWidth - container.offsetWidth) / 2; + const overdrawY = (dragZoom.zoomedHeight - container.offsetHeight) / 2; + + dragZoom.translateX = Math.max( + -overdrawX, + Math.min(overdrawX, dragZoom.translateX) + ); + dragZoom.translateY = Math.max( + -overdrawY, + Math.min(overdrawY, dragZoom.translateY) + ); + + dragZoom.offsetX = + devicePixelRatio * + ((dragZoom.zoomedWidth - container.offsetWidth) / 2 - dragZoom.translateX); + dragZoom.offsetY = + devicePixelRatio * + ((dragZoom.zoomedHeight - container.offsetHeight) / 2 - + dragZoom.translateY); +} diff --git a/devtools/client/memory/components/tree-map/draw.js b/devtools/client/memory/components/tree-map/draw.js new file mode 100644 index 0000000000..12a5901332 --- /dev/null +++ b/devtools/client/memory/components/tree-map/draw.js @@ -0,0 +1,317 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; +/** + * Draw the treemap into the provided canvases using the 2d context. The treemap + * layout is computed with d3. There are 2 canvases provided, each matching + * the resolution of the window. The main canvas is a fully drawn version of + * the treemap that is positioned and zoomed using css. It gets blurry the more + * you zoom in as it doesn't get redrawn when zooming. The zoom canvas is + * repositioned absolutely after every change in the dragZoom object, and then + * redrawn to provide a full-resolution (non-blurry) view of zoomed in segment + * of the treemap. + */ + +const colorCoarseType = require("resource://devtools/client/memory/components/tree-map/color-coarse-type.js"); +const { + hslToStyle, + formatAbbreviatedBytes, + L10N, +} = require("resource://devtools/client/memory/utils.js"); + +// A constant fully zoomed out dragZoom object for the main canvas +const NO_SCROLL = { + translateX: 0, + translateY: 0, + zoom: 0, + offsetX: 0, + offsetY: 0, +}; + +// Drawing constants +const ELLIPSIS = "..."; +const TEXT_MARGIN = 2; +const TEXT_COLOR = "#000000"; +const TEXT_LIGHT_COLOR = "rgba(0,0,0,0.5)"; +const LINE_WIDTH = 1; +const FONT_SIZE = 10; +const FONT_LINE_HEIGHT = 2; +const PADDING = [5 + FONT_SIZE, 5, 5, 5]; +const COUNT_LABEL = L10N.getStr("tree-map.node-count"); + +/** + * Setup and start drawing the treemap visualization + * + * @param {Object} report + * @param {Object} canvases + * A CanvasUtils object that contains references to the main and zoom + * canvases and contexts + * @param {Object} dragZoom + * A DragZoom object representing the current state of the dragging + * and zooming behavior + */ +exports.setupDraw = function (report, canvases, dragZoom) { + const getTreemap = configureD3Treemap.bind(null, canvases.main.canvas); + + let treemap, nodes; + + function drawFullTreemap() { + treemap = getTreemap(); + nodes = treemap(report); + drawTreemap(canvases.main, nodes, NO_SCROLL); + drawTreemap(canvases.zoom, nodes, dragZoom); + } + + function drawZoomedTreemap() { + drawTreemap(canvases.zoom, nodes, dragZoom); + positionZoomedCanvas(canvases.zoom.canvas, dragZoom); + } + + drawFullTreemap(); + canvases.on("resize", drawFullTreemap); + dragZoom.on("change", drawZoomedTreemap); +}; + +/** + * Returns a configured d3 treemap function + * + * @param {HTMLCanvasElement} canvas + * @return {Function} + */ +const configureD3Treemap = (exports.configureD3Treemap = function (canvas) { + const window = canvas.ownerDocument.defaultView; + const ratio = window.devicePixelRatio; + const treemap = window.d3.layout + .treemap() + .size([ + // The d3 layout includes the padding around everything, add some + // extra padding to the size to compensate for thi + canvas.width + (PADDING[1] + PADDING[3]) * ratio, + canvas.height + (PADDING[0] + PADDING[2]) * ratio, + ]) + .sticky(true) + .padding([ + PADDING[0] * ratio, + PADDING[1] * ratio, + PADDING[2] * ratio, + PADDING[3] * ratio, + ]) + .value(d => d.bytes); + + /** + * Create treemap nodes from a census report that are sorted by depth + * + * @param {Object} report + * @return {Array} An array of d3 treemap nodes + * // https://github.com/mbostock/d3/wiki/Treemap-Layout + * parent - the parent node, or null for the root. + * children - the array of child nodes, or null for leaf nodes. + * value - the node value, as returned by the value accessor. + * depth - the depth of the node, starting at 0 for the root. + * area - the computed pixel area of this node. + * x - the minimum x-coordinate of the node position. + * y - the minimum y-coordinate of the node position. + * z - the orientation of this cell’s subdivision, if any. + * dx - the x-extent of the node position. + * dy - the y-extent of the node position. + */ + return function depthSortedNodes(report) { + const nodes = treemap(report); + nodes.sort((a, b) => a.depth - b.depth); + return nodes; + }; +}); + +/** + * Draw the text, cut it in half every time it doesn't fit until it fits or + * it's smaller than the "..." text. + * + * @param {CanvasRenderingContext2D} ctx + * @param {Number} x + * the position of the text + * @param {Number} y + * the position of the text + * @param {Number} innerWidth + * the inner width of the containing treemap cell + * @param {Text} name + */ +const drawTruncatedName = (exports.drawTruncatedName = function ( + ctx, + x, + y, + innerWidth, + name +) { + const truncated = name.substr(0, Math.floor(name.length / 2)); + const formatted = truncated + ELLIPSIS; + + if (ctx.measureText(formatted).width > innerWidth) { + drawTruncatedName(ctx, x, y, innerWidth, truncated); + } else { + ctx.fillText(formatted, x, y); + } +}); + +/** + * Fit and draw the text in a node with the following strategies to shrink + * down the text size: + * + * Function 608KB 9083 count + * Function + * Func... + * Fu... + * ... + * + * @param {CanvasRenderingContext2D} ctx + * @param {Object} node + * @param {Number} borderWidth + * @param {Object} dragZoom + * @param {Array} padding + */ +const drawText = (exports.drawText = function ( + ctx, + node, + borderWidth, + ratio, + dragZoom, + padding +) { + let { dx, dy, name, totalBytes, totalCount } = node; + const scale = dragZoom.zoom + 1; + dx *= scale; + dy *= scale; + + // Start checking to see how much text we can fit in, optimizing for the + // common case of lots of small leaf nodes + if (FONT_SIZE * FONT_LINE_HEIGHT < dy) { + const margin = borderWidth(node) * 1.5 + ratio * TEXT_MARGIN; + const x = margin + (node.x - padding[0]) * scale - dragZoom.offsetX; + const y = margin + (node.y - padding[1]) * scale - dragZoom.offsetY; + const innerWidth = dx - margin * 2; + const nameSize = ctx.measureText(name).width; + + if (ctx.measureText(ELLIPSIS).width > innerWidth) { + return; + } + + ctx.fillStyle = TEXT_COLOR; + + if (nameSize > innerWidth) { + // The name is too long - halve the name as an expediant way to shorten it + drawTruncatedName(ctx, x, y, innerWidth, name); + } else { + const bytesFormatted = formatAbbreviatedBytes(totalBytes); + const countFormatted = `${totalCount} ${COUNT_LABEL}`; + const byteSize = ctx.measureText(bytesFormatted).width; + const countSize = ctx.measureText(countFormatted).width; + const spaceSize = ctx.measureText(" ").width; + + if (nameSize + byteSize + countSize + spaceSize * 3 > innerWidth) { + // The full name will fit + ctx.fillText(`${name}`, x, y); + } else { + // The full name plus the byte information will fit + ctx.fillText(name, x, y); + ctx.fillStyle = TEXT_LIGHT_COLOR; + ctx.fillText( + `${bytesFormatted} ${countFormatted}`, + x + nameSize + spaceSize, + y + ); + } + } + } +}); + +/** + * Draw a box given a node + * + * @param {CanvasRenderingContext2D} ctx + * @param {Object} node + * @param {Number} borderWidth + * @param {Number} ratio + * @param {Object} dragZoom + * @param {Array} padding + */ +const drawBox = (exports.drawBox = function ( + ctx, + node, + borderWidth, + dragZoom, + padding +) { + const border = borderWidth(node); + const fillHSL = colorCoarseType(node); + const strokeHSL = [fillHSL[0], fillHSL[1], fillHSL[2] * 0.5]; + const scale = 1 + dragZoom.zoom; + + // Offset the draw so that box strokes don't overlap + const x = scale * (node.x - padding[0]) - dragZoom.offsetX + border / 2; + const y = scale * (node.y - padding[1]) - dragZoom.offsetY + border / 2; + const dx = scale * node.dx - border; + const dy = scale * node.dy - border; + + ctx.fillStyle = hslToStyle(...fillHSL); + ctx.fillRect(x, y, dx, dy); + + ctx.strokeStyle = hslToStyle(...strokeHSL); + ctx.lineWidth = border; + ctx.strokeRect(x, y, dx, dy); +}); + +/** + * Draw the overall treemap + * + * @param {HTMLCanvasElement} canvas + * @param {CanvasRenderingContext2D} ctx + * @param {Array} nodes + * @param {Objbect} dragZoom + */ +const drawTreemap = (exports.drawTreemap = function ( + { canvas, ctx }, + nodes, + dragZoom +) { + const window = canvas.ownerDocument.defaultView; + const ratio = window.devicePixelRatio; + const canvasArea = canvas.width * canvas.height; + // Subtract the outer padding from the tree map layout. + const padding = [PADDING[3] * ratio, PADDING[0] * ratio]; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.font = `${FONT_SIZE * ratio}px sans-serif`; + ctx.textBaseline = "top"; + + function borderWidth(node) { + const areaRatio = Math.sqrt(node.area / canvasArea); + return ratio * Math.max(1, LINE_WIDTH * areaRatio); + } + + for (let i = 0; i < nodes.length; i++) { + const node = nodes[i]; + if (node.parent === undefined) { + continue; + } + + drawBox(ctx, node, borderWidth, dragZoom, padding); + drawText(ctx, node, borderWidth, ratio, dragZoom, padding); + } +}); + +/** + * Set the position of the zoomed in canvas. It always take up 100% of the view + * window, but is transformed relative to the zoomed in containing element, + * essentially reversing the transform of the containing element. + * + * @param {HTMLCanvasElement} canvas + * @param {Object} dragZoom + */ +const positionZoomedCanvas = function (canvas, dragZoom) { + const scale = 1 / (1 + dragZoom.zoom); + const x = -dragZoom.translateX; + const y = -dragZoom.translateY; + canvas.style.transform = `scale(${scale}) translate(${x}px, ${y}px)`; +}; + +exports.positionZoomedCanvas = positionZoomedCanvas; diff --git a/devtools/client/memory/components/tree-map/moz.build b/devtools/client/memory/components/tree-map/moz.build new file mode 100644 index 0000000000..a9e5900339 --- /dev/null +++ b/devtools/client/memory/components/tree-map/moz.build @@ -0,0 +1,12 @@ +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +DevToolsModules( + "canvas-utils.js", + "color-coarse-type.js", + "drag-zoom.js", + "draw.js", + "start.js", +) diff --git a/devtools/client/memory/components/tree-map/start.js b/devtools/client/memory/components/tree-map/start.js new file mode 100644 index 0000000000..80ae483903 --- /dev/null +++ b/devtools/client/memory/components/tree-map/start.js @@ -0,0 +1,40 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + setupDraw, +} = require("resource://devtools/client/memory/components/tree-map/draw.js"); +const DragZoom = require("resource://devtools/client/memory/components/tree-map/drag-zoom.js"); +const CanvasUtils = require("resource://devtools/client/memory/components/tree-map/canvas-utils.js"); + +/** + * Start the tree map visualization + * + * @param {HTMLDivElement} container + * @param {Object} report + * the report from a census + * @param {Number} debounceRate + */ +module.exports = function startVisualization( + parentEl, + report, + debounceRate = 60 +) { + const window = parentEl.ownerDocument.defaultView; + const canvases = new CanvasUtils(parentEl, debounceRate); + const dragZoom = new DragZoom( + canvases.container, + debounceRate, + window.requestAnimationFrame + ); + + setupDraw(report, canvases, dragZoom); + + return function stopVisualization() { + canvases.destroy(); + dragZoom.destroy(); + }; +}; diff --git a/devtools/client/memory/constants.js b/devtools/client/memory/constants.js new file mode 100644 index 0000000000..c729866ffe --- /dev/null +++ b/devtools/client/memory/constants.js @@ -0,0 +1,360 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +// Options passed to MemoryFront's startRecordingAllocations never change. +exports.ALLOCATION_RECORDING_OPTIONS = { + probability: 1, + maxLogLength: 1, +}; + +// If TREE_ROW_HEIGHT changes, be sure to change `var(--heap-tree-row-height)` +// in `devtools/client/themes/memory.css` +exports.TREE_ROW_HEIGHT = 18; + +/** * Actions ******************************************************************/ + +const actions = (exports.actions = {}); + +// Fired by UI to request a snapshot from the actor. +actions.TAKE_SNAPSHOT_START = "take-snapshot-start"; +actions.TAKE_SNAPSHOT_END = "take-snapshot-end"; + +// When a heap snapshot is read into memory -- only fired +// once per snapshot. +actions.READ_SNAPSHOT_START = "read-snapshot-start"; +actions.READ_SNAPSHOT_END = "read-snapshot-end"; + +// When a census is being performed on a heap snapshot +actions.TAKE_CENSUS_START = "take-census-start"; +actions.TAKE_CENSUS_END = "take-census-end"; +actions.TAKE_CENSUS_ERROR = "take-census-error"; + +// When a tree map is being calculated on a heap snapshot +actions.TAKE_TREE_MAP_START = "take-tree-map-start"; +actions.TAKE_TREE_MAP_END = "take-tree-map-end"; +actions.TAKE_TREE_MAP_ERROR = "take-tree-map-error"; + +// When requesting that the server start/stop recording allocation stacks. +actions.TOGGLE_RECORD_ALLOCATION_STACKS_START = + "toggle-record-allocation-stacks-start"; +actions.TOGGLE_RECORD_ALLOCATION_STACKS_END = + "toggle-record-allocation-stacks-end"; + +// When a heap snapshot is being saved to a user-specified +// location on disk. +actions.EXPORT_SNAPSHOT_START = "export-snapshot-start"; +actions.EXPORT_SNAPSHOT_END = "export-snapshot-end"; +actions.EXPORT_SNAPSHOT_ERROR = "export-snapshot-error"; + +// When a heap snapshot is being read from a user selected file, +// and represents the entire state until the census is available. +actions.IMPORT_SNAPSHOT_START = "import-snapshot-start"; +actions.IMPORT_SNAPSHOT_END = "import-snapshot-end"; +actions.IMPORT_SNAPSHOT_ERROR = "import-snapshot-error"; + +// Fired by UI to select a snapshot to view. +actions.SELECT_SNAPSHOT = "select-snapshot"; + +// Fired to delete a provided list of snapshots +actions.DELETE_SNAPSHOTS_START = "delete-snapshots-start"; +actions.DELETE_SNAPSHOTS_END = "delete-snapshots-end"; + +// Fired to toggle tree inversion on or off. +actions.TOGGLE_INVERTED = "toggle-inverted"; + +// Fired when a snapshot is selected for diffing. +actions.SELECT_SNAPSHOT_FOR_DIFFING = "select-snapshot-for-diffing"; + +// Fired when taking a census diff. +actions.TAKE_CENSUS_DIFF_START = "take-census-diff-start"; +actions.TAKE_CENSUS_DIFF_END = "take-census-diff-end"; +actions.DIFFING_ERROR = "diffing-error"; + +// Fired to set a new census display. +actions.SET_CENSUS_DISPLAY = "set-census-display"; + +// Fired to change the display that controls the dominator tree labels. +actions.SET_LABEL_DISPLAY = "set-label-display"; + +// Fired to set a tree map display +actions.SET_TREE_MAP_DISPLAY = "set-tree-map-display"; + +// Fired when changing between census or dominators view. +actions.CHANGE_VIEW = "change-view"; +actions.POP_VIEW = "pop-view"; + +// Fired when there is an error processing a snapshot or taking a census. +actions.SNAPSHOT_ERROR = "snapshot-error"; + +// Fired when there is a new filter string set. +actions.SET_FILTER_STRING = "set-filter-string"; + +// Fired to expand or collapse nodes in census reports. +actions.EXPAND_CENSUS_NODE = "expand-census-node"; +actions.EXPAND_DIFFING_CENSUS_NODE = "expand-diffing-census-node"; +actions.COLLAPSE_CENSUS_NODE = "collapse-census-node"; +actions.COLLAPSE_DIFFING_CENSUS_NODE = "collapse-diffing-census-node"; + +// Fired when nodes in various trees are focused. +actions.FOCUS_CENSUS_NODE = "focus-census-node"; +actions.FOCUS_DIFFING_CENSUS_NODE = "focus-diffing-census-node"; +actions.FOCUS_DOMINATOR_TREE_NODE = "focus-dominator-tree-node"; + +actions.FOCUS_INDIVIDUAL = "focus-individual"; +actions.FETCH_INDIVIDUALS_START = "fetch-individuals-start"; +actions.FETCH_INDIVIDUALS_END = "fetch-individuals-end"; +actions.INDIVIDUALS_ERROR = "individuals-error"; + +actions.COMPUTE_DOMINATOR_TREE_START = "compute-dominator-tree-start"; +actions.COMPUTE_DOMINATOR_TREE_END = "compute-dominator-tree-end"; +actions.FETCH_DOMINATOR_TREE_START = "fetch-dominator-tree-start"; +actions.FETCH_DOMINATOR_TREE_END = "fetch-dominator-tree-end"; +actions.DOMINATOR_TREE_ERROR = "dominator-tree-error"; +actions.FETCH_IMMEDIATELY_DOMINATED_START = "fetch-immediately-dominated-start"; +actions.FETCH_IMMEDIATELY_DOMINATED_END = "fetch-immediately-dominated-end"; +actions.EXPAND_DOMINATOR_TREE_NODE = "expand-dominator-tree-node"; +actions.COLLAPSE_DOMINATOR_TREE_NODE = "collapse-dominator-tree-node"; + +actions.RESIZE_SHORTEST_PATHS = "resize-shortest-paths"; + +// Fired when the memory front is changed. +actions.UPDATE_MEMORY_FRONT = "update-memory-front"; + +/** * Census Displays ***************************************************************/ + +const COUNT = Object.freeze({ by: "count", count: true, bytes: true }); +const INTERNAL_TYPE = Object.freeze({ by: "internalType", then: COUNT }); +const DESCRIPTIVE_TYPE = Object.freeze({ by: "descriptiveType", then: COUNT }); +const ALLOCATION_STACK = Object.freeze({ + by: "allocationStack", + then: COUNT, + noStack: COUNT, +}); +const OBJECT_CLASS = Object.freeze({ + by: "objectClass", + then: COUNT, + other: COUNT, +}); +const COARSE_TYPE = Object.freeze({ + by: "coarseType", + objects: OBJECT_CLASS, + strings: COUNT, + scripts: { + by: "filename", + then: INTERNAL_TYPE, + noFilename: INTERNAL_TYPE, + }, + other: INTERNAL_TYPE, + domNode: DESCRIPTIVE_TYPE, +}); + +exports.censusDisplays = Object.freeze({ + coarseType: Object.freeze({ + displayName: "Type", + get tooltip() { + // Importing down here is necessary because of the circular dependency + // this introduces with `./utils.js`. + const { L10N } = require("resource://devtools/client/memory/utils.js"); + return L10N.getStr("censusDisplays.coarseType.tooltip"); + }, + inverted: true, + breakdown: COARSE_TYPE, + }), + + allocationStack: Object.freeze({ + displayName: "Call Stack", + get tooltip() { + const { L10N } = require("resource://devtools/client/memory/utils.js"); + return L10N.getStr("censusDisplays.allocationStack.tooltip"); + }, + inverted: false, + breakdown: ALLOCATION_STACK, + }), + + invertedAllocationStack: Object.freeze({ + displayName: "Inverted Call Stack", + get tooltip() { + const { L10N } = require("resource://devtools/client/memory/utils.js"); + return L10N.getStr("censusDisplays.invertedAllocationStack.tooltip"); + }, + inverted: true, + breakdown: ALLOCATION_STACK, + }), +}); + +const DOMINATOR_TREE_LABEL_COARSE_TYPE = Object.freeze({ + by: "coarseType", + objects: OBJECT_CLASS, + scripts: Object.freeze({ + by: "internalType", + then: Object.freeze({ + by: "filename", + then: COUNT, + noFilename: COUNT, + }), + }), + strings: INTERNAL_TYPE, + other: INTERNAL_TYPE, + domNode: DESCRIPTIVE_TYPE, +}); + +exports.labelDisplays = Object.freeze({ + coarseType: Object.freeze({ + displayName: "Type", + get tooltip() { + const { L10N } = require("resource://devtools/client/memory/utils.js"); + return L10N.getStr("dominatorTreeDisplays.coarseType.tooltip"); + }, + breakdown: DOMINATOR_TREE_LABEL_COARSE_TYPE, + }), + + allocationStack: Object.freeze({ + displayName: "Call Stack", + get tooltip() { + const { L10N } = require("resource://devtools/client/memory/utils.js"); + return L10N.getStr("dominatorTreeDisplays.allocationStack.tooltip"); + }, + breakdown: Object.freeze({ + by: "allocationStack", + then: DOMINATOR_TREE_LABEL_COARSE_TYPE, + noStack: DOMINATOR_TREE_LABEL_COARSE_TYPE, + }), + }), +}); + +exports.treeMapDisplays = Object.freeze({ + coarseType: Object.freeze({ + displayName: "Type", + get tooltip() { + const { L10N } = require("resource://devtools/client/memory/utils.js"); + return L10N.getStr("treeMapDisplays.coarseType.tooltip"); + }, + breakdown: COARSE_TYPE, + inverted: false, + }), +}); + +/** * View States **************************************************************/ + +/** + * The various main views that the tool can be in. + */ +const viewState = (exports.viewState = Object.create(null)); +viewState.CENSUS = "view-state-census"; +viewState.DIFFING = "view-state-diffing"; +viewState.DOMINATOR_TREE = "view-state-dominator-tree"; +viewState.TREE_MAP = "view-state-tree-map"; +viewState.INDIVIDUALS = "view-state-individuals"; + +/** * Snapshot States **********************************************************/ + +const snapshotState = (exports.snapshotState = Object.create(null)); + +/** + * Various states a snapshot can be in. + * An FSM describing snapshot states: + * + * SAVING -> SAVED -> READING -> READ + * ↗ + * IMPORTING + * + * Any of these states may go to the ERROR state, from which they can never + * leave (mwah ha ha ha!) + */ +snapshotState.ERROR = "snapshot-state-error"; +snapshotState.IMPORTING = "snapshot-state-importing"; +snapshotState.SAVING = "snapshot-state-saving"; +snapshotState.SAVED = "snapshot-state-saved"; +snapshotState.READING = "snapshot-state-reading"; +snapshotState.READ = "snapshot-state-read"; + +/* + * Various states the census model can be in. + * + * SAVING <-> SAVED + * | + * V + * ERROR + */ + +const censusState = (exports.censusState = Object.create(null)); + +censusState.SAVING = "census-state-saving"; +censusState.SAVED = "census-state-saved"; +censusState.ERROR = "census-state-error"; + +/* + * Various states the tree map model can be in. + * + * SAVING <-> SAVED + * | + * V + * ERROR + */ + +const treeMapState = (exports.treeMapState = Object.create(null)); + +treeMapState.SAVING = "tree-map-state-saving"; +treeMapState.SAVED = "tree-map-state-saved"; +treeMapState.ERROR = "tree-map-state-error"; + +/** * Diffing States ***********************************************************/ + +/* + * Various states the diffing model can be in. + * + * SELECTING --> TAKING_DIFF <---> TOOK_DIFF + * | + * V + * ERROR + */ +const diffingState = (exports.diffingState = Object.create(null)); + +// Selecting the two snapshots to diff. +diffingState.SELECTING = "diffing-state-selecting"; + +// Currently computing the diff between the two selected snapshots. +diffingState.TAKING_DIFF = "diffing-state-taking-diff"; + +// Have the diff between the two selected snapshots. +diffingState.TOOK_DIFF = "diffing-state-took-diff"; + +// An error occurred while computing the diff. +diffingState.ERROR = "diffing-state-error"; + +/** * Dominator Tree States ****************************************************/ + +/* + * Various states the dominator tree model can be in. + * + * COMPUTING -> COMPUTED -> FETCHING -> LOADED <--> INCREMENTAL_FETCHING + * + * Any state may lead to the ERROR state, from which it can never leave. + */ +const dominatorTreeState = (exports.dominatorTreeState = Object.create(null)); +dominatorTreeState.COMPUTING = "dominator-tree-state-computing"; +dominatorTreeState.COMPUTED = "dominator-tree-state-computed"; +dominatorTreeState.FETCHING = "dominator-tree-state-fetching"; +dominatorTreeState.LOADED = "dominator-tree-state-loaded"; +dominatorTreeState.INCREMENTAL_FETCHING = + "dominator-tree-state-incremental-fetching"; +dominatorTreeState.ERROR = "dominator-tree-state-error"; + +/** * States for Individuals Model *********************************************/ + +/* + * Various states the individuals model can be in. + * + * COMPUTING_DOMINATOR_TREE -> FETCHING -> FETCHED + * + * Any state may lead to the ERROR state, from which it can never leave. + */ +const individualsState = (exports.individualsState = Object.create(null)); +individualsState.COMPUTING_DOMINATOR_TREE = + "individuals-state-computing-dominator-tree"; +individualsState.FETCHING = "individuals-state-fetching"; +individualsState.FETCHED = "individuals-state-fetched"; +individualsState.ERROR = "individuals-state-error"; diff --git a/devtools/client/memory/dominator-tree-lazy-children.js b/devtools/client/memory/dominator-tree-lazy-children.js new file mode 100644 index 0000000000..f61efbc391 --- /dev/null +++ b/devtools/client/memory/dominator-tree-lazy-children.js @@ -0,0 +1,60 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +/** + * The `DominatorTreeLazyChildren` is a placeholder that represents a future + * subtree in an existing `DominatorTreeNode` tree that is currently being + * incrementally fetched from the `HeapAnalysesWorker`. + * + * @param {NodeId} parentNodeId + * @param {Number} siblingIndex + */ +function DominatorTreeLazyChildren(parentNodeId, siblingIndex) { + this._parentNodeId = parentNodeId; + this._siblingIndex = siblingIndex; +} + +/** + * Generate a unique key for this `DominatorTreeLazyChildren` instance. This can + * be used as the key in a hash table or as the `key` property for a React + * component, for example. + * + * @returns {String} + */ +DominatorTreeLazyChildren.prototype.key = function () { + return `dominator-tree-lazy-children-${this._parentNodeId}-${this._siblingIndex}`; +}; + +/** + * Return true if this is a placeholder for the first child of its + * parent. Return false if it is a placeholder for loading more of its parent's + * children. + * + * @returns {Boolean} + */ +DominatorTreeLazyChildren.prototype.isFirstChild = function () { + return this._siblingIndex === 0; +}; + +/** + * Get this subtree's parent node's identifier. + * + * @returns {NodeId} + */ +DominatorTreeLazyChildren.prototype.parentNodeId = function () { + return this._parentNodeId; +}; + +/** + * Get this subtree's index in its parent's children array. + * + * @returns {Number} + */ +DominatorTreeLazyChildren.prototype.siblingIndex = function () { + return this._siblingIndex; +}; + +module.exports = DominatorTreeLazyChildren; diff --git a/devtools/client/memory/index.xhtml b/devtools/client/memory/index.xhtml new file mode 100644 index 0000000000..5d7836a13c --- /dev/null +++ b/devtools/client/memory/index.xhtml @@ -0,0 +1,49 @@ +<?xml version="1.0" encoding="UTF-8"?> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<html xmlns="http://www.w3.org/1999/xhtml" dir=""> + <head> + <link + rel="stylesheet" + href="chrome://devtools/skin/widgets.css" + type="text/css" + /> + <link + rel="stylesheet" + href="chrome://devtools/skin/memory.css" + type="text/css" + /> + <link + rel="stylesheet" + href="chrome://devtools/skin/components-frame.css" + type="text/css" + /> + <link + rel="stylesheet" + href="chrome://devtools/skin/components-h-split-box.css" + type="text/css" + /> + </head> + <body class="theme-body"> + <div id="app"></div> + + <script + src="chrome://devtools/content/shared/theme-switching.js" + defer="true" + ></script> + + <script + src="chrome://global/content/third_party/d3/d3.js" + defer="true" + ></script> + + <script + src="chrome://devtools/content/shared/vendor/dagre-d3.js" + defer="true" + ></script> + </body> +</html> diff --git a/devtools/client/memory/initializer.js b/devtools/client/memory/initializer.js new file mode 100644 index 0000000000..541bd224eb --- /dev/null +++ b/devtools/client/memory/initializer.js @@ -0,0 +1,85 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* exported initialize, destroy, Promise */ + +"use strict"; + +const { + createFactory, + createElement, +} = require("resource://devtools/client/shared/vendor/react.js"); +const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.js"); +const { + Provider, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const App = createFactory(require("resource://devtools/client/memory/app.js")); +const Store = require("resource://devtools/client/memory/store.js"); +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); + +const { + updateMemoryFront, +} = require("resource://devtools/client/memory/actions/front.js"); + +// Shared variables used by several methods of this module. +let root, store, unsubscribe; + +const initialize = async function (commands) { + // Exposed by panel.js + const { gToolbox, gHeapAnalysesClient } = window; + + root = document.querySelector("#app"); + store = Store(); + const app = createElement(App, { + toolbox: gToolbox, + commands, + heapWorker: gHeapAnalysesClient, + }); + const provider = createElement(Provider, { store }, app); + ReactDOM.render(provider, root); + unsubscribe = store.subscribe(onStateChange); + + // Exposed for tests. + window.gStore = store; +}; + +const updateFront = front => { + store.dispatch(updateMemoryFront(front)); +}; + +const destroy = function () { + const ok = ReactDOM.unmountComponentAtNode(root); + assert( + ok, + "Should successfully unmount the memory tool's top level React component" + ); + + unsubscribe(); +}; + +// Current state +let isHighlighted; + +/** + * Fired on any state change, currently only handles toggling + * the highlighting of the tool when recording allocations. + */ +function onStateChange() { + const { gToolbox } = window; + + const isRecording = store.getState().allocations.recording; + if (isRecording === isHighlighted) { + return; + } + + if (isRecording) { + gToolbox.highlightTool("memory"); + } else { + gToolbox.unhighlightTool("memory"); + } + + isHighlighted = isRecording; +} + +module.exports = { initialize, updateFront, destroy }; diff --git a/devtools/client/memory/models.js b/devtools/client/memory/models.js new file mode 100644 index 0000000000..83ed3641b0 --- /dev/null +++ b/devtools/client/memory/models.js @@ -0,0 +1,546 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* global treeMapState, censusState */ +/* eslint no-shadow: ["error", { "allow": ["app"] }] */ + +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { MemoryFront } = require("resource://devtools/client/fronts/memory.js"); +const HeapAnalysesClient = require("resource://devtools/shared/heapsnapshot/HeapAnalysesClient.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + snapshotState: states, + diffingState, + dominatorTreeState, + viewState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); + +/** + * ONLY USE THIS FOR MODEL VALIDATORS IN CONJUCTION WITH assert()! + * + * React checks that the returned values from validator functions are instances + * of Error, but because React is loaded in its own global, that check is always + * false and always results in a warning. + * + * To work around this and still get model validation, just call assert() inside + * a function passed to catchAndIgnore. The assert() function will still report + * assertion failures, but this funciton will swallow the errors so that React + * doesn't go crazy and drown out the real error in irrelevant and incorrect + * warnings. + * + * Example usage: + * + * const MyModel = PropTypes.shape({ + * someProperty: catchAndIgnore(function (model) { + * assert(someInvariant(model.someProperty), "Should blah blah"); + * }) + * }); + */ +function catchAndIgnore(fn) { + return function (...args) { + try { + fn(...args); + } catch (err) { + // continue regardless of error + } + + return null; + }; +} + +/** + * The data describing the census report's shape, and its associated metadata. + * + * @see `js/src/doc/Debugger/Debugger.Memory.md` + */ +const censusDisplayModel = (exports.censusDisplay = PropTypes.shape({ + displayName: PropTypes.string.isRequired, + tooltip: PropTypes.string.isRequired, + inverted: PropTypes.bool.isRequired, + breakdown: PropTypes.shape({ + by: PropTypes.string.isRequired, + }), +})); + +/** + * How we want to label nodes in the dominator tree, and associated + * metadata. The notable difference from `censusDisplayModel` is the lack of + * an `inverted` property. + * + * @see `js/src/doc/Debugger/Debugger.Memory.md` + */ +const labelDisplayModel = (exports.labelDisplay = PropTypes.shape({ + displayName: PropTypes.string.isRequired, + tooltip: PropTypes.string.isRequired, + breakdown: PropTypes.shape({ + by: PropTypes.string.isRequired, + }), +})); + +/** + * The data describing the tree map's shape, and its associated metadata. + * + * @see `js/src/doc/Debugger/Debugger.Memory.md` + */ +const treeMapDisplayModel = (exports.treeMapDisplay = PropTypes.shape({ + displayName: PropTypes.string.isRequired, + tooltip: PropTypes.string.isRequired, + inverted: PropTypes.bool.isRequired, + breakdown: PropTypes.shape({ + by: PropTypes.string.isRequired, + }), +})); + +/** + * Tree map model. + */ +const treeMapModel = (exports.treeMapModel = PropTypes.shape({ + // The current census report data. + report: PropTypes.object, + // The display data used to generate the current census. + display: treeMapDisplayModel, + // The current treeMapState this is in + state: catchAndIgnore(function (treeMap) { + switch (treeMap.state) { + case treeMapState.SAVING: + assert(!treeMap.report, "Should not have a report"); + assert(!treeMap.error, "Should not have an error"); + break; + + case treeMapState.SAVED: + assert(treeMap.report, "Should have a report"); + assert(!treeMap.error, "Should not have an error"); + break; + + case treeMapState.ERROR: + assert(treeMap.error, "Should have an error"); + break; + + default: + assert(false, `Unexpected treeMap state: ${treeMap.state}`); + } + }), +})); + +const censusModel = (exports.censusModel = PropTypes.shape({ + // The current census report data. + report: PropTypes.object, + // The parent map for the report. + parentMap: PropTypes.object, + // The display data used to generate the current census. + display: censusDisplayModel, + // If present, the currently cached report's filter string used for pruning + // the tree items. + filter: PropTypes.string, + // The Immutable.Set<CensusTreeNode.id> of expanded node ids in the report + // tree. + expanded: catchAndIgnore(function (census) { + if (census.report) { + assert( + census.expanded, + "If we have a report, we should also have the set of expanded nodes" + ); + } + }), + // If a node is currently focused in the report tree, then this is it. + focused: PropTypes.object, + // The censusModelState that this census is currently in. + state: catchAndIgnore(function (census) { + switch (census.state) { + case censusState.SAVING: + assert(!census.report, "Should not have a report"); + assert(!census.parentMap, "Should not have a parent map"); + assert(census.expanded, "Should not have an expanded set"); + assert(!census.error, "Should not have an error"); + break; + + case censusState.SAVED: + assert(census.report, "Should have a report"); + assert(census.parentMap, "Should have a parent map"); + assert(census.expanded, "Should have an expanded set"); + assert(!census.error, "Should not have an error"); + break; + + case censusState.ERROR: + assert(!census.report, "Should not have a report"); + assert(census.error, "Should have an error"); + break; + + default: + assert(false, `Unexpected census state: ${census.state}`); + } + }), +})); + +/** + * Dominator tree model. + */ +const dominatorTreeModel = (exports.dominatorTreeModel = PropTypes.shape({ + // The id of this dominator tree. + dominatorTreeId: PropTypes.number, + + // The root DominatorTreeNode of this dominator tree. + root: PropTypes.object, + + // The Set<NodeId> of expanded nodes in this dominator tree. + expanded: PropTypes.object, + + // If a node is currently focused in the dominator tree, then this is it. + focused: PropTypes.object, + + // If an error was thrown while getting this dominator tree, the `Error` + // instance (or an error string message) is attached here. + error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + + // The display used to generate descriptive labels of nodes in this dominator + // tree. + display: labelDisplayModel, + + // The number of active requests to incrementally fetch subtrees. This should + // only be non-zero when the state is INCREMENTAL_FETCHING. + activeFetchRequestCount: PropTypes.number, + + // The dominatorTreeState that this domintor tree is currently in. + state: catchAndIgnore(function (dominatorTree) { + switch (dominatorTree.state) { + case dominatorTreeState.COMPUTING: + assert( + dominatorTree.dominatorTreeId == null, + "Should not have a dominator tree id yet" + ); + assert(!dominatorTree.root, "Should not have the root of the tree yet"); + assert(!dominatorTree.error, "Should not have an error"); + break; + + case dominatorTreeState.COMPUTED: + case dominatorTreeState.FETCHING: + assert( + dominatorTree.dominatorTreeId != null, + "Should have a dominator tree id" + ); + assert(!dominatorTree.root, "Should not have the root of the tree yet"); + assert(!dominatorTree.error, "Should not have an error"); + break; + + case dominatorTreeState.INCREMENTAL_FETCHING: + assert( + typeof dominatorTree.activeFetchRequestCount === "number", + "The active fetch request count is a number when we are in the " + + "INCREMENTAL_FETCHING state" + ); + assert( + dominatorTree.activeFetchRequestCount > 0, + "We are keeping track of how many active requests are in flight." + ); + // Fall through... + case dominatorTreeState.LOADED: + assert( + dominatorTree.dominatorTreeId != null, + "Should have a dominator tree id" + ); + assert(dominatorTree.root, "Should have the root of the tree"); + assert(dominatorTree.expanded, "Should have an expanded set"); + assert(!dominatorTree.error, "Should not have an error"); + break; + + case dominatorTreeState.ERROR: + assert(dominatorTree.error, "Should have an error"); + break; + + default: + assert( + false, + `Unexpected dominator tree state: ${dominatorTree.state}` + ); + } + }), +})); + +/** + * Snapshot model. + */ +const stateKeys = Object.keys(states).map(state => states[state]); +const snapshotId = PropTypes.number; +const snapshotModel = (exports.snapshot = PropTypes.shape({ + // Unique ID for a snapshot + id: snapshotId.isRequired, + // Whether or not this snapshot is currently selected. + selected: PropTypes.bool.isRequired, + // Filesystem path to where the snapshot is stored; used to identify the + // snapshot for HeapAnalysesClient. + path: PropTypes.string, + // Current census data for this snapshot. + census: censusModel, + // Current dominator tree data for this snapshot. + dominatorTree: dominatorTreeModel, + // Current tree map data for this snapshot. + treeMap: treeMapModel, + // If an error was thrown while processing this snapshot, the `Error` instance + // is attached here. + error: PropTypes.object, + // Boolean indicating whether or not this snapshot was imported. + imported: PropTypes.bool.isRequired, + // The creation time of the snapshot; required after the snapshot has been + // read. + creationTime: PropTypes.number, + // The current state the snapshot is in. + // @see ./constants.js + state: catchAndIgnore(function (snapshot, propName) { + const current = snapshot.state; + const shouldHavePath = [states.IMPORTING, states.SAVED, states.READ]; + const shouldHaveCreationTime = [states.READ]; + + if (!stateKeys.includes(current)) { + throw new Error(`Snapshot state must be one of ${stateKeys}.`); + } + if (shouldHavePath.includes(current) && !snapshot.path) { + throw new Error( + `Snapshots in state ${current} must have a snapshot path.` + ); + } + if (shouldHaveCreationTime.includes(current) && !snapshot.creationTime) { + throw new Error( + `Snapshots in state ${current} must have a creation time.` + ); + } + }), +})); + +const allocationsModel = (exports.allocations = PropTypes.shape({ + // True iff we are recording allocation stacks right now. + recording: PropTypes.bool.isRequired, + // True iff we are in the process of toggling the recording of allocation + // stacks on or off right now. + togglingInProgress: PropTypes.bool.isRequired, +})); + +const diffingModel = (exports.diffingModel = PropTypes.shape({ + // The id of the first snapshot to diff. + firstSnapshotId: snapshotId, + + // The id of the second snapshot to diff. + secondSnapshotId: catchAndIgnore(function (diffing, propName) { + if (diffing.secondSnapshotId && !diffing.firstSnapshotId) { + throw new Error( + "Cannot have second snapshot without already having " + "first snapshot" + ); + } + return snapshotId(diffing, propName); + }), + + // The current census data for the diffing. + census: censusModel, + + // If an error was thrown while diffing, the `Error` instance is attached + // here. + error: PropTypes.object, + + // The current state the diffing is in. + // @see ./constants.js + state: catchAndIgnore(function (diffing) { + switch (diffing.state) { + case diffingState.TOOK_DIFF: + assert(diffing.census, "If we took a diff, we should have a census"); + // Fall through... + case diffingState.TAKING_DIFF: + assert(diffing.firstSnapshotId, "Should have first snapshot"); + assert(diffing.secondSnapshotId, "Should have second snapshot"); + break; + + case diffingState.SELECTING: + break; + + case diffingState.ERROR: + assert(diffing.error, "Should have error"); + break; + + default: + assert(false, `Bad diffing state: ${diffing.state}`); + } + }), +})); + +const previousViewModel = (exports.previousView = PropTypes.shape({ + state: catchAndIgnore(function (previous) { + switch (previous.state) { + case viewState.DIFFING: + assert(previous.diffing, "Should have previous diffing state."); + assert( + !previous.selected, + "Should not have a previously selected snapshot." + ); + break; + + case viewState.CENSUS: + case viewState.DOMINATOR_TREE: + case viewState.TREE_MAP: + assert( + previous.selected, + "Should have a previously selected snapshot." + ); + break; + + case viewState.INDIVIDUALS: + default: + assert(false, `Unexpected previous view state: ${previous.state}.`); + } + }), + + // The previous diffing state, if any. + diffing: diffingModel, + + // The previously selected snapshot, if any. + selected: snapshotId, +})); + +exports.view = PropTypes.shape({ + // The current view state. + state: catchAndIgnore(function (view) { + switch (view.state) { + case viewState.DIFFING: + case viewState.CENSUS: + case viewState.DOMINATOR_TREE: + case viewState.INDIVIDUALS: + case viewState.TREE_MAP: + break; + + default: + assert(false, `Unexpected type of view: ${view.state}`); + } + }), + + // The previous view state. + previous: previousViewModel, +}); + +const individualsModel = (exports.individuals = PropTypes.shape({ + error: PropTypes.object, + + nodes: PropTypes.arrayOf(PropTypes.object), + + dominatorTree: dominatorTreeModel, + + id: snapshotId, + + censusBreakdown: PropTypes.object, + + indices: PropTypes.object, + + labelDisplay: labelDisplayModel, + + focused: PropTypes.object, + + state: catchAndIgnore(function (individuals) { + switch (individuals.state) { + case individualsState.COMPUTING_DOMINATOR_TREE: + case individualsState.FETCHING: + assert(!individuals.nodes, "Should not have individual nodes"); + assert(!individuals.dominatorTree, "Should not have dominator tree"); + assert(!individuals.id, "Should not have an id"); + assert( + !individuals.censusBreakdown, + "Should not have a censusBreakdown" + ); + assert(!individuals.indices, "Should not have indices"); + assert(!individuals.labelDisplay, "Should not have a labelDisplay"); + break; + + case individualsState.FETCHED: + assert(individuals.nodes, "Should have individual nodes"); + assert(individuals.dominatorTree, "Should have dominator tree"); + assert(individuals.id, "Should have an id"); + assert(individuals.censusBreakdown, "Should have a censusBreakdown"); + assert(individuals.indices, "Should have indices"); + assert(individuals.labelDisplay, "Should have a labelDisplay"); + break; + + case individualsState.ERROR: + assert(individuals.error, "Should have an error object"); + break; + + default: + assert(false, `Unexpected individuals state: ${individuals.state}`); + break; + } + }), +})); + +exports.app = { + // {Commands} Used to communicate with the backend + commands: PropTypes.object, + + // {MemoryFront} Used to communicate with platform + front: PropTypes.instanceOf(MemoryFront), + + // Allocations recording related data. + allocations: allocationsModel.isRequired, + + // {HeapAnalysesClient} Used to interface with snapshots + heapWorker: PropTypes.instanceOf(HeapAnalysesClient), + + // The display data describing how we want the census data to be. + censusDisplay: censusDisplayModel.isRequired, + + // The display data describing how we want the dominator tree labels to be + // computed. + labelDisplay: labelDisplayModel.isRequired, + + // The display data describing how we want the dominator tree labels to be + // computed. + treeMapDisplay: treeMapDisplayModel.isRequired, + + // List of reference to all snapshots taken + snapshots: PropTypes.arrayOf(snapshotModel).isRequired, + + // If present, a filter string for pruning the tree items. + filter: PropTypes.string, + + // If present, the current diffing state. + diffing: diffingModel, + + // If present, the current individuals state. + individuals: individualsModel, + + // The current type of view. + view(app) { + catchAndIgnore(function (app) { + switch (app.view.state) { + case viewState.DIFFING: + assert(app.diffing, "Should be diffing"); + break; + + case viewState.INDIVIDUALS: + case viewState.CENSUS: + case viewState.DOMINATOR_TREE: + case viewState.TREE_MAP: + assert(!app.diffing, "Should not be diffing"); + break; + + default: + assert(false, `Unexpected type of view: ${app.view.state}`); + } + })(app); + + catchAndIgnore(function (app) { + switch (app.view.state) { + case viewState.INDIVIDUALS: + assert(app.individuals, "Should have individuals state"); + break; + + case viewState.DIFFING: + case viewState.CENSUS: + case viewState.DOMINATOR_TREE: + case viewState.TREE_MAP: + assert(!app.individuals, "Should not have individuals state"); + break; + + default: + assert(false, `Unexpected type of view: ${app.view.state}`); + } + })(app); + }, +}; diff --git a/devtools/client/memory/moz.build b/devtools/client/memory/moz.build new file mode 100644 index 0000000000..e7ce780699 --- /dev/null +++ b/devtools/client/memory/moz.build @@ -0,0 +1,29 @@ +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +with Files("**"): + BUG_COMPONENT = ("DevTools", "Memory") + +DIRS += [ + "actions", + "components", + "reducers", +] + +DevToolsModules( + "app.js", + "constants.js", + "dominator-tree-lazy-children.js", + "initializer.js", + "models.js", + "panel.js", + "reducers.js", + "store.js", + "utils.js", +) + +BROWSER_CHROME_MANIFESTS += ["test/browser/browser.toml"] +XPCSHELL_TESTS_MANIFESTS += ["test/xpcshell/xpcshell.toml"] +MOCHITEST_CHROME_MANIFESTS += ["test/chrome/chrome.toml"] diff --git a/devtools/client/memory/panel.js b/devtools/client/memory/panel.js new file mode 100644 index 0000000000..e6143aafa4 --- /dev/null +++ b/devtools/client/memory/panel.js @@ -0,0 +1,74 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const HeapAnalysesClient = require("resource://devtools/shared/heapsnapshot/HeapAnalysesClient.js"); + +function MemoryPanel(iframeWindow, toolbox, commands) { + this.panelWin = iframeWindow; + this._toolbox = toolbox; + this._commands = commands; + + const { BrowserLoader } = ChromeUtils.import( + "resource://devtools/shared/loader/browser-loader.js" + ); + const browserRequire = BrowserLoader({ + baseURI: "resource://devtools/client/memory/", + window: this.panelWin, + }).require; + this.initializer = browserRequire("devtools/client/memory/initializer"); + + this._onTargetAvailable = this._onTargetAvailable.bind(this); + + EventEmitter.decorate(this); +} + +MemoryPanel.prototype = { + async open() { + this.panelWin.gToolbox = this._toolbox; + this.panelWin.gHeapAnalysesClient = new HeapAnalysesClient(); + + await this.initializer.initialize(this._commands); + + await this._commands.targetCommand.watchTargets({ + types: [this._commands.targetCommand.TYPES.FRAME], + onAvailable: this._onTargetAvailable, + }); + + return this; + }, + + async _onTargetAvailable({ targetFront }) { + if (targetFront.isTopLevel) { + const front = await targetFront.getFront("memory"); + await front.attach(); + this.initializer.updateFront(front); + } + }, + + // DevToolPanel API + + destroy() { + // Make sure this panel is not already destroyed. + if (this._destroyed) { + return; + } + this._destroyed = true; + + this._commands.targetCommand.unwatchTargets({ + types: [this._commands.targetCommand.TYPES.FRAME], + onAvailable: this._onTargetAvailable, + }); + + this.initializer.destroy(); + + this.panelWin.gHeapAnalysesClient.destroy(); + this.panelWin = null; + this.emit("destroyed"); + }, +}; + +exports.MemoryPanel = MemoryPanel; diff --git a/devtools/client/memory/reducers.js b/devtools/client/memory/reducers.js new file mode 100644 index 0000000000..964f2c5cfd --- /dev/null +++ b/devtools/client/memory/reducers.js @@ -0,0 +1,17 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +exports.allocations = require("resource://devtools/client/memory/reducers/allocations.js"); +exports.censusDisplay = require("resource://devtools/client/memory/reducers/census-display.js"); +exports.diffing = require("resource://devtools/client/memory/reducers/diffing.js"); +exports.front = require("resource://devtools/client/memory/reducers/front.js"); +exports.individuals = require("resource://devtools/client/memory/reducers/individuals.js"); +exports.labelDisplay = require("resource://devtools/client/memory/reducers/label-display.js"); +exports.treeMapDisplay = require("resource://devtools/client/memory/reducers/tree-map-display.js"); +exports.errors = require("resource://devtools/client/memory/reducers/errors.js"); +exports.filter = require("resource://devtools/client/memory/reducers/filter.js"); +exports.sizes = require("resource://devtools/client/memory/reducers/sizes.js"); +exports.snapshots = require("resource://devtools/client/memory/reducers/snapshots.js"); +exports.view = require("resource://devtools/client/memory/reducers/view.js"); diff --git a/devtools/client/memory/reducers/allocations.js b/devtools/client/memory/reducers/allocations.js new file mode 100644 index 0000000000..f019705560 --- /dev/null +++ b/devtools/client/memory/reducers/allocations.js @@ -0,0 +1,54 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { actions } = require("resource://devtools/client/memory/constants.js"); + +const handlers = Object.create(null); + +handlers[actions.TOGGLE_RECORD_ALLOCATION_STACKS_START] = function ( + state, + action +) { + assert( + !state.togglingInProgress, + "Changing recording state must not be reentrant." + ); + + return { + recording: !state.recording, + togglingInProgress: true, + }; +}; + +handlers[actions.TOGGLE_RECORD_ALLOCATION_STACKS_END] = function ( + state, + action +) { + assert( + state.togglingInProgress, + "Should not complete changing recording state if we weren't changing " + + "recording state already." + ); + + return { + recording: state.recording, + togglingInProgress: false, + }; +}; + +const DEFAULT_ALLOCATIONS_STATE = { + recording: false, + togglingInProgress: false, +}; + +module.exports = function (state = DEFAULT_ALLOCATIONS_STATE, action) { + const handle = handlers[action.type]; + if (handle) { + return handle(state, action); + } + return state; +}; diff --git a/devtools/client/memory/reducers/census-display.js b/devtools/client/memory/reducers/census-display.js new file mode 100644 index 0000000000..59a9d9ca5c --- /dev/null +++ b/devtools/client/memory/reducers/census-display.js @@ -0,0 +1,24 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { + actions, + censusDisplays, +} = require("resource://devtools/client/memory/constants.js"); +const DEFAULT_CENSUS_DISPLAY = censusDisplays.coarseType; + +const handlers = Object.create(null); + +handlers[actions.SET_CENSUS_DISPLAY] = function (_, { display }) { + return display; +}; + +module.exports = function (state = DEFAULT_CENSUS_DISPLAY, action) { + const handle = handlers[action.type]; + if (handle) { + return handle(state, action); + } + return state; +}; diff --git a/devtools/client/memory/reducers/diffing.js b/devtools/client/memory/reducers/diffing.js new file mode 100644 index 0000000000..da28b57deb --- /dev/null +++ b/devtools/client/memory/reducers/diffing.js @@ -0,0 +1,175 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const Immutable = require("resource://devtools/client/shared/vendor/immutable.js"); +const { + immutableUpdate, + assert, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const { + actions, + diffingState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + snapshotIsDiffable, +} = require("resource://devtools/client/memory/utils.js"); + +const handlers = Object.create(null); + +handlers[actions.POP_VIEW] = function (diffing, { previousView }) { + if (previousView.state === viewState.DIFFING) { + assert(previousView.diffing, "Should have previousView.diffing"); + return previousView.diffing; + } + + return null; +}; + +handlers[actions.CHANGE_VIEW] = function (diffing, { newViewState }) { + if (newViewState === viewState.DIFFING) { + assert(!diffing, "Should not switch to diffing view when already diffing"); + return Object.freeze({ + firstSnapshotId: null, + secondSnapshotId: null, + census: null, + state: diffingState.SELECTING, + }); + } + + return null; +}; + +handlers[actions.SELECT_SNAPSHOT_FOR_DIFFING] = function ( + diffing, + { snapshot } +) { + assert( + diffing, + "Should never select a snapshot for diffing when we aren't diffing " + + "anything" + ); + assert( + diffing.state === diffingState.SELECTING, + "Can't select when not in SELECTING state" + ); + assert(snapshotIsDiffable(snapshot), "snapshot must be in a diffable state"); + + if (!diffing.firstSnapshotId) { + return immutableUpdate(diffing, { + firstSnapshotId: snapshot.id, + }); + } + + assert( + !diffing.secondSnapshotId, + "If we aren't selecting the first, then we must be selecting the " + + "second" + ); + + if (snapshot.id === diffing.firstSnapshotId) { + // Ignore requests to select the same snapshot. + return diffing; + } + + return immutableUpdate(diffing, { + secondSnapshotId: snapshot.id, + }); +}; + +handlers[actions.TAKE_CENSUS_DIFF_START] = function (diffing, action) { + assert(diffing, "Should be diffing when starting a census diff"); + assert( + action.first.id === diffing.firstSnapshotId, + "First snapshot's id should match" + ); + assert( + action.second.id === diffing.secondSnapshotId, + "Second snapshot's id should match" + ); + + return immutableUpdate(diffing, { + state: diffingState.TAKING_DIFF, + census: { + report: null, + inverted: action.inverted, + filter: action.filter, + display: action.display, + }, + }); +}; + +handlers[actions.TAKE_CENSUS_DIFF_END] = function (diffing, action) { + assert(diffing, "Should be diffing when ending a census diff"); + assert( + action.first.id === diffing.firstSnapshotId, + "First snapshot's id should match" + ); + assert( + action.second.id === diffing.secondSnapshotId, + "Second snapshot's id should match" + ); + + return immutableUpdate(diffing, { + state: diffingState.TOOK_DIFF, + census: { + report: action.report, + parentMap: action.parentMap, + expanded: Immutable.Set(), + inverted: action.inverted, + filter: action.filter, + display: action.display, + }, + }); +}; + +handlers[actions.DIFFING_ERROR] = function (diffing, action) { + return { + state: diffingState.ERROR, + error: action.error, + }; +}; + +handlers[actions.EXPAND_DIFFING_CENSUS_NODE] = function (diffing, { node }) { + assert(diffing, "Should be diffing if expanding diffing's census nodes"); + assert( + diffing.state === diffingState.TOOK_DIFF, + "Should have taken the census diff if expanding nodes" + ); + assert(diffing.census, "Should have a census"); + assert(diffing.census.report, "Should have a census report"); + assert(diffing.census.expanded, "Should have a census's expanded set"); + + const expanded = diffing.census.expanded.add(node.id); + const census = immutableUpdate(diffing.census, { expanded }); + return immutableUpdate(diffing, { census }); +}; + +handlers[actions.COLLAPSE_DIFFING_CENSUS_NODE] = function (diffing, { node }) { + assert(diffing, "Should be diffing if expanding diffing's census nodes"); + assert( + diffing.state === diffingState.TOOK_DIFF, + "Should have taken the census diff if expanding nodes" + ); + assert(diffing.census, "Should have a census"); + assert(diffing.census.report, "Should have a census report"); + assert(diffing.census.expanded, "Should have a census's expanded set"); + + const expanded = diffing.census.expanded.delete(node.id); + const census = immutableUpdate(diffing.census, { expanded }); + return immutableUpdate(diffing, { census }); +}; + +handlers[actions.FOCUS_DIFFING_CENSUS_NODE] = function (diffing, { node }) { + assert(diffing, "Should be diffing."); + assert(diffing.census, "Should have a census"); + const census = immutableUpdate(diffing.census, { focused: node }); + return immutableUpdate(diffing, { census }); +}; + +module.exports = function (diffing = null, action) { + const handler = handlers[action.type]; + return handler ? handler(diffing, action) : diffing; +}; diff --git a/devtools/client/memory/reducers/errors.js b/devtools/client/memory/reducers/errors.js new file mode 100644 index 0000000000..ad1c8bd621 --- /dev/null +++ b/devtools/client/memory/reducers/errors.js @@ -0,0 +1,21 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + ERROR_TYPE: TASK_ERROR_TYPE, +} = require("resource://devtools/client/shared/redux/middleware/task.js"); + +/** + * Handle errors dispatched from task middleware and + * store them so we can check in tests or dump them out. + */ +module.exports = function (state = [], action) { + switch (action.type) { + case TASK_ERROR_TYPE: + return [...state, action.error]; + } + return state; +}; diff --git a/devtools/client/memory/reducers/filter.js b/devtools/client/memory/reducers/filter.js new file mode 100644 index 0000000000..3a1ad7d8cb --- /dev/null +++ b/devtools/client/memory/reducers/filter.js @@ -0,0 +1,14 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { actions } = require("resource://devtools/client/memory/constants.js"); + +module.exports = function filterReducer(filterString = null, action) { + if (action.type === actions.SET_FILTER_STRING) { + return action.filter || null; + } + + return filterString; +}; diff --git a/devtools/client/memory/reducers/front.js b/devtools/client/memory/reducers/front.js new file mode 100644 index 0000000000..92ff6c151c --- /dev/null +++ b/devtools/client/memory/reducers/front.js @@ -0,0 +1,11 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { actions } = require("resource://devtools/client/memory/constants.js"); + +module.exports = (front = null, action) => { + return action.type === actions.UPDATE_MEMORY_FRONT ? action.front : front; +}; diff --git a/devtools/client/memory/reducers/individuals.js b/devtools/client/memory/reducers/individuals.js new file mode 100644 index 0000000000..9b5a2c89a5 --- /dev/null +++ b/devtools/client/memory/reducers/individuals.js @@ -0,0 +1,84 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { + assert, + immutableUpdate, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const { + actions, + individualsState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); + +const handlers = Object.create(null); + +handlers[actions.POP_VIEW] = function (_state, _action) { + return null; +}; + +handlers[actions.CHANGE_VIEW] = function (individuals, { newViewState }) { + if (newViewState === viewState.INDIVIDUALS) { + assert( + !individuals, + "Should not switch to individuals view when already in individuals view" + ); + return Object.freeze({ + state: individualsState.COMPUTING_DOMINATOR_TREE, + }); + } + + return null; +}; + +handlers[actions.FOCUS_INDIVIDUAL] = function (individuals, { node }) { + assert(individuals, "Should have individuals"); + return immutableUpdate(individuals, { focused: node }); +}; + +handlers[actions.FETCH_INDIVIDUALS_START] = function (individuals, action) { + assert(individuals, "Should have individuals"); + return Object.freeze({ + state: individualsState.FETCHING, + focused: individuals.focused, + }); +}; + +handlers[actions.FETCH_INDIVIDUALS_END] = function (individuals, action) { + assert(individuals, "Should have individuals"); + assert(!individuals.nodes, "Should not have nodes"); + assert( + individuals.state === individualsState.FETCHING, + "Should only end fetching individuals after starting." + ); + + const focused = individuals.focused + ? action.nodes.find(n => n.nodeId === individuals.focused.nodeId) + : null; + + return Object.freeze({ + state: individualsState.FETCHED, + nodes: action.nodes, + id: action.id, + censusBreakdown: action.censusBreakdown, + indices: action.indices, + labelDisplay: action.labelDisplay, + focused, + dominatorTree: action.dominatorTree, + }); +}; + +handlers[actions.INDIVIDUALS_ERROR] = function (_, { error }) { + return Object.freeze({ + error, + nodes: null, + state: individualsState.ERROR, + }); +}; + +module.exports = function (individuals = null, action) { + const handler = handlers[action.type]; + return handler ? handler(individuals, action) : individuals; +}; diff --git a/devtools/client/memory/reducers/label-display.js b/devtools/client/memory/reducers/label-display.js new file mode 100644 index 0000000000..678930a91a --- /dev/null +++ b/devtools/client/memory/reducers/label-display.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + actions, + labelDisplays, +} = require("resource://devtools/client/memory/constants.js"); +const DEFAULT_LABEL_DISPLAY = labelDisplays.coarseType; + +const handlers = Object.create(null); + +handlers[actions.SET_LABEL_DISPLAY] = function (_, { display }) { + return display; +}; + +module.exports = function (state = DEFAULT_LABEL_DISPLAY, action) { + const handler = handlers[action.type]; + return handler ? handler(state, action) : state; +}; diff --git a/devtools/client/memory/reducers/moz.build b/devtools/client/memory/reducers/moz.build new file mode 100644 index 0000000000..53677d1d8e --- /dev/null +++ b/devtools/client/memory/reducers/moz.build @@ -0,0 +1,19 @@ +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +DevToolsModules( + "allocations.js", + "census-display.js", + "diffing.js", + "errors.js", + "filter.js", + "front.js", + "individuals.js", + "label-display.js", + "sizes.js", + "snapshots.js", + "tree-map-display.js", + "view.js", +) diff --git a/devtools/client/memory/reducers/sizes.js b/devtools/client/memory/reducers/sizes.js new file mode 100644 index 0000000000..f79e9f6b28 --- /dev/null +++ b/devtools/client/memory/reducers/sizes.js @@ -0,0 +1,20 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { actions } = require("resource://devtools/client/memory/constants.js"); +const { + immutableUpdate, +} = require("resource://devtools/shared/DevToolsUtils.js"); + +const handlers = Object.create(null); + +handlers[actions.RESIZE_SHORTEST_PATHS] = function (sizes, { size }) { + return immutableUpdate(sizes, { shortestPathsSize: size }); +}; + +module.exports = function (sizes = { shortestPathsSize: 0.5 }, action) { + const handler = handlers[action.type]; + return handler ? handler(sizes, action) : sizes; +}; diff --git a/devtools/client/memory/reducers/snapshots.js b/devtools/client/memory/reducers/snapshots.js new file mode 100644 index 0000000000..a56deddb9a --- /dev/null +++ b/devtools/client/memory/reducers/snapshots.js @@ -0,0 +1,517 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const Immutable = require("resource://devtools/client/shared/vendor/immutable.js"); +const { + immutableUpdate, + assert, +} = require("resource://devtools/shared/DevToolsUtils.js"); +const { + actions, + snapshotState: states, + censusState, + treeMapState, + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const DominatorTreeNode = require("resource://devtools/shared/heapsnapshot/DominatorTreeNode.js"); + +const handlers = Object.create(null); + +handlers[actions.SNAPSHOT_ERROR] = function (snapshots, { id, error }) { + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { state: states.ERROR, error }) + : snapshot; + }); +}; + +handlers[actions.TAKE_SNAPSHOT_START] = function (snapshots, { snapshot }) { + return [...snapshots, snapshot]; +}; + +handlers[actions.TAKE_SNAPSHOT_END] = function (snapshots, { id, path }) { + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { state: states.SAVED, path }) + : snapshot; + }); +}; + +handlers[actions.IMPORT_SNAPSHOT_START] = handlers[actions.TAKE_SNAPSHOT_START]; + +handlers[actions.READ_SNAPSHOT_START] = function (snapshots, { id }) { + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { state: states.READING }) + : snapshot; + }); +}; + +handlers[actions.READ_SNAPSHOT_END] = function ( + snapshots, + { id, creationTime } +) { + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { state: states.READ, creationTime }) + : snapshot; + }); +}; + +handlers[actions.TAKE_CENSUS_START] = function ( + snapshots, + { id, display, filter } +) { + const census = { + report: null, + display, + filter, + state: censusState.SAVING, + }; + + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { census }) + : snapshot; + }); +}; + +handlers[actions.TAKE_CENSUS_END] = function ( + snapshots, + { id, report, parentMap, display, filter } +) { + const census = { + report, + parentMap, + expanded: Immutable.Set(), + display, + filter, + state: censusState.SAVED, + }; + + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { census }) + : snapshot; + }); +}; + +handlers[actions.TAKE_CENSUS_ERROR] = function (snapshots, { id, error }) { + assert(error, "actions with TAKE_CENSUS_ERROR should have an error"); + + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + const census = Object.freeze({ + state: censusState.ERROR, + error, + }); + + return immutableUpdate(snapshot, { census }); + }); +}; + +handlers[actions.TAKE_TREE_MAP_START] = function (snapshots, { id, display }) { + const treeMap = { + report: null, + display, + state: treeMapState.SAVING, + }; + + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { treeMap }) + : snapshot; + }); +}; + +handlers[actions.TAKE_TREE_MAP_END] = function (snapshots, action) { + const { id, report, display } = action; + const treeMap = { + report, + display, + state: treeMapState.SAVED, + }; + + return snapshots.map(snapshot => { + return snapshot.id === id + ? immutableUpdate(snapshot, { treeMap }) + : snapshot; + }); +}; + +handlers[actions.TAKE_TREE_MAP_ERROR] = function (snapshots, { id, error }) { + assert(error, "actions with TAKE_TREE_MAP_ERROR should have an error"); + + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + const treeMap = Object.freeze({ + state: treeMapState.ERROR, + error, + }); + + return immutableUpdate(snapshot, { treeMap }); + }); +}; + +handlers[actions.EXPAND_CENSUS_NODE] = function (snapshots, { id, node }) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.census, "Should have a census"); + assert(snapshot.census.report, "Should have a census report"); + assert(snapshot.census.expanded, "Should have a census's expanded set"); + + const expanded = snapshot.census.expanded.add(node.id); + const census = immutableUpdate(snapshot.census, { expanded }); + return immutableUpdate(snapshot, { census }); + }); +}; + +handlers[actions.COLLAPSE_CENSUS_NODE] = function (snapshots, { id, node }) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.census, "Should have a census"); + assert(snapshot.census.report, "Should have a census report"); + assert(snapshot.census.expanded, "Should have a census's expanded set"); + + const expanded = snapshot.census.expanded.delete(node.id); + const census = immutableUpdate(snapshot.census, { expanded }); + return immutableUpdate(snapshot, { census }); + }); +}; + +handlers[actions.FOCUS_CENSUS_NODE] = function (snapshots, { id, node }) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.census, "Should have a census"); + const census = immutableUpdate(snapshot.census, { focused: node }); + return immutableUpdate(snapshot, { census }); + }); +}; + +handlers[actions.SELECT_SNAPSHOT] = function (snapshots, { id }) { + return snapshots.map(s => immutableUpdate(s, { selected: s.id === id })); +}; + +handlers[actions.DELETE_SNAPSHOTS_START] = function (snapshots, { ids }) { + return snapshots.filter(s => !ids.includes(s.id)); +}; + +handlers[actions.DELETE_SNAPSHOTS_END] = function (snapshots) { + return snapshots; +}; + +handlers[actions.CHANGE_VIEW] = function (snapshots, { newViewState }) { + return newViewState === viewState.DIFFING + ? snapshots.map(s => immutableUpdate(s, { selected: false })) + : snapshots; +}; + +handlers[actions.POP_VIEW] = function (snapshots, { previousView }) { + return snapshots.map(s => + immutableUpdate(s, { + selected: s.id === previousView.selected, + }) + ); +}; + +handlers[actions.COMPUTE_DOMINATOR_TREE_START] = function (snapshots, { id }) { + const dominatorTree = Object.freeze({ + state: dominatorTreeState.COMPUTING, + dominatorTreeId: undefined, + root: undefined, + }); + + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(!snapshot.dominatorTree, "Should not have a dominator tree model"); + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.COMPUTE_DOMINATOR_TREE_END] = function ( + snapshots, + { id, dominatorTreeId } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree model"); + assert( + snapshot.dominatorTree.state == dominatorTreeState.COMPUTING, + "Should be in the COMPUTING state" + ); + + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { + state: dominatorTreeState.COMPUTED, + dominatorTreeId, + }); + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.FETCH_DOMINATOR_TREE_START] = function ( + snapshots, + { id, display } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree model"); + assert( + snapshot.dominatorTree.state !== dominatorTreeState.COMPUTING && + snapshot.dominatorTree.state !== dominatorTreeState.ERROR, + "Should have already computed the dominator tree, found state = " + + snapshot.dominatorTree.state + ); + + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { + state: dominatorTreeState.FETCHING, + root: undefined, + display, + }); + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.FETCH_DOMINATOR_TREE_END] = function ( + snapshots, + { id, root } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree model"); + assert( + snapshot.dominatorTree.state == dominatorTreeState.FETCHING, + "Should be in the FETCHING state" + ); + + let focused; + if (snapshot.dominatorTree.focused) { + focused = (function findFocused(node) { + if (node.nodeId === snapshot.dominatorTree.focused.nodeId) { + return node; + } + + if (node.children) { + const length = node.children.length; + for (let i = 0; i < length; i++) { + const result = findFocused(node.children[i]); + if (result) { + return result; + } + } + } + + return undefined; + })(root); + } + + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { + state: dominatorTreeState.LOADED, + root, + expanded: Immutable.Set(), + focused, + }); + + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.EXPAND_DOMINATOR_TREE_NODE] = function ( + snapshots, + { id, node } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree"); + assert( + snapshot.dominatorTree.expanded, + "Should have the dominator tree's expanded set" + ); + + const expanded = snapshot.dominatorTree.expanded.add(node.nodeId); + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { expanded }); + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.COLLAPSE_DOMINATOR_TREE_NODE] = function ( + snapshots, + { id, node } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree"); + assert( + snapshot.dominatorTree.expanded, + "Should have the dominator tree's expanded set" + ); + + const expanded = snapshot.dominatorTree.expanded.delete(node.nodeId); + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { expanded }); + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.FOCUS_DOMINATOR_TREE_NODE] = function ( + snapshots, + { id, node } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree"); + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { + focused: node, + }); + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.FETCH_IMMEDIATELY_DOMINATED_START] = function ( + snapshots, + { id } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree model"); + assert( + snapshot.dominatorTree.state == dominatorTreeState.INCREMENTAL_FETCHING || + snapshot.dominatorTree.state == dominatorTreeState.LOADED, + "The dominator tree should be loaded if we are going to " + + "incrementally fetch children." + ); + + const activeFetchRequestCount = snapshot.dominatorTree + .activeFetchRequestCount + ? snapshot.dominatorTree.activeFetchRequestCount + 1 + : 1; + + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { + state: dominatorTreeState.INCREMENTAL_FETCHING, + activeFetchRequestCount, + }); + + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.FETCH_IMMEDIATELY_DOMINATED_END] = function ( + snapshots, + { id, path, nodes, moreChildrenAvailable } +) { + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + assert(snapshot.dominatorTree, "Should have a dominator tree model"); + assert( + snapshot.dominatorTree.root, + "Should have a dominator tree model root" + ); + assert( + snapshot.dominatorTree.state === dominatorTreeState.INCREMENTAL_FETCHING, + "The dominator tree state should be INCREMENTAL_FETCHING" + ); + + const root = DominatorTreeNode.insert( + snapshot.dominatorTree.root, + path, + nodes, + moreChildrenAvailable + ); + + const focused = snapshot.dominatorTree.focused + ? DominatorTreeNode.getNodeByIdAlongPath( + snapshot.dominatorTree.focused.nodeId, + root, + path + ) + : undefined; + + const activeFetchRequestCount = + snapshot.dominatorTree.activeFetchRequestCount === 1 + ? undefined + : snapshot.dominatorTree.activeFetchRequestCount - 1; + + // If there are still outstanding requests, we need to stay in the + // INCREMENTAL_FETCHING state until they complete. + const state = activeFetchRequestCount + ? dominatorTreeState.INCREMENTAL_FETCHING + : dominatorTreeState.LOADED; + + const dominatorTree = immutableUpdate(snapshot.dominatorTree, { + state, + root, + focused, + activeFetchRequestCount, + }); + + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +handlers[actions.DOMINATOR_TREE_ERROR] = function (snapshots, { id, error }) { + assert(error, "actions with DOMINATOR_TREE_ERROR should have an error"); + + return snapshots.map(snapshot => { + if (snapshot.id !== id) { + return snapshot; + } + + const dominatorTree = Object.freeze({ + state: dominatorTreeState.ERROR, + error, + }); + + return immutableUpdate(snapshot, { dominatorTree }); + }); +}; + +module.exports = function (snapshots = [], action) { + const handler = handlers[action.type]; + if (handler) { + return handler(snapshots, action); + } + return snapshots; +}; diff --git a/devtools/client/memory/reducers/tree-map-display.js b/devtools/client/memory/reducers/tree-map-display.js new file mode 100644 index 0000000000..7f145e8181 --- /dev/null +++ b/devtools/client/memory/reducers/tree-map-display.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + actions, + treeMapDisplays, +} = require("resource://devtools/client/memory/constants.js"); +const DEFAULT_TREE_MAP_DISPLAY = treeMapDisplays.coarseType; + +const handlers = Object.create(null); + +handlers[actions.SET_TREE_MAP_DISPLAY] = function (_, { display }) { + return display; +}; + +module.exports = function (state = DEFAULT_TREE_MAP_DISPLAY, action) { + const handler = handlers[action.type]; + return handler ? handler(state, action) : state; +}; diff --git a/devtools/client/memory/reducers/view.js b/devtools/client/memory/reducers/view.js new file mode 100644 index 0000000000..99dab7ef03 --- /dev/null +++ b/devtools/client/memory/reducers/view.js @@ -0,0 +1,52 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + actions, + viewState, +} = require("resource://devtools/client/memory/constants.js"); + +const handlers = Object.create(null); + +handlers[actions.POP_VIEW] = function (view, _) { + assert(view.previous, "Had better have a previous view state when POP_VIEW"); + return Object.freeze({ + state: view.previous.state, + previous: null, + }); +}; + +handlers[actions.CHANGE_VIEW] = function (view, action) { + const { newViewState, oldDiffing, oldSelected } = action; + assert(newViewState); + + if (newViewState === viewState.INDIVIDUALS) { + assert(oldDiffing || oldSelected); + return Object.freeze({ + state: newViewState, + previous: Object.freeze({ + state: view.state, + selected: oldSelected, + diffing: oldDiffing, + }), + }); + } + + return Object.freeze({ + state: newViewState, + previous: null, + }); +}; + +const DEFAULT_VIEW = { + state: viewState.TREE_MAP, + previous: null, +}; + +module.exports = function (view = DEFAULT_VIEW, action) { + const handler = handlers[action.type]; + return handler ? handler(view, action) : view; +}; diff --git a/devtools/client/memory/store.js b/devtools/client/memory/store.js new file mode 100644 index 0000000000..9739ca0fd5 --- /dev/null +++ b/devtools/client/memory/store.js @@ -0,0 +1,15 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const createStore = require("resource://devtools/client/shared/redux/create-store.js"); +const reducers = require("resource://devtools/client/memory/reducers.js"); + +module.exports = () => + createStore(reducers, { + enableTaskMiddleware: true, + // Uncomment this for logging in tests. + // shouldLog: true, + }); diff --git a/devtools/client/memory/test/browser/browser.toml b/devtools/client/memory/test/browser/browser.toml new file mode 100644 index 0000000000..e748c3c1c5 --- /dev/null +++ b/devtools/client/memory/test/browser/browser.toml @@ -0,0 +1,63 @@ +[DEFAULT] +tags = "devtools devtools-memory" +subsuite = "devtools" +support-files = [ + "head.js", + "doc_big_tree.html", + "doc_empty.html", + "doc_steady_allocation.html", + "!/devtools/client/shared/test/shared-head.js", + "!/devtools/client/shared/test/telemetry-test-helpers.js", +] + +["browser_memory_allocationStackDisplay_01.js"] +skip-if = ["debug"] # bug 1219554 + +["browser_memory_allocationStackDisplay_02.js"] +skip-if = ["debug"] # bug 1219554 + +["browser_memory_clear_snapshots.js"] + +["browser_memory_diff_01.js"] +fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled + +["browser_memory_displays_01.js"] + +["browser_memory_dominator_trees_01.js"] +fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled +skip-if = ["ccov"] # bug 1347244 + +["browser_memory_dominator_trees_02.js"] +fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled +skip-if = ["ccov"] # bug 1347244 + +["browser_memory_filter_01.js"] +skip-if = ["ccov"] # bug 1347244 + +["browser_memory_fission_switch_target.js"] + +["browser_memory_individuals_01.js"] +fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled + +["browser_memory_keyboard-snapshot-list.js"] +fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled + +["browser_memory_keyboard.js"] +fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled + +["browser_memory_no_allocation_stacks.js"] + +["browser_memory_no_auto_expand.js"] +skip-if = ["debug"] # bug 1219554 + +["browser_memory_percents_01.js"] + +["browser_memory_refresh_does_not_leak.js"] + +["browser_memory_simple_01.js"] + +["browser_memory_transferHeapSnapshot_e10s_01.js"] + +["browser_memory_tree_map-01.js"] + +["browser_memory_tree_map-02.js"] diff --git a/devtools/client/memory/test/browser/browser_memory_allocationStackDisplay_01.js b/devtools/client/memory/test/browser/browser_memory_allocationStackDisplay_01.js new file mode 100644 index 0000000000..b526025b17 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_allocationStackDisplay_01.js @@ -0,0 +1,52 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Sanity test that we can show allocation stack displays in the tree. + +"use strict"; + +const { + toggleRecordingAllocationStacks, +} = require("resource://devtools/client/memory/actions/allocations.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const censusDisplayActions = require("resource://devtools/client/memory/actions/census-display.js"); +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const { getState, dispatch } = panel.panelWin.gStore; + const front = getState().front; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + dispatch( + censusDisplayActions.setCensusDisplay( + censusDisplays.invertedAllocationStack + ) + ); + is(getState().censusDisplay.breakdown.by, "allocationStack"); + + await dispatch(toggleRecordingAllocationStacks(panel._commands)); + ok(getState().allocations.recording); + + // Let some allocations build up. + await waitForTime(500); + + await dispatch(takeSnapshotAndCensus(front, heapWorker)); + + const names = [...doc.querySelectorAll(".frame-link-function-display-name")]; + ok(names.length, "Should have rendered some allocation stack tree items"); + ok( + names.some(e => !!e.textContent.trim()), + "And at least some of them should have functionDisplayNames" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_allocationStackDisplay_02.js b/devtools/client/memory/test/browser/browser_memory_allocationStackDisplay_02.js new file mode 100644 index 0000000000..34492187a2 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_allocationStackDisplay_02.js @@ -0,0 +1,51 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Sanity test that we can show allocation stack work when loading a new page + +"use strict"; + +const { + toggleRecordingAllocationStacks, +} = require("resource://devtools/client/memory/actions/allocations.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const censusDisplayActions = require("resource://devtools/client/memory/actions/census-display.js"); +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "https://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest("about:blank", async function ({ tab, panel }) { + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const { getState, dispatch } = panel.panelWin.gStore; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + dispatch( + censusDisplayActions.setCensusDisplay( + censusDisplays.invertedAllocationStack + ) + ); + is(getState().censusDisplay.breakdown.by, "allocationStack"); + + await dispatch(toggleRecordingAllocationStacks(panel._commands)); + ok(getState().allocations.recording); + + await navigateTo(TEST_URL); + + const front = getState().front; + await dispatch(takeSnapshotAndCensus(front, heapWorker)); + + const names = [...doc.querySelectorAll(".frame-link-function-display-name")]; + ok(names.length, "Should have rendered some allocation stack tree items"); + ok( + names.some(e => !!e.textContent.trim()), + "And at least some of them should have functionDisplayNames" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_clear_snapshots.js b/devtools/client/memory/test/browser/browser_memory_clear_snapshots.js new file mode 100644 index 0000000000..52eecd2838 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_clear_snapshots.js @@ -0,0 +1,78 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests taking and then clearing snapshots. + */ + +const { + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const { gStore, document } = panel.panelWin; + const { getState } = gStore; + + let snapshotEls = document.querySelectorAll( + "#memory-tool-container .list li" + ); + is(getState().snapshots.length, 0, "Starts with no snapshots in store"); + is(snapshotEls.length, 0, "No snapshots visible"); + + info("Take two snapshots"); + takeSnapshot(panel.panelWin); + takeSnapshot(panel.panelWin); + takeSnapshot(panel.panelWin); + await waitUntilState( + gStore, + state => + state.snapshots.length === 3 && + state.snapshots[0].treeMap && + state.snapshots[1].treeMap && + state.snapshots[2].treeMap && + state.snapshots[0].treeMap.state === treeMapState.SAVED && + state.snapshots[1].treeMap.state === treeMapState.SAVED && + state.snapshots[2].treeMap.state === treeMapState.SAVED + ); + + snapshotEls = document.querySelectorAll("#memory-tool-container .list li"); + is(snapshotEls.length, 3, "Three snapshots visible"); + is( + document.querySelectorAll(".selected").length, + 1, + "One selected snapshot visible" + ); + ok(snapshotEls[2].classList.contains("selected"), "Third snapshot selected"); + + info("Clicking on first snapshot delete button"); + document.querySelectorAll(".delete")[0].click(); + + await waitUntilState( + gStore, + state => + state.snapshots.length === 2 && + state.snapshots[0].treeMap && + state.snapshots[1].treeMap && + state.snapshots[0].treeMap.state === treeMapState.SAVED && + state.snapshots[1].treeMap.state === treeMapState.SAVED + ); + + snapshotEls = document.querySelectorAll(".snapshot-list-item"); + is(snapshotEls.length, 2, "Two snapshots visible"); + // Bug 1476289 + ok( + !snapshotEls[0].classList.contains("selected"), + "First snapshot not selected" + ); + ok(snapshotEls[1].classList.contains("selected"), "Second snapshot selected"); + + info("Click on Clear Snapshots"); + await clearSnapshots(panel.panelWin); + is(getState().snapshots.length, 0, "No snapshots in store"); + snapshotEls = document.querySelectorAll("#memory-tool-container .list li"); + is(snapshotEls.length, 0, "No snapshot visible"); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_diff_01.js b/devtools/client/memory/test/browser/browser_memory_diff_01.js new file mode 100644 index 0000000000..7b6487565f --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_diff_01.js @@ -0,0 +1,86 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Test diffing. + +"use strict"; + +const { + diffingState, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const store = panel.panelWin.gStore; + const { getState } = store; + const doc = panel.panelWin.document; + + ok(!getState().diffing, "Not diffing by default."); + + // Take two snapshots. + const takeSnapshotButton = doc.getElementById("take-snapshot"); + EventUtils.synthesizeMouseAtCenter(takeSnapshotButton, {}, panel.panelWin); + await waitForTime(1000); + EventUtils.synthesizeMouseAtCenter(takeSnapshotButton, {}, panel.panelWin); + + // Enable diffing mode. + const diffButton = doc.getElementById("diff-snapshots"); + EventUtils.synthesizeMouseAtCenter(diffButton, {}, panel.panelWin); + await waitUntilState( + store, + state => !!state.diffing && state.diffing.state === diffingState.SELECTING + ); + ok(true, "Clicking the diffing button put us into the diffing state."); + is(getDisplayedSnapshotStatus(doc), "Select the baseline snapshot"); + + await waitUntilState( + store, + state => + state.snapshots.length === 2 && + state.snapshots[0].treeMap && + state.snapshots[1].treeMap && + state.snapshots[0].treeMap.state === treeMapState.SAVED && + state.snapshots[1].treeMap.state === treeMapState.SAVED + ); + + const listItems = [...doc.querySelectorAll(".snapshot-list-item")]; + is(listItems.length, 2, "Should have two snapshot list items"); + + // Select the first snapshot. + EventUtils.synthesizeMouseAtCenter(listItems[0], {}, panel.panelWin); + await waitUntilState( + store, + state => + state.diffing.state === diffingState.SELECTING && + state.diffing.firstSnapshotId + ); + is( + getDisplayedSnapshotStatus(doc), + "Select the snapshot to compare to the baseline" + ); + + // Select the second snapshot. + EventUtils.synthesizeMouseAtCenter(listItems[1], {}, panel.panelWin); + await waitUntilState( + store, + state => state.diffing.state === diffingState.TAKING_DIFF + ); + ok(true, "Selecting two snapshots for diffing triggers computing the diff"); + + // .startsWith because the ellipsis is lost in translation. + ok(getDisplayedSnapshotStatus(doc).startsWith("Computing difference")); + + await waitUntilState( + store, + state => state.diffing.state === diffingState.TOOK_DIFF + ); + ok(true, "And that diff is computed successfully"); + is(getDisplayedSnapshotStatus(doc), null, "No status text anymore"); + ok( + doc.querySelector(".heap-tree-item"), + "And instead we should be showing the tree" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_displays_01.js b/devtools/client/memory/test/browser/browser_memory_displays_01.js new file mode 100644 index 0000000000..89296b77f4 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_displays_01.js @@ -0,0 +1,49 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"use strict"; + +/** + * Tests that the heap tree renders rows based on the display + */ + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const { gStore, document } = panel.panelWin; + + const { dispatch } = panel.panelWin.gStore; + + function $$(selector) { + return [...document.querySelectorAll(selector)]; + } + dispatch(changeView(viewState.CENSUS)); + + await takeSnapshot(panel.panelWin); + + await waitUntilState( + gStore, + state => + state.snapshots[0].census && + state.snapshots[0].census.state === censusState.SAVED + ); + + info("Check coarse type heap view"); + + ["Function", "js::PropMap", "Object", "strings"].forEach(findNameCell); + + await setCensusDisplay(panel.panelWin, censusDisplays.allocationStack); + info("Check allocation stack heap view"); + [L10N.getStr("tree-item.nostack")].forEach(findNameCell); + + function findNameCell(name) { + const el = $$(".tree .heap-tree-item-name").find( + e => e.textContent === name + ); + ok(el, `Found heap tree item cell for ${name}.`); + } +}); diff --git a/devtools/client/memory/test/browser/browser_memory_dominator_trees_01.js b/devtools/client/memory/test/browser/browser_memory_dominator_trees_01.js new file mode 100644 index 0000000000..1faaf365a1 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_dominator_trees_01.js @@ -0,0 +1,178 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Sanity test for dominator trees, their focused nodes, and keyboard navigating +// through nodes across incrementally fetching subtrees. + +"use strict"; + +const { + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + expandDominatorTreeNode, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_big_tree.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + // Taking snapshots and computing dominator trees is slow :-/ + requestLongerTimeout(4); + + const store = panel.panelWin.gStore; + const { getState, dispatch } = store; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + + // Take a snapshot. + + const takeSnapshotButton = doc.getElementById("take-snapshot"); + EventUtils.synthesizeMouseAtCenter(takeSnapshotButton, {}, panel.panelWin); + + // Wait for the dominator tree to be computed and fetched. + + await waitUntilDominatorTreeState(store, [dominatorTreeState.LOADED]); + ok(true, "Computed and fetched the dominator tree."); + + // Expand all the dominator tree nodes that are eagerly fetched, except for + // the leaves which will trigger fetching their lazily loaded subtrees. + + const id = getState().snapshots[0].id; + const root = getState().snapshots[0].dominatorTree.root; + (function expandAllEagerlyFetched(node = root) { + if (!node.moreChildrenAvailable || node.children) { + dispatch(expandDominatorTreeNode(id, node)); + } + + if (node.children) { + for (const child of node.children) { + expandAllEagerlyFetched(child); + } + } + })(); + + // Find the deepest eagerly loaded node: one which has more children but none + // of them are loaded. + + const deepest = (function findDeepest(node = root) { + if (node.moreChildrenAvailable && !node.children) { + return node; + } + + if (node.children) { + for (const child of node.children) { + const found = findDeepest(child); + if (found) { + return found; + } + } + } + + return null; + })(); + + ok(deepest, "Found the deepest node"); + ok( + !getState().snapshots[0].dominatorTree.expanded.has(deepest.nodeId), + "The deepest node should not be expanded" + ); + + // Select the deepest node. + + EventUtils.synthesizeMouseAtCenter( + doc.querySelector(`.node-${deepest.nodeId}`), + {}, + panel.panelWin + ); + await waitUntilState( + store, + state => state.snapshots[0].dominatorTree.focused.nodeId === deepest.nodeId + ); + ok( + doc.querySelector(`.node-${deepest.nodeId}`).classList.contains("focused"), + "The deepest node should be focused now" + ); + + // Expand the deepest node, which triggers an incremental fetch of its lazily + // loaded subtree. + + EventUtils.synthesizeKey("VK_RIGHT", {}, panel.panelWin); + await waitUntilState(store, state => + state.snapshots[0].dominatorTree.expanded.has(deepest.nodeId) + ); + is( + getState().snapshots[0].dominatorTree.state, + dominatorTreeState.INCREMENTAL_FETCHING, + "Expanding the deepest node should start an incremental fetch of its subtree" + ); + ok( + doc.querySelector(`.node-${deepest.nodeId}`).classList.contains("focused"), + "The deepest node should still be focused after expansion" + ); + + // Wait for the incremental fetch to complete. + + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "And the incremental fetch completes."); + ok( + doc.querySelector(`.node-${deepest.nodeId}`).classList.contains("focused"), + "The deepest node should still be focused after we have loaded its children" + ); + + // Find the most up-to-date version of the node whose children we just + // incrementally fetched. + + const newDeepest = (function findNewDeepest( + node = getState().snapshots[0].dominatorTree.root + ) { + if (node.nodeId === deepest.nodeId) { + return node; + } + + if (node.children) { + for (const child of node.children) { + const found = findNewDeepest(child); + if (found) { + return found; + } + } + } + + return null; + })(); + + ok(newDeepest, "We found the up-to-date version of deepest"); + ok(newDeepest.children, "And its children are loaded"); + ok(newDeepest.children.length, "And there are more than 0 children"); + + const firstChild = newDeepest.children[0]; + ok(firstChild, "deepest should have a first child"); + ok( + doc.querySelector(`.node-${firstChild.nodeId}`), + "and the first child should exist in the dom" + ); + + // Select the newly loaded first child by pressing the right arrow once more. + + EventUtils.synthesizeKey("VK_RIGHT", {}, panel.panelWin); + await waitUntilState( + store, + state => state.snapshots[0].dominatorTree.focused === firstChild + ); + ok( + doc + .querySelector(`.node-${firstChild.nodeId}`) + .classList.contains("focused"), + "The first child should now be focused" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_dominator_trees_02.js b/devtools/client/memory/test/browser/browser_memory_dominator_trees_02.js new file mode 100644 index 0000000000..fea3603c52 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_dominator_trees_02.js @@ -0,0 +1,81 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Integration test for mouse interaction in the dominator tree + +"use strict"; + +const { + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +function clickOnNodeArrow(node, panel) { + EventUtils.synthesizeMouseAtCenter( + node.querySelector(".arrow"), + {}, + panel.panelWin + ); +} + +this.test = makeMemoryTest(TEST_URL, async function ({ panel }) { + // Taking snapshots and computing dominator trees is slow :-/ + requestLongerTimeout(4); + + const store = panel.panelWin.gStore; + const { getState, dispatch } = store; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + + // Take a snapshot. + const takeSnapshotButton = doc.getElementById("take-snapshot"); + EventUtils.synthesizeMouseAtCenter(takeSnapshotButton, {}, panel.panelWin); + + // Wait for the dominator tree to be computed and fetched. + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "Computed and fetched the dominator tree."); + + const root = getState().snapshots[0].dominatorTree.root; + ok( + getState().snapshots[0].dominatorTree.expanded.has(root.nodeId), + "Root node is expanded by default" + ); + + // Click on root arrow to collapse the root element + const rootNode = doc.querySelector(`.node-${root.nodeId}`); + clickOnNodeArrow(rootNode, panel); + + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + !state.snapshots[0].dominatorTree.expanded.has(root.nodeId) + ); + ok(true, "Root node collapsed"); + + // Click on root arrow to expand it again + clickOnNodeArrow(rootNode, panel); + + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.expanded.has(root.nodeId) + ); + ok(true, "Root node is expanded again"); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_filter_01.js b/devtools/client/memory/test/browser/browser_memory_filter_01.js new file mode 100644 index 0000000000..00dcfdb951 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_filter_01.js @@ -0,0 +1,107 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Sanity test that we can show allocation stack displays in the tree. + +"use strict"; + +const { + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + changeViewAndRefresh, + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const store = panel.panelWin.gStore; + const { dispatch } = store; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + const takeSnapshotButton = doc.getElementById("take-snapshot"); + EventUtils.synthesizeMouseAtCenter(takeSnapshotButton, {}, panel.panelWin); + + await waitUntilState( + store, + state => + state.snapshots.length === 1 && + state.snapshots[0].census && + state.snapshots[0].census.state === censusState.SAVING + ); + + let filterInput = doc.getElementById("filter"); + EventUtils.synthesizeMouseAtCenter(filterInput, {}, panel.panelWin); + EventUtils.sendString("js::Shape", panel.panelWin); + + await waitUntilState( + store, + state => + state.snapshots.length === 1 && + state.snapshots[0].census && + state.snapshots[0].census.state === censusState.SAVING + ); + ok(true, "adding a filter string should trigger census recompute"); + + await waitUntilState( + store, + state => + state.snapshots.length === 1 && + state.snapshots[0].census && + state.snapshots[0].census.state === censusState.SAVED + ); + + let nameElem = doc.querySelector(".heap-tree-item-field.heap-tree-item-name"); + ok(nameElem, "Should get a tree item row with a name"); + is( + nameElem.textContent.trim(), + "js::Shape", + "the tree item should be the one we filtered for" + ); + is( + filterInput.value, + "js::Shape", + "and filter input contains the user value" + ); + + // Now switch the dominator view, then switch back to census view + // and check that the filter word is still correctly applied + dispatch(changeViewAndRefresh(viewState.DOMINATOR_TREE, heapWorker)); + ok(true, "change view to dominator tree"); + + // Wait for the dominator tree to be computed and fetched. + await waitUntilDominatorTreeState(store, [dominatorTreeState.LOADED]); + ok(true, "computed and fetched the dominator tree."); + + dispatch(changeViewAndRefresh(viewState.CENSUS, heapWorker)); + ok(true, "change view back to census"); + + await waitUntilState( + store, + state => + state.snapshots.length === 1 && + state.snapshots[0].census && + state.snapshots[0].census.state === censusState.SAVED + ); + + nameElem = doc.querySelector(".heap-tree-item-field.heap-tree-item-name"); + filterInput = doc.getElementById("filter"); + + ok(nameElem, "Should still get a tree item row with a name"); + is( + nameElem.textContent.trim(), + "js::Shape", + "the tree item should still be the one we filtered for" + ); + is( + filterInput.value, + "js::Shape", + "and filter input still contains the user value" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_fission_switch_target.js b/devtools/client/memory/test/browser/browser_memory_fission_switch_target.js new file mode 100644 index 0000000000..5d0d474d76 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_fission_switch_target.js @@ -0,0 +1,79 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test top-level target switching for memory panel. + +const { + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const PARENT_PROCESS_URI = "about:robots"; +const CONTENT_PROCESS_URI = + "data:text/html,<section>content process page</section>"; +const EXPECTED_ELEMENT_IN_PARENT_PROCESS = "button"; +const EXPECTED_ELEMENT_IN_CONTENT_PROCESS = "section"; + +add_task(async () => { + info("Open the memory panel with empty page"); + const tab = await addTab(); + const { panel } = await openMemoryPanel(tab); + const { gStore: store } = panel.panelWin; + + info("Open a page running on the content process"); + await navigateTo(CONTENT_PROCESS_URI); + await takeAndWaitSnapshot( + panel.panelWin, + store, + EXPECTED_ELEMENT_IN_CONTENT_PROCESS + ); + ok(true, "Can take a snapshot for content process page correctly"); + + info("Navigate to a page running on parent process"); + await navigateTo(PARENT_PROCESS_URI); + await takeAndWaitSnapshot( + panel.panelWin, + store, + EXPECTED_ELEMENT_IN_PARENT_PROCESS + ); + ok(true, "Can take a snapshot for parent process page correctly"); + + info("Return to a page running on content process again"); + await navigateTo(CONTENT_PROCESS_URI); + await takeAndWaitSnapshot( + panel.panelWin, + store, + EXPECTED_ELEMENT_IN_CONTENT_PROCESS + ); + ok( + true, + "Can take a snapshot for content process page correctly after switching targets twice" + ); +}); + +async function takeAndWaitSnapshot(window, store, expectedElement) { + await asyncWaitUntil(async () => { + await takeSnapshot(window); + + await waitUntilState( + store, + state => + state.snapshots[0].treeMap && + state.snapshots[0].treeMap.state === treeMapState.SAVED + ); + + const snapshot = store.getState().snapshots[0]; + const nodeNames = getNodeNames(snapshot); + + await clearSnapshots(window); + + return nodeNames.includes(expectedElement); + }); +} + +function getNodeNames(snapshot) { + const domNodePart = snapshot.treeMap.report.children.find( + child => child.name === "domNode" + ); + return domNodePart.children.map(child => child.name.toLowerCase()); +} diff --git a/devtools/client/memory/test/browser/browser_memory_individuals_01.js b/devtools/client/memory/test/browser/browser_memory_individuals_01.js new file mode 100644 index 0000000000..f54154b949 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_individuals_01.js @@ -0,0 +1,74 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Sanity test that we can show census group individuals, and then go back to +// the previous view. + +"use strict"; + +const { + individualsState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const store = panel.panelWin.gStore; + const { dispatch } = store; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + // Take a snapshot and wait for the census to finish. + + const takeSnapshotButton = doc.getElementById("take-snapshot"); + EventUtils.synthesizeMouseAtCenter(takeSnapshotButton, {}, panel.panelWin); + + await waitUntilState(store, state => { + return ( + state.snapshots.length === 1 && + state.snapshots[0].census && + state.snapshots[0].census.state === censusState.SAVED + ); + }); + + // Click on the first individuals button found, and wait for the individuals + // to be fetched. + + const individualsButton = doc.querySelector(".individuals-button"); + EventUtils.synthesizeMouseAtCenter(individualsButton, {}, panel.panelWin); + + await waitUntilState(store, state => { + return ( + state.view.state === viewState.INDIVIDUALS && + state.individuals && + state.individuals.state === individualsState.FETCHED + ); + }); + + ok( + doc.getElementById("shortest-paths"), + "Should be showing the shortest paths component" + ); + ok(doc.querySelector(".heap-tree-item"), "Should be showing the individuals"); + + // Go back to the previous view. + + const popViewButton = doc.getElementById("pop-view-button"); + ok(popViewButton, "Should be showing the #pop-view-button"); + EventUtils.synthesizeMouseAtCenter(popViewButton, {}, panel.panelWin); + + await waitUntilState(store, state => { + return state.view.state === viewState.CENSUS; + }); + + ok( + !doc.getElementById("shortest-paths"), + "Should not be showing the shortest paths component anymore" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_keyboard-snapshot-list.js b/devtools/client/memory/test/browser/browser_memory_keyboard-snapshot-list.js new file mode 100644 index 0000000000..7a2e2e12f7 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_keyboard-snapshot-list.js @@ -0,0 +1,112 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Test that using ACCEL+UP/DOWN, the user can navigate between snapshots. + +"use strict"; + +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ panel }) { + // Creating snapshots already takes ~25 seconds on linux 32 debug machines + // which makes the test very likely to go over the allowed timeout + requestLongerTimeout(2); + + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const store = panel.panelWin.gStore; + const { dispatch } = store; + const front = store.getState().front; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + info("Take 3 snapshots"); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + + await waitUntilState( + store, + state => + state.snapshots.length == 3 && + state.snapshots.every( + s => s.census && s.census.state === censusState.SAVED + ) + ); + ok(true, "All snapshots censuses are in SAVED state"); + + await waitUntilSnapshotSelected(store, 2); + ok(true, "Third snapshot selected after creating all snapshots."); + + info("Press ACCEL+UP key, expect second snapshot selected."); + EventUtils.synthesizeKey("VK_UP", { accelKey: true }, panel.panelWin); + await waitUntilSnapshotSelected(store, 1); + ok(true, "Second snapshot selected after alt+UP."); + + info("Press ACCEL+UP key, expect first snapshot selected."); + EventUtils.synthesizeKey("VK_UP", { accelKey: true }, panel.panelWin); + await waitUntilSnapshotSelected(store, 0); + ok(true, "First snapshot is selected after ACCEL+UP"); + + info("Check ACCEL+UP is a noop when the first snapshot is selected."); + EventUtils.synthesizeKey("VK_UP", { accelKey: true }, panel.panelWin); + // We assume the snapshot selection should be synchronous here. + is(getSelectedSnapshotIndex(store), 0, "First snapshot is still selected"); + + info("Press ACCEL+DOWN key, expect second snapshot selected."); + EventUtils.synthesizeKey("VK_DOWN", { accelKey: true }, panel.panelWin); + await waitUntilSnapshotSelected(store, 1); + ok(true, "Second snapshot is selected after ACCEL+DOWN"); + + info("Click on first node."); + const firstNode = doc.querySelector(".tree .heap-tree-item-name"); + EventUtils.synthesizeMouseAtCenter(firstNode, {}, panel.panelWin); + await waitUntilState( + store, + state => + state.snapshots[1].census.focused === + state.snapshots[1].census.report.children[0] + ); + ok(true, "First root is selected after click."); + + info("Press DOWN key, expect second root focused."); + EventUtils.synthesizeKey("VK_DOWN", {}, panel.panelWin); + await waitUntilState( + store, + state => + state.snapshots[1].census.focused === + state.snapshots[1].census.report.children[1] + ); + ok(true, "Second root is selected after pressing DOWN."); + is(getSelectedSnapshotIndex(store), 1, "Second snapshot is still selected"); + + info("Press UP key, expect second root focused."); + EventUtils.synthesizeKey("VK_UP", {}, panel.panelWin); + await waitUntilState( + store, + state => + state.snapshots[1].census.focused === + state.snapshots[1].census.report.children[0] + ); + ok(true, "First root is selected after pressing UP."); + is(getSelectedSnapshotIndex(store), 1, "Second snapshot is still selected"); + + info("Press ACCEL+DOWN key, expect third snapshot selected."); + EventUtils.synthesizeKey("VK_DOWN", { accelKey: true }, panel.panelWin); + await waitUntilSnapshotSelected(store, 2); + ok(true, "Thirdˆ snapshot is selected after ACCEL+DOWN"); + + info("Check ACCEL+DOWN is a noop when the last snapshot is selected."); + EventUtils.synthesizeKey("VK_DOWN", { accelKey: true }, panel.panelWin); + // We assume the snapshot selection should be synchronous here. + is(getSelectedSnapshotIndex(store), 2, "Third snapshot is still selected"); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_keyboard.js b/devtools/client/memory/test/browser/browser_memory_keyboard.js new file mode 100644 index 0000000000..0fba33c456 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_keyboard.js @@ -0,0 +1,111 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Bug 1246570 - Check that when pressing on LEFT arrow, the parent tree node +// gets focused. + +"use strict"; + +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +function waitUntilFocused(store, node) { + return waitUntilState( + store, + state => + state.snapshots.length === 1 && + state.snapshots[0].census && + state.snapshots[0].census.state === censusState.SAVED && + state.snapshots[0].census.focused && + state.snapshots[0].census.focused === node + ); +} + +function waitUntilExpanded(store, node) { + return waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].census && + state.snapshots[0].census.expanded.has(node.id) + ); +} + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const store = panel.panelWin.gStore; + const { getState, dispatch } = store; + const front = getState().front; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + is(getState().censusDisplay.breakdown.by, "coarseType"); + + await dispatch(takeSnapshotAndCensus(front, heapWorker)); + const census = getState().snapshots[0].census; + const root1 = census.report.children[0]; + const root2 = census.report.children[0]; + const root3 = census.report.children[0]; + const root4 = census.report.children[0]; + const child1 = root1.children[0]; + + info("Click on first node."); + const firstNode = doc.querySelector(".tree .heap-tree-item-name"); + EventUtils.synthesizeMouseAtCenter(firstNode, {}, panel.panelWin); + await waitUntilFocused(store, root1); + ok(true, "First root is selected after click."); + + info("Press DOWN key, expect second root focused."); + EventUtils.synthesizeKey("VK_DOWN", {}, panel.panelWin); + await waitUntilFocused(store, root2); + ok(true, "Second root is selected after pressing DOWN arrow."); + + info("Press DOWN key, expect third root focused."); + EventUtils.synthesizeKey("VK_DOWN", {}, panel.panelWin); + await waitUntilFocused(store, root3); + ok(true, "Third root is selected after pressing DOWN arrow."); + + info("Press DOWN key, expect fourth root focused."); + EventUtils.synthesizeKey("VK_DOWN", {}, panel.panelWin); + await waitUntilFocused(store, root4); + ok(true, "Fourth root is selected after pressing DOWN arrow."); + + info("Press UP key, expect third root focused."); + EventUtils.synthesizeKey("VK_UP", {}, panel.panelWin); + await waitUntilFocused(store, root3); + ok(true, "Third root is selected after pressing UP arrow."); + + info("Press UP key, expect second root focused."); + EventUtils.synthesizeKey("VK_UP", {}, panel.panelWin); + await waitUntilFocused(store, root2); + ok(true, "Second root is selected after pressing UP arrow."); + + info("Press UP key, expect first root focused."); + EventUtils.synthesizeKey("VK_UP", {}, panel.panelWin); + await waitUntilFocused(store, root1); + ok(true, "First root is selected after pressing UP arrow."); + + info("Press RIGHT key"); + EventUtils.synthesizeKey("VK_RIGHT", {}, panel.panelWin); + await waitUntilExpanded(store, root1); + ok(true, "Root node is expanded."); + + info("Press RIGHT key, expect first child focused."); + EventUtils.synthesizeKey("VK_RIGHT", {}, panel.panelWin); + await waitUntilFocused(store, child1); + ok(true, "First child is selected after pressing RIGHT arrow."); + + info("Press LEFT key, expect first root focused."); + EventUtils.synthesizeKey("VK_LEFT", {}, panel.panelWin); + await waitUntilFocused(store, root1); + ok(true, "First root is selected after pressing LEFT arrow."); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_no_allocation_stacks.js b/devtools/client/memory/test/browser/browser_memory_no_allocation_stacks.js new file mode 100644 index 0000000000..b8b09b35d0 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_no_allocation_stacks.js @@ -0,0 +1,54 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Sanity test that we can show allocation stack displays in the tree. + +"use strict"; + +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const censusDisplayActions = require("resource://devtools/client/memory/actions/census-display.js"); +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const { getState, dispatch } = panel.panelWin.gStore; + const front = getState().front; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + ok(!getState().allocations.recording, "Should not be recording allocagtions"); + + await dispatch(takeSnapshotAndCensus(front, heapWorker)); + await dispatch( + censusDisplayActions.setCensusDisplayAndRefresh( + heapWorker, + censusDisplays.allocationStack + ) + ); + + is( + getState().censusDisplay.breakdown.by, + "allocationStack", + "Should be using allocation stack breakdown" + ); + + ok( + !getState().allocations.recording, + "Should still not be recording allocagtions" + ); + + ok( + doc.querySelector(".no-allocation-stacks"), + "Because we did not record allocations, " + + "the no-allocation-stack warning should be visible" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_no_auto_expand.js b/devtools/client/memory/test/browser/browser_memory_no_auto_expand.js new file mode 100644 index 0000000000..9704d925d1 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_no_auto_expand.js @@ -0,0 +1,49 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Bug 1221150 - Ensure that census trees do not accidentally auto expand +// when clicking on the allocation stacks checkbox. + +"use strict"; + +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const { getState, dispatch } = panel.panelWin.gStore; + const front = getState().front; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + await dispatch(takeSnapshotAndCensus(front, heapWorker)); + + is(getState().allocations.recording, false); + const recordingCheckbox = doc.getElementById( + "record-allocation-stacks-checkbox" + ); + EventUtils.synthesizeMouseAtCenter(recordingCheckbox, {}, panel.panelWin); + is(getState().allocations.recording, true); + + const nameElems = [ + ...doc.querySelectorAll(".heap-tree-item-field.heap-tree-item-name"), + ]; + + for (const el of nameElems) { + dumpn(`Found ${el.textContent.trim()}`); + is( + el.style.marginInlineStart, + "0px", + "None of the elements should be an indented/expanded child" + ); + } +}); diff --git a/devtools/client/memory/test/browser/browser_memory_percents_01.js b/devtools/client/memory/test/browser/browser_memory_percents_01.js new file mode 100644 index 0000000000..c4bb254b07 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_percents_01.js @@ -0,0 +1,62 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Sanity test that we calculate percentages in the tree. + +"use strict"; + +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; + +function checkCells(cells) { + Assert.greater(cells.length, 1, "Should have found some"); + // Ignore the first header cell. + for (const cell of cells.slice(1)) { + const percent = cell.querySelector(".heap-tree-percent"); + ok(percent, "should have a percent cell"); + ok( + percent.textContent.match(/^\d?\d%$/), + "should be of the form nn% or n%" + ); + } +} + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const heapWorker = panel.panelWin.gHeapAnalysesClient; + const { getState, dispatch } = panel.panelWin.gStore; + const front = getState().front; + const doc = panel.panelWin.document; + + dispatch(changeView(viewState.CENSUS)); + + await dispatch(takeSnapshotAndCensus(front, heapWorker)); + is( + getState().censusDisplay.breakdown.by, + "coarseType", + "Should be using coarse type breakdown" + ); + + const bytesCells = [...doc.querySelectorAll(".heap-tree-item-bytes")]; + checkCells(bytesCells); + + const totalBytesCells = [ + ...doc.querySelectorAll(".heap-tree-item-total-bytes"), + ]; + checkCells(totalBytesCells); + + const countCells = [...doc.querySelectorAll(".heap-tree-item-count")]; + checkCells(countCells); + + const totalCountCells = [ + ...doc.querySelectorAll(".heap-tree-item-total-count"), + ]; + checkCells(totalCountCells); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_refresh_does_not_leak.js b/devtools/client/memory/test/browser/browser_memory_refresh_does_not_leak.js new file mode 100644 index 0000000000..e0ee1eee41 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_refresh_does_not_leak.js @@ -0,0 +1,139 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +/* global ChromeUtils */ + +// Test that refreshing the page with devtools open does not leak the old +// windows from previous navigations. +// +// IF THIS TEST STARTS FAILING, YOU ARE LEAKING EVERY WINDOW EVER NAVIGATED TO +// WHILE DEVTOOLS ARE OPEN! THIS IS NOT SPECIFIC TO THE MEMORY TOOL ONLY! + +"use strict"; + +const { + getLabelAndShallowSize, +} = require("resource://devtools/shared/heapsnapshot/DominatorTreeNode.js"); + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_empty.html"; + +async function getWindowsInSnapshot(front) { + dumpn("Taking snapshot."); + const path = await front.saveHeapSnapshot(); + dumpn("Took snapshot with path = " + path); + const snapshot = ChromeUtils.readHeapSnapshot(path); + dumpn("Read snapshot into memory, taking census."); + const report = snapshot.takeCensus({ + breakdown: { + by: "objectClass", + then: { by: "bucket" }, + other: { by: "count", count: true, bytes: false }, + }, + }); + dumpn("Took census, window count = " + report.Window.count); + return report.Window; +} + +const DESCRIPTION = { + by: "coarseType", + objects: { + by: "objectClass", + then: { by: "count", count: true, bytes: false }, + other: { by: "count", count: true, bytes: false }, + }, + strings: { by: "count", count: true, bytes: false }, + scripts: { + by: "internalType", + then: { by: "count", count: true, bytes: false }, + }, + other: { + by: "internalType", + then: { by: "count", count: true, bytes: false }, + }, +}; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + let front = panel.panelWin.gStore.getState().front; + + const startWindows = await getWindowsInSnapshot(front); + dumpn( + "Initial windows found = " + + startWindows.map(w => "0x" + w.toString(16)).join(", ") + ); + is(startWindows.length, 1); + + await reloadBrowser(); + + // Update the front as we may have switched to a new target and a new memory front + front = panel.panelWin.gStore.getState().front; + + const endWindows = await getWindowsInSnapshot(front); + is(endWindows.length, 1); + + if (endWindows.length === 1) { + return; + } + + dumpn("Test failed, diagnosing leaking windows."); + dumpn( + "(This may fail if a moving GC has relocated the initial Window objects.)" + ); + + dumpn("Taking full runtime snapshot."); + const path = await front.saveHeapSnapshot({ boundaries: { runtime: true } }); + dumpn("Full runtime's snapshot path = " + path); + + dumpn("Reading full runtime heap snapshot."); + const snapshot = ChromeUtils.readHeapSnapshot(path); + dumpn("Done reading full runtime heap snapshot."); + + const dominatorTree = snapshot.computeDominatorTree(); + const paths = snapshot.computeShortestPaths( + dominatorTree.root, + startWindows, + 50 + ); + + for (let i = 0; i < startWindows.length; i++) { + dumpn( + "Shortest retaining paths for leaking Window 0x" + + startWindows[i].toString(16) + + " =========================" + ); + let j = 0; + for (const retainingPath of paths.get(startWindows[i])) { + if (retainingPath.find(part => part.predecessor === startWindows[i])) { + // Skip paths that loop out from the target window and back to it again. + continue; + } + + dumpn( + " Path #" + + ++j + + ": --------------------------------------------------------------------" + ); + for (const part of retainingPath) { + const { label } = getLabelAndShallowSize( + part.predecessor, + snapshot, + DESCRIPTION + ); + dumpn( + " 0x" + + part.predecessor.toString(16) + + " (" + + label.join(" > ") + + ")" + ); + dumpn(" |"); + dumpn(" " + part.edge); + dumpn(" |"); + dumpn(" V"); + } + dumpn( + " 0x" + startWindows[i].toString(16) + " (objects > Window)" + ); + } + } +}); diff --git a/devtools/client/memory/test/browser/browser_memory_simple_01.js b/devtools/client/memory/test/browser/browser_memory_simple_01.js new file mode 100644 index 0000000000..a983e23395 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_simple_01.js @@ -0,0 +1,60 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests taking snapshots and default states. + */ + +const TEST_URL = + "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html"; +const { viewState } = require("resource://devtools/client/memory/constants.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const { gStore, document } = panel.panelWin; + const { getState, dispatch } = gStore; + + dispatch(changeView(viewState.CENSUS)); + + let snapshotEls = document.querySelectorAll( + "#memory-tool-container .list li" + ); + is(getState().snapshots.length, 0, "Starts with no snapshots in store"); + is(snapshotEls.length, 0, "No snapshots rendered"); + + await takeSnapshot(panel.panelWin); + snapshotEls = document.querySelectorAll("#memory-tool-container .list li"); + is(getState().snapshots.length, 1, "One snapshot was created in store"); + is(snapshotEls.length, 1, "One snapshot was rendered"); + ok( + snapshotEls[0].classList.contains("selected"), + "Only snapshot has `selected` class" + ); + + await takeSnapshot(panel.panelWin); + snapshotEls = document.querySelectorAll("#memory-tool-container .list li"); + is(getState().snapshots.length, 2, "Two snapshots created in store"); + is(snapshotEls.length, 2, "Two snapshots rendered"); + ok( + !snapshotEls[0].classList.contains("selected"), + "First snapshot no longer has `selected` class" + ); + ok( + snapshotEls[1].classList.contains("selected"), + "Second snapshot has `selected` class" + ); + + await waitUntilCensusState(gStore, s => s.census, [ + censusState.SAVED, + censusState.SAVED, + ]); + + ok( + document.querySelector(".heap-tree-item-name"), + "Should have rendered some tree items" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_transferHeapSnapshot_e10s_01.js b/devtools/client/memory/test/browser/browser_memory_transferHeapSnapshot_e10s_01.js new file mode 100644 index 0000000000..c647836332 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_transferHeapSnapshot_e10s_01.js @@ -0,0 +1,34 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +/* global ChromeUtils, HeapSnapshot */ + +// Test that we can save a heap snapshot and transfer it over the RDP in e10s +// where the child process is sandboxed and so we have to use +// HeapSnapshotFileActor to get the heap snapshot file. + +"use strict"; + +const TEST_URL = "data:text/html,<html><body></body></html>"; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const memoryFront = panel.panelWin.gStore.getState().front; + ok(memoryFront, "Should get the MemoryFront"); + + const snapshotFilePath = await memoryFront.saveHeapSnapshot({ + // Force a copy so that we go through the HeapSnapshotFileActor's + // transferHeapSnapshot request and exercise this code path on e10s. + forceCopy: true, + }); + + ok( + !!(await IOUtils.stat(snapshotFilePath)), + "Should have the heap snapshot file" + ); + + const snapshot = ChromeUtils.readHeapSnapshot(snapshotFilePath); + ok( + HeapSnapshot.isInstance(snapshot), + "And we should be able to read a HeapSnapshot instance from the file" + ); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_tree_map-01.js b/devtools/client/memory/test/browser/browser_memory_tree_map-01.js new file mode 100644 index 0000000000..c65b7fc079 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_tree_map-01.js @@ -0,0 +1,136 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Make sure the canvases are created correctly + +"use strict"; + +const CanvasUtils = require("resource://devtools/client/memory/components/tree-map/canvas-utils.js"); +const D3_SCRIPT = + '<script type="application/javascript" ' + + 'src="chrome://global/content/third_party/d3/d3.js">'; +const TEST_URL = `data:text/html,<html><body>${D3_SCRIPT}</body></html>`; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const document = panel.panelWin.document; + const window = panel.panelWin; + const div = document.createElement("div"); + + Object.assign(div.style, { + width: "100px", + height: "200px", + position: "absolute", + }); + + document.body.appendChild(div); + + info("Create the canvases"); + + const canvases = new CanvasUtils(div, 0); + + info("Test the shape of the returned object"); + + is(typeof canvases, "object", "Canvases create an object"); + is(typeof canvases.emit, "function", "Decorated with an EventEmitter"); + is(typeof canvases.on, "function", "Decorated with an EventEmitter"); + is(div.children[0], canvases.container, "Div has the container"); + ok( + canvases.main.canvas instanceof window.HTMLCanvasElement, + "Creates the main canvas" + ); + ok( + canvases.zoom.canvas instanceof window.HTMLCanvasElement, + "Creates the zoom canvas" + ); + ok( + canvases.main.ctx instanceof window.CanvasRenderingContext2D, + "Creates the main canvas context" + ); + ok( + canvases.zoom.ctx instanceof window.CanvasRenderingContext2D, + "Creates the zoom canvas context" + ); + + info("Test resizing"); + + let timesResizeCalled = 0; + canvases.on("resize", function () { + timesResizeCalled++; + }); + + const main = canvases.main.canvas; + const zoom = canvases.zoom.canvas; + const ratio = window.devicePixelRatio; + + is( + main.width, + 100 * ratio, + "Main canvas width is the same as the parent div" + ); + is( + main.height, + 200 * ratio, + "Main canvas height is the same as the parent div" + ); + is( + zoom.width, + 100 * ratio, + "Zoom canvas width is the same as the parent div" + ); + is( + zoom.height, + 200 * ratio, + "Zoom canvas height is the same as the parent div" + ); + is(timesResizeCalled, 0, "Resize was not emitted"); + + div.style.width = "500px"; + div.style.height = "700px"; + + window.dispatchEvent(new Event("resize")); + + is( + main.width, + 500 * ratio, + "Main canvas width is resized to be the same as the parent div" + ); + is( + main.height, + 700 * ratio, + "Main canvas height is resized to be the same as the parent div" + ); + is( + zoom.width, + 500 * ratio, + "Zoom canvas width is resized to be the same as the parent div" + ); + is( + zoom.height, + 700 * ratio, + "Zoom canvas height is resized to be the same as the parent div" + ); + is(timesResizeCalled, 1, "'resize' was emitted was emitted"); + + div.style.width = "1100px"; + div.style.height = "1300px"; + + canvases.destroy(); + window.dispatchEvent(new Event("resize")); + + is(main.width, 500 * ratio, "Main canvas width is not resized after destroy"); + is( + main.height, + 700 * ratio, + "Main canvas height is not resized after destroy" + ); + is(zoom.width, 500 * ratio, "Zoom canvas width is not resized after destroy"); + is( + zoom.height, + 700 * ratio, + "Zoom canvas height is not resized after destroy" + ); + is(timesResizeCalled, 1, "onResize was not called again"); + + document.body.removeChild(div); +}); diff --git a/devtools/client/memory/test/browser/browser_memory_tree_map-02.js b/devtools/client/memory/test/browser/browser_memory_tree_map-02.js new file mode 100644 index 0000000000..890ede23b5 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_tree_map-02.js @@ -0,0 +1,199 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Test the drag and zooming behavior + +"use strict"; + +const CanvasUtils = require("resource://devtools/client/memory/components/tree-map/canvas-utils.js"); +const DragZoom = require("resource://devtools/client/memory/components/tree-map/drag-zoom.js"); + +const TEST_URL = "data:text/html,<html><body></body></html>"; +const PIXEL_SCROLL_MODE = 0; +const PIXEL_DELTA = 10; +const MAX_RAF_LOOP = 1000; + +this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + const panelWin = panel.panelWin; + const panelDoc = panelWin.document; + const div = panelDoc.createElement("div"); + + Object.assign(div.style, { + width: "100px", + height: "200px", + position: "absolute", + left: 0, + top: 0, + }); + + const rafMock = createRAFMock(); + + panelDoc.body.appendChild(div); + + const canvases = new CanvasUtils(div, 0); + const dragZoom = new DragZoom(canvases.container, 0, rafMock.raf); + const style = canvases.container.style; + + info("Check initial state of dragZoom"); + { + is(dragZoom.zoom, 0, "Zooming starts at 0"); + is(dragZoom.smoothZoom, 0, "Smoothed zooming starts at 0"); + is(rafMock.timesCalled, 0, "No RAFs have been queued"); + is( + style.transform, + "translate(0px) scale(1)", + "No transforms have been done." + ); + + canvases.container.dispatchEvent( + new WheelEvent("wheel", { + deltaY: -PIXEL_DELTA, + deltaMode: PIXEL_SCROLL_MODE, + }) + ); + + is( + style.transform, + "translate(0px) scale(1.05)", + "The div has been slightly scaled." + ); + is( + dragZoom.zoom, + PIXEL_DELTA * dragZoom.ZOOM_SPEED, + "The zoom was increased" + ); + ok( + floatEquality(dragZoom.smoothZoom, 0.05), + "The smooth zoom is between the initial value and the target" + ); + is(rafMock.timesCalled, 1, "A RAF has been queued"); + } + + info("RAF will eventually stop once the smooth values approach the target"); + { + let i; + let lastCallCount; + for (i = 0; i < MAX_RAF_LOOP; i++) { + if (lastCallCount === rafMock.timesCalled) { + break; + } + lastCallCount = rafMock.timesCalled; + rafMock.nextFrame(); + } + is( + style.transform, + "translate(0px) scale(1.1)", + "The scale has been fully applied" + ); + is( + dragZoom.zoom, + dragZoom.smoothZoom, + "The smooth and target zoom values match" + ); + isnot(MAX_RAF_LOOP, i, "The RAF loop correctly stopped"); + } + + info("Dragging correctly translates the div"); + { + div.dispatchEvent( + new MouseEvent("mousemove", { + clientX: 10, + clientY: 10, + }) + ); + div.dispatchEvent(new MouseEvent("mousedown")); + div.dispatchEvent( + new MouseEvent("mousemove", { + clientX: 20, + clientY: 20, + }) + ); + div.dispatchEvent(new MouseEvent("mouseup")); + + is( + style.transform, + "translate(2.5px, 5px) scale(1.1)", + "The style is correctly translated" + ); + ok( + floatEquality(dragZoom.translateX, 5), + "Translate X moved by some pixel amount" + ); + ok( + floatEquality(dragZoom.translateY, 10), + "Translate Y moved by some pixel amount" + ); + } + + info("Zooming centers around the mouse"); + { + canvases.container.dispatchEvent( + new WheelEvent("wheel", { + deltaY: -PIXEL_DELTA, + deltaMode: PIXEL_SCROLL_MODE, + }) + ); + // Run through the RAF loop to zoom in towards that value. + let lastCallCount; + for (let i = 0; i < MAX_RAF_LOOP; i++) { + if (lastCallCount === rafMock.timesCalled) { + break; + } + lastCallCount = rafMock.timesCalled; + rafMock.nextFrame(); + } + is( + style.transform, + "translate(8.18182px, 18.1818px) scale(1.2)", + "Zooming affects the translation to keep the mouse centered" + ); + ok( + floatEquality(dragZoom.translateX, 8.181818181818185), + "Translate X was affected by the mouse position" + ); + ok( + floatEquality(dragZoom.translateY, 18.18181818181817), + "Translate Y was affected by the mouse position" + ); + is(dragZoom.zoom, 0.2, "Zooming starts at 0"); + } + + dragZoom.destroy(); + + info("Scroll isn't tracked after destruction"); + { + const previousZoom = dragZoom.zoom; + const previousSmoothZoom = dragZoom.smoothZoom; + + canvases.container.dispatchEvent( + new WheelEvent("wheel", { + deltaY: -PIXEL_DELTA, + deltaMode: PIXEL_SCROLL_MODE, + }) + ); + + is(dragZoom.zoom, previousZoom, "The zoom stayed the same"); + is( + dragZoom.smoothZoom, + previousSmoothZoom, + "The smooth zoom stayed the same" + ); + } + + info("Translation isn't tracked after destruction"); + { + const initialX = dragZoom.translateX; + const initialY = dragZoom.translateY; + + div.dispatchEvent(new MouseEvent("mousedown")); + div.dispatchEvent(new MouseEvent("mousemove"), { + clientX: 40, + clientY: 40, + }); + div.dispatchEvent(new MouseEvent("mouseup")); + is(dragZoom.translateX, initialX, "The translationX didn't change"); + is(dragZoom.translateY, initialY, "The translationY didn't change"); + } + panelDoc.body.removeChild(div); +}); diff --git a/devtools/client/memory/test/browser/doc_big_tree.html b/devtools/client/memory/test/browser/doc_big_tree.html new file mode 100644 index 0000000000..9fe74cd28b --- /dev/null +++ b/devtools/client/memory/test/browser/doc_big_tree.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + </head> + <body> + <script> + "use strict"; + + window.big = (function makeBig(depth = 0) { + let big = Array(5); + big.fill(undefined); + if (depth < 5) { + big = big.map(_ => makeBig(depth + 1)); + } + return big; + }()); + </script> + </body> +</html> diff --git a/devtools/client/memory/test/browser/doc_empty.html b/devtools/client/memory/test/browser/doc_empty.html new file mode 100644 index 0000000000..ef123d8d20 --- /dev/null +++ b/devtools/client/memory/test/browser/doc_empty.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + </head> + <body> + This is an empty window. + </body> +</html> diff --git a/devtools/client/memory/test/browser/doc_steady_allocation.html b/devtools/client/memory/test/browser/doc_steady_allocation.html new file mode 100644 index 0000000000..3e168507fa --- /dev/null +++ b/devtools/client/memory/test/browser/doc_steady_allocation.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + </head> + <body> + <script> + "use strict"; + + var objects = window.objects = []; + var allocate = this.allocate = function allocate() { + for (let i = 0; i < 100; i++) { + objects.push({}); + } + setTimeout(allocate, 10); + }; + + allocate(); + </script> + </body> +</html> diff --git a/devtools/client/memory/test/browser/head.js b/devtools/client/memory/test/browser/head.js new file mode 100644 index 0000000000..19a42c5494 --- /dev/null +++ b/devtools/client/memory/test/browser/head.js @@ -0,0 +1,269 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Load the shared test helpers into this compartment. +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js", + this +); + +var { + censusDisplays, + censusState, + snapshotState: states, +} = require("resource://devtools/client/memory/constants.js"); +var { L10N } = require("resource://devtools/client/memory/utils.js"); + +Services.prefs.setBoolPref("devtools.memory.enabled", true); + +/** + * Open the memory panel for the given tab. + */ +this.openMemoryPanel = async function (tab) { + info("Opening memory panel."); + const toolbox = await gDevTools.showToolboxForTab(tab, { toolId: "memory" }); + info("Memory panel shown successfully."); + const panel = toolbox.getCurrentPanel(); + return { tab, panel }; +}; + +/** + * Close the memory panel for the given tab. + */ +this.closeMemoryPanel = async function (tab) { + info("Closing memory panel."); + const toolbox = gDevTools.getToolboxForTab(tab); + await toolbox.destroy(); + info("Closed memory panel successfully."); +}; + +/** + * Return a test function that adds a tab with the given url, opens the memory + * panel, runs the given generator, closes the memory panel, removes the tab, + * and finishes. + * + * Example usage: + * + * this.test = makeMemoryTest(TEST_URL, async function ({ tab, panel }) { + * // Your tests go here... + * }); + */ +function makeMemoryTest(url, generator) { + return async function () { + waitForExplicitFinish(); + + // It can take a long time to save a snapshot to disk, read the snapshots + // back from disk, and finally perform analyses on them. + requestLongerTimeout(2); + + const tab = await addTab(url); + const results = await openMemoryPanel(tab); + + try { + await generator(results); + } catch (err) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(err)); + } + + await closeMemoryPanel(tab); + await removeTab(tab); + + finish(); + }; +} + +function dumpn(msg) { + dump(`MEMORY-TEST: ${msg}\n`); +} + +/** + * Returns a promise that will resolve when the provided store matches + * the expected array. expectedStates is an array of dominatorTree states. + * Expectations : + * - store.getState().snapshots.length == expected.length + * - snapshots[i].dominatorTree.state == expected[i] + * + * @param {Store} store + * @param {Array<string>} expectedStates [description] + * @return {Promise} + */ +function waitUntilDominatorTreeState(store, expected) { + const predicate = () => { + const snapshots = store.getState().snapshots; + return ( + snapshots.length === expected.length && + expected.every((state, i) => { + return ( + snapshots[i].dominatorTree && + snapshots[i].dominatorTree.state === state + ); + }) + ); + }; + info(`Waiting for dominator trees to be of state: ${expected}`); + return waitUntilState(store, predicate); +} + +function takeSnapshot(window) { + const { gStore, document } = window; + const snapshotCount = gStore.getState().snapshots.length; + info("Taking snapshot..."); + document.querySelector(".devtools-toolbar .take-snapshot").click(); + return waitUntilState( + gStore, + () => gStore.getState().snapshots.length === snapshotCount + 1 + ); +} + +function clearSnapshots(window) { + const { gStore, document } = window; + document.querySelector(".devtools-toolbar .clear-snapshots").click(); + return waitUntilState(gStore, () => + gStore + .getState() + .snapshots.every(snapshot => snapshot.state !== states.READ) + ); +} + +/** + * Sets the current requested display and waits for the selected snapshot to use + * it and complete the new census that entails. + */ +function setCensusDisplay(window, display) { + info(`Setting census display to ${display}...`); + const { gStore, gHeapAnalysesClient } = window; + // XXX: Should handle this via clicking the DOM, but React doesn't + // fire the onChange event, so just change it in the store. + // window.document.querySelector(`.select-display`).value = type; + gStore.dispatch( + require("resource://devtools/client/memory/actions/census-display.js").setCensusDisplayAndRefresh( + gHeapAnalysesClient, + display + ) + ); + + return waitUntilState(window.gStore, () => { + const selected = window.gStore.getState().snapshots.find(s => s.selected); + return ( + selected.state === states.READ && + selected.census && + selected.census.state === censusState.SAVED && + selected.census.display === display + ); + }); +} + +/** + * Get the snapshot tatus text currently displayed, or null if none is + * displayed. + * + * @param {Document} document + */ +function getDisplayedSnapshotStatus(document) { + const status = document.querySelector(".snapshot-status"); + return status ? status.textContent.trim() : null; +} + +/** + * Get the index of the currently selected snapshot. + * + * @return {Number} + */ +function getSelectedSnapshotIndex(store) { + const snapshots = store.getState().snapshots; + const selectedSnapshot = snapshots.find(s => s.selected); + return snapshots.indexOf(selectedSnapshot); +} + +/** + * Returns a promise that will resolve when the snapshot with provided index + * becomes selected. + * + * @return {Promise} + */ +function waitUntilSnapshotSelected(store, snapshotIndex) { + return waitUntilState( + store, + state => + state.snapshots[snapshotIndex] && + state.snapshots[snapshotIndex].selected === true + ); +} + +/** + * Wait until the state has censuses in a certain state. + * + * @return {Promise} + */ +function waitUntilCensusState(store, getCensus, expected) { + const predicate = () => { + const snapshots = store.getState().snapshots; + + info( + "Current census state:" + + snapshots.map(x => (getCensus(x) ? getCensus(x).state : null)) + ); + + return ( + snapshots.length === expected.length && + expected.every((state, i) => { + const census = getCensus(snapshots[i]); + return ( + state === "*" || + (!census && !state) || + (census && census.state === state) + ); + }) + ); + }; + info(`Waiting for snapshot censuses to be of state: ${expected}`); + return waitUntilState(store, predicate); +} + +/** + * Mock out the requestAnimationFrame. + * + * @return {Object} + * @function nextFrame + * Call the last queued function + * @function raf + * The mocked raf function + * @function timesCalled + * How many times the RAF has been called + */ +function createRAFMock() { + let queuedFns = []; + const mock = { timesCalled: 0 }; + + mock.nextFrame = function () { + const thisQueue = queuedFns; + queuedFns = []; + for (let i = 0; i < thisQueue.length; i++) { + thisQueue[i](); + } + }; + + mock.raf = function (fn) { + mock.timesCalled++; + queuedFns.push(fn); + }; + return mock; +} + +/** + * Test to see if two floats are equivalent. + * + * @param {Float} a + * @param {Float} b + * @return {Boolean} + */ +function floatEquality(a, b) { + const EPSILON = 0.00000000001; + const equals = Math.abs(a - b) < EPSILON; + if (!equals) { + info(`${a} not equal to ${b}`); + } + return equals; +} diff --git a/devtools/client/memory/test/chrome/chrome.toml b/devtools/client/memory/test/chrome/chrome.toml new file mode 100644 index 0000000000..0414f9d74b --- /dev/null +++ b/devtools/client/memory/test/chrome/chrome.toml @@ -0,0 +1,34 @@ +[DEFAULT] +support-files = ["head.js"] + +["test_CensusTreeItem_01.html"] + +["test_DominatorTreeItem_01.html"] + +["test_DominatorTree_01.html"] + +["test_DominatorTree_02.html"] + +["test_DominatorTree_03.html"] + +["test_Heap_01.html"] + +["test_Heap_02.html"] + +["test_Heap_03.html"] + +["test_Heap_04.html"] + +["test_Heap_05.html"] + +["test_List_01.html"] + +["test_ShortestPaths_01.html"] + +["test_ShortestPaths_02.html"] + +["test_SnapshotListItem_01.html"] + +["test_Toolbar_01.html"] + +["test_TreeMap_01.html"] diff --git a/devtools/client/memory/test/chrome/head.js b/devtools/client/memory/test/chrome/head.js new file mode 100644 index 0000000000..685fa62928 --- /dev/null +++ b/devtools/client/memory/test/chrome/head.js @@ -0,0 +1,354 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +var { BrowserLoader } = ChromeUtils.import( + "resource://devtools/shared/loader/browser-loader.js" +); +var { require } = BrowserLoader({ + baseURI: "resource://devtools/client/memory/", + window, +}); +var { Assert } = ChromeUtils.importESModule( + "resource://testing-common/Assert.sys.mjs" +); + +var EXPECTED_DTU_ASSERT_FAILURE_COUNT = 0; + +SimpleTest.registerCleanupFunction(function () { + if ( + DevToolsUtils.assertionFailureCount !== EXPECTED_DTU_ASSERT_FAILURE_COUNT + ) { + ok( + false, + "Should have had the expected number of DevToolsUtils.assert() failures." + + "Expected " + + EXPECTED_DTU_ASSERT_FAILURE_COUNT + + ", got " + + DevToolsUtils.assertionFailureCount + ); + } +}); + +var DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +var { immutableUpdate } = DevToolsUtils; + +var constants = require("resource://devtools/client/memory/constants.js"); +var { + censusDisplays, + diffingState, + labelDisplays, + dominatorTreeState, + snapshotState, + viewState, + censusState, +} = constants; + +const { L10N } = require("resource://devtools/client/memory/utils.js"); + +var models = require("resource://devtools/client/memory/models.js"); + +var Immutable = require("resource://devtools/client/shared/vendor/immutable.js"); +var React = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +var ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.js"); +var { createFactory } = React; +var Heap = createFactory( + require("resource://devtools/client/memory/components/Heap.js") +); +var CensusTreeItem = createFactory( + require("resource://devtools/client/memory/components/CensusTreeItem.js") +); +var DominatorTreeComponent = createFactory( + require("resource://devtools/client/memory/components/DominatorTree.js") +); +var DominatorTreeItem = createFactory( + require("resource://devtools/client/memory/components/DominatorTreeItem.js") +); +var ShortestPaths = createFactory( + require("resource://devtools/client/memory/components/ShortestPaths.js") +); +var TreeMap = createFactory( + require("resource://devtools/client/memory/components/TreeMap.js") +); +var SnapshotListItem = createFactory( + require("resource://devtools/client/memory/components/SnapshotListItem.js") +); +var List = createFactory( + require("resource://devtools/client/memory/components/List.js") +); +var Toolbar = createFactory( + require("resource://devtools/client/memory/components/Toolbar.js") +); + +// All tests are asynchronous. +SimpleTest.waitForExplicitFinish(); + +var noop = () => {}; + +var TEST_CENSUS_TREE_ITEM_PROPS = Object.freeze({ + item: Object.freeze({ + bytes: 10, + count: 1, + totalBytes: 10, + totalCount: 1, + name: "foo", + children: [ + Object.freeze({ + bytes: 10, + count: 1, + totalBytes: 10, + totalCount: 1, + name: "bar", + }), + ], + }), + depth: 0, + arrow: ">", + focused: true, + getPercentBytes: () => 50, + getPercentCount: () => 50, + showSign: false, + onViewSourceInDebugger: noop, + inverted: false, +}); + +// Counter for mock DominatorTreeNode ids. +var TEST_NODE_ID_COUNTER = 0; + +/** + * Create a mock DominatorTreeNode for testing, with sane defaults. Override any + * property by providing it on `opts`. Optionally pass child nodes as well. + * + * @param {Object} opts + * @param {Array<DominatorTreeNode>?} children + * + * @returns {DominatorTreeNode} + */ +function makeTestDominatorTreeNode(opts, children) { + const nodeId = TEST_NODE_ID_COUNTER++; + + const node = Object.assign( + { + nodeId, + label: ["other", "SomeType"], + shallowSize: 1, + retainedSize: (children || []).reduce( + (size, c) => size + c.retainedSize, + 1 + ), + parentId: undefined, + children, + moreChildrenAvailable: true, + }, + opts + ); + + if (children && children.length) { + children.map(c => { + c.parentId = node.nodeId; + }); + } + + return node; +} + +var TEST_DOMINATOR_TREE = Object.freeze({ + dominatorTreeId: 666, + root: (function makeTree(depth = 0) { + let children; + if (depth <= 3) { + children = [ + makeTree(depth + 1), + makeTree(depth + 1), + makeTree(depth + 1), + ]; + } + return makeTestDominatorTreeNode({}, children); + })(), + expanded: new Set(), + focused: null, + error: null, + display: labelDisplays.coarseType, + activeFetchRequestCount: null, + state: dominatorTreeState.LOADED, +}); + +var TEST_DOMINATOR_TREE_PROPS = Object.freeze({ + dominatorTree: TEST_DOMINATOR_TREE, + onLoadMoreSiblings: noop, + onViewSourceInDebugger: noop, + onExpand: noop, + onCollapse: noop, +}); + +var TEST_SHORTEST_PATHS_PROPS = Object.freeze({ + graph: Object.freeze({ + nodes: [ + { id: 1, label: ["other", "SomeType"] }, + { id: 2, label: ["other", "SomeType"] }, + { id: 3, label: ["other", "SomeType"] }, + ], + edges: [ + { from: 1, to: 2, name: "1->2" }, + { from: 1, to: 3, name: "1->3" }, + { from: 2, to: 3, name: "2->3" }, + ], + }), +}); + +var TEST_SNAPSHOT = Object.freeze({ + id: 1337, + selected: true, + path: "/fake/path/to/snapshot", + census: Object.freeze({ + report: Object.freeze({ + objects: Object.freeze({ count: 4, bytes: 400 }), + scripts: Object.freeze({ count: 3, bytes: 300 }), + strings: Object.freeze({ count: 2, bytes: 200 }), + other: Object.freeze({ count: 1, bytes: 100 }), + }), + display: Object.freeze({ + displayName: "Test Display", + tooltip: "Test display tooltup", + inverted: false, + breakdown: Object.freeze({ + by: "coarseType", + objects: Object.freeze({ by: "count", count: true, bytes: true }), + scripts: Object.freeze({ by: "count", count: true, bytes: true }), + strings: Object.freeze({ by: "count", count: true, bytes: true }), + other: Object.freeze({ by: "count", count: true, bytes: true }), + }), + }), + state: censusState.SAVED, + inverted: false, + filter: null, + expanded: new Set(), + focused: null, + parentMap: Object.freeze(Object.create(null)), + }), + dominatorTree: TEST_DOMINATOR_TREE, + error: null, + imported: false, + creationTime: 0, + state: snapshotState.READ, +}); + +var TEST_HEAP_PROPS = Object.freeze({ + onSnapshotClick: noop, + onLoadMoreSiblings: noop, + onCensusExpand: noop, + onCensusCollapse: noop, + onDominatorTreeExpand: noop, + onDominatorTreeCollapse: noop, + onCensusFocus: noop, + onDominatorTreeFocus: noop, + onViewSourceInDebugger: noop, + diffing: null, + view: { state: viewState.CENSUS }, + snapshot: TEST_SNAPSHOT, + sizes: Object.freeze({ shortestPathsSize: 0.5 }), + onShortestPathsResize: noop, +}); + +var TEST_TOOLBAR_PROPS = Object.freeze({ + censusDisplays: [ + censusDisplays.coarseType, + censusDisplays.allocationStack, + censusDisplays.invertedAllocationStack, + ], + censusDisplay: censusDisplays.coarseType, + onTakeSnapshotClick: noop, + onImportClick: noop, + onCensusDisplayChange: noop, + onToggleRecordAllocationStacks: noop, + allocations: models.allocations, + onToggleInverted: noop, + inverted: false, + filterString: null, + setFilterString: noop, + diffing: null, + onToggleDiffing: noop, + view: { state: viewState.CENSUS }, + onViewChange: noop, + labelDisplays: [labelDisplays.coarseType, labelDisplays.allocationStack], + labelDisplay: labelDisplays.coarseType, + onLabelDisplayChange: noop, + snapshots: [], +}); + +function makeTestCensusNode() { + return { + name: "Function", + bytes: 100, + totalBytes: 100, + count: 100, + totalCount: 100, + children: [], + }; +} + +var TEST_TREE_MAP_PROPS = Object.freeze({ + treeMap: Object.freeze({ + report: { + name: null, + bytes: 0, + totalBytes: 400, + count: 0, + totalCount: 400, + children: [ + { + name: "objects", + bytes: 0, + totalBytes: 200, + count: 0, + totalCount: 200, + children: [makeTestCensusNode(), makeTestCensusNode()], + }, + { + name: "other", + bytes: 0, + totalBytes: 200, + count: 0, + totalCount: 200, + children: [makeTestCensusNode(), makeTestCensusNode()], + }, + ], + }, + }), +}); + +var TEST_SNAPSHOT_LIST_ITEM_PROPS = Object.freeze({ + onClick: noop, + onSave: noop, + onDelete: noop, + item: TEST_SNAPSHOT, + index: 1234, +}); + +function onNextAnimationFrame(fn) { + return () => requestAnimationFrame(() => requestAnimationFrame(fn)); +} + +/** + * Render the provided ReactElement in the provided HTML container. + * Returns a Promise that will resolve the rendered element as a React + * component. + */ +function renderComponent(element, container) { + return new Promise(resolve => { + const component = ReactDOM.render( + element, + container, + onNextAnimationFrame(() => { + dumpn("Rendered = " + container.innerHTML); + resolve(component); + }) + ); + }); +} + +function dumpn(msg) { + dump(`MEMORY-TEST: ${msg}\n`); +} diff --git a/devtools/client/memory/test/chrome/test_CensusTreeItem_01.html b/devtools/client/memory/test/chrome/test_CensusTreeItem_01.html new file mode 100644 index 0000000000..21d900b668 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_CensusTreeItem_01.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that children pointers show up at the correct times. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, { + inverted: true, + depth: 0, + })), container); + + ok(!container.querySelector(".children-pointer"), + "Don't show children pointer for roots when we are inverted"); + + await renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, { + inverted: true, + depth: 1, + })), container); + + ok(container.querySelector(".children-pointer"), + "Do show children pointer for non-roots when we are inverted"); + + await renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, { + inverted: false, + item: immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS.item, { children: undefined }), + })), container); + + ok(!container.querySelector(".children-pointer"), + "Don't show children pointer when non-inverted and no children"); + + await renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, { + inverted: false, + depth: 0, + item: immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS.item, { children: [{}] }), + })), container); + + ok(container.querySelector(".children-pointer"), + "Do show children pointer when non-inverted and have children"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_DominatorTreeItem_01.html b/devtools/client/memory/test/chrome/test_DominatorTreeItem_01.html new file mode 100644 index 0000000000..c8cb6b6036 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_DominatorTreeItem_01.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that we don't display `JS::ubi::RootList` for the root, and instead show "GC Roots". +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent(DominatorTreeItem({ + item: makeTestDominatorTreeNode({ label: ["other", "JS::ubi::RootList"] }), + depth: 0, + arrow: dom.div(), + focused: true, + getPercentSize: _ => 50, + onViewSourceInDebugger: _ => { }, + }), container); + + ok(!container.textContent.includes("JS::ubi::RootList"), + "Should not display `JS::ubi::RootList`"); + ok(container.textContent.includes("GC Roots"), + "Should display `GC Roots` instead"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_DominatorTree_01.html b/devtools/client/memory/test/chrome/test_DominatorTree_01.html new file mode 100644 index 0000000000..0067a0f412 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_DominatorTree_01.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that we show a place holder for a subtree we are lazily fetching. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + const root = makeTestDominatorTreeNode({ moreChildrenAvailable: true}); + ok(!root.children); + + const expanded = new Set(); + expanded.add(root.nodeId); + + await renderComponent(DominatorTreeComponent(immutableUpdate( + TEST_DOMINATOR_TREE_PROPS, { + dominatorTree: immutableUpdate(TEST_DOMINATOR_TREE_PROPS.dominatorTree, { + expanded, + root, + state: dominatorTreeState.INCREMENTAL_FETCHING, + activeFetchRequestCount: 1, + }), + })), container); + + ok(container.querySelector(".subtree-fetching"), + "Expanded nodes with more children available, but no children " + + "loaded, should get a placeholder"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_DominatorTree_02.html b/devtools/client/memory/test/chrome/test_DominatorTree_02.html new file mode 100644 index 0000000000..66aad95296 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_DominatorTree_02.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that we show a link to load more children when some (but not all) are loaded. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + const root = makeTestDominatorTreeNode({ moreChildrenAvailable: true }, [ + makeTestDominatorTreeNode({}), + ]); + ok(root.children); + ok(root.moreChildrenAvailable); + + const expanded = new Set(); + expanded.add(root.nodeId); + + await renderComponent(DominatorTreeComponent(immutableUpdate( + TEST_DOMINATOR_TREE_PROPS, { + dominatorTree: immutableUpdate(TEST_DOMINATOR_TREE_PROPS.dominatorTree, { + expanded, + root, + }), + })), container); + + ok(container.querySelector(".more-children"), + "Should get a link to load more children"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_DominatorTree_03.html b/devtools/client/memory/test/chrome/test_DominatorTree_03.html new file mode 100644 index 0000000000..6fcfa3d577 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_DominatorTree_03.html @@ -0,0 +1,77 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that expanded DominatorTreeItems are correctly rendered and updated +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + // simple tree with one root and one child + const root = makeTestDominatorTreeNode( + { moreChildrenAvailable: false }, + [ + makeTestDominatorTreeNode({ moreChildrenAvailable: false }), + ]); + ok(root.children); + + // root node is expanded + const expanded = new Set(); + expanded.add(root.nodeId); + + await renderComponent( + DominatorTreeComponent(immutableUpdate( + TEST_DOMINATOR_TREE_PROPS, + { + dominatorTree: immutableUpdate( + TEST_DOMINATOR_TREE_PROPS.dominatorTree, + { expanded, root } + ), + })), container); + ok(true, "Dominator tree rendered"); + + is(container.querySelectorAll(".tree-node").length, 2, + "Should display two rows"); + is(container.querySelectorAll(".arrow.open").length, 1, + "Should display one expanded arrow"); + + await renderComponent( + DominatorTreeComponent(immutableUpdate( + TEST_DOMINATOR_TREE_PROPS, + { + dominatorTree: immutableUpdate( + TEST_DOMINATOR_TREE_PROPS.dominatorTree, + { expanded: new Set(), root } + ), + })), container); + + ok(true, "Dominator tree props updated to collapse all nodes"); + + is(container.querySelectorAll(".tree-node").length, 1, + "Should display only one row"); + is(container.querySelectorAll(".arrow.open").length, 0, + "Should display no expanded arrow"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_Heap_01.html b/devtools/client/memory/test/chrome/test_Heap_01.html new file mode 100644 index 0000000000..2facc3d221 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_Heap_01.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that rendering a dominator tree error is handled correctly. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + ok(React, "Should get React"); + ok(Heap, "Should get Heap"); + + const errorMessage = "Something went wrong!"; + const container = document.getElementById("container"); + + const props = immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.DOMINATOR_TREE }, + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + dominatorTree: { + error: new Error(errorMessage), + state: dominatorTreeState.ERROR, + }, + }), + }); + + await renderComponent(Heap(props), container); + + ok(container.querySelector(".error"), "Should render an error view"); + ok(container.textContent.includes(errorMessage), + "Should see our error message"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_Heap_02.html b/devtools/client/memory/test/chrome/test_Heap_02.html new file mode 100644 index 0000000000..343ee66714 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_Heap_02.html @@ -0,0 +1,78 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that the currently selected view is rendered. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + ok(React, "Should get React"); + ok(Heap, "Should get Heap"); + + const container = document.getElementById("container"); + + // Dominator tree view. + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.DOMINATOR_TREE }, + })), container); + + ok(container.querySelector(`[data-state=${dominatorTreeState.LOADED}]`), + "Should render the dominator tree."); + + // Census view. + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.CENSUS }, + })), container); + + ok(container.querySelector(`[data-state=${censusState.SAVED}]`), + "Should render the census."); + + // Diffing view. + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.DIFFING }, + snapshot: null, + diffing: { + firstSnapshotId: null, + secondSnapshotId: null, + census: null, + error: null, + state: diffingState.SELECTING, + }, + })), container); + + ok(container.querySelector(`[data-state=${diffingState.SELECTING}]`), + "Should render the diffing."); + + // Initial view. + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + snapshot: null, + diffing: null, + })), container); + + ok(container.querySelector("[data-state=initial]"), + "With no snapshot, nor a diffing, should render initial prompt."); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_Heap_03.html b/devtools/client/memory/test/chrome/test_Heap_03.html new file mode 100644 index 0000000000..69f95f4275 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_Heap_03.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that we show a throbber while computing and fetching dominator trees, +but not in other dominator tree states. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + for (const state of [dominatorTreeState.COMPUTING, dominatorTreeState.FETCHING]) { + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.DOMINATOR_TREE }, + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + dominatorTree: immutableUpdate(TEST_HEAP_PROPS.snapshot.dominatorTree, { + state, + root: null, + dominatorTreeId: state === dominatorTreeState.FETCHING ? 1 : null, + }), + }), + })), container); + + ok(container.querySelector(".devtools-throbber"), + `Should show a throbber for state = ${state}`); + } + + for ( + const state of [ + dominatorTreeState.LOADED, dominatorTreeState.INCREMENTAL_FETCHING, + ]) { + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.DOMINATOR_TREE }, + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + dominatorTree: immutableUpdate(TEST_HEAP_PROPS.snapshot.dominatorTree, { + state, + activeFetchRequestCount: + state === dominatorTreeState.INCREMENTAL_FETCHING ? 1 : undefined, + }), + }), + })), container); + + ok(!container.querySelector(".devtools-throbber"), + `Should not show a throbber for state = ${state}`); + } + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.DOMINATOR_TREE }, + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + dominatorTree: { + state: dominatorTreeState.ERROR, + error: new Error("example error for testing"), + }, + }), + })), container); + + ok(!container.querySelector(".devtools-throbber"), + `Should not show a throbber for ERROR state`); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_Heap_04.html b/devtools/client/memory/test/chrome/test_Heap_04.html new file mode 100644 index 0000000000..76de5e4826 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_Heap_04.html @@ -0,0 +1,122 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that we show the "hey you're not recording allocation stacks" message at the appropriate times. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + census: immutableUpdate(TEST_HEAP_PROPS.snapshot.census, { + report: { + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + id: 1, + parent: undefined, + children: [ + { + name: "noStack", + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + children: undefined, + id: 3, + parent: 1, + }, + ], + }, + display: censusDisplays.allocationStack, + }), + }), + })), container); + + ok(container.querySelector(".no-allocation-stacks"), + "When there are no allocation stacks, we should show the message"); + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + census: immutableUpdate(TEST_HEAP_PROPS.snapshot.census, { + report: { + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + id: 1, + parent: undefined, + children: [ + { + name: Cu.getJSTestingFunctions().saveStack(), + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + children: undefined, + id: 2, + parent: 1, + }, + { + name: "noStack", + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + children: undefined, + id: 3, + parent: 1, + }, + ], + }, + display: censusDisplays.allocationStack, + }), + }), + })), container); + + ok(!container.querySelector(".no-allocation-stacks"), + "When there are allocation stacks, we should not show the message"); + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + census: immutableUpdate(TEST_HEAP_PROPS.snapshot.census, { + report: { + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + id: 1, + parent: undefined, + children: undefined, + }, + display: censusDisplays.allocationStack, + }), + }), + })), container); + + ok(!container.querySelector(".no-allocation-stacks"), + "When there isn't census data, we should not show the message"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_Heap_05.html b/devtools/client/memory/test/chrome/test_Heap_05.html new file mode 100644 index 0000000000..bd3fc393cc --- /dev/null +++ b/devtools/client/memory/test/chrome/test_Heap_05.html @@ -0,0 +1,133 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that we show a message when the census results are empty. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + census: immutableUpdate(TEST_HEAP_PROPS.snapshot.census, { + report: { + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + id: 1, + parent: undefined, + children: [ + { + name: Cu.getJSTestingFunctions().saveStack(), + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + children: undefined, + id: 2, + parent: 1, + }, + { + name: "noStack", + bytes: 1, + totalBytes: 1, + count: 1, + totalCount: 1, + children: undefined, + id: 3, + parent: 1, + }, + ], + }, + display: censusDisplays.allocationStack, + }), + }), + })), container); + + ok(!container.querySelector(".empty"), + "When the report is not empty, we should not show the empty message"); + + // Empty Census Report + + const emptyCensus = { + report: { + bytes: 0, + totalBytes: 0, + count: 0, + totalCount: 0, + id: 1, + parent: undefined, + children: undefined, + }, + parentMap: Object.create(null), + display: censusDisplays.allocationStack, + filter: null, + expanded: new Immutable.Set(), + focused: null, + state: censusState.SAVED, + }; + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + census: immutableUpdate(TEST_HEAP_PROPS.snapshot.census, emptyCensus), + }), + })), container); + + ok(container.querySelector(".empty"), + "When the report is empty in census view, we show the empty message"); + ok(container.textContent.includes(L10N.getStr("heapview.empty"))); + + // Empty Diffing Report + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + view: { state: viewState.DIFFING }, + diffing: { + firstSnapshotId: 1, + secondSnapshotId: 2, + census: emptyCensus, + state: diffingState.TOOK_DIFF, + }, + snapshot: null, + })), container); + + ok(container.querySelector(".empty"), + "When the report is empty in diffing view, the empty message is shown"); + ok(container.textContent.includes(L10N.getStr("heapview.no-difference"))); + + // Empty Filtered Census + + await renderComponent(Heap(immutableUpdate(TEST_HEAP_PROPS, { + snapshot: immutableUpdate(TEST_HEAP_PROPS.snapshot, { + census: immutableUpdate( + TEST_HEAP_PROPS.snapshot.census, immutableUpdate(emptyCensus, { + filter: "zzzz", + })), + }), + })), container); + + ok(container.querySelector(".empty"), + "When the report is empty in census view w/ filter, we show the empty message"); + ok(container.textContent.includes(L10N.getStr("heapview.none-match"))); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_List_01.html b/devtools/client/memory/test/chrome/test_List_01.html new file mode 100644 index 0000000000..4ffab49620 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_List_01.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test to verify the delete button calls the onDelete handler for an item +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + const deletedSnapshots = []; + + const snapshots = [ TEST_SNAPSHOT, TEST_SNAPSHOT, TEST_SNAPSHOT ] + .map((snapshot, index) => immutableUpdate(snapshot, { + index: snapshot.index + index, + })); + + await renderComponent( + List({ + itemComponent: SnapshotListItem, + onClick: noop, + onDelete: (item) => deletedSnapshots.push(item), + items: snapshots, + }), + container + ); + + const deleteButtons = container.querySelectorAll(".delete"); + + is(container.querySelectorAll(".snapshot-list-item").length, 3, + "There are 3 list items\n"); + is(deletedSnapshots.length, 0, + "Not snapshots have been deleted\n"); + + deleteButtons[1].click(); + + is(deletedSnapshots.length, 1, "One snapshot was deleted\n"); + is(deletedSnapshots[0], snapshots[1], + "Deleted snapshot was added to the deleted list\n"); + + deleteButtons[0].click(); + + is(deletedSnapshots.length, 2, "Two snapshots were deleted\n"); + is(deletedSnapshots[1], snapshots[0], + "Deleted snapshot was added to the deleted list\n"); + + deleteButtons[2].click(); + + is(deletedSnapshots.length, 3, "Three snapshots were deleted\n"); + is(deletedSnapshots[2], snapshots[2], + "Deleted snapshot was added to the deleted list\n"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_ShortestPaths_01.html b/devtools/client/memory/test/chrome/test_ShortestPaths_01.html new file mode 100644 index 0000000000..29905bfaca --- /dev/null +++ b/devtools/client/memory/test/chrome/test_ShortestPaths_01.html @@ -0,0 +1,112 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that the ShortestPaths component properly renders a graph of the merged shortest paths. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> + + <script type="application/javascript" + src="chrome://global/content/third_party/d3/d3.js"> + </script> + <script type="application/javascript" + src="chrome://devtools/content/shared/vendor/dagre-d3.js"> + </script> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent(ShortestPaths(TEST_SHORTEST_PATHS_PROPS), container); + + let found1 = false; + let found2 = false; + let found3 = false; + + let found1to2 = false; + let found1to3 = false; + let found2to3 = false; + + const tspans = [...container.querySelectorAll("tspan")]; + for (const el of tspans) { + const text = el.textContent.trim(); + dumpn("tspan's text = " + text); + + switch (text) { + // Nodes + + case "other › SomeType @ 0x1": { + ok(!found1, "Should only find node 1 once"); + found1 = true; + break; + } + + case "other › SomeType @ 0x2": { + ok(!found2, "Should only find node 2 once"); + found2 = true; + break; + } + + case "other › SomeType @ 0x3": { + ok(!found3, "Should only find node 3 once"); + found3 = true; + break; + } + + // Edges + + case "1->2": { + ok(!found1to2, "Should only find edge 1->2 once"); + found1to2 = true; + break; + } + + case "1->3": { + ok(!found1to3, "Should only find edge 1->3 once"); + found1to3 = true; + break; + } + + case "2->3": { + ok(!found2to3, "Should only find edge 2->3 once"); + found2to3 = true; + break; + } + + // Unexpected + + default: { + ok(false, `Unexpected tspan: ${text}`); + break; + } + } + } + + ok(found1, "Should have rendered node 1"); + ok(found2, "Should have rendered node 2"); + ok(found3, "Should have rendered node 3"); + + ok(found1to2, "Should have rendered edge 1->2"); + ok(found1to3, "Should have rendered edge 1->3"); + ok(found2to3, "Should have rendered edge 2->3"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_ShortestPaths_02.html b/devtools/client/memory/test/chrome/test_ShortestPaths_02.html new file mode 100644 index 0000000000..cbf0370d22 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_ShortestPaths_02.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that the ShortestPaths component renders a suggestion to select a node when there is no graph. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> + + <script type="application/javascript" + src="chrome://global/content/third_party/d3/d3.js"> + </script> + <script type="application/javascript" + src="chrome://devtools/content/shared/vendor/dagre-d3.js"> + </script> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent(ShortestPaths(immutableUpdate(TEST_SHORTEST_PATHS_PROPS, + { graph: null })), + container); + + ok(container.textContent.includes(L10N.getStr("shortest-paths.select-node")), + "The node selection prompt is displayed"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_SnapshotListItem_01.html b/devtools/client/memory/test/chrome/test_SnapshotListItem_01.html new file mode 100644 index 0000000000..20fc137479 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_SnapshotListItem_01.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test to verify that the delete button only shows up for a snapshot when it has a +path. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent( + SnapshotListItem(TEST_SNAPSHOT_LIST_ITEM_PROPS), + container + ); + + ok(container.querySelector(".delete"), + "Should have delete button when there is a path"); + + const pathlessProps = immutableUpdate( + TEST_SNAPSHOT_LIST_ITEM_PROPS, + {item: immutableUpdate(TEST_SNAPSHOT, {path: null})} + ); + + await renderComponent( + SnapshotListItem(pathlessProps), + container + ); + + ok(!container.querySelector(".delete"), + "No delete button should be found if there is no path\n"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_Toolbar_01.html b/devtools/client/memory/test/chrome/test_Toolbar_01.html new file mode 100644 index 0000000000..3bf934c77c --- /dev/null +++ b/devtools/client/memory/test/chrome/test_Toolbar_01.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that the Toolbar component shows the view switcher only at the appropriate times. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> +</head> +<body> + <div id="container"></div> + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + // Census and dominator tree views. + + for (const view of [viewState.CENSUS, viewState.DOMINATOR_TREE]) { + await renderComponent(Toolbar(immutableUpdate(TEST_TOOLBAR_PROPS, { + view: { state: view }, + })), container); + + ok(container.querySelector("#select-view"), + `The view selector is shown in view = ${view}`); + } + + await renderComponent(Toolbar(immutableUpdate(TEST_TOOLBAR_PROPS, { + view: { state: viewState.DIFFING }, + })), container); + + ok(!container.querySelector("#select-view"), + "The view selector is NOT shown in the DIFFING view"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/chrome/test_TreeMap_01.html b/devtools/client/memory/test/chrome/test_TreeMap_01.html new file mode 100644 index 0000000000..7b8b98b9a7 --- /dev/null +++ b/devtools/client/memory/test/chrome/test_TreeMap_01.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<html> +<!-- +Test that the Tree Map correctly renders onto 2 managed canvases. +--> +<head> + <meta charset="utf-8"> + <title>Tree component test</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> + + <script type="application/javascript" + src="chrome://global/content/third_party/d3/d3.js"> + </script> +</head> +<body> + <!-- Give the container height so that the whole tree is rendered. --> + <div id="container" style="height: 900px;"></div> + + <pre id="test"> + <script src="head.js" type="application/javascript"></script> + <script type="application/javascript"> + "use strict"; + window.onload = async function() { + try { + const container = document.getElementById("container"); + + await renderComponent(TreeMap(TEST_TREE_MAP_PROPS), container); + + const treeMapContainer = container.querySelector(".tree-map-container"); + ok(treeMapContainer, "Component creates a container"); + + const canvases = treeMapContainer.querySelectorAll("canvas"); + is(canvases.length, 2, "Creates 2 canvases"); + } catch (e) { + ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); + } finally { + SimpleTest.finish(); + } + }; + </script> + </pre> +</body> +</html> diff --git a/devtools/client/memory/test/xpcshell/.eslintrc.js b/devtools/client/memory/test/xpcshell/.eslintrc.js new file mode 100644 index 0000000000..f1618e83c2 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/.eslintrc.js @@ -0,0 +1,14 @@ +"use strict"; + +module.exports = { + // Extend from the shared list of defined globals for mochitests. + extends: "../../../../.eslintrc.xpcshell.js", + rules: { + "no-unused-vars": [ + "error", + { + vars: "local", + }, + ], + }, +}; diff --git a/devtools/client/memory/test/xpcshell/head.js b/devtools/client/memory/test/xpcshell/head.js new file mode 100644 index 0000000000..94788a60fb --- /dev/null +++ b/devtools/client/memory/test/xpcshell/head.js @@ -0,0 +1,189 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// via xpcshell.ini +/* import-globals-from ../../../shared/test/shared-head.js */ + +Services.prefs.setBoolPref("devtools.testing", true); +Services.prefs.setBoolPref("devtools.debugger.log", true); +registerCleanupFunction(() => { + Services.prefs.clearUserPref("devtools.testing"); + Services.prefs.clearUserPref("devtools.debugger.log"); +}); + +var { FileUtils } = ChromeUtils.importESModule( + "resource://gre/modules/FileUtils.sys.mjs" +); +var { expectState } = require("resource://devtools/server/actors/common.js"); +var HeapSnapshotFileUtils = require("resource://devtools/shared/heapsnapshot/HeapSnapshotFileUtils.js"); +var HeapAnalysesClient = require("resource://devtools/shared/heapsnapshot/HeapAnalysesClient.js"); +var { addDebuggerToGlobal } = ChromeUtils.importESModule( + "resource://gre/modules/jsdebugger.sys.mjs" +); +var Store = require("resource://devtools/client/memory/store.js"); +var { L10N } = require("resource://devtools/client/memory/utils.js"); +var SYSTEM_PRINCIPAL = Cc["@mozilla.org/systemprincipal;1"].createInstance( + Ci.nsIPrincipal +); + +var EXPECTED_DTU_ASSERT_FAILURE_COUNT = 0; + +registerCleanupFunction(function () { + equal( + DevToolsUtils.assertionFailureCount, + EXPECTED_DTU_ASSERT_FAILURE_COUNT, + "Should have had the expected number of DevToolsUtils.assert() failures." + ); +}); + +function dumpn(msg) { + dump(`MEMORY-TEST: ${msg}\n`); +} + +function initDebugger() { + const global = new Cu.Sandbox(SYSTEM_PRINCIPAL, { freshZone: true }); + addDebuggerToGlobal(global); + return new global.Debugger(); +} + +function StubbedMemoryFront() { + this.state = "detached"; + this.dbg = initDebugger(); +} + +StubbedMemoryFront.prototype.attach = async function () { + this.state = "attached"; +}; + +StubbedMemoryFront.prototype.detach = async function () { + this.state = "detached"; +}; + +StubbedMemoryFront.prototype.saveHeapSnapshot = expectState( + "attached", + async function () { + return ChromeUtils.saveHeapSnapshot({ runtime: true }); + }, + "saveHeapSnapshot" +); + +StubbedMemoryFront.prototype.startRecordingAllocations = expectState( + "attached", + async function () {} +); + +StubbedMemoryFront.prototype.stopRecordingAllocations = expectState( + "attached", + async function () {} +); + +function waitUntilSnapshotState(store, expected) { + const predicate = () => { + const snapshots = store.getState().snapshots; + info(snapshots.map(x => x.state)); + return ( + snapshots.length === expected.length && + expected.every( + (state, i) => state === "*" || snapshots[i].state === state + ) + ); + }; + info(`Waiting for snapshots to be of state: ${expected}`); + return waitUntilState(store, predicate); +} + +function findReportLeafIndex(node, name = null) { + if (node.reportLeafIndex && (!name || node.name === name)) { + return node.reportLeafIndex; + } + + if (node.children) { + for (const child of node.children) { + const found = findReportLeafIndex(child); + if (found) { + return found; + } + } + } + + return null; +} + +function waitUntilCensusState(store, getCensus, expected) { + const predicate = () => { + const snapshots = store.getState().snapshots; + + info( + "Current census state:" + + snapshots.map(x => (getCensus(x) ? getCensus(x).state : null)) + ); + + return ( + snapshots.length === expected.length && + expected.every((state, i) => { + const census = getCensus(snapshots[i]); + return ( + state === "*" || + (!census && !state) || + (census && census.state === state) + ); + }) + ); + }; + info(`Waiting for snapshots' censuses to be of state: ${expected}`); + return waitUntilState(store, predicate); +} + +async function createTempFile() { + const file = new FileUtils.File( + PathUtils.join(PathUtils.tempDir, "tmp.fxsnapshot") + ); + file.createUnique(Ci.nsIFile.NORMAL_FILE_TYPE, FileUtils.PERMS_FILE); + const destPath = file.path; + const stat = await IOUtils.stat(destPath); + Assert.strictEqual(stat.size, 0, "new file is 0 bytes at start"); + return destPath; +} + +// This is a copy of the same method from shared-head.js as +// xpcshell test aren't using shared-head.js +/** + * Wait for a specific action type to be dispatched. + * + * If the action is async and defines a `status` property, this helper will wait + * for the status to reach either "error" or "done". + * + * @param {Object} store + * Redux store where the action should be dispatched. + * @param {String} actionType + * The actionType to wait for. + * @param {Number} repeat + * Optional, number of time the action is expected to be dispatched. + * Defaults to 1 + * @return {Promise} + */ +function waitForDispatch(store, actionType, repeat = 1) { + let count = 0; + return new Promise(resolve => { + store.dispatch({ + type: "@@service/waitUntil", + predicate: action => { + const isDone = + !action.status || + action.status === "done" || + action.status === "error"; + + if (action.type === actionType && isDone && ++count == repeat) { + return true; + } + + return false; + }, + run: (dispatch, getState, action) => { + resolve(action); + }, + }); + }); +} diff --git a/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_01.js b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_01.js new file mode 100644 index 0000000000..9511ba413f --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_01.js @@ -0,0 +1,41 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test clearSnapshots deletes snapshots with READ censuses + +const { + takeSnapshotAndCensus, + clearSnapshots, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { actions } = require("resource://devtools/client/memory/constants.js"); +const { + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.treeMap, [treeMapState.SAVED]); + ok(true, "snapshot created"); + + ok(true, "dispatch clearSnapshots action"); + const deleteEvents = Promise.all([ + waitForDispatch(store, actions.DELETE_SNAPSHOTS_START), + waitForDispatch(store, actions.DELETE_SNAPSHOTS_END), + ]); + dispatch(clearSnapshots(heapWorker)); + await deleteEvents; + ok(true, "received delete snapshots events"); + + equal(getState().snapshots.length, 0, "no snapshot remaining"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_02.js b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_02.js new file mode 100644 index 0000000000..09f1fa6b54 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_02.js @@ -0,0 +1,61 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test clearSnapshots preserves snapshots with state != READ or ERROR + +const { + takeSnapshotAndCensus, + clearSnapshots, + takeSnapshot, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + snapshotState: states, + treeMapState, + actions, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + ok(true, "create a snapshot with a census in SAVED state"); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + ok(true, "create a snapshot in SAVED state"); + dispatch(takeSnapshot(front)); + await waitUntilSnapshotState(store, [states.SAVED, states.SAVED]); + await waitUntilCensusState(store, snapshot => snapshot.treeMap, [ + treeMapState.SAVED, + null, + ]); + ok(true, "snapshots created with expected states"); + + ok(true, "dispatch clearSnapshots action"); + const deleteEvents = Promise.all([ + waitForDispatch(store, actions.DELETE_SNAPSHOTS_START), + waitForDispatch(store, actions.DELETE_SNAPSHOTS_END), + ]); + dispatch(clearSnapshots(heapWorker)); + await deleteEvents; + ok(true, "received delete snapshots events"); + + equal(getState().snapshots.length, 1, "one snapshot remaining"); + const remainingSnapshot = getState().snapshots[0]; + equal( + remainingSnapshot.treeMap, + undefined, + "remaining snapshot doesn't have a treeMap property" + ); + equal( + remainingSnapshot.census, + undefined, + "remaining snapshot doesn't have a census property" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_03.js b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_03.js new file mode 100644 index 0000000000..b920c5264b --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_03.js @@ -0,0 +1,52 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test clearSnapshots deletes snapshots with state ERROR + +const { + takeSnapshotAndCensus, + clearSnapshots, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + snapshotState: states, + treeMapState, + actions, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + ok(true, "create a snapshot with a treeMap"); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilSnapshotState(store, [states.SAVED]); + ok(true, "snapshot created with a SAVED state"); + await waitUntilCensusState(store, snapshot => snapshot.treeMap, [ + treeMapState.SAVED, + ]); + ok(true, "treeMap created with a SAVED state"); + + ok(true, "set snapshot state to error"); + const id = getState().snapshots[0].id; + dispatch({ type: actions.SNAPSHOT_ERROR, id, error: new Error("_") }); + await waitUntilSnapshotState(store, [states.ERROR]); + ok(true, "snapshot set to error state"); + + ok(true, "dispatch clearSnapshots action"); + const deleteEvents = Promise.all([ + waitForDispatch(store, actions.DELETE_SNAPSHOTS_START), + waitForDispatch(store, actions.DELETE_SNAPSHOTS_END), + ]); + dispatch(clearSnapshots(heapWorker)); + await deleteEvents; + ok(true, "received delete snapshots events"); + equal(getState().snapshots.length, 0, "error snapshot deleted"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_04.js b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_04.js new file mode 100644 index 0000000000..723029c90b --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_04.js @@ -0,0 +1,55 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test clearSnapshots deletes several snapshots + +const { + takeSnapshotAndCensus, + clearSnapshots, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + snapshotState: states, + actions, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + ok(true, "create 3 snapshots with a saved census"); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.treeMap, [ + treeMapState.SAVED, + treeMapState.SAVED, + treeMapState.SAVED, + ]); + ok(true, "snapshots created with a saved census"); + + ok(true, "set first snapshot state to error"); + const id = getState().snapshots[0].id; + dispatch({ type: actions.SNAPSHOT_ERROR, id, error: new Error("_") }); + await waitUntilSnapshotState(store, [states.ERROR, states.READ, states.READ]); + ok(true, "first snapshot set to error state"); + + ok(true, "dispatch clearSnapshots action"); + const deleteEvents = Promise.all([ + waitForDispatch(store, actions.DELETE_SNAPSHOTS_START), + waitForDispatch(store, actions.DELETE_SNAPSHOTS_END), + ]); + dispatch(clearSnapshots(heapWorker)); + await deleteEvents; + ok(true, "received delete snapshots events"); + + equal(getState().snapshots.length, 0, "no snapshot remaining"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_05.js b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_05.js new file mode 100644 index 0000000000..485e0f0513 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_05.js @@ -0,0 +1,53 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test clearSnapshots deletes several snapshots + +const { + takeSnapshotAndCensus, + clearSnapshots, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + actions, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + ok(true, "create 2 snapshots with a saved census"); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + ok(true, "snapshots created with a saved census"); + await waitUntilCensusState(store, snapshot => snapshot.treeMap, [ + treeMapState.SAVED, + treeMapState.SAVED, + ]); + + const errorHeapWorker = { + deleteHeapSnapshot() { + return Promise.reject("_"); + }, + }; + + ok(true, "dispatch clearSnapshots action"); + const deleteEvents = Promise.all([ + waitForDispatch(store, actions.DELETE_SNAPSHOTS_START), + waitForDispatch(store, actions.DELETE_SNAPSHOTS_END), + waitForDispatch(store, actions.SNAPSHOT_ERROR), + waitForDispatch(store, actions.SNAPSHOT_ERROR), + ]); + dispatch(clearSnapshots(errorHeapWorker)); + await deleteEvents; + ok(true, "received delete snapshots and snapshot error events"); + equal(getState().snapshots.length, 0, "no snapshot remaining"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_06.js b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_06.js new file mode 100644 index 0000000000..0fe84daaea --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-clear-snapshots_06.js @@ -0,0 +1,68 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that clearSnapshots disables diffing when deleting snapshots + +const { + takeSnapshotAndCensus, + clearSnapshots, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + actions, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + toggleDiffing, + selectSnapshotForDiffingAndRefresh, +} = require("resource://devtools/client/memory/actions/diffing.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + ok(true, "create 2 snapshots with a saved census"); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.treeMap, [ + treeMapState.SAVED, + treeMapState.SAVED, + ]); + ok(true, "snapshots created with a saved census"); + + dispatch(toggleDiffing()); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[0]) + ); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[1]) + ); + + ok(getState().diffing, "We should be in diffing view"); + + await waitForDispatch(store, actions.TAKE_CENSUS_DIFF_END); + ok(true, "Received TAKE_CENSUS_DIFF_END action"); + + ok(true, "Dispatch clearSnapshots action"); + const deleteEvents = Promise.all([ + waitForDispatch(store, actions.DELETE_SNAPSHOTS_START), + waitForDispatch(store, actions.DELETE_SNAPSHOTS_END), + ]); + dispatch(clearSnapshots(heapWorker)); + await deleteEvents; + ok(true, "received delete snapshots events"); + + Assert.strictEqual( + getState().snapshots.length, + 0, + "Snapshots array should be empty" + ); + ok(!getState().diffing, "We should no longer be diffing"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-export-snapshot.js b/devtools/client/memory/test/xpcshell/test_action-export-snapshot.js new file mode 100644 index 0000000000..c481ab1315 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-export-snapshot.js @@ -0,0 +1,45 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test exporting a snapshot to a user specified location on disk. + +const { + exportSnapshot, +} = require("resource://devtools/client/memory/actions/io.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + actions, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + const destPath = await createTempFile(); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.treeMap, [ + treeMapState.SAVED, + ]); + + const exportEvents = Promise.all([ + waitForDispatch(store, actions.EXPORT_SNAPSHOT_START), + waitForDispatch(store, actions.EXPORT_SNAPSHOT_END), + ]); + dispatch(exportSnapshot(getState().snapshots[0], destPath)); + await exportEvents; + + const stat = await IOUtils.stat(destPath); + info(stat.size); + Assert.greater(stat.size, 0, "destination file is more than 0 bytes"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-filter-01.js b/devtools/client/memory/test/xpcshell/test_action-filter-01.js new file mode 100644 index 0000000000..b16e66a62c --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-filter-01.js @@ -0,0 +1,23 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test setting the filter string. + +const { + setFilterString, +} = require("resource://devtools/client/memory/actions/filter.js"); + +add_task(async function () { + const store = Store(); + const { getState, dispatch } = store; + + equal(getState().filter, null, "no filter by default"); + + dispatch(setFilterString("my filter")); + equal(getState().filter, "my filter", "now we have the expected filter"); + + dispatch(setFilterString("")); + equal(getState().filter, null, "no filter again"); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-filter-02.js b/devtools/client/memory/test/xpcshell/test_action-filter-02.js new file mode 100644 index 0000000000..828b976aa3 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-filter-02.js @@ -0,0 +1,88 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that changing filter state properly refreshes the selected census. + +const { + viewState, + censusState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setFilterStringAndRefresh, +} = require("resource://devtools/client/memory/actions/filter.js"); +const { + takeSnapshotAndCensus, + selectSnapshotAndRefresh, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + equal(getState().filter, null, "no filter by default"); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + ok(true, "saved 3 snapshots and took a census of each of them"); + + dispatch(setFilterStringAndRefresh("str", heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVING, + ]); + ok( + true, + "setting filter string should recompute the selected snapshot's census" + ); + + equal(getState().filter, "str", "now inverted"); + + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + + equal(getState().snapshots[0].census.filter, null); + equal(getState().snapshots[1].census.filter, null); + equal(getState().snapshots[2].census.filter, "str"); + + dispatch(selectSnapshotAndRefresh(heapWorker, getState().snapshots[1].id)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVING, + censusState.SAVED, + ]); + ok(true, "selecting non-inverted census should trigger a recompute"); + + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + + equal(getState().snapshots[0].census.filter, null); + equal(getState().snapshots[1].census.filter, "str"); + equal(getState().snapshots[2].census.filter, "str"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-filter-03.js b/devtools/client/memory/test/xpcshell/test_action-filter-03.js new file mode 100644 index 0000000000..2fcc3e9156 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-filter-03.js @@ -0,0 +1,69 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that changing filter state in the middle of taking a snapshot results in +// the properly fitered census. + +const { + snapshotState: states, + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setFilterString, + setFilterStringAndRefresh, +} = require("resource://devtools/client/memory/actions/filter.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilSnapshotState(store, [states.SAVING]); + + dispatch(setFilterString("str")); + + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + ]); + equal(getState().filter, "str", "should want filtered trees"); + equal( + getState().snapshots[0].census.filter, + "str", + "snapshot-we-were-in-the-middle-of-saving's census should be filtered" + ); + + dispatch(setFilterStringAndRefresh("", heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVING, + ]); + ok(true, "changing filter string retriggers census"); + ok(!getState().filter, "no longer filtering"); + + dispatch(setFilterString("obj")); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + ]); + equal(getState().filter, "obj", "filtering for obj now"); + equal( + getState().snapshots[0].census.filter, + "obj", + "census-we-were-in-the-middle-of-recomputing should be filtered again" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-import-snapshot-and-census.js b/devtools/client/memory/test/xpcshell/test_action-import-snapshot-and-census.js new file mode 100644 index 0000000000..3e97f7c45f --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-import-snapshot-and-census.js @@ -0,0 +1,135 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the task creator `importSnapshotAndCensus()` for the whole flow of + * importing a snapshot, and its sub-actions. + */ + +const { + actions, + snapshotState: states, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + exportSnapshot, + importSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/io.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { subscribe, dispatch, getState } = store; + + const destPath = await createTempFile(); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.treeMap, [treeMapState.SAVED]); + + const exportEvents = Promise.all([ + waitForDispatch(store, actions.EXPORT_SNAPSHOT_START), + waitForDispatch(store, actions.EXPORT_SNAPSHOT_END), + ]); + dispatch(exportSnapshot(getState().snapshots[0], destPath)); + await exportEvents; + + // Now import our freshly exported snapshot + let snapshotI = 0; + let censusI = 0; + const snapshotStates = ["IMPORTING", "READING", "READ"]; + const censusStates = ["SAVING", "SAVED"]; + const expectStates = () => { + const snapshot = getState().snapshots[1]; + if (!snapshot) { + return; + } + if (snapshotI < snapshotStates.length) { + const isCorrectState = + snapshot.state === states[snapshotStates[snapshotI]]; + if (isCorrectState) { + ok(true, `Found expected snapshot state ${snapshotStates[snapshotI]}`); + snapshotI++; + } + } + if (snapshot.treeMap && censusI < censusStates.length) { + if (snapshot.treeMap.state === treeMapState[censusStates[censusI]]) { + ok(true, `Found expected census state ${censusStates[censusI]}`); + censusI++; + } + } + }; + + const unsubscribe = subscribe(expectStates); + dispatch(importSnapshotAndCensus(heapWorker, destPath)); + + await waitUntilState(store, () => { + return ( + snapshotI === snapshotStates.length && censusI === censusStates.length + ); + }); + unsubscribe(); + equal( + snapshotI, + snapshotStates.length, + "importSnapshotAndCensus() produces the correct sequence of states in a snapshot" + ); + equal( + getState().snapshots[1].state, + states.READ, + "imported snapshot is in READ state" + ); + equal( + censusI, + censusStates.length, + "importSnapshotAndCensus() produces the correct sequence of states in a census" + ); + equal( + getState().snapshots[1].treeMap.state, + treeMapState.SAVED, + "imported snapshot is in READ state" + ); + ok(getState().snapshots[1].selected, "imported snapshot is selected"); + + // Check snapshot data + const snapshot1 = getState().snapshots[0]; + const snapshot2 = getState().snapshots[1]; + + equal( + snapshot1.treeMap.display, + snapshot2.treeMap.display, + "imported snapshot has correct display" + ); + + // Clone the census data so we can destructively remove the ID/parents to compare + // equal census data + const census1 = stripUnique( + JSON.parse(JSON.stringify(snapshot1.treeMap.report)) + ); + const census2 = stripUnique( + JSON.parse(JSON.stringify(snapshot2.treeMap.report)) + ); + + equal( + JSON.stringify(census1), + JSON.stringify(census2), + "Imported snapshot has correct census" + ); + + function stripUnique(obj) { + const children = obj.children || []; + for (const child of children) { + delete child.id; + delete child.parent; + stripUnique(child); + } + delete obj.id; + delete obj.parent; + return obj; + } +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-import-snapshot-dominator-tree.js b/devtools/client/memory/test/xpcshell/test_action-import-snapshot-dominator-tree.js new file mode 100644 index 0000000000..3c11268e94 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-import-snapshot-dominator-tree.js @@ -0,0 +1,100 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests `importSnapshotAndCensus()` when importing snapshots from the dominator + * tree view. The snapshot is expected to be loaded and its dominator tree + * should be computed. + */ + +const { + snapshotState, + dominatorTreeState, + viewState, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + importSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/io.js"); +const { + changeViewAndRefresh, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { subscribe, dispatch, getState } = store; + + dispatch(changeViewAndRefresh(viewState.DOMINATOR_TREE, heapWorker)); + equal( + getState().view.state, + viewState.DOMINATOR_TREE, + "We should now be in the DOMINATOR_TREE view" + ); + + let i = 0; + const expected = [ + "IMPORTING", + "READING", + "READ", + "treeMap:SAVING", + "treeMap:SAVED", + "dominatorTree:COMPUTING", + "dominatorTree:FETCHING", + "dominatorTree:LOADED", + ]; + const expectStates = () => { + const snapshot = getState().snapshots[0]; + if (snapshot && hasExpectedState(snapshot, expected[i])) { + ok(true, `Found expected state ${expected[i]}`); + i++; + } + }; + + const unsubscribe = subscribe(expectStates); + const snapshotPath = await front.saveHeapSnapshot(); + dispatch(importSnapshotAndCensus(heapWorker, snapshotPath)); + + await waitUntilState(store, () => i === expected.length); + unsubscribe(); + equal( + i, + expected.length, + "importSnapshotAndCensus() produces the correct " + + "sequence of states in a snapshot" + ); + equal( + getState().snapshots[0].dominatorTree.state, + dominatorTreeState.LOADED, + "imported snapshot's dominator tree is in LOADED state" + ); + ok(getState().snapshots[0].selected, "imported snapshot is selected"); +}); + +/** + * Check that the provided snapshot is in the expected state. The expected state + * is a snapshotState by default. If the expected state is prefixed by + * dominatorTree, a dominatorTree is expected on the provided snapshot, in the + * corresponding state from dominatorTreeState. + */ +function hasExpectedState(snapshot, expectedState) { + const isDominatorState = expectedState.indexOf("dominatorTree:") === 0; + if (isDominatorState) { + const state = + dominatorTreeState[expectedState.replace("dominatorTree:", "")]; + return snapshot.dominatorTree && snapshot.dominatorTree.state === state; + } + + const isTreeMapState = expectedState.indexOf("treeMap:") === 0; + if (isTreeMapState) { + const state = treeMapState[expectedState.replace("treeMap:", "")]; + return snapshot.treeMap && snapshot.treeMap.state === state; + } + + const state = snapshotState[expectedState]; + return snapshot.state === state; +} diff --git a/devtools/client/memory/test/xpcshell/test_action-select-snapshot.js b/devtools/client/memory/test/xpcshell/test_action-select-snapshot.js new file mode 100644 index 0000000000..f4abac423b --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-select-snapshot.js @@ -0,0 +1,46 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the reducer responding to the action `selectSnapshot(snapshot)` + */ + +const actions = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + snapshotState: states, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + await front.attach(); + const store = Store(); + + for (let i = 0; i < 5; i++) { + store.dispatch(actions.takeSnapshot(front)); + } + + await waitUntilState( + store, + ({ snapshots }) => snapshots.length === 5 && snapshots.every(isDone) + ); + + for (let i = 0; i < 5; i++) { + info(`Selecting snapshot[${i}]`); + store.dispatch(actions.selectSnapshot(store.getState().snapshots[i].id)); + await waitUntilState(store, ({ snapshots }) => snapshots[i].selected); + + const { snapshots } = store.getState(); + ok(snapshots[i].selected, `snapshot[${i}] selected`); + equal( + snapshots.filter(s => !s.selected).length, + 4, + "All other snapshots are unselected" + ); + } +}); + +function isDone(s) { + return s.state === states.SAVED; +} diff --git a/devtools/client/memory/test/xpcshell/test_action-set-display-and-refresh-01.js b/devtools/client/memory/test/xpcshell/test_action-set-display-and-refresh-01.js new file mode 100644 index 0000000000..6f1332c339 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-set-display-and-refresh-01.js @@ -0,0 +1,186 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the task creator `setCensusDisplayAndRefreshAndRefresh()` for display + * changing. We test this rather than `setCensusDisplayAndRefresh` directly, as + * we use the refresh action in the app itself composed from + * `setCensusDisplayAndRefresh`. + */ + +const { + censusDisplays, + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setCensusDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + takeSnapshotAndCensus, + selectSnapshotAndRefresh, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +// We test setting an invalid display, which triggers an assertion failure. +EXPECTED_DTU_ASSERT_FAILURE_COUNT = 1; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + // Test default display with no snapshots + equal( + getState().censusDisplay.breakdown.by, + "coarseType", + "default coarseType display selected at start." + ); + dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.allocationStack) + ); + equal( + getState().censusDisplay.breakdown.by, + "allocationStack", + "display changed with no snapshots" + ); + + // Test invalid displays + Assert.strictEqual( + getState().errors.length, + 0, + "No error actions in the queue." + ); + dispatch(setCensusDisplayAndRefresh(heapWorker, {})); + await waitUntilState(store, () => getState().errors.length === 1); + ok(true, "Emits an error action when passing in an invalid display object"); + + equal( + getState().censusDisplay.breakdown.by, + "allocationStack", + "current display unchanged when passing invalid display" + ); + + // Test new snapshots + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + ]); + + equal( + getState().snapshots[0].census.display, + censusDisplays.allocationStack, + "New snapshot's census uses correct display" + ); + + // Updates when changing display during `SAVING` + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVING, + ]); + dispatch(setCensusDisplayAndRefresh(heapWorker, censusDisplays.coarseType)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + ]); + equal( + getState().snapshots[1].census.display, + censusDisplays.coarseType, + "Changing display while saving a snapshot results " + + "in a census using the new display" + ); + + // Updates when changing display during `SAVING_CENSUS` + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVING, + ]); + dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.allocationStack) + ); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + equal( + getState().snapshots[2].census.display, + censusDisplays.allocationStack, + "Display can be changed while saving census, stores updated display in snapshot" + ); + + // Updates census on currently selected snapshot when changing display + ok(getState().snapshots[2].selected, "Third snapshot currently selected"); + dispatch(setCensusDisplayAndRefresh(heapWorker, censusDisplays.coarseType)); + await waitUntilState( + store, + state => state.snapshots[2].census.state === censusState.SAVING + ); + await waitUntilState( + store, + state => state.snapshots[2].census.state === censusState.SAVED + ); + equal( + getState().snapshots[2].census.display, + censusDisplays.coarseType, + "Snapshot census updated when changing displays " + + "after already generating one census" + ); + + dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.allocationStack) + ); + await waitUntilState( + store, + state => state.snapshots[2].census.state === censusState.SAVED + ); + equal( + getState().snapshots[2].census.display, + censusDisplays.allocationStack, + "Snapshot census updated when changing displays " + + "after already generating one census" + ); + + // Does not update unselected censuses. + ok(!getState().snapshots[1].selected, "Second snapshot selected currently"); + equal( + getState().snapshots[1].census.display, + censusDisplays.coarseType, + "Second snapshot using `coarseType` display still and " + + "not yet updated to correct display" + ); + + // Updates to current display when switching to stale snapshot. + dispatch(selectSnapshotAndRefresh(heapWorker, getState().snapshots[1].id)); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVING, + censusState.SAVED, + ]); + await waitUntilCensusState(store, snapshot => snapshot.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + + ok(getState().snapshots[1].selected, "Second snapshot selected currently"); + equal( + getState().snapshots[1].census.display, + censusDisplays.allocationStack, + "Second snapshot using `allocationStack` display and updated to correct display" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-set-display-and-refresh-02.js b/devtools/client/memory/test/xpcshell/test_action-set-display-and-refresh-02.js new file mode 100644 index 0000000000..2b2b91bc97 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-set-display-and-refresh-02.js @@ -0,0 +1,74 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the task creator `setCensusDisplayAndRefreshAndRefresh()` for custom + * displays. + */ + +const { + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setCensusDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const CUSTOM = { + displayName: "Custom", + tooltip: "Custom tooltip", + inverted: false, + breakdown: { + by: "internalType", + then: { by: "count", bytes: true, count: false }, + }, +}; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + dispatch(setCensusDisplayAndRefresh(heapWorker, CUSTOM)); + equal( + getState().censusDisplay, + CUSTOM, + "CUSTOM display stored in display state." + ); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + equal( + getState().snapshots[0].census.display, + CUSTOM, + "New snapshot stored CUSTOM display when done taking census" + ); + ok( + getState().snapshots[0].census.report.children.length, + "Census has some children" + ); + // Ensure we don't have `count` in any results + ok( + getState().snapshots[0].census.report.children.every(c => !c.count), + "Census used CUSTOM display without counts" + ); + // Ensure we do have `bytes` in the results + ok( + getState().snapshots[0].census.report.children.every( + c => typeof c.bytes === "number" + ), + "Census used CUSTOM display with bytes" + ); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-set-display.js b/devtools/client/memory/test/xpcshell/test_action-set-display.js new file mode 100644 index 0000000000..dfc14f609a --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-set-display.js @@ -0,0 +1,74 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the action creator `setCensusDisplay()` for display changing. Does not + * test refreshing the census information, check `setCensusDisplayAndRefresh` + * action for that. + */ + +const { + censusDisplays, + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setCensusDisplay, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +// We test setting an invalid display, which triggers an assertion failure. +EXPECTED_DTU_ASSERT_FAILURE_COUNT = 1; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + // Test default display with no snapshots + equal( + getState().censusDisplay.breakdown.by, + "coarseType", + "default coarseType display selected at start." + ); + + dispatch(setCensusDisplay(censusDisplays.allocationStack)); + equal( + getState().censusDisplay.breakdown.by, + "allocationStack", + "display changed with no snapshots" + ); + + // Test invalid displays + try { + dispatch(setCensusDisplay({})); + ok(false, "Throws when passing in an invalid display object"); + } catch (e) { + ok(true, "Throws when passing in an invalid display object"); + } + equal( + getState().censusDisplay.breakdown.by, + "allocationStack", + "current display unchanged when passing invalid display" + ); + + // Test new snapshots + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + equal( + getState().snapshots[0].census.display, + censusDisplays.allocationStack, + "New snapshots use the current, non-default display" + ); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-take-census.js b/devtools/client/memory/test/xpcshell/test_action-take-census.js new file mode 100644 index 0000000000..005208024b --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-take-census.js @@ -0,0 +1,70 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the async reducer responding to the action `takeCensus(heapWorker, snapshot)` + */ + +var { + snapshotState: states, + censusDisplays, + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +var actions = require("resource://devtools/client/memory/actions/snapshot.js"); +var { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +// This tests taking a census on a snapshot that is still being read, which +// triggers an assertion failure. +EXPECTED_DTU_ASSERT_FAILURE_COUNT = 1; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + + store.dispatch(changeView(viewState.CENSUS)); + + store.dispatch(actions.takeSnapshot(front)); + await waitUntilState(store, () => { + const snapshots = store.getState().snapshots; + return snapshots.length === 1 && snapshots[0].state === states.SAVED; + }); + + let snapshot = store.getState().snapshots[0]; + equal(snapshot.census, null, "No census data exists yet on the snapshot."); + + // Test error case of wrong state. + store.dispatch(actions.takeCensus(heapWorker, snapshot.id)); + await waitUntilState(store, () => store.getState().errors.length === 1); + + dumpn("Found error: " + store.getState().errors[0]); + ok( + /Assertion failure/.test(store.getState().errors[0]), + "Error thrown when taking a census of a snapshot that has not been read." + ); + + store.dispatch(actions.readSnapshot(heapWorker, snapshot.id)); + await waitUntilState( + store, + () => store.getState().snapshots[0].state === states.READ + ); + + store.dispatch(actions.takeCensus(heapWorker, snapshot.id)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVING]); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + snapshot = store.getState().snapshots[0]; + ok(snapshot.census, "Snapshot has census after saved census"); + ok(snapshot.census.report.children.length, "Census is in tree node form"); + equal( + snapshot.census.display, + censusDisplays.coarseType, + "Snapshot stored correct display used for the census" + ); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-take-snapshot-and-census.js b/devtools/client/memory/test/xpcshell/test_action-take-snapshot-and-census.js new file mode 100644 index 0000000000..ce7d166aca --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-take-snapshot-and-census.js @@ -0,0 +1,65 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the task creator `takeSnapshotAndCensus()` for the whole flow of + * taking a snapshot, and its sub-actions. + */ + +const { + snapshotState: states, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const actions = require("resource://devtools/client/memory/actions/snapshot.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + + let snapshotI = 0; + let censusI = 0; + const snapshotStates = ["SAVING", "SAVED", "READING", "READ"]; + const censusStates = ["SAVING", "SAVED"]; + const expectStates = () => { + const snapshot = store.getState().snapshots[0]; + if (!snapshot) { + return; + } + if (snapshotI < snapshotStates.length) { + const isCorrectState = + snapshot.state === states[snapshotStates[snapshotI]]; + if (isCorrectState) { + ok(true, `Found expected snapshot state ${snapshotStates[snapshotI]}`); + snapshotI++; + } + } + if (snapshot.treeMap && censusI < censusStates.length) { + if (snapshot.treeMap.state === treeMapState[censusStates[censusI]]) { + ok(true, `Found expected census state ${censusStates[censusI]}`); + censusI++; + } + } + }; + + const unsubscribe = store.subscribe(expectStates); + store.dispatch(actions.takeSnapshotAndCensus(front, heapWorker)); + + await waitUntilState(store, () => { + return ( + snapshotI === snapshotStates.length && censusI === censusStates.length + ); + }); + unsubscribe(); + + ok( + true, + "takeSnapshotAndCensus() produces the correct sequence of states in a snapshot" + ); + const snapshot = store.getState().snapshots[0]; + ok(snapshot.treeMap, "snapshot has tree map census data"); + ok(snapshot.selected, "snapshot is selected"); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-take-snapshot.js b/devtools/client/memory/test/xpcshell/test_action-take-snapshot.js new file mode 100644 index 0000000000..e8bd46898c --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-take-snapshot.js @@ -0,0 +1,61 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the async reducer responding to the action `takeSnapshot(front)` + */ + +const actions = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + snapshotState: states, +} = require("resource://devtools/client/memory/constants.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + await front.attach(); + const store = Store(); + + const unsubscribe = store.subscribe(checkState); + + let foundPendingState = false; + let foundDoneState = false; + + function checkState() { + const { snapshots } = store.getState(); + const lastSnapshot = snapshots[snapshots.length - 1]; + + if (lastSnapshot.state === states.SAVING) { + foundPendingState = true; + ok( + foundPendingState, + "Got state change for pending heap snapshot request" + ); + ok(!lastSnapshot.path, "Snapshot does not yet have a path"); + ok(!lastSnapshot.census, "Has no census data when loading"); + } else if (lastSnapshot.state === states.SAVED) { + foundDoneState = true; + ok( + foundDoneState, + "Got state change for completed heap snapshot request" + ); + ok(foundPendingState, "SAVED state occurs after SAVING state"); + ok(lastSnapshot.path, "Snapshot fetched with a path"); + ok( + snapshots.every(s => s.selected === (s.id === lastSnapshot.id)), + "Only recent snapshot is selected" + ); + } + } + + for (let i = 0; i < 4; i++) { + store.dispatch(actions.takeSnapshot(front)); + await waitUntilState(store, () => foundPendingState && foundDoneState); + + // reset state trackers + foundDoneState = foundPendingState = false; + } + + unsubscribe(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-toggle-inverted-and-refresh-01.js b/devtools/client/memory/test/xpcshell/test_action-toggle-inverted-and-refresh-01.js new file mode 100644 index 0000000000..6744390ecd --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-toggle-inverted-and-refresh-01.js @@ -0,0 +1,98 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that changing displays with different inverted state properly +// refreshes the selected census. + +const { + censusDisplays, + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setCensusDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + takeSnapshotAndCensus, + selectSnapshotAndRefresh, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + // Select a non-inverted display. + dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.allocationStack) + ); + equal(getState().censusDisplay.inverted, false, "not inverted by default"); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + + await waitUntilCensusState(store, s => s.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + ok(true, "saved 3 snapshots and took a census of each of them"); + + // Select an inverted display. + dispatch( + setCensusDisplayAndRefresh( + heapWorker, + censusDisplays.invertedAllocationStack + ) + ); + + await waitUntilCensusState(store, s => s.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVING, + ]); + ok(true, "toggling inverted should recompute the selected snapshot's census"); + + equal(getState().censusDisplay.inverted, true, "now inverted"); + + await waitUntilCensusState(store, s => s.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + + equal(getState().snapshots[0].census.display.inverted, false); + equal(getState().snapshots[1].census.display.inverted, false); + equal(getState().snapshots[2].census.display.inverted, true); + + dispatch(selectSnapshotAndRefresh(heapWorker, getState().snapshots[1].id)); + await waitUntilCensusState(store, s => s.census, [ + censusState.SAVED, + censusState.SAVING, + censusState.SAVED, + ]); + ok(true, "selecting non-inverted census should trigger a recompute"); + + await waitUntilCensusState(store, s => s.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + + equal(getState().snapshots[0].census.display.inverted, false); + equal(getState().snapshots[1].census.display.inverted, true); + equal(getState().snapshots[2].census.display.inverted, true); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-toggle-inverted-and-refresh-02.js b/devtools/client/memory/test/xpcshell/test_action-toggle-inverted-and-refresh-02.js new file mode 100644 index 0000000000..7047f6410e --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-toggle-inverted-and-refresh-02.js @@ -0,0 +1,82 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that changing inverted state in the middle of taking a snapshot results +// in an inverted census. + +const { + censusDisplays, + snapshotState: states, + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + setCensusDisplay, + setCensusDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + dispatch(setCensusDisplay(censusDisplays.allocationStack)); + equal( + getState().censusDisplay.inverted, + false, + "Should not have an inverted census display" + ); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilSnapshotState(store, [states.SAVING]); + + dispatch( + setCensusDisplayAndRefresh( + heapWorker, + censusDisplays.invertedAllocationStack + ) + ); + + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + ok(getState().censusDisplay.inverted, "should want inverted trees"); + ok( + getState().snapshots[0].census.display.inverted, + "snapshot-we-were-in-the-middle-of-saving's census should be inverted" + ); + + dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.allocationStack) + ); + await waitUntilCensusState(store, s => s.census, [censusState.SAVING]); + ok(true, "toggling inverted retriggers census"); + ok(!getState().censusDisplay.inverted, "no longer inverted"); + + dispatch( + setCensusDisplayAndRefresh( + heapWorker, + censusDisplays.invertedAllocationStack + ) + ); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + ok(getState().censusDisplay.inverted, "inverted again"); + ok( + getState().snapshots[0].census.display.inverted, + "census-we-were-in-the-middle-of-recomputing should be inverted again" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-toggle-inverted.js b/devtools/client/memory/test/xpcshell/test_action-toggle-inverted.js new file mode 100644 index 0000000000..8d946303fa --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-toggle-inverted.js @@ -0,0 +1,31 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test toggling the top level inversion state of the tree. + +const { + censusDisplays, +} = require("resource://devtools/client/memory/constants.js"); +const { + setCensusDisplay, +} = require("resource://devtools/client/memory/actions/census-display.js"); + +add_task(async function () { + const store = Store(); + const { getState, dispatch } = store; + + dispatch(setCensusDisplay(censusDisplays.allocationStack)); + equal(getState().censusDisplay.inverted, false, "not inverted initially"); + + dispatch(setCensusDisplay(censusDisplays.invertedAllocationStack)); + equal(getState().censusDisplay.inverted, true, "now inverted after toggling"); + + dispatch(setCensusDisplay(censusDisplays.allocationStack)); + equal( + getState().censusDisplay.inverted, + false, + "not inverted again after toggling again" + ); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action-toggle-recording-allocations.js b/devtools/client/memory/test/xpcshell/test_action-toggle-recording-allocations.js new file mode 100644 index 0000000000..9ff428b093 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action-toggle-recording-allocations.js @@ -0,0 +1,53 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Test toggling the recording of allocation stacks. + */ + +const { + toggleRecordingAllocationStacks, +} = require("resource://devtools/client/memory/actions/allocations.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + await front.attach(); + // Implement the minimal mock, doing nothing to make toggleRecordingAllocationStacks pass + const commands = { + targetCommand: { + hasTargetWatcherSupport() { + return true; + }, + }, + targetConfigurationCommand: { + updateConfiguration() {}, + }, + }; + const store = Store(); + const { getState, dispatch } = store; + + equal(getState().allocations.recording, false, "not recording by default"); + equal( + getState().allocations.togglingInProgress, + false, + "not in the process of toggling by default" + ); + + dispatch(toggleRecordingAllocationStacks(commands)); + await waitUntilState(store, () => getState().allocations.togglingInProgress); + ok(true, "`togglingInProgress` set to true when toggling on"); + await waitUntilState(store, () => !getState().allocations.togglingInProgress); + + equal(getState().allocations.recording, true, "now we are recording"); + + dispatch(toggleRecordingAllocationStacks(commands)); + await waitUntilState(store, () => getState().allocations.togglingInProgress); + ok(true, "`togglingInProgress` set to true when toggling off"); + await waitUntilState(store, () => !getState().allocations.togglingInProgress); + + equal(getState().allocations.recording, false, "now we are not recording"); + + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action_diffing_01.js b/devtools/client/memory/test/xpcshell/test_action_diffing_01.js new file mode 100644 index 0000000000..ede92d0ed7 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action_diffing_01.js @@ -0,0 +1,29 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test toggling of diffing. + +const { + toggleDiffing, +} = require("resource://devtools/client/memory/actions/diffing.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + equal(getState().diffing, null, "not diffing by default"); + + dispatch(toggleDiffing()); + ok(getState().diffing, "now diffing after toggling"); + + dispatch(toggleDiffing()); + equal(getState().diffing, null, "not diffing again after toggling again"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action_diffing_02.js b/devtools/client/memory/test/xpcshell/test_action_diffing_02.js new file mode 100644 index 0000000000..b0c4f21fc1 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action_diffing_02.js @@ -0,0 +1,59 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that toggling diffing unselects all snapshots. + +const { + censusState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + toggleDiffing, +} = require("resource://devtools/client/memory/actions/diffing.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + equal(getState().diffing, null, "not diffing by default"); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [ + censusState.SAVED, + censusState.SAVED, + censusState.SAVED, + ]); + + ok( + getState().snapshots.some(s => s.selected), + "One of the new snapshots is selected" + ); + + dispatch(toggleDiffing()); + ok(getState().diffing, "now diffing after toggling"); + + for (const s of getState().snapshots) { + ok( + !s.selected, + "No snapshot should be selected after entering diffing mode" + ); + } + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action_diffing_03.js b/devtools/client/memory/test/xpcshell/test_action_diffing_03.js new file mode 100644 index 0000000000..8db0e8568b --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action_diffing_03.js @@ -0,0 +1,147 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test selecting snapshots for diffing. + +const { + diffingState, + snapshotState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + toggleDiffing, + selectSnapshotForDiffing, +} = require("resource://devtools/client/memory/actions/diffing.js"); +const { + takeSnapshot, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +// We test that you (1) cannot select a snapshot that is not in a diffable +// state, and (2) cannot select more than 2 snapshots for diffing. Both attempts +// trigger assertion failures. +EXPECTED_DTU_ASSERT_FAILURE_COUNT = 2; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + equal(getState().diffing, null, "not diffing by default"); + + dispatch(takeSnapshot(front, heapWorker)); + dispatch(takeSnapshot(front, heapWorker)); + dispatch(takeSnapshot(front, heapWorker)); + + await waitUntilSnapshotState(store, [ + snapshotState.SAVED, + snapshotState.SAVED, + snapshotState.SAVED, + ]); + dispatch(takeSnapshot(front)); + + // Start diffing. + dispatch(toggleDiffing()); + ok(getState().diffing, "now diffing after toggling"); + equal(getState().diffing.firstSnapshotId, null, "no first snapshot selected"); + equal( + getState().diffing.secondSnapshotId, + null, + "no second snapshot selected" + ); + equal( + getState().diffing.state, + diffingState.SELECTING, + "should be in diffing state SELECTING" + ); + + // Can't select a snapshot that is not in a diffable state. + equal( + getState().snapshots[3].state, + snapshotState.SAVING, + "the last snapshot is still in the process of being saved" + ); + dumpn("Expecting exception:"); + let threw = false; + try { + dispatch(selectSnapshotForDiffing(getState().snapshots[3])); + } catch (error) { + threw = true; + } + ok( + threw, + "Should not be able to select snapshots that aren't ready for diffing" + ); + + // Select first snapshot for diffing. + dispatch(selectSnapshotForDiffing(getState().snapshots[0])); + ok(getState().diffing, "now diffing after toggling"); + equal( + getState().diffing.firstSnapshotId, + getState().snapshots[0].id, + "first snapshot selected" + ); + equal( + getState().diffing.secondSnapshotId, + null, + "no second snapshot selected" + ); + equal( + getState().diffing.state, + diffingState.SELECTING, + "should still be in diffing state SELECTING" + ); + + // Can't diff first snapshot with itself; this is a noop. + dispatch(selectSnapshotForDiffing(getState().snapshots[0])); + ok(getState().diffing, "still diffing"); + equal( + getState().diffing.firstSnapshotId, + getState().snapshots[0].id, + "first snapshot still selected" + ); + equal( + getState().diffing.secondSnapshotId, + null, + "still no second snapshot selected" + ); + equal( + getState().diffing.state, + diffingState.SELECTING, + "should still be in diffing state SELECTING" + ); + + // Select second snapshot for diffing. + dispatch(selectSnapshotForDiffing(getState().snapshots[1])); + ok(getState().diffing, "still diffing"); + equal( + getState().diffing.firstSnapshotId, + getState().snapshots[0].id, + "first snapshot still selected" + ); + equal( + getState().diffing.secondSnapshotId, + getState().snapshots[1].id, + "second snapshot selected" + ); + + // Can't select more than two snapshots for diffing. + dumpn("Expecting exception:"); + threw = false; + try { + dispatch(selectSnapshotForDiffing(getState().snapshots[2])); + } catch (error) { + threw = true; + } + ok(threw, "Can't select more than two snapshots for diffing"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action_diffing_04.js b/devtools/client/memory/test/xpcshell/test_action_diffing_04.js new file mode 100644 index 0000000000..92a57276bb --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action_diffing_04.js @@ -0,0 +1,101 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we compute census diffs. + +const { + diffingState, + snapshotState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + toggleDiffing, + selectSnapshotForDiffingAndRefresh, +} = require("resource://devtools/client/memory/actions/diffing.js"); +const { + takeSnapshot, + readSnapshot, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + dispatch(changeView(viewState.CENSUS)); + + equal(getState().diffing, null, "not diffing by default"); + + const s1 = await dispatch(takeSnapshot(front, heapWorker)); + const s2 = await dispatch(takeSnapshot(front, heapWorker)); + const s3 = await dispatch(takeSnapshot(front, heapWorker)); + dispatch(readSnapshot(heapWorker, s1)); + dispatch(readSnapshot(heapWorker, s2)); + dispatch(readSnapshot(heapWorker, s3)); + await waitUntilSnapshotState(store, [ + snapshotState.READ, + snapshotState.READ, + snapshotState.READ, + ]); + + dispatch(toggleDiffing()); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[0]) + ); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[1]) + ); + + ok(getState().diffing, "We should be diffing."); + equal( + getState().diffing.firstSnapshotId, + getState().snapshots[0].id, + "First snapshot selected." + ); + equal( + getState().diffing.secondSnapshotId, + getState().snapshots[1].id, + "Second snapshot selected." + ); + + await waitUntilState( + store, + state => state.diffing.state === diffingState.TAKING_DIFF + ); + ok( + true, + "Selecting two snapshots for diffing should trigger computing a diff." + ); + + await waitUntilState( + store, + state => state.diffing.state === diffingState.TOOK_DIFF + ); + ok(true, "And then the diff should complete."); + ok(getState().diffing.census, "And we should have a census."); + ok(getState().diffing.census.report, "And that census should have a report."); + equal( + getState().diffing.census.display, + getState().censusDisplay, + "And that census should have the correct display" + ); + equal( + getState().diffing.census.filter, + getState().filter, + "And that census should have the correct filter" + ); + equal( + getState().diffing.census.display.inverted, + getState().censusDisplay.inverted, + "And that census should have the correct inversion" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_action_diffing_05.js b/devtools/client/memory/test/xpcshell/test_action_diffing_05.js new file mode 100644 index 0000000000..885ae5c1d4 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_action_diffing_05.js @@ -0,0 +1,134 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we recompute census diffs at the appropriate times. + +const { + diffingState, + snapshotState, + censusDisplays, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setCensusDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + toggleDiffing, + selectSnapshotForDiffingAndRefresh, +} = require("resource://devtools/client/memory/actions/diffing.js"); +const { + setFilterStringAndRefresh, +} = require("resource://devtools/client/memory/actions/filter.js"); +const { + takeSnapshot, + readSnapshot, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + dispatch(changeView(viewState.CENSUS)); + + await dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.allocationStack) + ); + equal(getState().censusDisplay.inverted, false, "not inverted at start"); + + equal(getState().diffing, null, "not diffing by default"); + + const s1 = await dispatch(takeSnapshot(front, heapWorker)); + const s2 = await dispatch(takeSnapshot(front, heapWorker)); + const s3 = await dispatch(takeSnapshot(front, heapWorker)); + dispatch(readSnapshot(heapWorker, s1)); + dispatch(readSnapshot(heapWorker, s2)); + dispatch(readSnapshot(heapWorker, s3)); + await waitUntilSnapshotState(store, [ + snapshotState.READ, + snapshotState.READ, + snapshotState.READ, + ]); + + await dispatch(toggleDiffing()); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[0]) + ); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[1]) + ); + await waitUntilState( + store, + state => state.diffing.state === diffingState.TOOK_DIFF + ); + + const shouldTriggerRecompute = [ + { + name: "toggling inversion", + func: () => + dispatch( + setCensusDisplayAndRefresh( + heapWorker, + censusDisplays.invertedAllocationStack + ) + ), + }, + { + name: "filtering", + func: () => dispatch(setFilterStringAndRefresh("scr", heapWorker)), + }, + { + name: "changing displays", + func: () => + dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.coarseType) + ), + }, + ]; + + for (const { name, func } of shouldTriggerRecompute) { + dumpn(`Testing that "${name}" triggers a diff recompute`); + func(); + + await waitUntilState( + store, + state => state.diffing.state === diffingState.TAKING_DIFF + ); + ok(true, "triggered diff recompute."); + + await waitUntilState( + store, + state => state.diffing.state === diffingState.TOOK_DIFF + ); + ok(true, "And then the diff should complete."); + ok(getState().diffing.census, "And we should have a census."); + ok( + getState().diffing.census.report, + "And that census should have a report." + ); + equal( + getState().diffing.census.display, + getState().censusDisplay, + "And that census should have the correct display" + ); + equal( + getState().diffing.census.filter, + getState().filter, + "And that census should have the correct filter" + ); + equal( + getState().diffing.census.display.inverted, + getState().censusDisplay.inverted, + "And that census should have the correct inversion" + ); + } + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_01.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_01.js new file mode 100644 index 0000000000..9b8bbb2533 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_01.js @@ -0,0 +1,79 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we can compute and fetch the dominator tree for a snapshot. + +const { + dominatorTreeState, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, + computeAndFetchDominatorTree, +} = require("resource://devtools/client/memory/actions/snapshot.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.treeMap, [treeMapState.SAVED]); + ok( + !getState().snapshots[0].dominatorTree, + "There shouldn't be a dominator tree model yet since it is not computed " + + "until we switch to the dominators view." + ); + + // Change to the dominator tree view. + dispatch( + computeAndFetchDominatorTree(heapWorker, getState().snapshots[0].id) + ); + ok( + getState().snapshots[0].dominatorTree, + "Should now have a dominator tree model for the selected snapshot" + ); + + // Wait for the dominator tree to start being computed. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.COMPUTING + ); + ok(true, "The dominator tree started computing"); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is computing, we should not have its root" + ); + + // Wait for the dominator tree to finish computing and start being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.FETCHING + ); + ok(true, "The dominator tree started fetching"); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is fetching, we should not have its root" + ); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The dominator tree was fetched"); + ok( + getState().snapshots[0].dominatorTree.root, + "When the dominator tree is loaded, we should have its root" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_02.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_02.js new file mode 100644 index 0000000000..eb38591286 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_02.js @@ -0,0 +1,80 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that selecting the dominator tree view automatically kicks off fetching +// and computing dominator trees. + +const { + dominatorTreeState, + viewState, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeViewAndRefresh, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.treeMap, [treeMapState.SAVED]); + ok( + !getState().snapshots[0].dominatorTree, + "There shouldn't be a dominator tree model yet since it is not computed " + + "until we switch to the dominators view." + ); + + dispatch(changeViewAndRefresh(viewState.DOMINATOR_TREE, heapWorker)); + ok( + getState().snapshots[0].dominatorTree, + "Should now have a dominator tree model for the selected snapshot" + ); + + // Wait for the dominator tree to start being computed. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.COMPUTING + ); + ok(true, "The dominator tree started computing"); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is computing, we should not have its root" + ); + + // Wait for the dominator tree to finish computing and start being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.FETCHING + ); + ok(true, "The dominator tree started fetching"); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is fetching, we should not have its root" + ); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The dominator tree was fetched"); + ok( + getState().snapshots[0].dominatorTree.root, + "When the dominator tree is loaded, we should have its root" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_03.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_03.js new file mode 100644 index 0000000000..e46c1969c6 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_03.js @@ -0,0 +1,77 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that selecting the dominator tree view and then taking a snapshot +// properly kicks off fetching and computing dominator trees. + +const { + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + equal( + getState().view.state, + viewState.DOMINATOR_TREE, + "We should now be in the DOMINATOR_TREE view" + ); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + + // Wait for the dominator tree to start being computed. + await waitUntilState( + store, + state => state.snapshots[0] && state.snapshots[0].dominatorTree + ); + equal( + getState().snapshots[0].dominatorTree.state, + dominatorTreeState.COMPUTING, + "The dominator tree started computing" + ); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is computing, we should not have its root" + ); + + // Wait for the dominator tree to finish computing and start being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.FETCHING + ); + ok(true, "The dominator tree started fetching"); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is fetching, we should not have its root" + ); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The dominator tree was fetched"); + ok( + getState().snapshots[0].dominatorTree.root, + "When the dominator tree is loaded, we should have its root" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_04.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_04.js new file mode 100644 index 0000000000..d9814590a9 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_04.js @@ -0,0 +1,91 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that selecting the dominator tree view while in the middle of taking a +// snapshot properly kicks off fetching and computing dominator trees. + +const { + snapshotState: states, + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + + for (const intermediateSnapshotState of [ + states.SAVING, + states.READING, + states.READ, + ]) { + dumpn( + "Testing switching to the DOMINATOR_TREE view in the middle of the " + + `${intermediateSnapshotState} snapshot state` + ); + + const store = Store(); + const { getState, dispatch } = store; + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilSnapshotState(store, [intermediateSnapshotState]); + + dispatch(changeView(viewState.DOMINATOR_TREE)); + equal( + getState().view.state, + viewState.DOMINATOR_TREE, + "We should now be in the DOMINATOR_TREE view" + ); + + // Wait for the dominator tree to start being computed. + await waitUntilState( + store, + state => state.snapshots[0] && state.snapshots[0].dominatorTree + ); + equal( + getState().snapshots[0].dominatorTree.state, + dominatorTreeState.COMPUTING, + "The dominator tree started computing" + ); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is computing, we should not have its root" + ); + + // Wait for the dominator tree to finish computing and start being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.FETCHING + ); + ok(true, "The dominator tree started fetching"); + ok( + !getState().snapshots[0].dominatorTree.root, + "When the dominator tree is fetching, we should not have its root" + ); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The dominator tree was fetched"); + ok( + getState().snapshots[0].dominatorTree.root, + "When the dominator tree is loaded, we should have its root" + ); + } + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_05.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_05.js new file mode 100644 index 0000000000..7f6ed31bb3 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_05.js @@ -0,0 +1,66 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that changing the currently selected snapshot to a snapshot that does +// not have a dominator tree will automatically compute and fetch one for it. + +const { + dominatorTreeState, + viewState, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, + selectSnapshotAndRefresh, +} = require("resource://devtools/client/memory/actions/snapshot.js"); + +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.treeMap, [ + treeMapState.SAVED, + treeMapState.SAVED, + ]); + + ok(getState().snapshots[1].selected, "The second snapshot is selected"); + + // Change to the dominator tree view. + dispatch(changeView(viewState.DOMINATOR_TREE)); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[1].dominatorTree && + state.snapshots[1].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The second snapshot's dominator tree was fetched"); + + // Select the first snapshot. + dispatch(selectSnapshotAndRefresh(heapWorker, getState().snapshots[0].id)); + + // And now the first snapshot should have its dominator tree fetched and + // computed because of the new selection. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The first snapshot's dominator tree was fetched"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_06.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_06.js new file mode 100644 index 0000000000..7caffb972e --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_06.js @@ -0,0 +1,161 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we can incrementally fetch a subtree of a dominator tree. + +const { + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, + fetchImmediatelyDominated, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const DominatorTreeLazyChildren = require("resource://devtools/client/memory/dominator-tree-lazy-children.js"); + +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok( + getState().snapshots[0].dominatorTree.root, + "The dominator tree was fetched" + ); + + // Find a node that has children, but none of them are loaded. + + function findNode(node) { + if (node.moreChildrenAvailable && !node.children) { + return node; + } + + if (node.children) { + for (const child of node.children) { + const found = findNode(child); + if (found) { + return found; + } + } + } + + return null; + } + + const oldRoot = getState().snapshots[0].dominatorTree.root; + const oldNode = findNode(oldRoot); + ok( + oldNode, + "Should have found a node with children that are not loaded since we " + + "only send partial dominator trees across initially and load the rest " + + "on demand" + ); + Assert.notStrictEqual( + oldNode, + oldRoot, + "But the node should not be the root" + ); + + const lazyChildren = new DominatorTreeLazyChildren(oldNode.nodeId, 0); + dispatch( + fetchImmediatelyDominated( + heapWorker, + getState().snapshots[0].id, + lazyChildren + ) + ); + + equal( + getState().snapshots[0].dominatorTree.state, + dominatorTreeState.INCREMENTAL_FETCHING, + "Fetching immediately dominated children should put us in the " + + "INCREMENTAL_FETCHING state" + ); + + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok( + true, + "The dominator tree should go back to LOADED after the incremental " + + "fetching is done." + ); + + const newRoot = getState().snapshots[0].dominatorTree.root; + Assert.notStrictEqual( + oldRoot, + newRoot, + "When we insert new nodes, we get a new tree" + ); + equal( + oldRoot.children.length, + newRoot.children.length, + "The new tree's root should have the same number of children as the " + + "old root's" + ); + + let differentChildrenCount = 0; + for (let i = 0; i < oldRoot.children.length; i++) { + if (oldRoot.children[i] !== newRoot.children[i]) { + differentChildrenCount++; + } + } + equal( + differentChildrenCount, + 1, + "All subtrees except the subtree we inserted incrementally fetched " + + "children into should be the same because we use persistent updates" + ); + + // Find the new node which has the children inserted. + + function findNewNode(node) { + if (node.nodeId === oldNode.nodeId) { + return node; + } + + if (node.children) { + for (const child of node.children) { + const found = findNewNode(child); + if (found) { + return found; + } + } + } + + return null; + } + + const newNode = findNewNode(newRoot); + ok(newNode, "Should find the node in the new tree again"); + Assert.notStrictEqual( + newNode, + oldNode, + "We did not mutate the old node in place, instead created a new node" + ); + ok(newNode.children, "And the new node should have the children attached"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_07.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_07.js new file mode 100644 index 0000000000..21fda9d951 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_07.js @@ -0,0 +1,181 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we can incrementally fetch two subtrees in the same dominator tree +// concurrently. This exercises the activeFetchRequestCount machinery. + +const { + dominatorTreeState, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, + fetchImmediatelyDominated, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const DominatorTreeLazyChildren = require("resource://devtools/client/memory/dominator-tree-lazy-children.js"); + +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok( + getState().snapshots[0].dominatorTree.root, + "The dominator tree was fetched" + ); + + // Find a node that has more children. + + function findNode(node) { + if (node.moreChildrenAvailable && !node.children) { + return node; + } + + if (node.children) { + for (const child of node.children) { + const found = findNode(child); + if (found) { + return found; + } + } + } + + return null; + } + + const oldRoot = getState().snapshots[0].dominatorTree.root; + const oldNode = findNode(oldRoot); + ok(oldNode, "Should have found a node with more children."); + + // Find another node that has more children. + function findNodeRev(node) { + if (node.moreChildrenAvailable && !node.children) { + return node; + } + + if (node.children) { + for (const child of node.children.slice().reverse()) { + const found = findNodeRev(child); + if (found) { + return found; + } + } + } + + return null; + } + + const oldNode2 = findNodeRev(oldRoot); + ok(oldNode2, "Should have found another node with more children."); + Assert.notStrictEqual( + oldNode, + oldNode2, + "The second node should not be the same as the first one" + ); + + // Fetch both subtrees concurrently. + dispatch( + fetchImmediatelyDominated( + heapWorker, + getState().snapshots[0].id, + new DominatorTreeLazyChildren(oldNode.nodeId, 0) + ) + ); + dispatch( + fetchImmediatelyDominated( + heapWorker, + getState().snapshots[0].id, + new DominatorTreeLazyChildren(oldNode2.nodeId, 0) + ) + ); + + equal( + getState().snapshots[0].dominatorTree.state, + dominatorTreeState.INCREMENTAL_FETCHING, + "Fetching immediately dominated children should put us in the " + + "INCREMENTAL_FETCHING state" + ); + + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok( + true, + "The dominator tree should go back to LOADED after the incremental " + + "fetching is done." + ); + + const newRoot = getState().snapshots[0].dominatorTree.root; + Assert.notStrictEqual( + oldRoot, + newRoot, + "When we insert new nodes, we get a new tree" + ); + + // Find the new node which has the children inserted. + + function findNodeWithId(id, node) { + if (node.nodeId === id) { + return node; + } + + if (node.children) { + for (const child of node.children) { + const found = findNodeWithId(id, child); + if (found) { + return found; + } + } + } + + return null; + } + + const newNode = findNodeWithId(oldNode.nodeId, newRoot); + ok(newNode, "Should find the node in the new tree again"); + Assert.notStrictEqual( + newNode, + oldNode, + "We did not mutate the old node in place, instead created a new node" + ); + ok( + newNode.children.length, + "And the new node should have the new children attached" + ); + + const newNode2 = findNodeWithId(oldNode2.nodeId, newRoot); + ok(newNode2, "Should find the second node in the new tree again"); + Assert.notStrictEqual( + newNode2, + oldNode2, + "We did not mutate the second old node in place, instead created a new node" + ); + ok( + newNode2.children, + "And the new node should have the new children attached" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_08.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_08.js new file mode 100644 index 0000000000..e61c8b66b8 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_08.js @@ -0,0 +1,100 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we can change the display with which we describe a dominator tree +// and that the dominator tree is re-fetched. + +const { + dominatorTreeState, + viewState, + labelDisplays, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setLabelDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/label-display.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.treeMap, [treeMapState.SAVED]); + ok( + !getState().snapshots[0].dominatorTree, + "There shouldn't be a dominator tree model yet since it is not computed " + + "until we switch to the dominators view." + ); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + + ok( + getState().labelDisplay, + "We have a default display for describing nodes in a dominator tree" + ); + equal( + getState().labelDisplay, + labelDisplays.coarseType, + "and the default is coarse type" + ); + equal( + getState().labelDisplay, + getState().snapshots[0].dominatorTree.display, + "and the newly computed dominator tree has that display" + ); + + // Switch to the allocationStack display. + dispatch( + setLabelDisplayAndRefresh(heapWorker, labelDisplays.allocationStack) + ); + + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.FETCHING + ); + ok( + true, + "switching display types caused the dominator tree to be fetched " + + "again." + ); + + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + equal( + getState().snapshots[0].dominatorTree.display, + labelDisplays.allocationStack, + "The new dominator tree's display is allocationStack" + ); + equal( + getState().labelDisplay, + labelDisplays.allocationStack, + "as is our requested dominator tree display" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_09.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_09.js new file mode 100644 index 0000000000..b87964970e --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_09.js @@ -0,0 +1,92 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we can change the display with which we describe a dominator tree +// while the dominator tree is in the middle of being fetched. + +const { + dominatorTreeState, + viewState, + labelDisplays, + treeMapState, +} = require("resource://devtools/client/memory/constants.js"); +const { + setLabelDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/label-display.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.treeMap, [treeMapState.SAVED]); + ok( + !getState().snapshots[0].dominatorTree, + "There shouldn't be a dominator tree model yet since it is not computed " + + "until we switch to the dominators view." + ); + + // Wait for the dominator tree to start fetching. + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.state === dominatorTreeState.FETCHING + ); + + ok( + getState().labelDisplay, + "We have a default display for describing nodes in a dominator tree" + ); + equal( + getState().labelDisplay, + labelDisplays.coarseType, + "and the default is coarse type" + ); + equal( + getState().labelDisplay, + getState().snapshots[0].dominatorTree.display, + "and the newly computed dominator tree has that display" + ); + + // Switch to the allocationStack display while we are still fetching the + // dominator tree. + dispatch( + setLabelDisplayAndRefresh(heapWorker, labelDisplays.allocationStack) + ); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + + equal( + getState().snapshots[0].dominatorTree.display, + labelDisplays.allocationStack, + "The new dominator tree's display is allocationStack" + ); + equal( + getState().labelDisplay, + labelDisplays.allocationStack, + "as is our requested dominator tree display" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_dominator_trees_10.js b/devtools/client/memory/test/xpcshell/test_dominator_trees_10.js new file mode 100644 index 0000000000..f6dc791461 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_dominator_trees_10.js @@ -0,0 +1,95 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that we maintain focus of the selected dominator tree node across +// changing breakdowns for labeling them. + +const { + dominatorTreeState, + labelDisplays, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { + takeSnapshotAndCensus, + focusDominatorTreeNode, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); +const { + setLabelDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/label-display.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.DOMINATOR_TREE)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + + // Wait for the dominator tree to finish being fetched. + await waitUntilState( + store, + state => + state.snapshots[0] && + state.snapshots[0].dominatorTree && + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The dominator tree was fetched"); + + const root = getState().snapshots[0].dominatorTree.root; + ok(root, "When the dominator tree is loaded, we should have its root"); + + dispatch(focusDominatorTreeNode(getState().snapshots[0].id, root)); + equal( + root, + getState().snapshots[0].dominatorTree.focused, + "The root should be focused." + ); + + equal( + getState().labelDisplay, + labelDisplays.coarseType, + "Using labelDisplays.coarseType by default" + ); + dispatch( + setLabelDisplayAndRefresh(heapWorker, labelDisplays.allocationStack) + ); + equal( + getState().labelDisplay, + labelDisplays.allocationStack, + "Using labelDisplays.allocationStack now" + ); + + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.FETCHING + ); + ok(true, "We started re-fetching the dominator tree"); + + await waitUntilState( + store, + state => + state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED + ); + ok(true, "The dominator tree was loaded again"); + + ok( + getState().snapshots[0].dominatorTree.focused, + "Still have a focused node" + ); + equal( + getState().snapshots[0].dominatorTree.focused.nodeId, + root.nodeId, + "Focused node is the same as before" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_individuals_01.js b/devtools/client/memory/test/xpcshell/test_individuals_01.js new file mode 100644 index 0000000000..9278537136 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_individuals_01.js @@ -0,0 +1,77 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Basic test for switching to the individuals view. + +const { + censusState, + viewState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const { + fetchIndividuals, + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const EXPECTED_INDIVIDUAL_STATES = [ + individualsState.COMPUTING_DOMINATOR_TREE, + individualsState.FETCHING, + individualsState.FETCHED, +]; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + equal(getState().individuals, null, "no individuals state by default"); + + dispatch(changeView(viewState.CENSUS)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + const root = getState().snapshots[0].census.report; + ok(root, "Should have a census"); + + const reportLeafIndex = findReportLeafIndex(root); + ok(reportLeafIndex, "Should get a reportLeafIndex"); + + const snapshotId = getState().snapshots[0].id; + ok(snapshotId, "Should have a snapshot id"); + + const breakdown = getState().snapshots[0].census.display.breakdown; + ok(breakdown, "Should have a breakdown"); + + dispatch( + fetchIndividuals(heapWorker, snapshotId, breakdown, reportLeafIndex) + ); + + // Wait for each expected state. + for (const state of EXPECTED_INDIVIDUAL_STATES) { + await waitUntilState(store, s => { + return ( + s.view.state === viewState.INDIVIDUALS && + s.individuals && + s.individuals.state === state + ); + }); + ok(true, `Reached state = ${state}`); + } + + ok(getState().individuals, "Should have individuals state"); + ok(getState().individuals.nodes, "Should have individuals nodes"); + ok( + !!getState().individuals.nodes.length, + "Should have a positive number of nodes" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_individuals_02.js b/devtools/client/memory/test/xpcshell/test_individuals_02.js new file mode 100644 index 0000000000..76d34187a0 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_individuals_02.js @@ -0,0 +1,91 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test switching to the individuals view when we are in the middle of computing +// a dominator tree. + +const { + censusState, + dominatorTreeState, + viewState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const { + fetchIndividuals, + takeSnapshotAndCensus, + computeDominatorTree, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const EXPECTED_INDIVIDUAL_STATES = [ + individualsState.COMPUTING_DOMINATOR_TREE, + individualsState.FETCHING, + individualsState.FETCHED, +]; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + equal(getState().individuals, null, "no individuals state by default"); + + dispatch(changeView(viewState.CENSUS)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + const root = getState().snapshots[0].census.report; + ok(root, "Should have a census"); + + const reportLeafIndex = findReportLeafIndex(root); + ok(reportLeafIndex, "Should get a reportLeafIndex"); + + const snapshotId = getState().snapshots[0].id; + ok(snapshotId, "Should have a snapshot id"); + + const breakdown = getState().snapshots[0].census.display.breakdown; + ok(breakdown, "Should have a breakdown"); + + // Start computing a dominator tree. + + dispatch(computeDominatorTree(heapWorker, snapshotId)); + equal( + getState().snapshots[0].dominatorTree.state, + dominatorTreeState.COMPUTING, + "Should be computing dominator tree" + ); + + // Fetch individuals in the middle of computing the dominator tree. + + dispatch( + fetchIndividuals(heapWorker, snapshotId, breakdown, reportLeafIndex) + ); + + // Wait for each expected state. + for (const state of EXPECTED_INDIVIDUAL_STATES) { + await waitUntilState(store, s => { + return ( + s.view.state === viewState.INDIVIDUALS && + s.individuals && + s.individuals.state === state + ); + }); + ok(true, `Reached state = ${state}`); + } + + ok(getState().individuals, "Should have individuals state"); + ok(getState().individuals.nodes, "Should have individuals nodes"); + ok( + !!getState().individuals.nodes.length, + "Should have a positive number of nodes" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_individuals_03.js b/devtools/client/memory/test/xpcshell/test_individuals_03.js new file mode 100644 index 0000000000..db31bcf347 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_individuals_03.js @@ -0,0 +1,114 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test switching to the individuals view when we are in the diffing view. + +const { + censusState, + diffingState, + viewState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const { + fetchIndividuals, + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, + popViewAndRefresh, +} = require("resource://devtools/client/memory/actions/view.js"); +const { + selectSnapshotForDiffingAndRefresh, +} = require("resource://devtools/client/memory/actions/diffing.js"); + +const EXPECTED_INDIVIDUAL_STATES = [ + individualsState.COMPUTING_DOMINATOR_TREE, + individualsState.FETCHING, + individualsState.FETCHED, +]; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + // Take two snapshots and diff them from each other. + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [ + censusState.SAVED, + censusState.SAVED, + ]); + + dispatch(changeView(viewState.DIFFING)); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[0]) + ); + dispatch( + selectSnapshotForDiffingAndRefresh(heapWorker, getState().snapshots[1]) + ); + + await waitUntilState(store, state => { + return state.diffing && state.diffing.state === diffingState.TOOK_DIFF; + }); + ok(getState().diffing.census); + + // Fetch individuals. + + const root = getState().diffing.census.report; + ok(root, "Should have a census"); + + const reportLeafIndex = findReportLeafIndex(root); + ok(reportLeafIndex, "Should get a reportLeafIndex"); + + const snapshotId = getState().diffing.secondSnapshotId; + ok(snapshotId, "Should have a snapshot id"); + + const breakdown = getState().censusDisplay.breakdown; + ok(breakdown, "Should have a breakdown"); + + dispatch( + fetchIndividuals(heapWorker, snapshotId, breakdown, reportLeafIndex) + ); + + for (const state of EXPECTED_INDIVIDUAL_STATES) { + await waitUntilState(store, s => { + return ( + s.view.state === viewState.INDIVIDUALS && + s.individuals && + s.individuals.state === state + ); + }); + ok(true, `Reached state = ${state}`); + } + + ok(getState().individuals, "Should have individuals state"); + ok(getState().individuals.nodes, "Should have individuals nodes"); + ok( + !!getState().individuals.nodes.length, + "Should have a positive number of nodes" + ); + + // Pop the view back to the diffing. + + dispatch(popViewAndRefresh(heapWorker)); + + await waitUntilState(store, state => { + return state.diffing && state.diffing.state === diffingState.TOOK_DIFF; + }); + + ok( + getState().diffing.census.report, + "We have our census diff again after popping back to the last view" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_individuals_04.js b/devtools/client/memory/test/xpcshell/test_individuals_04.js new file mode 100644 index 0000000000..f2cd71d4b9 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_individuals_04.js @@ -0,0 +1,93 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test showing individual Array objects. + +const { + censusState, + viewState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const { + fetchIndividuals, + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); +const { + setFilterString, +} = require("resource://devtools/client/memory/actions/filter.js"); + +const EXPECTED_INDIVIDUAL_STATES = [ + individualsState.COMPUTING_DOMINATOR_TREE, + individualsState.FETCHING, + individualsState.FETCHED, +]; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + dispatch(setFilterString("Array")); + + // Take a snapshot and wait for the census to finish. + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + // Fetch individuals. + + const root = getState().snapshots[0].census.report; + ok(root, "Should have a census"); + + const reportLeafIndex = findReportLeafIndex(root, "Array"); + ok(reportLeafIndex, "Should get a reportLeafIndex for Array"); + + const snapshotId = getState().snapshots[0].id; + ok(snapshotId, "Should have a snapshot id"); + + const breakdown = getState().censusDisplay.breakdown; + ok(breakdown, "Should have a breakdown"); + + dispatch( + fetchIndividuals(heapWorker, snapshotId, breakdown, reportLeafIndex) + ); + + for (const state of EXPECTED_INDIVIDUAL_STATES) { + await waitUntilState(store, s => { + return ( + s.view.state === viewState.INDIVIDUALS && + s.individuals && + s.individuals.state === state + ); + }); + ok(true, `Reached state = ${state}`); + } + + ok(getState().individuals, "Should have individuals state"); + ok(getState().individuals.nodes, "Should have individuals nodes"); + ok( + !!getState().individuals.nodes.length, + "Should have a positive number of nodes" + ); + + // Assert that all the individuals are `Array`s. + + for (const node of getState().individuals.nodes) { + dumpn("Checking node: " + node.label.join(" > ")); + ok( + node.label.find(part => part === "Array"), + "The node should be an Array node" + ); + } + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_individuals_05.js b/devtools/client/memory/test/xpcshell/test_individuals_05.js new file mode 100644 index 0000000000..506751916a --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_individuals_05.js @@ -0,0 +1,84 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test showing individual objects that do not have allocation stacks. + +const { + censusState, + viewState, + individualsState, + censusDisplays, +} = require("resource://devtools/client/memory/constants.js"); +const { + fetchIndividuals, + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); +const { + setCensusDisplay, +} = require("resource://devtools/client/memory/actions/census-display.js"); + +const EXPECTED_INDIVIDUAL_STATES = [ + individualsState.COMPUTING_DOMINATOR_TREE, + individualsState.FETCHING, + individualsState.FETCHED, +]; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + dispatch(setCensusDisplay(censusDisplays.invertedAllocationStack)); + + // Take a snapshot and wait for the census to finish. + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + // Fetch individuals. + + const root = getState().snapshots[0].census.report; + ok(root, "Should have a census"); + + const reportLeafIndex = findReportLeafIndex(root, "noStack"); + ok(reportLeafIndex, "Should get a reportLeafIndex for noStack"); + + const snapshotId = getState().snapshots[0].id; + ok(snapshotId, "Should have a snapshot id"); + + const breakdown = getState().censusDisplay.breakdown; + ok(breakdown, "Should have a breakdown"); + + dispatch( + fetchIndividuals(heapWorker, snapshotId, breakdown, reportLeafIndex) + ); + + for (const state of EXPECTED_INDIVIDUAL_STATES) { + await waitUntilState(store, s => { + return ( + s.view.state === viewState.INDIVIDUALS && + s.individuals && + s.individuals.state === state + ); + }); + ok(true, `Reached state = ${state}`); + } + + ok(getState().individuals, "Should have individuals state"); + ok(getState().individuals.nodes, "Should have individuals nodes"); + ok( + !!getState().individuals.nodes.length, + "Should have a positive number of nodes" + ); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_individuals_06.js b/devtools/client/memory/test/xpcshell/test_individuals_06.js new file mode 100644 index 0000000000..54aa759464 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_individuals_06.js @@ -0,0 +1,85 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that clearing the current individuals' snapshot leaves the individuals +// view. + +const { + censusState, + viewState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const { + fetchIndividuals, + takeSnapshotAndCensus, + clearSnapshots, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +const EXPECTED_INDIVIDUAL_STATES = [ + individualsState.COMPUTING_DOMINATOR_TREE, + individualsState.FETCHING, + individualsState.FETCHED, +]; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + // Take a snapshot and wait for the census to finish. + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + // Fetch individuals. + + const root = getState().snapshots[0].census.report; + ok(root, "Should have a census"); + + const reportLeafIndex = findReportLeafIndex(root); + ok(reportLeafIndex, "Should get a reportLeafIndex"); + + const snapshotId = getState().snapshots[0].id; + ok(snapshotId, "Should have a snapshot id"); + + const breakdown = getState().censusDisplay.breakdown; + ok(breakdown, "Should have a breakdown"); + + dispatch( + fetchIndividuals(heapWorker, snapshotId, breakdown, reportLeafIndex) + ); + + for (const state of EXPECTED_INDIVIDUAL_STATES) { + await waitUntilState(store, s => { + return ( + s.view.state === viewState.INDIVIDUALS && + s.individuals && + s.individuals.state === state + ); + }); + ok(true, `Reached state = ${state}`); + } + + ok(getState().individuals, "Should have individuals state"); + ok(getState().individuals.nodes, "Should have individuals nodes"); + ok( + !!getState().individuals.nodes.length, + "Should have a positive number of nodes" + ); + + dispatch(clearSnapshots(heapWorker)); + + equal(getState().view.state, viewState.CENSUS, "Went back to census view"); + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_pop_view_01.js b/devtools/client/memory/test/xpcshell/test_pop_view_01.js new file mode 100644 index 0000000000..da44d1d125 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_pop_view_01.js @@ -0,0 +1,80 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test popping views from each intermediate individuals model state. + +const { + censusState, + viewState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); +const { + fetchIndividuals, + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + changeView, + popViewAndRefresh, +} = require("resource://devtools/client/memory/actions/view.js"); + +const TEST_STATES = [ + individualsState.COMPUTING_DOMINATOR_TREE, + individualsState.FETCHING, + individualsState.FETCHED, +]; + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + equal(getState().individuals, null, "no individuals state by default"); + + dispatch(changeView(viewState.CENSUS)); + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + const root = getState().snapshots[0].census.report; + ok(root, "Should have a census"); + + const reportLeafIndex = findReportLeafIndex(root); + ok(reportLeafIndex, "Should get a reportLeafIndex"); + + const snapshotId = getState().snapshots[0].id; + ok(snapshotId, "Should have a snapshot id"); + + const breakdown = getState().snapshots[0].census.display.breakdown; + ok(breakdown, "Should have a breakdown"); + + for (const state of TEST_STATES) { + dumpn(`Testing popping back to the old view from state = ${state}`); + + dispatch( + fetchIndividuals(heapWorker, snapshotId, breakdown, reportLeafIndex) + ); + + // Wait for the expected test state. + await waitUntilState(store, s => { + return ( + s.view.state === viewState.INDIVIDUALS && + s.individuals && + s.individuals.state === state + ); + }); + ok(true, `Reached state = ${state}`); + + // Pop back to the CENSUS state. + dispatch(popViewAndRefresh(heapWorker)); + await waitUntilState(store, s => { + return s.view.state === viewState.CENSUS; + }); + ok(!getState().individuals, "Should no longer have individuals"); + } + + heapWorker.destroy(); + await front.detach(); +}); diff --git a/devtools/client/memory/test/xpcshell/test_tree-map-01.js b/devtools/client/memory/test/xpcshell/test_tree-map-01.js new file mode 100644 index 0000000000..1e91a43ec9 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_tree-map-01.js @@ -0,0 +1,76 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + drawBox, +} = require("resource://devtools/client/memory/components/tree-map/draw.js"); + +add_task(async function () { + let fillRectValues, strokeRectValues; + const ctx = { + fillRect: (...args) => { + fillRectValues = args; + }, + strokeRect: (...args) => { + strokeRectValues = args; + }, + }; + const node = { + x: 20, + y: 30, + dx: 50, + dy: 70, + type: "other", + depth: 2, + }; + const padding = [10, 10]; + const borderWidth = () => 1; + const dragZoom = { + offsetX: 0, + offsetY: 0, + zoom: 0, + }; + drawBox(ctx, node, borderWidth, dragZoom, padding); + ok(true, JSON.stringify([ctx, fillRectValues, strokeRectValues])); + equal(ctx.fillStyle, "hsl(204,60%,70%)", "The fillStyle is set"); + equal(ctx.strokeStyle, "hsl(204,60%,35%)", "The strokeStyle is set"); + equal(ctx.lineWidth, 1, "The lineWidth is set"); + deepEqual(fillRectValues, [10.5, 20.5, 49, 69], "Draws a filled rectangle"); + deepEqual( + strokeRectValues, + [10.5, 20.5, 49, 69], + "Draws a stroked rectangle" + ); + + dragZoom.zoom = 0.5; + + drawBox(ctx, node, borderWidth, dragZoom, padding); + ok(true, JSON.stringify([ctx, fillRectValues, strokeRectValues])); + deepEqual( + fillRectValues, + [15.5, 30.5, 74, 104], + "Draws a zoomed filled rectangle" + ); + deepEqual( + strokeRectValues, + [15.5, 30.5, 74, 104], + "Draws a zoomed stroked rectangle" + ); + + dragZoom.offsetX = 110; + dragZoom.offsetY = 130; + + drawBox(ctx, node, borderWidth, dragZoom, padding); + deepEqual( + fillRectValues, + [-94.5, -99.5, 74, 104], + "Draws a zoomed and offset filled rectangle" + ); + deepEqual( + strokeRectValues, + [-94.5, -99.5, 74, 104], + "Draws a zoomed and offset stroked rectangle" + ); +}); diff --git a/devtools/client/memory/test/xpcshell/test_tree-map-02.js b/devtools/client/memory/test/xpcshell/test_tree-map-02.js new file mode 100644 index 0000000000..528c59dcfa --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_tree-map-02.js @@ -0,0 +1,105 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + drawText, +} = require("resource://devtools/client/memory/components/tree-map/draw.js"); + +add_task(async function () { + // Mock out the Canvas2dContext + const ctx = { + fillText: (...args) => fillTextValues.push(args), + measureText: text => { + const width = text ? text.length * 10 : 0; + return { width }; + }, + }; + const node = { + x: 20, + y: 30, + dx: 500, + dy: 70, + name: "Example Node", + totalBytes: 1200, + totalCount: 100, + }; + const ratio = 0; + const borderWidth = () => 1; + const dragZoom = { + offsetX: 0, + offsetY: 0, + zoom: 0, + }; + let fillTextValues = []; + const padding = [10, 10]; + + drawText(ctx, node, borderWidth, ratio, dragZoom, padding); + deepEqual( + fillTextValues[0], + ["Example Node", 11.5, 21.5], + "Fills in the full node name" + ); + deepEqual( + fillTextValues[1], + ["1KiB 100 count", 141.5, 21.5], + "Includes the full byte and count information" + ); + + fillTextValues = []; + node.dx = 250; + drawText(ctx, node, borderWidth, ratio, dragZoom, padding); + + deepEqual( + fillTextValues[0], + ["Example Node", 11.5, 21.5], + "Fills in the full node name" + ); + deepEqual( + fillTextValues[1], + undefined, + "Drops off the byte and count information if not enough room" + ); + + fillTextValues = []; + node.dx = 100; + drawText(ctx, node, borderWidth, ratio, dragZoom, padding); + + deepEqual( + fillTextValues[0], + ["Exampl...", 11.5, 21.5], + "Cuts the name with ellipsis" + ); + deepEqual( + fillTextValues[1], + undefined, + "Drops off the byte and count information if not enough room" + ); + + fillTextValues = []; + node.dx = 40; + drawText(ctx, node, borderWidth, ratio, dragZoom, padding); + + deepEqual( + fillTextValues[0], + ["...", 11.5, 21.5], + "Shows only ellipsis when smaller" + ); + deepEqual( + fillTextValues[1], + undefined, + "Drops off the byte and count information if not enough room" + ); + + fillTextValues = []; + node.dx = 20; + drawText(ctx, node, borderWidth, ratio, dragZoom, padding); + + deepEqual(fillTextValues[0], undefined, "Draw nothing when not enough room"); + deepEqual( + fillTextValues[1], + undefined, + "Drops off the byte and count information if not enough room" + ); +}); diff --git a/devtools/client/memory/test/xpcshell/test_utils-get-snapshot-totals.js b/devtools/client/memory/test/xpcshell/test_utils-get-snapshot-totals.js new file mode 100644 index 0000000000..cbb72586a4 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_utils-get-snapshot-totals.js @@ -0,0 +1,103 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests that we use the correct snapshot aggregate value + * in `utils.getSnapshotTotals(snapshot)` + */ + +const { + censusDisplays, + viewState, + censusState, +} = require("resource://devtools/client/memory/constants.js"); +const { + getSnapshotTotals, +} = require("resource://devtools/client/memory/utils.js"); +const { + takeSnapshotAndCensus, +} = require("resource://devtools/client/memory/actions/snapshot.js"); +const { + setCensusDisplayAndRefresh, +} = require("resource://devtools/client/memory/actions/census-display.js"); +const { + changeView, +} = require("resource://devtools/client/memory/actions/view.js"); + +add_task(async function () { + const front = new StubbedMemoryFront(); + const heapWorker = new HeapAnalysesClient(); + await front.attach(); + const store = Store(); + const { getState, dispatch } = store; + + dispatch(changeView(viewState.CENSUS)); + + await dispatch( + setCensusDisplayAndRefresh(heapWorker, censusDisplays.allocationStack) + ); + + dispatch(takeSnapshotAndCensus(front, heapWorker)); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + + ok( + !getState().snapshots[0].census.display.inverted, + "Snapshot is not inverted" + ); + + const census = getState().snapshots[0].census; + let result = aggregate(census.report); + const totalBytes = result.bytes; + const totalCount = result.count; + + Assert.greater(totalBytes, 0, "counted up bytes in the census"); + Assert.greater(totalCount, 0, "counted up count in the census"); + + result = getSnapshotTotals(getState().snapshots[0].census); + equal( + totalBytes, + result.bytes, + "getSnapshotTotals reuslted in correct bytes" + ); + equal( + totalCount, + result.count, + "getSnapshotTotals reuslted in correct count" + ); + + dispatch( + setCensusDisplayAndRefresh( + heapWorker, + censusDisplays.invertedAllocationStack + ) + ); + + await waitUntilCensusState(store, s => s.census, [censusState.SAVING]); + await waitUntilCensusState(store, s => s.census, [censusState.SAVED]); + ok(getState().snapshots[0].census.display.inverted, "Snapshot is inverted"); + + result = getSnapshotTotals(getState().snapshots[0].census); + equal( + totalBytes, + result.bytes, + "getSnapshotTotals reuslted in correct bytes when inverted" + ); + equal( + totalCount, + result.count, + "getSnapshotTotals reuslted in correct count when inverted" + ); +}); + +function aggregate(report) { + let totalBytes = report.bytes; + let totalCount = report.count; + for (const child of report.children || []) { + const { bytes, count } = aggregate(child); + totalBytes += bytes; + totalCount += count; + } + return { bytes: totalBytes, count: totalCount }; +} diff --git a/devtools/client/memory/test/xpcshell/test_utils.js b/devtools/client/memory/test/xpcshell/test_utils.js new file mode 100644 index 0000000000..47b4dfcc73 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/test_utils.js @@ -0,0 +1,117 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Tests the task creator `takeSnapshotAndCensus()` for the whole flow of + * taking a snapshot, and its sub-actions. Tests the formatNumber and + * formatPercent methods. + */ + +const utils = require("resource://devtools/client/memory/utils.js"); +const { + snapshotState: states, + viewState, +} = require("resource://devtools/client/memory/constants.js"); +const { Preferences } = ChromeUtils.importESModule( + "resource://gre/modules/Preferences.sys.mjs" +); + +add_task(async function () { + const s1 = utils.createSnapshot({ view: { state: viewState.CENSUS } }); + const s2 = utils.createSnapshot({ view: { state: viewState.CENSUS } }); + equal( + s1.state, + states.SAVING, + "utils.createSnapshot() creates snapshot in saving state" + ); + Assert.notStrictEqual( + s1.id, + s2.id, + "utils.createSnapshot() creates snapshot with unique ids" + ); + + const custom = { by: "internalType", then: { by: "count", bytes: true } }; + Preferences.set( + "devtools.memory.custom-census-displays", + JSON.stringify({ "My Display": custom }) + ); + + equal( + utils.getCustomCensusDisplays()["My Display"].by, + custom.by, + "utils.getCustomCensusDisplays() returns custom displays" + ); + + ok(true, "test formatNumber util functions"); + equal(utils.formatNumber(12), "12", "formatNumber returns 12 for 12"); + + equal(utils.formatNumber(0), "0", "formatNumber returns 0 for 0"); + equal(utils.formatNumber(-0), "0", "formatNumber returns 0 for -0"); + equal(utils.formatNumber(+0), "0", "formatNumber returns 0 for +0"); + + equal( + utils.formatNumber(1234567), + "1 234 567", + "formatNumber adds a space every 3rd digit" + ); + equal( + utils.formatNumber(12345678), + "12 345 678", + "formatNumber adds a space every 3rd digit" + ); + equal( + utils.formatNumber(123456789), + "123 456 789", + "formatNumber adds a space every 3rd digit" + ); + + equal( + utils.formatNumber(12, true), + "+12", + "formatNumber can display number sign" + ); + equal( + utils.formatNumber(-12, true), + "-12", + "formatNumber can display number sign (negative)" + ); + + ok(true, "test formatPercent util functions"); + equal(utils.formatPercent(12), "12%", "formatPercent returns 12% for 12"); + equal( + utils.formatPercent(12345), + "12 345%", + "formatPercent returns 12 345% for 12345" + ); + + equal(utils.formatAbbreviatedBytes(12), "12B", "Formats bytes"); + equal(utils.formatAbbreviatedBytes(12345), "12KiB", "Formats kilobytes"); + equal(utils.formatAbbreviatedBytes(12345678), "11MiB", "Formats megabytes"); + equal( + utils.formatAbbreviatedBytes(12345678912), + "11GiB", + "Formats gigabytes" + ); + + equal( + utils.hslToStyle(0.5, 0.6, 0.7), + "hsl(180,60%,70%)", + "hslToStyle converts an array to a style string" + ); + equal( + utils.hslToStyle(0, 0, 0), + "hsl(0,0%,0%)", + "hslToStyle converts an array to a style string" + ); + equal( + utils.hslToStyle(1, 1, 1), + "hsl(360,100%,100%)", + "hslToStyle converts an array to a style string" + ); + + equal(utils.lerp(5, 7, 0), 5, "lerp return first number for 0"); + equal(utils.lerp(5, 7, 1), 7, "lerp return second number for 1"); + equal(utils.lerp(5, 7, 0.5), 6, "lerp interpolates the numbers for 0.5"); +}); diff --git a/devtools/client/memory/test/xpcshell/xpcshell.toml b/devtools/client/memory/test/xpcshell/xpcshell.toml new file mode 100644 index 0000000000..3f248d9bb4 --- /dev/null +++ b/devtools/client/memory/test/xpcshell/xpcshell.toml @@ -0,0 +1,106 @@ +[DEFAULT] +tags = "devtools devtools-memory" +head = "../../../shared/test/shared-head.js head.js" +firefox-appdir = "browser" +skip-if = ["os == 'android'"] + +["test_action-clear-snapshots_01.js"] + +["test_action-clear-snapshots_02.js"] + +["test_action-clear-snapshots_03.js"] + +["test_action-clear-snapshots_04.js"] + +["test_action-clear-snapshots_05.js"] + +["test_action-clear-snapshots_06.js"] + +["test_action-export-snapshot.js"] + +["test_action-filter-01.js"] + +["test_action-filter-02.js"] + +["test_action-filter-03.js"] + +["test_action-import-snapshot-and-census.js"] + +["test_action-import-snapshot-dominator-tree.js"] + +["test_action-select-snapshot.js"] + +["test_action-set-display-and-refresh-01.js"] + +["test_action-set-display-and-refresh-02.js"] + +["test_action-set-display.js"] + +["test_action-take-census.js"] +skip-if = ["tsan"] # Unreasonably slow, bug 1612707 + +["test_action-take-snapshot-and-census.js"] + +["test_action-take-snapshot.js"] + +["test_action-toggle-inverted-and-refresh-01.js"] + +["test_action-toggle-inverted-and-refresh-02.js"] + +["test_action-toggle-inverted.js"] + +["test_action-toggle-recording-allocations.js"] + +["test_action_diffing_01.js"] + +["test_action_diffing_02.js"] + +["test_action_diffing_03.js"] + +["test_action_diffing_04.js"] + +["test_action_diffing_05.js"] + +["test_dominator_trees_01.js"] + +["test_dominator_trees_02.js"] + +["test_dominator_trees_03.js"] + +["test_dominator_trees_04.js"] +skip-if = ["tsan"] # Unreasonably slow, bug 1612707 + +["test_dominator_trees_05.js"] + +["test_dominator_trees_06.js"] + +["test_dominator_trees_07.js"] + +["test_dominator_trees_08.js"] + +["test_dominator_trees_09.js"] + +["test_dominator_trees_10.js"] + +["test_individuals_01.js"] + +["test_individuals_02.js"] + +["test_individuals_03.js"] + +["test_individuals_04.js"] + +["test_individuals_05.js"] +skip-if = ["tsan"] # Times out, bug 1612707 + +["test_individuals_06.js"] + +["test_pop_view_01.js"] + +["test_tree-map-01.js"] + +["test_tree-map-02.js"] + +["test_utils-get-snapshot-totals.js"] + +["test_utils.js"] diff --git a/devtools/client/memory/utils.js b/devtools/client/memory/utils.js new file mode 100644 index 0000000000..5d97663810 --- /dev/null +++ b/devtools/client/memory/utils.js @@ -0,0 +1,545 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { LocalizationHelper } = require("resource://devtools/shared/l10n.js"); +const STRINGS_URI = "devtools/client/locales/memory.properties"; +const L10N = (exports.L10N = new LocalizationHelper(STRINGS_URI)); + +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const CUSTOM_CENSUS_DISPLAY_PREF = "devtools.memory.custom-census-displays"; +const CUSTOM_LABEL_DISPLAY_PREF = "devtools.memory.custom-label-displays"; +const CUSTOM_TREE_MAP_DISPLAY_PREF = "devtools.memory.custom-tree-map-displays"; +const BYTES = 1024; +const KILOBYTES = Math.pow(BYTES, 2); +const MEGABYTES = Math.pow(BYTES, 3); +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +const { + snapshotState: states, + diffingState, + censusState, + treeMapState, + dominatorTreeState, + individualsState, +} = require("resource://devtools/client/memory/constants.js"); + +/** + * Takes a snapshot object and returns the localized form of its timestamp to be + * used as a title. + * + * @param {Snapshot} snapshot + * @return {String} + */ +exports.getSnapshotTitle = function (snapshot) { + if (!snapshot.creationTime) { + return L10N.getStr("snapshot-title.loading"); + } + + if (snapshot.imported) { + // Strip out the extension if it's the expected ".fxsnapshot" + return PathUtils.filename(snapshot.path.replace(/\.fxsnapshot$/, "")); + } + + const date = new Date(snapshot.creationTime / 1000); + return date.toLocaleTimeString(void 0, { + year: "2-digit", + month: "2-digit", + day: "2-digit", + hour12: false, + }); +}; + +function getCustomDisplaysHelper(pref) { + let customDisplays = Object.create(null); + try { + customDisplays = + JSON.parse(Services.prefs.getStringPref(pref)) || Object.create(null); + } catch (e) { + DevToolsUtils.reportException( + `String stored in "${pref}" pref cannot be parsed by \`JSON.parse()\`.` + ); + } + return Object.freeze(customDisplays); +} + +/** + * Returns custom displays defined in `devtools.memory.custom-census-displays` + * pref. + * + * @return {Object} + */ +exports.getCustomCensusDisplays = function () { + return getCustomDisplaysHelper(CUSTOM_CENSUS_DISPLAY_PREF); +}; + +/** + * Returns custom displays defined in + * `devtools.memory.custom-label-displays` pref. + * + * @return {Object} + */ +exports.getCustomLabelDisplays = function () { + return getCustomDisplaysHelper(CUSTOM_LABEL_DISPLAY_PREF); +}; + +/** + * Returns custom displays defined in + * `devtools.memory.custom-tree-map-displays` pref. + * + * @return {Object} + */ +exports.getCustomTreeMapDisplays = function () { + return getCustomDisplaysHelper(CUSTOM_TREE_MAP_DISPLAY_PREF); +}; + +/** + * Returns a string representing a readable form of the snapshot's state. More + * concise than `getStatusTextFull`. + * + * @param {snapshotState | diffingState} state + * @return {String} + */ +// eslint-disable-next-line complexity +exports.getStatusText = function (state) { + assert(state, "Must have a state"); + + switch (state) { + case diffingState.ERROR: + return L10N.getStr("diffing.state.error"); + + case states.ERROR: + return L10N.getStr("snapshot.state.error"); + + case states.SAVING: + return L10N.getStr("snapshot.state.saving"); + + case states.IMPORTING: + return L10N.getStr("snapshot.state.importing"); + + case states.SAVED: + case states.READING: + return L10N.getStr("snapshot.state.reading"); + + case censusState.SAVING: + return L10N.getStr("snapshot.state.saving-census"); + + case treeMapState.SAVING: + return L10N.getStr("snapshot.state.saving-tree-map"); + + case diffingState.TAKING_DIFF: + return L10N.getStr("diffing.state.taking-diff"); + + case diffingState.SELECTING: + return L10N.getStr("diffing.state.selecting"); + + case dominatorTreeState.COMPUTING: + case individualsState.COMPUTING_DOMINATOR_TREE: + return L10N.getStr("dominatorTree.state.computing"); + + case dominatorTreeState.COMPUTED: + case dominatorTreeState.FETCHING: + return L10N.getStr("dominatorTree.state.fetching"); + + case dominatorTreeState.INCREMENTAL_FETCHING: + return L10N.getStr("dominatorTree.state.incrementalFetching"); + + case dominatorTreeState.ERROR: + return L10N.getStr("dominatorTree.state.error"); + + case individualsState.ERROR: + return L10N.getStr("individuals.state.error"); + + case individualsState.FETCHING: + return L10N.getStr("individuals.state.fetching"); + + // These states do not have any message to show as other content will be + // displayed. + case dominatorTreeState.LOADED: + case diffingState.TOOK_DIFF: + case states.READ: + case censusState.SAVED: + case treeMapState.SAVED: + case individualsState.FETCHED: + return ""; + + default: + assert(false, `Unexpected state: ${state}`); + return ""; + } +}; + +/** + * Returns a string representing a readable form of the snapshot's state; + * more verbose than `getStatusText`. + * + * @param {snapshotState | diffingState} state + * @return {String} + */ +// eslint-disable-next-line complexity +exports.getStatusTextFull = function (state) { + assert(!!state, "Must have a state"); + + switch (state) { + case diffingState.ERROR: + return L10N.getStr("diffing.state.error.full"); + + case states.ERROR: + return L10N.getStr("snapshot.state.error.full"); + + case states.SAVING: + return L10N.getStr("snapshot.state.saving.full"); + + case states.IMPORTING: + return L10N.getStr("snapshot.state.importing"); + + case states.SAVED: + case states.READING: + return L10N.getStr("snapshot.state.reading.full"); + + case censusState.SAVING: + return L10N.getStr("snapshot.state.saving-census.full"); + + case treeMapState.SAVING: + return L10N.getStr("snapshot.state.saving-tree-map.full"); + + case diffingState.TAKING_DIFF: + return L10N.getStr("diffing.state.taking-diff.full"); + + case diffingState.SELECTING: + return L10N.getStr("diffing.state.selecting.full"); + + case dominatorTreeState.COMPUTING: + case individualsState.COMPUTING_DOMINATOR_TREE: + return L10N.getStr("dominatorTree.state.computing.full"); + + case dominatorTreeState.COMPUTED: + case dominatorTreeState.FETCHING: + return L10N.getStr("dominatorTree.state.fetching.full"); + + case dominatorTreeState.INCREMENTAL_FETCHING: + return L10N.getStr("dominatorTree.state.incrementalFetching.full"); + + case dominatorTreeState.ERROR: + return L10N.getStr("dominatorTree.state.error.full"); + + case individualsState.ERROR: + return L10N.getStr("individuals.state.error.full"); + + case individualsState.FETCHING: + return L10N.getStr("individuals.state.fetching.full"); + + // These states do not have any full message to show as other content will + // be displayed. + case dominatorTreeState.LOADED: + case diffingState.TOOK_DIFF: + case states.READ: + case censusState.SAVED: + case treeMapState.SAVED: + case individualsState.FETCHED: + return ""; + + default: + assert(false, `Unexpected state: ${state}`); + return ""; + } +}; + +/** + * Return true if the snapshot is in a diffable state, false otherwise. + * + * @param {snapshotModel} snapshot + * @returns {Boolean} + */ +exports.snapshotIsDiffable = function snapshotIsDiffable(snapshot) { + return ( + (snapshot.census && snapshot.census.state === censusState.SAVED) || + (snapshot.census && snapshot.census.state === censusState.SAVING) || + snapshot.state === states.SAVED || + snapshot.state === states.READ + ); +}; + +/** + * Takes an array of snapshots and a snapshot and returns + * the snapshot instance in `snapshots` that matches + * the snapshot passed in. + * + * @param {appModel} state + * @param {snapshotId} id + * @return {snapshotModel|null} + */ +exports.getSnapshot = function getSnapshot(state, id) { + const found = state.snapshots.find(s => s.id === id); + assert(found, `No matching snapshot found with id = ${id}`); + return found; +}; + +/** + * Get the ID of the selected snapshot, if one is selected, null otherwise. + * + * @returns {SnapshotId|null} + */ +exports.findSelectedSnapshot = function (state) { + const found = state.snapshots.find(s => s.selected); + return found ? found.id : null; +}; + +/** + * Creates a new snapshot object. + * + * @param {appModel} state + * @return {Snapshot} + */ +let ID_COUNTER = 0; +exports.createSnapshot = function createSnapshot(state) { + let dominatorTree = null; + if (state.view.state === dominatorTreeState.DOMINATOR_TREE) { + dominatorTree = Object.freeze({ + dominatorTreeId: null, + root: null, + error: null, + state: dominatorTreeState.COMPUTING, + }); + } + + return Object.freeze({ + id: ++ID_COUNTER, + state: states.SAVING, + dominatorTree, + census: null, + treeMap: null, + path: null, + imported: false, + selected: false, + error: null, + }); +}; + +/** + * Return true if the census is up to date with regards to the current filtering + * and requested display, false otherwise. + * + * @param {String} filter + * @param {censusDisplayModel} display + * @param {censusModel} census + * + * @returns {Boolean} + */ +exports.censusIsUpToDate = function (filter, display, census) { + return ( + census && + // Filter could be null == undefined so use loose equality. + filter == census.filter && + display === census.display + ); +}; + +/** + * Check to see if the snapshot is in a state that it can take a census. + * + * @param {SnapshotModel} A snapshot to check. + * @param {Boolean} Assert that the snapshot must be in a ready state. + * @returns {Boolean} + */ +exports.canTakeCensus = function (snapshot) { + return ( + snapshot.state === states.READ && + (!snapshot.census || + snapshot.census.state === censusState.SAVED || + !snapshot.treeMap || + snapshot.treeMap.state === treeMapState.SAVED) + ); +}; + +/** + * Returns true if the given snapshot's dominator tree has been computed, false + * otherwise. + * + * @param {SnapshotModel} snapshot + * @returns {Boolean} + */ +exports.dominatorTreeIsComputed = function (snapshot) { + return ( + snapshot.dominatorTree && + (snapshot.dominatorTree.state === dominatorTreeState.COMPUTED || + snapshot.dominatorTree.state === dominatorTreeState.LOADED || + snapshot.dominatorTree.state === dominatorTreeState.INCREMENTAL_FETCHING) + ); +}; + +/** + * Find the first SAVED census, either from the tree map or the normal + * census. + * + * @param {SnapshotModel} snapshot + * @returns {Object|null} Either the census, or null if one hasn't completed + */ +exports.getSavedCensus = function (snapshot) { + if (snapshot.treeMap && snapshot.treeMap.state === treeMapState.SAVED) { + return snapshot.treeMap; + } + if (snapshot.census && snapshot.census.state === censusState.SAVED) { + return snapshot.census; + } + return null; +}; + +/** + * Takes a snapshot and returns the total bytes and total count that this + * snapshot represents. + * + * @param {CensusModel} census + * @return {Object} + */ +exports.getSnapshotTotals = function (census) { + let bytes = 0; + let count = 0; + + const report = census.report; + if (report) { + bytes = report.totalBytes; + count = report.totalCount; + } + + return { bytes, count }; +}; + +/** + * Takes some configurations and opens up a file picker and returns + * a promise to the chosen file if successful. + * + * @param {String} .title + * The title displayed in the file picker window. + * @param {Array<Array<String>>} .filters + * An array of filters to display in the file picker. Each filter in the array + * is a duple of two strings, one a name for the filter, and one the filter itself + * (like "*.json"). + * @param {String} .defaultName + * The default name chosen by the file picker window. + * @param {String} .mode + * The mode that this filepicker should open in. Can be "open" or "save". + * @return {Promise<?nsIFile>} + * The file selected by the user, or null, if cancelled. + */ +exports.openFilePicker = function ({ title, filters, defaultName, mode }) { + let fpMode; + if (mode === "save") { + fpMode = Ci.nsIFilePicker.modeSave; + } else if (mode === "open") { + fpMode = Ci.nsIFilePicker.modeOpen; + } else { + throw new Error("No valid mode specified for nsIFilePicker."); + } + + const fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker); + fp.init(window, title, fpMode); + + for (const filter of filters || []) { + fp.appendFilter(filter[0], filter[1]); + } + fp.defaultString = defaultName; + + return new Promise(resolve => { + fp.open({ + done: result => { + if (result === Ci.nsIFilePicker.returnCancel) { + resolve(null); + return; + } + resolve(fp.file); + }, + }); + }); +}; + +/** + * Format the provided number with a space every 3 digits, and optionally + * prefixed by its sign. + * + * @param {Number} number + * @param {Boolean} showSign (defaults to false) + */ +exports.formatNumber = function (number, showSign = false) { + const rounded = Math.round(number); + // eslint-disable-next-line no-compare-neg-zero + if (rounded === 0 || rounded === -0) { + return "0"; + } + + const abs = String(Math.abs(rounded)); + // replace every digit followed by (sets of 3 digits) by (itself and a space) + const formatted = abs.replace(/(\d)(?=(\d{3})+$)/g, "$1 "); + + if (showSign) { + const sign = rounded < 0 ? "-" : "+"; + return sign + formatted; + } + return formatted; +}; + +/** + * Format the provided percentage following the same logic as formatNumber and + * an additional % suffix. + * + * @param {Number} percent + * @param {Boolean} showSign (defaults to false) + */ +exports.formatPercent = function (percent, showSign = false) { + return exports.L10N.getFormatStr( + "tree-item.percent2", + exports.formatNumber(percent, showSign) + ); +}; + +/** + * Change an HSL color array with values ranged 0-1 to a properly formatted + * ctx.fillStyle string. + * + * @param {Number} h + * hue values ranged between [0 - 1] + * @param {Number} s + * hue values ranged between [0 - 1] + * @param {Number} l + * hue values ranged between [0 - 1] + * @return {type} + */ +exports.hslToStyle = function (h, s, l) { + h = parseInt(h * 360, 10); + s = parseInt(s * 100, 10); + l = parseInt(l * 100, 10); + + return `hsl(${h},${s}%,${l}%)`; +}; + +/** + * Linearly interpolate between 2 numbers. + * + * @param {Number} a + * @param {Number} b + * @param {Number} t + * A value of 0 returns a, and 1 returns b + * @return {Number} + */ +exports.lerp = function (a, b, t) { + return a * (1 - t) + b * t; +}; + +/** + * Format a number of bytes as human readable, e.g. 13434 => '13KiB'. + * + * @param {Number} n + * Number of bytes + * @return {String} + */ +exports.formatAbbreviatedBytes = function (n) { + if (n < BYTES) { + return n + "B"; + } else if (n < KILOBYTES) { + return Math.floor(n / BYTES) + "KiB"; + } else if (n < MEGABYTES) { + return Math.floor(n / KILOBYTES) + "MiB"; + } + return Math.floor(n / MEGABYTES) + "GiB"; +}; |