Add background color to the timestamp column in the profiler
This commit is contained in:
Gaël Métais
+4
-4
@@ -21,10 +21,10 @@ module.exports = function(grunt) {
|
||||
less: {
|
||||
icons: {
|
||||
files: {
|
||||
'app/public/styles/main.css': [
|
||||
//'app/public/styles/less/icons.less',
|
||||
'app/public/styles/less/main.less'
|
||||
]
|
||||
'app/public/styles/main.css': [ 'app/public/styles/less/main.less' ],
|
||||
'app/public/styles/index.css': [ 'app/public/styles/less/index.less' ],
|
||||
'app/public/styles/launchTest.css': [ 'app/public/styles/less/launchTest.less' ],
|
||||
'app/public/styles/results.css': [ 'app/public/styles/less/results.less' ]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -275,7 +275,14 @@
|
||||
<span ng-if="node.data.time > slowRequestsLimit" class="icon-warning" title="Slower than {{slowRequestsLimit}} ms"></span>
|
||||
</div>
|
||||
<div class="duration" ng-if="node.data.time == undefined"></div>
|
||||
<div class="startTime">{{node.data.timestamp | number: 0}}</div>
|
||||
<div class="startTime" ng-class="{
|
||||
domCreation: node.data.timestamp < phantomasResults.metrics.domInteractive,
|
||||
domContentLoaded: node.data.timestamp >= phantomasResults.metrics.domContentLoaded
|
||||
&& node.data.timestamp < phantomasResults.metrics.domContentLoadedEnd,
|
||||
domContentLoadedEnd: node.data.timestamp >= phantomasResults.metrics.domContentLoadedEnd
|
||||
&& node.data.timestamp < phantomasResults.metrics.domComplete,
|
||||
domComplete: node.data.timestamp >= phantomasResults.metrics.domComplete
|
||||
}">{{node.data.timestamp | number: 0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
+23
-25
@@ -1,35 +1,33 @@
|
||||
.promess {
|
||||
padding: 0em 2em 3em;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
padding: 0em 2em 3em;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.url {
|
||||
width: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.launchBtn {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type=submit], input.url {
|
||||
padding: 0 0.5em;
|
||||
margin: 0.5em;
|
||||
font-size: 1.2em;
|
||||
height: 2em;
|
||||
border: 0 solid;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0.1em 0.2em 0 0 #5e2846;
|
||||
outline: none;
|
||||
input[type=submit],
|
||||
input.url {
|
||||
padding: 0 0.5em;
|
||||
margin: 0.5em;
|
||||
font-size: 1.2em;
|
||||
height: 2em;
|
||||
border: 0 solid;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0.1em 0.2em 0 0 #5e2846;
|
||||
outline: none;
|
||||
}
|
||||
input[type=submit]:hover {
|
||||
color: #ddd;
|
||||
color: #ddd;
|
||||
}
|
||||
input[type=submit].clicked {
|
||||
color: #ddd;
|
||||
position: relative;
|
||||
left: 0.1em;
|
||||
top: 0.2em;
|
||||
box-shadow: none;
|
||||
}
|
||||
color: #ddd;
|
||||
position: relative;
|
||||
left: 0.1em;
|
||||
top: 0.2em;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1,19 +1,25 @@
|
||||
#status {
|
||||
margin-top: 2em;
|
||||
font-size: 2.5em;
|
||||
margin-top: 2em;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotating {
|
||||
from { -webkit-transform: rotate(0deg); }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotating {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.waiting .icon-lab {
|
||||
-webkit-animation: rotating 3s linear 0s infinite;
|
||||
-webkit-transform: translateZ(0);
|
||||
animation: rotating 3s linear 0s infinite;
|
||||
}
|
||||
-webkit-animation: rotating 3s linear 0s infinite;
|
||||
-webkit-transform: translateZ(0);
|
||||
animation: rotating 3s linear 0s infinite;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@list-font-family: "fontsmith-icons";
|
||||
@list-value: "\e003";
|
||||
@list: '"fontsmith-icons"' '"\\e003"';
|
||||
@drawer3-font-family: "fontsmith-icons";
|
||||
@drawer3-value: "\e005";
|
||||
@drawer3: '"fontsmith-icons"' '"\\e005"';
|
||||
@@ -10,15 +13,12 @@
|
||||
@warning-font-family: "fontsmith-icons";
|
||||
@warning-value: "\e000";
|
||||
@warning: '"fontsmith-icons"' '"\\e000"';
|
||||
@tree-font-family: "fontsmith-icons";
|
||||
@tree-value: "\e001";
|
||||
@tree: '"fontsmith-icons"' '"\\e001"';
|
||||
@list-font-family: "fontsmith-icons";
|
||||
@list-value: "\e003";
|
||||
@list: '"fontsmith-icons"' '"\\e003"';
|
||||
@arrow-left3-font-family: "fontsmith-icons";
|
||||
@arrow-left3-value: "\e006";
|
||||
@arrow-left3: '"fontsmith-icons"' '"\\e006"';
|
||||
@tree-font-family: "fontsmith-icons";
|
||||
@tree-value: "\e001";
|
||||
@tree: '"fontsmith-icons"' '"\\e001"';
|
||||
|
||||
.icon-font-family(@char) {
|
||||
font-family: ~`@{char}[0]`;
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
.promess {
|
||||
padding: 0em 2em 3em;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.url {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.launchBtn {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type=submit], input.url {
|
||||
padding: 0 0.5em;
|
||||
margin: 0.5em;
|
||||
font-size: 1.2em;
|
||||
height: 2em;
|
||||
border: 0 solid;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0.1em 0.2em 0 0 #5e2846;
|
||||
outline: none;
|
||||
}
|
||||
input[type=submit]:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
input[type=submit].clicked {
|
||||
color: #ddd;
|
||||
position: relative;
|
||||
left: 0.1em;
|
||||
top: 0.2em;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
#status {
|
||||
margin-top: 2em;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotating {
|
||||
from { -webkit-transform: rotate(0deg); }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes rotating {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.waiting .icon-lab {
|
||||
-webkit-animation: rotating 3s linear 0s infinite;
|
||||
-webkit-transform: translateZ(0);
|
||||
animation: rotating 3s linear 0s infinite;
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
|
||||
/* Timeline colors, related to Window Performances */
|
||||
@domCreationColor: #FF6600;
|
||||
@domCreationBg: #FFE0CC;
|
||||
@domContentLoadedColor: #A7E846;
|
||||
@domContentLoadedBg: #E0FFD1;
|
||||
@domContentLoadedEndColor: #7ECCCC;
|
||||
@domContentLoadedEndBg: #D8F0F0;
|
||||
@domCompleteColor: #C2A3FF;
|
||||
@domCompleteBg: #EDE3FF;
|
||||
|
||||
|
||||
|
||||
.resultsMenu {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.resultsMenu .menuItem {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
height: 7em;
|
||||
color: #fff;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.resultsMenu .back {
|
||||
color: #5e2846;
|
||||
border-color: #5e2846;
|
||||
}
|
||||
.resultsMenu .menuItem div {
|
||||
padding-top: 0.5em;
|
||||
font-size: 3em;
|
||||
}
|
||||
.resultsMenu .active, .resultsMenu .menuItem.active:hover {
|
||||
color: #ffa319;
|
||||
border-color: #ffa319;
|
||||
}
|
||||
.resultsMenu .menuItem:hover {
|
||||
color: #ffa319;
|
||||
}
|
||||
|
||||
.resultsMenu span {
|
||||
position: relative;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
.testedUrl {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.summary, .metrics, .execution {
|
||||
margin-top: 2em;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-radius: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.notations {
|
||||
display: table;
|
||||
width: 40em;
|
||||
margin-left: 6em;
|
||||
border-spacing: 0.5em;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.notations {
|
||||
width: 30em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.notations > div {
|
||||
display: table-row;
|
||||
}
|
||||
.notations > div > div {
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.notations .notation {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.notations .criteria {
|
||||
padding-top: 0.9em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA {
|
||||
width: 2.5em;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
border-radius: 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.notations .A {
|
||||
/* green */
|
||||
background: #00DB61;
|
||||
}
|
||||
.notations .B {
|
||||
/* green */
|
||||
background: #CAD63D;
|
||||
}
|
||||
.notations .C {
|
||||
/* yellow */
|
||||
background: #FFD119;
|
||||
}
|
||||
.notations .D {
|
||||
/* orange */
|
||||
background: #FFA319;
|
||||
}
|
||||
.notations .E {
|
||||
/* red */
|
||||
background: #FF6600;
|
||||
}
|
||||
.notations .F {
|
||||
/* red */
|
||||
background: #FF1919;
|
||||
}
|
||||
.notations .NA {
|
||||
/* Non applicable */
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
margin: 2em 0 5em;
|
||||
}
|
||||
.timeline .chart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.timeline .startTime, .timeline .endTime {
|
||||
position: absolute;
|
||||
bottom: 0.5em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.timeline .startTime {
|
||||
left: 0em;
|
||||
}
|
||||
.timeline .endTime {
|
||||
right: 0em;
|
||||
}
|
||||
.timeline .chartPoints {
|
||||
display: table;
|
||||
height: 100px;
|
||||
width: 99%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.timeline .interval {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 0.5%;
|
||||
}
|
||||
.timeline .interval .color {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.timeline div.interval:hover {
|
||||
background: #9C4274;
|
||||
}
|
||||
.timeline .interval:hover .color {
|
||||
background: #F04DA7;
|
||||
}
|
||||
.timeline .domComplete.interval {
|
||||
background: @domCompleteBg;
|
||||
}
|
||||
.timeline .domComplete .color {
|
||||
background: @domCompleteColor;
|
||||
}
|
||||
.timeline .domContentLoadedEnd.interval {
|
||||
background: @domContentLoadedEndBg;
|
||||
}
|
||||
.timeline .domContentLoadedEnd .color {
|
||||
background: @domContentLoadedEndColor;
|
||||
}
|
||||
.timeline .domContentLoaded.interval {
|
||||
background: @domContentLoadedBg;
|
||||
}
|
||||
.timeline .domContentLoaded .color {
|
||||
background: @domContentLoadedColor;
|
||||
}
|
||||
.timeline .domCreation.interval {
|
||||
background: @domCreationBg;
|
||||
}
|
||||
.timeline .domCreation .color {
|
||||
background: @domCreationColor;
|
||||
}
|
||||
.timeline .tooltip.detailsOverlay {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: auto;
|
||||
padding: 0.5em 1em;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
.timeline .interval:hover .tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.timeline .legend {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.timeline .legend > div {
|
||||
display: table-row;
|
||||
}
|
||||
.timeline .legend > div > div {
|
||||
display: table-cell;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.timeline .titles {
|
||||
font-weight: bold;
|
||||
}
|
||||
.timeline .tips {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.timeline .tips > div {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
.timeline .legend .color {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0.4em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
border-radius: 0.2em;
|
||||
margin: 0 0.4em 0 1em;
|
||||
}
|
||||
|
||||
|
||||
.metrics h4 {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.metrics .module {
|
||||
padding-left: 4em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.metrics .legend {
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.metrics .offenders {
|
||||
padding-left: 0em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.metrics .offenders div {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.metrics .offenders ul {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
border: 1px dotted #aaa;
|
||||
}
|
||||
|
||||
.slowRequestsLimit {
|
||||
width: 3em;
|
||||
font-size: 1em;
|
||||
text-align: right;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
input.textFilter {
|
||||
box-shadow: none;
|
||||
font-size: 1em;
|
||||
padding: 0 0.2em;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: none;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-spacing: 0.25em;
|
||||
}
|
||||
|
||||
.table > div {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.table > .headers > div {
|
||||
font-weight: bold;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.table > div > div {
|
||||
padding: 0.1em 1em;
|
||||
background: #f2f2f2;
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
}
|
||||
.table > div.jsError > .type, .table > div.jsError > .value {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.table > div.windowPerformance > div {
|
||||
background: #EBD8E2;
|
||||
}
|
||||
.table > div.showingDetails > div {
|
||||
background: #f1c40f;
|
||||
}
|
||||
|
||||
.table > div > .index {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.table > div > .type {
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
.table > div > .value {
|
||||
width: 70%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.table > div > .details {
|
||||
position: relative;
|
||||
}
|
||||
.table .details .icon-question {
|
||||
color: #f1c40f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detailsOverlay {
|
||||
position: absolute;
|
||||
right: 3em;
|
||||
top: -3em;
|
||||
width: 45em;
|
||||
min-height: 1em;
|
||||
padding: 0 1em 1em;
|
||||
background: #fff;
|
||||
border: 2px solid #f1c40f;
|
||||
border-radius: 0.5em;
|
||||
z-index: 1;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.detailsOverlay {
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
.detailsOverlay .closeBtn {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
color: #f1c40f;
|
||||
cursor: pointer;
|
||||
}
|
||||
.detailsOverlay .advice {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.detailsOverlay .trace {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.table > div > .duration, .table > div > .startTime {
|
||||
text-align: center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.table > div > .startTime.domComplete {
|
||||
background: @domCompleteBg;
|
||||
}
|
||||
.table > div > .startTime.domContentLoadedEnd {
|
||||
background: @domContentLoadedEndBg;
|
||||
}
|
||||
.table > div > .startTime.domContentLoaded {
|
||||
background: @domContentLoadedBg;
|
||||
}
|
||||
.table > div > .startTime.domCreation {
|
||||
background: @domCreationBg;
|
||||
}
|
||||
|
||||
.table .icon-warning {
|
||||
color: #e74c3c;
|
||||
}
|
||||
+215
-219
@@ -1,369 +1,365 @@
|
||||
/* Timeline colors, related to Window Performances */
|
||||
.resultsMenu {
|
||||
margin-top: 2em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.resultsMenu .menuItem {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
height: 7em;
|
||||
color: #fff;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
height: 7em;
|
||||
color: #fff;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.resultsMenu .back {
|
||||
color: #5e2846;
|
||||
border-color: #5e2846;
|
||||
color: #5e2846;
|
||||
border-color: #5e2846;
|
||||
}
|
||||
.resultsMenu .menuItem div {
|
||||
padding-top: 0.5em;
|
||||
font-size: 3em;
|
||||
padding-top: 0.5em;
|
||||
font-size: 3em;
|
||||
}
|
||||
.resultsMenu .active, .resultsMenu .menuItem.active:hover {
|
||||
color: #ffa319;
|
||||
border-color: #ffa319;
|
||||
.resultsMenu .active,
|
||||
.resultsMenu .menuItem.active:hover {
|
||||
color: #ffa319;
|
||||
border-color: #ffa319;
|
||||
}
|
||||
.resultsMenu .menuItem:hover {
|
||||
color: #ffa319;
|
||||
color: #ffa319;
|
||||
}
|
||||
|
||||
.resultsMenu span {
|
||||
position: relative;
|
||||
top: 0.5em;
|
||||
position: relative;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
.testedUrl {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.summary, .metrics, .execution {
|
||||
margin-top: 2em;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-radius: 0.5em;
|
||||
text-align: left;
|
||||
.summary,
|
||||
.metrics,
|
||||
.execution {
|
||||
margin-top: 2em;
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-radius: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.notations {
|
||||
display: table;
|
||||
width: 40em;
|
||||
margin-left: 6em;
|
||||
border-spacing: 0.5em;
|
||||
display: table;
|
||||
width: 40em;
|
||||
margin-left: 6em;
|
||||
border-spacing: 0.5em;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.notations {
|
||||
width: 30em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.notations {
|
||||
width: 30em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.notations > div {
|
||||
display: table-row;
|
||||
display: table-row;
|
||||
}
|
||||
.notations > div > div {
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.notations .notation {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.notations .criteria {
|
||||
padding-top: 0.9em;
|
||||
font-weight: normal;
|
||||
padding-top: 0.9em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA {
|
||||
width: 2.5em;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
border-radius: 0.5em;
|
||||
font-weight: bold;
|
||||
.notations .A,
|
||||
.notations .B,
|
||||
.notations .C,
|
||||
.notations .D,
|
||||
.notations .E,
|
||||
.notations .F,
|
||||
.notations .NA {
|
||||
width: 2.5em;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
border-radius: 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.notations .A {
|
||||
/* green */
|
||||
background: #00DB61;
|
||||
/* green */
|
||||
background: #00DB61;
|
||||
}
|
||||
.notations .B {
|
||||
/* green */
|
||||
background: #CAD63D;
|
||||
/* green */
|
||||
background: #CAD63D;
|
||||
}
|
||||
.notations .C {
|
||||
/* yellow */
|
||||
background: #FFD119;
|
||||
/* yellow */
|
||||
background: #FFD119;
|
||||
}
|
||||
.notations .D {
|
||||
/* orange */
|
||||
background: #FFA319;
|
||||
/* orange */
|
||||
background: #FFA319;
|
||||
}
|
||||
.notations .E {
|
||||
/* red */
|
||||
background: #FF6600;
|
||||
/* red */
|
||||
background: #FF6600;
|
||||
}
|
||||
.notations .F {
|
||||
/* red */
|
||||
background: #FF1919;
|
||||
/* red */
|
||||
background: #FF1919;
|
||||
}
|
||||
.notations .NA {
|
||||
/* Non applicable */
|
||||
background: #CCC;
|
||||
/* Non applicable */
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
margin: 2em 0 5em;
|
||||
margin: 2em 0 5em;
|
||||
}
|
||||
.timeline .chart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #000;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.timeline .startTime, .timeline .endTime {
|
||||
position: absolute;
|
||||
bottom: 0.5em;
|
||||
font-size: 0.8em;
|
||||
.timeline .startTime,
|
||||
.timeline .endTime {
|
||||
position: absolute;
|
||||
bottom: 0.5em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.timeline .startTime {
|
||||
left: 0em;
|
||||
left: 0em;
|
||||
}
|
||||
.timeline .endTime {
|
||||
right: 0em;
|
||||
right: 0em;
|
||||
}
|
||||
.timeline .chartPoints {
|
||||
display: table;
|
||||
height: 100px;
|
||||
width: 99%;
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
height: 100px;
|
||||
width: 99%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.timeline .interval {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 0.5%;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 0.5%;
|
||||
}
|
||||
.timeline .interval .color {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.timeline div.interval:hover {
|
||||
background: #9C4274;
|
||||
background: #9C4274;
|
||||
}
|
||||
.timeline .interval:hover .color {
|
||||
background: #F04DA7;
|
||||
background: #F04DA7;
|
||||
}
|
||||
.timeline .domComplete.interval {
|
||||
background: #EDE3FF;
|
||||
background: #ede3ff;
|
||||
}
|
||||
.timeline .domComplete .color {
|
||||
background: #C2A3FF;
|
||||
background: #c2a3ff;
|
||||
}
|
||||
.timeline .domContentLoadedEnd.interval {
|
||||
background: #D8F0F0;
|
||||
background: #d8f0f0;
|
||||
}
|
||||
.timeline .domContentLoadedEnd .color {
|
||||
background: #7ECCCC;
|
||||
background: #7ecccc;
|
||||
}
|
||||
.timeline .domContentLoaded.interval {
|
||||
background: #E0FFD1;
|
||||
background: #e0ffd1;
|
||||
}
|
||||
.timeline .domContentLoaded .color {
|
||||
background: #A7E846;
|
||||
background: #a7e846;
|
||||
}
|
||||
.timeline .domCreation.interval {
|
||||
background: #FFE0CC;
|
||||
background: #ffe0cc;
|
||||
}
|
||||
.timeline .domCreation .color {
|
||||
background: #FF6600;
|
||||
background: #ff6600;
|
||||
}
|
||||
.timeline .tooltip.detailsOverlay {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: auto;
|
||||
padding: 0.5em 1em;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: auto;
|
||||
padding: 0.5em 1em;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
.timeline .interval:hover .tooltip {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.timeline .legend {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.timeline .legend > div {
|
||||
display: table-row;
|
||||
display: table-row;
|
||||
}
|
||||
.timeline .legend > div > div {
|
||||
display: table-cell;
|
||||
margin-top: 1em;
|
||||
display: table-cell;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.timeline .titles {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.timeline .tips {
|
||||
font-size: 0.7em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.timeline .tips > div {
|
||||
padding: 1em 1.5em;
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
.timeline .legend .color {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0.4em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
border-radius: 0.2em;
|
||||
margin: 0 0.4em 0 1em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0.4em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
border-radius: 0.2em;
|
||||
margin: 0 0.4em 0 1em;
|
||||
}
|
||||
|
||||
|
||||
.metrics h4 {
|
||||
padding-left: 2em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.metrics .module {
|
||||
padding-left: 4em;
|
||||
padding-top: 0.5em;
|
||||
padding-left: 4em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.metrics .legend {
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.metrics .offenders {
|
||||
padding-left: 0em;
|
||||
font-size: 0.8em;
|
||||
padding-left: 0em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.metrics .offenders div {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.metrics .offenders ul {
|
||||
margin-top: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
border: 1px dotted #aaa;
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
border: 1px dotted #aaa;
|
||||
}
|
||||
|
||||
.slowRequestsLimit {
|
||||
width: 3em;
|
||||
font-size: 1em;
|
||||
text-align: right;
|
||||
border: 1px solid #aaa;
|
||||
width: 3em;
|
||||
font-size: 1em;
|
||||
text-align: right;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
input.textFilter {
|
||||
box-shadow: none;
|
||||
font-size: 1em;
|
||||
padding: 0 0.2em;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: none;
|
||||
width: 15em;
|
||||
box-shadow: none;
|
||||
font-size: 1em;
|
||||
padding: 0 0.2em;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: none;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-spacing: 0.25em;
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-spacing: 0.25em;
|
||||
}
|
||||
|
||||
.table > div {
|
||||
display: table-row;
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.table > .headers > div {
|
||||
font-weight: bold;
|
||||
padding: 0.5em 1em;
|
||||
font-weight: bold;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.table > div > div {
|
||||
padding: 0.1em 1em;
|
||||
background: #f2f2f2;
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
padding: 0.1em 1em;
|
||||
background: #f2f2f2;
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
}
|
||||
.table > div.jsError > .type, .table > div.jsError > .value {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
.table > div.jsError > .type,
|
||||
.table > div.jsError > .value {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.table > div.windowPerformance > div {
|
||||
background: #EBD8E2;
|
||||
.table > div.windowPerformance > div, .table > div.windowPerformance > div.startTime {
|
||||
background: #EBD8E2;
|
||||
}
|
||||
.table > div.showingDetails > div {
|
||||
background: #f1c40f;
|
||||
background: #f1c40f;
|
||||
}
|
||||
|
||||
.table > div > .index {
|
||||
color: #bbb;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.table > div > .type {
|
||||
white-space:nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table > div > .value {
|
||||
width: 70%;
|
||||
word-break: break-all;
|
||||
width: 70%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.table > div > .details {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
.table .details .icon-question {
|
||||
color: #f1c40f;
|
||||
cursor: pointer;
|
||||
color: #f1c40f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detailsOverlay {
|
||||
position: absolute;
|
||||
right: 3em;
|
||||
top: -3em;
|
||||
width: 45em;
|
||||
min-height: 1em;
|
||||
padding: 0 1em 1em;
|
||||
background: #fff;
|
||||
border: 2px solid #f1c40f;
|
||||
border-radius: 0.5em;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 3em;
|
||||
top: -3em;
|
||||
width: 45em;
|
||||
min-height: 1em;
|
||||
padding: 0 1em 1em;
|
||||
background: #fff;
|
||||
border: 2px solid #f1c40f;
|
||||
border-radius: 0.5em;
|
||||
z-index: 1;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.detailsOverlay {
|
||||
width: 25em;
|
||||
}
|
||||
.detailsOverlay {
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
.detailsOverlay .closeBtn {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
color: #f1c40f;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
color: #f1c40f;
|
||||
cursor: pointer;
|
||||
}
|
||||
.detailsOverlay .advice {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.detailsOverlay .trace {
|
||||
word-break: break-all;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.table > div > .duration, .table > div > .startTime {
|
||||
text-align: center;
|
||||
white-space:nowrap;
|
||||
.table > div > .duration,
|
||||
.table > div > .startTime {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table > div > .startTime.domComplete {
|
||||
background: #ede3ff;
|
||||
}
|
||||
.table > div > .startTime.domContentLoadedEnd {
|
||||
background: #d8f0f0;
|
||||
}
|
||||
.table > div > .startTime.domContentLoaded {
|
||||
background: #e0ffd1;
|
||||
}
|
||||
.table > div > .startTime.domCreation {
|
||||
background: #ffe0cc;
|
||||
}
|
||||
|
||||
.table .icon-warning {
|
||||
color: #e74c3c;
|
||||
}
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user