Source code

Revision control

Other Tools

<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/content/shared/toolbarbutton.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/performance.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/jit-optimizations.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/components-frame.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % performanceDTD SYSTEM "chrome://devtools/locale/performance.dtd">
%performanceDTD;
]>
<popupset id="performance-options-popupset">
<menupopup id="performance-filter-menupopup" position="before_start"/>
<menupopup id="performance-options-menupopup" position="before_end">
<menuitem id="option-show-platform-data"
type="checkbox"
data-pref="show-platform-data"
label="&performanceUI.showPlatformData;"
tooltiptext="&performanceUI.showPlatformData.tooltiptext;"/>
<menuitem id="option-show-jit-optimizations"
class="experimental-option"
type="checkbox"
data-pref="show-jit-optimizations"
label="&performanceUI.showJITOptimizations;"
tooltiptext="&performanceUI.showJITOptimizations.tooltiptext;"/>
<menuitem id="option-enable-memory"
class="experimental-option"
type="checkbox"
data-pref="enable-memory"
label="&performanceUI.enableMemory;"
tooltiptext="&performanceUI.enableMemory.tooltiptext;"/>
<menuitem id="option-enable-allocations"
type="checkbox"
data-pref="enable-allocations"
label="&performanceUI.enableAllocations;"
tooltiptext="&performanceUI.enableAllocations.tooltiptext;"/>
<menuitem id="option-enable-framerate"
type="checkbox"
data-pref="enable-framerate"
label="&performanceUI.enableFramerate;"
tooltiptext="&performanceUI.enableFramerate.tooltiptext;"/>
<menuitem id="option-invert-call-tree"
type="checkbox"
data-pref="invert-call-tree"
label="&performanceUI.invertTree;"
tooltiptext="&performanceUI.invertTree.tooltiptext;"/>
<menuitem id="option-invert-flame-graph"
type="checkbox"
data-pref="invert-flame-graph"
label="&performanceUI.invertFlameGraph;"
tooltiptext="&performanceUI.invertFlameGraph.tooltiptext;"/>
<menuitem id="option-flatten-tree-recursion"
type="checkbox"
data-pref="flatten-tree-recursion"
label="&performanceUI.flattenTreeRecursion;"
tooltiptext="&performanceUI.flattenTreeRecursion.tooltiptext;"/>
</menupopup>
</popupset>
<hbox id="body" class="theme-body performance-tool" flex="1">
<!-- Sidebar: controls and recording list -->
<vbox id="recordings-pane">
<hbox id="recordings-controls">
<html:div id='recording-controls-mount'/>
</hbox>
<vbox id="recordings-list" class="theme-sidebar" flex="1">
<html:div id="recording-list-mount"/>
</vbox>
</vbox>
<!-- Main panel content -->
<vbox id="performance-pane" flex="1">
<!-- Top toolbar controls -->
<toolbar id="performance-toolbar"
class="devtools-toolbar">
<hbox id="performance-toolbar-controls-other"
class="devtools-toolbarbutton-group">
<toolbarbutton id="filter-button"
class="devtools-toolbarbutton"
popup="performance-filter-menupopup"
tooltiptext="&performanceUI.options.filter.tooltiptext;"/>
</hbox>
<hbox id="performance-toolbar-controls-detail-views"
class="devtools-toolbarbutton-group">
<toolbarbutton id="select-waterfall-view"
class="devtools-toolbarbutton"
label="&performanceUI.toolbar.waterfall;"
hidden="true"
data-view="waterfall"
tooltiptext="&performanceUI.toolbar.waterfall.tooltiptext;" />
<toolbarbutton id="select-js-calltree-view"
class="devtools-toolbarbutton"
label="&performanceUI.toolbar.js-calltree;"
hidden="true"
data-view="js-calltree"
tooltiptext="&performanceUI.toolbar.js-calltree.tooltiptext;" />
<toolbarbutton id="select-js-flamegraph-view"
class="devtools-toolbarbutton"
label="&performanceUI.toolbar.js-flamegraph;"
hidden="true"
data-view="js-flamegraph"
tooltiptext="&performanceUI.toolbar.js-flamegraph.tooltiptext;" />
<toolbarbutton id="select-memory-calltree-view"
class="devtools-toolbarbutton"
label="&performanceUI.toolbar.memory-calltree;"
hidden="true"
data-view="memory-calltree"
tooltiptext="&performanceUI.toolbar.allocations.tooltiptext;" />
<toolbarbutton id="select-memory-flamegraph-view"
class="devtools-toolbarbutton"
label="&performanceUI.toolbar.memory-flamegraph;"
hidden="true"
data-view="memory-flamegraph" />
</hbox>
<spacer flex="1"></spacer>
<hbox id="performance-toolbar-controls-options"
class="devtools-toolbarbutton-group">
<toolbarbutton id="performance-options-button"
class="devtools-toolbarbutton devtools-option-toolbarbutton"
popup="performance-options-menupopup"
tooltiptext="&performanceUI.options.gear.tooltiptext;"/>
</hbox>
</toolbar>
<!-- Recording contents and general notice messages -->
<deck id="performance-view" flex="1">
<!-- A default notice, shown while initially opening the tool.
Keep this element the first child of #performance-view. -->
<hbox id="tool-loading-notice"
class="notice-container"
flex="1">
</hbox>
<!-- "Unavailable" notice, shown when the entire tool is disabled,
for example, when in private browsing mode. -->
<vbox id="unavailable-notice"
class="notice-container"
align="center"
pack="center"
flex="1">
<hbox pack="center">
<html:div class='recording-button-mount'/>
</hbox>
<description class="tool-disabled-message">
&performanceUI.unavailableNoticePB;
</description>
</vbox>
<!-- "Empty" notice, shown when there's no recordings available -->
<hbox id="empty-notice"
class="notice-container"
align="center"
pack="center"
flex="1">
<hbox pack="center">
<html:div class='recording-button-mount'/>
</hbox>
</hbox>
<!-- Recording contents -->
<vbox id="performance-view-content" flex="1">
<!-- Overview graphs -->
<vbox id="overview-pane">
<hbox id="markers-overview"/>
<hbox id="memory-overview"/>
<hbox id="time-framerate"/>
</vbox>
<!-- Detail views and specific notice messages -->
<deck id="details-pane-container" flex="1">
<!-- "Loading" notice, shown when a recording is being loaded -->
<hbox id="loading-notice"
class="notice-container devtools-throbber"
align="center"
pack="center"
flex="1">
<label value="&performanceUI.loadingNotice;"/>
</hbox>
<!-- "Recording" notice, shown when a recording is in progress -->
<vbox id="recording-notice"
class="notice-container"
align="center"
pack="center"
flex="1">
<hbox pack="center">
<html:div class='recording-button-mount'/>
</hbox>
<label class="realtime-disabled-on-e10s-message"
value="&performanceUI.disabledRealTime.disabledE10S;"/>
<label class="buffer-status-message"
tooltiptext="&performanceUI.bufferStatusTooltip;"/>
<label class="buffer-status-message-full"
value="&performanceUI.bufferStatusFull;"/>
</vbox>
<!-- "Console" notice, shown when a console recording is in progress -->
<vbox id="console-recording-notice"
class="notice-container"
align="center"
pack="center"
flex="1">
<hbox class="console-profile-recording-notice">
<label value="&performanceUI.console.recordingNoticeStart;" />
<label class="console-profile-command" />
<label value="&performanceUI.console.recordingNoticeEnd;" />
</hbox>
<hbox class="console-profile-stop-notice">
<label value="&performanceUI.console.stopCommandStart;" />
<label class="console-profile-command" />
<label value="&performanceUI.console.stopCommandEnd;" />
</hbox>
<label class="realtime-disabled-on-e10s-message"
value="&performanceUI.disabledRealTime.disabledE10S;"/>
<label class="buffer-status-message"
tooltiptext="&performanceUI.bufferStatusTooltip;"/>
<label class="buffer-status-message-full"
value="&performanceUI.bufferStatusFull;"/>
</vbox>
<!-- Detail views -->
<deck id="details-pane" flex="1">
<!-- Waterfall -->
<hbox id="waterfall-view" flex="1">
<html:div xmlns="http://www.w3.org/1999/xhtml" id="waterfall-tree" />
<splitter class="devtools-side-splitter"/>
<vbox id="waterfall-details"
class="theme-sidebar"/>
</hbox>
<!-- JS Tree and JIT view -->
<hbox id="js-profile-view" flex="1">
<vbox id="js-calltree-view" flex="1">
<hbox class="call-tree-headers-container">
<label class="plain call-tree-header"
type="duration"
crop="end"
value="&performanceUI.table.totalDuration;"
tooltiptext="&performanceUI.table.totalDuration.tooltip;"/>
<label class="plain call-tree-header"
type="percentage"
crop="end"
value="&performanceUI.table.totalPercentage;"
tooltiptext="&performanceUI.table.totalPercentage.tooltip;"/>
<label class="plain call-tree-header"
type="self-duration"
crop="end"
value="&performanceUI.table.selfDuration;"
tooltiptext="&performanceUI.table.selfDuration.tooltip;"/>
<label class="plain call-tree-header"
type="self-percentage"
crop="end"
value="&performanceUI.table.selfPercentage;"
tooltiptext="&performanceUI.table.selfPercentage.tooltip;"/>
<label class="plain call-tree-header"
type="samples"
crop="end"
value="&performanceUI.table.samples;"
tooltiptext="&performanceUI.table.samples.tooltip;"/>
<label class="plain call-tree-header"
type="function"
crop="end"
value="&performanceUI.table.function;"
tooltiptext="&performanceUI.table.function.tooltip;"/>
</hbox>
<vbox class="call-tree-cells-container" flex="1"/>
</vbox>
<splitter class="devtools-side-splitter"/>
<!-- Optimizations Panel -->
<vbox id="jit-optimizations-view"
class="hidden">
</vbox>
</hbox>
<!-- JS FlameChart -->
<hbox id="js-flamegraph-view" flex="1">
</hbox>
<!-- Memory Tree -->
<vbox id="memory-calltree-view" flex="1">
<hbox class="call-tree-headers-container">
<label class="plain call-tree-header"
type="self-size"
crop="end"
value="Self Bytes"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="self-size-percentage"
crop="end"
value="Self Bytes %"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="self-count"
crop="end"
value="Self Count"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="self-count-percentage"
crop="end"
value="Self Count %"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="size"
crop="end"
value="Total Size"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="size-percentage"
crop="end"
value="Total Size %"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="count"
crop="end"
value="Total Count"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="count-percentage"
crop="end"
value="Total Count %"
tooltiptext="&performanceUI.table.totalAlloc.tooltip;"/>
<label class="plain call-tree-header"
type="function"
crop="end"
value="&performanceUI.table.function;"/>
</hbox>
<vbox class="call-tree-cells-container" flex="1"/>
</vbox>
<!-- Memory FlameChart -->
<hbox id="memory-flamegraph-view" flex="1"></hbox>
</deck>
</deck>
</vbox>
</deck>
</vbox>
</hbox>
</window>