369 lines
17 KiB
XML
369 lines
17 KiB
XML
<?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/" type="text/css"?>
|
|
<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.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;
|
|
]>
|
|
|
|
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
|
xmlns:html="http://www.w3.org/1999/xhtml">
|
|
<script src="chrome://devtools/content/shared/theme-switching.js"/>
|
|
<script type="application/javascript" src="performance-controller.js"/>
|
|
<script type="application/javascript" src="performance-view.js"/>
|
|
<script type="application/javascript" src="views/overview.js"/>
|
|
<script type="application/javascript" src="views/toolbar.js"/>
|
|
<script type="application/javascript" src="views/details-abstract-subview.js"/>
|
|
<script type="application/javascript" src="views/details-waterfall.js"/>
|
|
<script type="application/javascript" src="views/details-js-call-tree.js"/>
|
|
<script type="application/javascript" src="views/details-js-flamegraph.js"/>
|
|
<script type="application/javascript" src="views/details-memory-call-tree.js"/>
|
|
<script type="application/javascript" src="views/details-memory-flamegraph.js"/>
|
|
<script type="application/javascript" src="views/details.js"/>
|
|
<script type="application/javascript" src="views/recordings.js"/>
|
|
|
|
<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 devtools-button"
|
|
label="&performanceUI.toolbar.waterfall;"
|
|
hidden="true"
|
|
data-view="waterfall"
|
|
tooltiptext="&performanceUI.toolbar.waterfall.tooltiptext;" />
|
|
<toolbarbutton id="select-js-calltree-view"
|
|
class="devtools-toolbarbutton devtools-button"
|
|
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 devtools-button"
|
|
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 devtools-button"
|
|
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 devtools-button"
|
|
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-message"
|
|
value="&performanceUI.disabledRealTime.nonE10SBuild;"/>
|
|
<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-message"
|
|
value="&performanceUI.disabledRealTime.nonE10SBuild;"/>
|
|
<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>
|