Bug 1242763 - Add a bunch of tooltips to the devtools' memory panel; r=jsantell

This commit is contained in:
Nick Fitzgerald 2016-02-01 16:00:00 -08:00
parent b0d651660a
commit 6e9441d804
6 changed files with 250 additions and 44 deletions

View File

@ -52,30 +52,87 @@ snapshot-title.loading=Processing…
# checkbox whether or not to invert the tree.
checkbox.invertTree=Invert tree
# LOCALIZATION NOTE (checkbox.invertTree): The tooltip for the label describing
# the boolean checkbox whether or not to invert the tree.
checkbox.invertTree.tooltip=When uninverted, the tree is shown top-down, giving an overview of memory consumption. When inverted, the tree is shown bottom-up, highlighting the heaviest memory consumers.
# LOCALIZATION NOTE (checkbox.recordAllocationStacks): The label describing the
# boolean checkbox whether or not to record allocation stacks.
checkbox.recordAllocationStacks=Record allocation stacks
# LOCALIZATION NOTE (checkbox.recordAllocationStacks.tooltip): The tooltip for
# the label describing the boolean checkbox whether or not to record allocation
# stacks.
checkbox.recordAllocationStacks.tooltip=Toggle the recording of allocation stacks. Subsequent heap snapshots will be able to label and group objects created when allocation stack recording is active by their allocation stack. Recording allocation stacks has a performance overhead.
# LOCALIZATION NOTE (toolbar.breakdownBy): The label describing the select menu
# options of the breakdown options.
toolbar.breakdownBy=Group by:
# LOCALIZATION NOTE (toolbar.breakdownBy): The tooltip for the label describing
# the select menu options of the breakdown options.
toolbar.breakdownBy.tooltip=Change how objects are grouped
# LOCALIZATION NOTE (breakdowns.coarseType.tooltip): The tooltip for the "coarse
# type" breakdown option.
breakdowns.coarseType.tooltip=Group items into broad categories
# LOCALIZATION NOTE (breakdowns.allocationStack.tooltip): The tooltip for the
# "allocation stack" breakdown option.
breakdowns.allocationStack.tooltip=Group items by the JavaScript stack recorded when the object was allocated
# LOCALIZATION NOTE (breakdowns.objectClass.tooltip): The tooltip for the
# "object class" breakdown option.
breakdowns.objectClass.tooltip=Group items by their JavaScript Object [[class]] name
# LOCALIZATION NOTE (breakdowns.internalType.tooltip): The tooltip for the
# "internal type" breakdown option.
breakdowns.internalType.tooltip=Group items by their internal C++ type
# LOCALIZATION NOTE (toolbar.labelBy): The label describing the select menu
# options of the label options.
toolbar.labelBy=Label by:
# LOCALIZATION NOTE (toolbar.labelBy): The tooltip for the label describing the
# select menu options of the label options.
toolbar.labelBy.tooltip=Change how objects are labeled
# LOCALIZATION NOTE (dominatorTreeBreakdowns.coarseType.tooltip): The tooltip for the "coarse
# type" dominator tree breakdown option.
dominatorTreeBreakdowns.coarseType.tooltip=Label objects by the broad categories they fit in
# LOCALIZATION NOTE (dominatorTreeBreakdowns.allocationStack.tooltip): The
# tooltip for the "allocation stack" dominator tree breakdown option.
dominatorTreeBreakdowns.allocationStack.tooltip=Label objects by the JavaScript stack recorded when it was allocated
# LOCALIZATION NOTE (dominatorTreeBreakdowns.internalType.tooltip): The
# tooltip for the "internal type" dominator tree breakdown option.
dominatorTreeBreakdowns.internalType.tooltip=Label objects by their internal C++ type name
# LOCALIZATION NOTE (toolbar.view): The label for the view selector in the
# toolbar.
toolbar.view=View:
# LOCALIZATION NOTE (toolbar.view.tooltip): The tooltip for the label for the
# view selector in the toolbar.
toolbar.view.tooltip=Change the view of the heap snapshot
# LOCALIZATION NOTE (toolbar.view.census): The label for the census view option
# in the toolbar.
toolbar.view.census=Aggregate
# LOCALIZATION NOTE (toolbar.view.census.tooltip): The tooltip for the label for
# the census view option in the toolbar.
toolbar.view.census.tooltip=View a summary of the heap snapshot's contents by aggregating objects into groups
# LOCALIZATION NOTE (toolbar.view.dominators): The label for the dominators view
# option in the toolbar.
toolbar.view.dominators=Dominators
# LOCALIZATION NOTE (toolbar.view.dominators.tooltip): The tooltip for the label
# for the dominators view option in the toolbar.
toolbar.view.dominators.tooltip=View the dominator tree and surface the largest structures in the heap snapshot
# LOCALIZATION NOTE (take-snapshot): The label describing the button that
# initiates taking a snapshot, either as the main label, or a tooltip.
take-snapshot=Take snapshot
@ -96,6 +153,10 @@ diff-snapshots.tooltip=Compare snapshots
# memory tool's filter search box.
filter.placeholder=Filter
# LOCALIZATION NOTE (filter.tooltip): The tooltip text used for the memory
# tool's filter search box.
filter.tooltip=Filter the contents of the heap snapshot
# LOCALIZATION NOTE (tree-item.load-more): The label for the links to fetch the
# lazily loaded sub trees in the dominator tree view.
tree-item.load-more=Load more…
@ -248,21 +309,62 @@ heapview.noAllocationStacks=No allocation stacks found. Record allocation stacks
# dominator tree view for retained byte sizes.
heapview.field.retainedSize=Retained Size (Bytes)
# LOCALIZATION NOTE (heapview.field.retainedSize.tooltip): The tooltip for the
# column header in the dominator tree view for retained byte sizes.
heapview.field.retainedSize.tooltip=The sum of the size of the object itself, and the sizes of all the other objects kept alive by it
# LOCALIZATION NOTE (heapview.field.shallowSize): The name of the column in the
# dominator tree view for shallow byte sizes.
heapview.field.shallowSize=Shallow Size (Bytes)
# LOCALIZATION NOTE (heapview.field.bytes): The name of the column in the heap view for bytes.
# LOCALIZATION NOTE (heapview.field.shallowSize.tooltip): The tooltip for the
# column header in the dominator tree view for shallow byte sizes.
heapview.field.shallowSize.tooltip=The size of the object itself
# LOCALIZATION NOTE (dominatortree.field.label): The name of the column in the
# dominator tree for an object's label.
dominatortree.field.label=Label
# LOCALIZATION NOTE (dominatortree.field.label.tooltip): The tooltip for the column
# header in the dominator tree view for an object's label.
dominatortree.field.label.tooltip=The label for an object in the heap
# LOCALIZATION NOTE (heapview.field.bytes): The name of the column in the heap
# view for bytes.
heapview.field.bytes=Bytes
# LOCALIZATION NOTE (heapview.field.count): The name of the column in the heap view for count.
# LOCALIZATION NOTE (heapview.field.bytes.tooltip): The tooltip for the column
# header in the heap view for bytes.
heapview.field.bytes.tooltip=The number of bytes consumed by this group, excluding subgroups
# LOCALIZATION NOTE (heapview.field.count): The name of the column in the heap
# view for count.
heapview.field.count=Count
# LOCALIZATION NOTE (heapview.field.totalbytes): The name of the column in the heap view for total bytes.
# LOCALIZATION NOTE (heapview.field.count.tooltip): The tooltip for the column
# header in the heap view for count.
heapview.field.count.tooltip=The number of reachable objects in this group, excluding subgroups
# LOCALIZATION NOTE (heapview.field.totalbytes): The name of the column in the
# heap view for total bytes.
heapview.field.totalbytes=Total Bytes
# LOCALIZATION NOTE (heapview.field.totalcount): The name of the column in the heap view for total count.
# LOCALIZATION NOTE (heapview.field.totalbytes.tooltip): The tooltip for the
# column header in the heap view for total bytes.
heapview.field.totalbytes.tooltip=The number of bytes consumed by this group, including subgroups
# LOCALIZATION NOTE (heapview.field.totalcount): The name of the column in the
# heap view for total count.
heapview.field.totalcount=Total Count
# LOCALIZATION NOTE (heapview.field.name): The name of the column in the heap view for name.
# LOCALIZATION NOTE (heapview.field.totalcount.tooltip): The tooltip for the
# column header in the heap view for total count.
heapview.field.totalcount.tooltip=The number of reachable objects in this group, including subgroups
# LOCALIZATION NOTE (heapview.field.name): The name of the column in the heap
# view for name.
heapview.field.name=Name
# LOCALIZATION NOTE (heapview.field.name.tooltip): The tooltip for the column
# header in the heap view for name.
heapview.field.name.tooltip=The name of this group

View File

@ -16,20 +16,45 @@ const CensusHeader = module.exports = createClass({
className: "header"
},
dom.span({ className: "heap-tree-item-bytes" },
L10N.getStr("heapview.field.bytes")),
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" },
L10N.getStr("heapview.field.count")),
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" },
L10N.getStr("heapview.field.totalbytes")),
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" },
L10N.getStr("heapview.field.totalcount")),
dom.span(
{
className: "heap-tree-item-total-count",
title: L10N.getStr("heapview.field.totalcount.tooltip"),
},
L10N.getStr("heapview.field.totalcount")
),
dom.span({ className: "heap-tree-item-name" },
L10N.getStr("heapview.field.name"))
dom.span(
{
className: "heap-tree-item-name",
title: L10N.getStr("heapview.field.name.tooltip"),
},
L10N.getStr("heapview.field.name")
)
);
}
});

View File

@ -16,14 +16,29 @@ const DominatorTreeHeader = module.exports = createClass({
className: "header"
},
dom.span({ className: "heap-tree-item-bytes" },
L10N.getStr("heapview.field.retainedSize")),
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" },
L10N.getStr("heapview.field.shallowSize")),
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" },
L10N.getStr("heapview.field.name"))
dom.span(
{
className: "heap-tree-item-name",
title: L10N.getStr("dominatortree.field.label.tooltip"),
},
L10N.getStr("dominatortree.field.label")
)
);
}
});

View File

@ -67,7 +67,10 @@ const Toolbar = module.exports = createClass({
},
dom.label(
{ className: "breakdown-by" },
{
className: "breakdown-by",
title: L10N.getStr("toolbar.breakdownBy.tooltip"),
},
L10N.getStr("toolbar.breakdownBy"),
dom.select(
{
@ -75,10 +78,11 @@ const Toolbar = module.exports = createClass({
className: "select-breakdown",
onChange: e => onBreakdownChange(e.target.value),
},
breakdowns.map(({ name, displayName }) => dom.option(
breakdowns.map(({ name, tooltip, displayName }) => dom.option(
{
key: name,
value: name
value: name,
title: tooltip,
},
displayName
))
@ -86,7 +90,9 @@ const Toolbar = module.exports = createClass({
),
dom.label(
{},
{
title: L10N.getStr("checkbox.invertTree.tooltip")
},
dom.input({
id: "invert-tree-checkbox",
type: "checkbox",
@ -103,6 +109,7 @@ const Toolbar = module.exports = createClass({
type: "search",
className: "devtools-searchinput",
placeholder: L10N.getStr("filter.placeholder"),
title: L10N.getStr("filter.tooltip"),
onChange: event => setFilterString(event.target.value),
value: !!filterString ? filterString : undefined,
})
@ -116,17 +123,21 @@ const Toolbar = module.exports = createClass({
},
dom.label(
{ className: "label-by" },
{
className: "label-by",
title: L10N.getStr("toolbar.labelBy.tooltip"),
},
L10N.getStr("toolbar.labelBy"),
dom.select(
{
id: "select-dominator-tree-breakdown",
onChange: e => onDominatorTreeBreakdownChange(e.target.value),
},
dominatorTreeBreakdowns.map(({ name, displayName }) => dom.option(
dominatorTreeBreakdowns.map(({ name, tooltip, displayName }) => dom.option(
{
key: name,
value: name
value: name,
title: tooltip,
},
displayName
))
@ -138,7 +149,9 @@ const Toolbar = module.exports = createClass({
let viewSelect;
if (view !== viewState.DIFFING) {
viewSelect = dom.label(
{},
{
title: L10N.getStr("toolbar.view.tooltip"),
},
L10N.getStr("toolbar.view"),
dom.select(
{
@ -146,10 +159,20 @@ const Toolbar = module.exports = createClass({
onChange: e => onViewChange(e.target.value),
defaultValue: viewState.CENSUS,
},
dom.option({ value: viewState.CENSUS },
L10N.getStr("toolbar.view.census")),
dom.option({ value: viewState.DOMINATOR_TREE },
L10N.getStr("toolbar.view.dominators"))
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")
)
)
);
}
@ -202,7 +225,9 @@ const Toolbar = module.exports = createClass({
),
dom.label(
{},
{
title: L10N.getStr("checkbox.recordAllocationStacks.tooltip"),
},
dom.input({
id: "record-allocation-stacks-checkbox",
type: "checkbox",

View File

@ -111,6 +111,12 @@ const OBJECT_CLASS = { by: "objectClass", then: COUNT, other: COUNT };
const breakdowns = exports.breakdowns = {
coarseType: {
displayName: "Coarse Type",
get tooltip() {
// Importing down here is necessary because of the circular dependency
// this introduces with `./utils.js`.
const { L10N } = require("./utils");
return L10N.getStr("breakdowns.coarseType.tooltip");
},
breakdown: {
by: "coarseType",
objects: OBJECT_CLASS,
@ -126,16 +132,28 @@ const breakdowns = exports.breakdowns = {
allocationStack: {
displayName: "Allocation Stack",
get tooltip() {
const { L10N } = require("./utils");
return L10N.getStr("breakdowns.allocationStack.tooltip");
},
breakdown: ALLOCATION_STACK,
},
objectClass: {
displayName: "Object Class",
get tooltip() {
const { L10N } = require("./utils");
return L10N.getStr("breakdowns.objectClass.tooltip");
},
breakdown: OBJECT_CLASS,
},
internalType: {
displayName: "Internal Type",
get tooltip() {
const { L10N } = require("./utils");
return L10N.getStr("breakdowns.internalType.tooltip");
},
breakdown: INTERNAL_TYPE,
},
};
@ -158,11 +176,19 @@ const DOMINATOR_TREE_LABEL_COARSE_TYPE = {
const dominatorTreeBreakdowns = exports.dominatorTreeBreakdowns = {
coarseType: {
displayName: "Coarse Type",
get tooltip() {
const { L10N } = require("./utils");
return L10N.getStr("dominatorTreeBreakdowns.coarseType.tooltip");
},
breakdown: DOMINATOR_TREE_LABEL_COARSE_TYPE
},
allocationStack: {
displayName: "Allocation Stack",
get tooltip() {
const { L10N } = require("./utils");
return L10N.getStr("dominatorTreeBreakdowns.allocationStack.tooltip");
},
breakdown: {
by: "allocationStack",
then: DOMINATOR_TREE_LABEL_COARSE_TYPE,
@ -172,6 +198,10 @@ const dominatorTreeBreakdowns = exports.dominatorTreeBreakdowns = {
internalType: {
displayName: "Internal Type",
get tooltip() {
const { L10N } = require("./utils");
return L10N.getStr("dominatorTreeBreakdowns.internalType.tooltip");
},
breakdown: INTERNAL_TYPE,
},
};

View File

@ -8,7 +8,6 @@ Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
const STRINGS_URI = "chrome://devtools/locale/memory.properties"
const L10N = exports.L10N = new ViewHelpers.L10N(STRINGS_URI);
const { URL } = require("sdk/url");
const { OS } = require("resource://gre/modules/osfile.jsm");
const { assert } = require("devtools/shared/DevToolsUtils");
const { Preferences } = require("resource://gre/modules/Preferences.jsm");
@ -56,26 +55,31 @@ exports.getSnapshotTitle = function (snapshot) {
* @return {Object{name, displayName}}
*/
exports.getBreakdownDisplayData = function () {
return exports.getBreakdownNames().map(name => {
return exports.getBreakdownNames().map(({ name, tooltip }) => {
// If it's a preset use the display name value
let preset = breakdowns[name];
let displayName = name;
if (preset && preset.displayName) {
displayName = preset.displayName;
}
return { name, displayName };
return { name, tooltip, displayName };
});
};
/**
* Returns an array of the unique names for each breakdown in
* Returns an array of the unique names and tooltips for each breakdown in
* presets and custom pref.
*
* @return {Array<Breakdown>}
* @return {Array<Object>}
*/
exports.getBreakdownNames = function () {
let custom = exports.getCustomBreakdowns();
return Object.keys(Object.assign({}, breakdowns, custom));
return Object.keys(Object.assign({}, breakdowns, custom))
.map(key => {
return breakdowns[key]
? { name: key, tooltip: breakdowns[key].tooltip }
: { name: key };
});
};
/**
@ -127,14 +131,14 @@ exports.breakdownNameToSpec = function (name) {
* @return {Array<Object>}
*/
exports.getDominatorTreeBreakdownDisplayData = function () {
return exports.getDominatorTreeBreakdownNames().map(name => {
return exports.getDominatorTreeBreakdownNames().map(({ name, tooltip }) => {
// If it's a preset use the display name value
let preset = dominatorTreeBreakdowns[name];
let displayName = name;
if (preset && preset.displayName) {
displayName = preset.displayName;
}
return { name, displayName };
return { name, tooltip, displayName };
});
};
@ -146,7 +150,12 @@ exports.getDominatorTreeBreakdownDisplayData = function () {
*/
exports.getDominatorTreeBreakdownNames = function () {
let custom = exports.getCustomDominatorTreeBreakdowns();
return Object.keys(Object.assign({}, dominatorTreeBreakdowns, custom));
return Object.keys(Object.assign({}, dominatorTreeBreakdowns, custom))
.map(key => {
return dominatorTreeBreakdowns[key]
? { name: key, tooltip: dominatorTreeBreakdowns[key].tooltip }
: { name: key };
});
};
/**
@ -163,7 +172,7 @@ exports.getCustomDominatorTreeBreakdowns = function () {
`String stored in "${CUSTOM_BREAKDOWN_PREF}" pref cannot be parsed by \`JSON.parse()\`.`);
}
return customBreakdowns;
}
};
/**
* Converts a dominator tree breakdown preset name, like "allocationStack", and