<?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>