palemoon-dev/platform/devtools/client/performance/performance.xul

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