Add background color to the timestamp column in the profiler

Gruntfile.js

@@ -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' ]
                 }
             }
         },

app/node_views/results.html

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

app/public/styles/index.css

@@ -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;
+}

app/public/styles/launchTest.css

@@ -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;
+}

app/public/styles/less/icons.less

@@ -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]`;

app/public/styles/less/index.less

@@ -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;
+}

app/public/styles/less/launchTest.less

@@ -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;
+}

app/public/styles/less/results.less

@@ -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;
+}

app/public/styles/results.css

@@ -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;
-}
-
-.summary, .metrics, .execution {
-    margin-top: 2em;
-    padding: 1em;
-    background: #fff;
-    color: #000;
-    border-radius: 0.5em;
-    text-align: left;
-}
-
+  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;
+  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;
-}
-.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;
+  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;
+  /* 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;
+}