fune/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
Mike Conley 411230f211 Bug 1339775 - Add role="checkbox" for specially styled in-content checkboxes. r=jaws
MozReview-Commit-ID: IZhRECggz4j

--HG--
extra : rebase_source : a95bafc0996c6021a4dff4f0cd7addb1a45a9f6e
2017-03-23 00:05:03 -04:00

188 lines
5.3 KiB
HTML

<?xml version="1.0"?>
<!-- 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/. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>about:performance</title>
<link rel="icon" type="image/png" id="favicon"
href="chrome://branding/content/icon32.png"/>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css"
type="text/css"/>
<script type="text/javascript" src="chrome://global/content/aboutPerformance.js"></script>
<style>
@import url("chrome://global/skin/in-content/common.css");
html {
--aboutSupport-table-background: #ebebeb;
background-color: var(--in-content-page-background);
}
body {
margin: 40px 48px;
}
.hidden {
display: none;
}
.summary .title {
font-weight: bold;
}
a {
text-decoration: none;
}
a.more {
margin-left: 2ch;
}
ul.hidden_additional_items {
padding-top: 0;
margin-top: 0;
}
ul.visible_items {
padding-bottom: 0;
margin-bottom: 0;
}
li.delta {
margin-top: .5em;
}
h2 {
margin-top: 1cm;
}
button.show_all_items {
margin-top: .5cm;
margin-left: 1cm;
}
body {
margin-left: 1cm;
}
div.measuring {
background: url(chrome://global/skin/media/throbber.png) no-repeat center;
min-width: 36px;
min-height: 36px;
}
li.delta {
border-left-width: 5px;
border-left-style: solid;
padding-left: 1em;
list-style: none;
}
li.delta[impact="0"] {
border-left-color: rgb(0, 255, 0);
}
li.delta[impact="1"] {
border-left-color: rgb(24, 231, 0);
}
li.delta[impact="2"] {
border-left-color: rgb(48, 207, 0);
}
li.delta[impact="3"] {
border-left-color: rgb(72, 183, 0);
}
li.delta[impact="4"] {
border-left-color: rgb(96, 159, 0);
}
li.delta[impact="5"] {
border-left-color: rgb(120, 135, 0);
}
li.delta[impact="6"] {
border-left-color: rgb(144, 111, 0);
}
li.delta[impact="7"] {
border-left-color: rgb(168, 87, 0);
}
li.delta[impact="8"] {
border-left-color: rgb(192, 63, 0);
}
li.delta[impact="9"] {
border-left-color: rgb(216, 39, 0);
}
li.delta[impact="10"] {
border-left-color: rgb(240, 15, 0);
}
li.delta[impact="11"] {
border-left-color: rgb(255, 0, 0);
}
#subprocess-reports {
background-color: var(--aboutSupport-table-background);
color: var(--in-content-text-color);
font: message-box;
text-align: start;
border: 1px solid var(--in-content-border-color);
border-spacing: 0px;
float: right;
margin-bottom: 20px;
-moz-margin-start: 20px;
-moz-margin-end: 0;
width: 100%;
}
#subprocess-reports:dir(rtl) {
float: left;
}
#subprocess-reports th,
#subprocess-reports td {
border: 1px solid var(--in-content-border-color);
padding: 4px;
}
#subprocess-reports thead th {
text-align: center;
}
#subprocess-reports th {
text-align: start;
background-color: var(--in-content-table-header-background);
color: var(--in-content-selected-text);
}
#subprocess-reports th.column {
white-space: nowrap;
width: 0px;
}
#subprocess-reports td {
background-color: #ebebeb;
text-align: start;
border-color: var(--in-content-table-border-dark-color);
border-spacing: 40px;
}
.options {
width: 100%;
}
.options > .toggle-container-with-text {
display: inline-flex;
}
.options > .toggle-container-with-text:not(:first-child) {
margin-inline-start: 2ch;
}
</style>
</head>
<body onload="go()">
<div>
<h2>Memory usage of Subprocesses</h2>
<table id="subprocess-reports">
<tr>
<th>Process ID</th>
<th title="RSS measures the pages resident in the main memory for the process">Resident Set Size</th>
<th title="USS gives a count of unshared pages, unique to the process">Unique Set Size</th>
</tr>
</table>
</div>
<div class="options">
<div class="toggle-container-with-text">
<input type="checkbox" checked="false" id="check-display-recent" role="checkbox"></input>
<label for="check-display-recent" id="label-display-recent">Display only the last few seconds.</label>
</div>
<div class="toggle-container-with-text">
<input type="checkbox" checked="true" id="check-autorefresh" role="checkbox"></input>
<label for="check-autorefresh">Refresh automatically</label>
</div>
</div>
<div>
<h2>Performance of Add-ons</h2>
<div id="addons" class="measuring">
</div>
</div>
<div>
<h2>Performance of Web pages</h2>
<div id="webpages" class="measuring">
</div>
</div>
</body>
</html>