Introduce DomInteractive in the timeline

app/node_views/results.html

@@ -21,7 +21,7 @@
         <div class="resultsMenu">
             <a class="menuItem back" href="/"><div class="icon-back"></div><span>New test<span></a>
             <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="setView('summary')"><div class="icon-summary"></div><span>Summary</span></div>
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><div class="icon-spaghetti"></div><span>Spaghetti</span></div>
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><div class="icon-spaghetti"></div><span>Timeline</span></div>
             <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><div class="icon-metrics"></div><span>Metrics</span></div>
         </div>
 
@@ -116,7 +116,7 @@
         </div>
 
         <div ng-show="view == 'execution' && !phantomasResults.error" class="execution">
-            <h2>Javascript Spaghetti Timeline</h2>
+            <h2>Javascript Timeline</h2>
             <p>
                 This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.
             </p>
@@ -127,6 +127,8 @@
                              class="interval"
                              ng-class="{
                                         domCreation: $index * timelineIntervalDuration < phantomasResults.metrics.domInteractive,
+                                        domInteractive: $index * timelineIntervalDuration >= phantomasResults.metrics.domInteractive
+                                                        && $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoaded,
                                         domContentLoaded: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoaded
                                                         && $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoadedEnd,
                                         domContentLoadedEnd: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoadedEnd
@@ -145,12 +147,14 @@
                 <div class="legend">
                     <div class="titles">
                         <div class="domCreation"><div class="color"></div>DOM creation</div>
+                        <div class="domInteractive"><div class="color"></div>DOM interactive</div>
                         <div class="domContentLoaded"><div class="color"></div>DOM content loaded event</div>
                         <div class="domContentLoadedEnd"><div class="color"></div>Page completion</div>
                         <div class="domComplete"><div class="color"></div>Page is complete</div>
                     </div>
                     <div class="tips">
                         <div>Executing Javascript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
+                        <div>Some frameworks do things here, but it's not reliable and should be avoided.</div>
                         <div>Also known as "document ready". This is where you should execute <b>top-priority</b> scripts, like binding action buttons or launch a video player.</div>
                         <div>Here you can execute <b>mid-priority</b> tasks. Loading a script with createElement('script') is one way to do so.</div>
                         <div>The page is considered loaded, it's time for low <b>priority things</b> : trackers, social plugins, easter egg...</div>
@@ -158,7 +162,7 @@
                 </div>
             </div>
 
-            <h2>Javascript Spaghetti Profiler</h2>
+            <h2>Javascript Profiler</h2>
             <p>
                 The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
                 <br>
@@ -277,6 +281,8 @@
                     <div class="duration" ng-if="node.data.time == undefined"></div>
                     <div class="startTime" ng-class="{
                             domCreation: node.data.timestamp < phantomasResults.metrics.domInteractive,
+                            domInteractive: node.data.timestamp >= phantomasResults.metrics.domInteractive
+                                            && node.data.timestamp < phantomasResults.metrics.domContentLoaded,
                             domContentLoaded: node.data.timestamp >= phantomasResults.metrics.domContentLoaded
                                             && node.data.timestamp < phantomasResults.metrics.domContentLoadedEnd,
                             domContentLoadedEnd: node.data.timestamp >= phantomasResults.metrics.domContentLoadedEnd

app/public/styles/less/icons.less

@@ -1,24 +1,24 @@
 @list-font-family: "fontsmith-icons";
-@list-value: "\e003";
-@list: '"fontsmith-icons"' '"\\e003"';
-@drawer3-font-family: "fontsmith-icons";
-@drawer3-value: "\e005";
-@drawer3: '"fontsmith-icons"' '"\\e005"';
+@list-value: "\e002";
+@list: '"fontsmith-icons"' '"\\e002"';
+@arrow-left3-font-family: "fontsmith-icons";
+@arrow-left3-value: "\e006";
+@arrow-left3: '"fontsmith-icons"' '"\\e006"';
 @question-font-family: "fontsmith-icons";
-@question-value: "\e002";
-@question: '"fontsmith-icons"' '"\\e002"';
+@question-value: "\e001";
+@question: '"fontsmith-icons"' '"\\e001"';
 @warning-font-family: "fontsmith-icons";
 @warning-value: "\e000";
 @warning: '"fontsmith-icons"' '"\\e000"';
+@bars-font-family: "fontsmith-icons";
+@bars-value: "\e005";
+@bars: '"fontsmith-icons"' '"\\e005"';
+@drawer3-font-family: "fontsmith-icons";
+@drawer3-value: "\e004";
+@drawer3: '"fontsmith-icons"' '"\\e004"';
 @lab-font-family: "fontsmith-icons";
-@lab-value: "\e004";
-@lab: '"fontsmith-icons"' '"\\e004"';
-@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"';
+@lab-value: "\e003";
+@lab: '"fontsmith-icons"' '"\\e003"';
 
 .icon-font-family(@char) {
   font-family: ~`@{char}[0]`;

app/public/styles/less/main.less

@@ -63,7 +63,7 @@ h1 span {
     .icon(@list);
 }
 .icon-spaghetti {
-    .icon(@tree);
+    .icon(@bars);
 }
 .icon-metrics {
     .icon(@drawer3);

app/public/styles/less/results.less

@@ -8,7 +8,8 @@
 @domContentLoadedEndBg: #D8F0F0;
 @domCompleteColor: #C2A3FF;
 @domCompleteBg: #EDE3FF;
-
+@domInteractiveColor: #FFE433;
+@domInteractiveBg: #FFFCCC;
 
 
 .resultsMenu {
@@ -188,6 +189,12 @@ h4 {
 .timeline .domContentLoaded .color {
     background: @domContentLoadedColor;
 }
+.timeline .domInteractive.interval {
+    background: @domInteractiveBg;
+}
+.timeline .domInteractive .color {
+    background: @domInteractiveColor;
+}
 .timeline .domCreation.interval {
     background: @domCreationBg;
 }
@@ -215,26 +222,29 @@ h4 {
     display: table-row;
 }
 .timeline .legend > div > div {
+    position: relative;
     display: table-cell;
     margin-top: 1em;
 }
 .timeline .titles {
     font-weight: bold;
 }
+.timeline .titles > div {
+    padding: 0 1em 0 2em;
+}
 .timeline .tips {
     font-size: 0.7em;
 }
 .timeline .tips > div {
-    padding: 1em 1.5em;
+    padding: 1em 1em 0 0;
 }
 .timeline .legend .color {
-    display: inline-block;
-    position: relative;
-    top: 0.4em;
+    display: block;
+    position: absolute;
+    left: 0;
     height: 1.5em;
     width: 1.5em;
     border-radius: 0.2em;
-    margin: 0 0.4em 0 1em;
 }
 
 
@@ -312,7 +322,7 @@ input.textFilter {
     color: #e74c3c;
     font-weight: bold;
 }
-.table > div.windowPerformance > div {
+.table > div.windowPerformance > div, .table > div.windowPerformance > div.startTime {
     background: #EBD8E2;
 }
 .table > div.showingDetails > div {
@@ -385,6 +395,9 @@ input.textFilter {
 .table > div > .startTime.domContentLoaded {
     background: @domContentLoadedBg;
 }
+.table > div > .startTime.domInteractive {
+    background: @domInteractiveBg;
+}
 .table > div > .startTime.domCreation {
     background: @domCreationBg;
 }

app/public/styles/main.css

@@ -56,7 +56,7 @@ h1 span {
   -webkit-font-smoothing: antialiased;
 }
 .icon-lab:before {
-  content: "\e004";
+  content: "\e003";
 }
 .icon-question {
   font-family: "fontsmith-icons";
@@ -69,7 +69,7 @@ h1 span {
   -webkit-font-smoothing: antialiased;
 }
 .icon-question:before {
-  content: "\e002";
+  content: "\e001";
 }
 .icon-warning {
   font-family: "fontsmith-icons";
@@ -108,7 +108,7 @@ h1 span {
   -webkit-font-smoothing: antialiased;
 }
 .icon-summary:before {
-  content: "\e003";
+  content: "\e002";
 }
 .icon-spaghetti {
   font-family: "fontsmith-icons";
@@ -121,7 +121,7 @@ h1 span {
   -webkit-font-smoothing: antialiased;
 }
 .icon-spaghetti:before {
-  content: "\e001";
+  content: "\e005";
 }
 .icon-metrics {
   font-family: "fontsmith-icons";
@@ -134,5 +134,5 @@ h1 span {
   -webkit-font-smoothing: antialiased;
 }
 .icon-metrics:before {
-  content: "\e005";
+  content: "\e004";
 }

app/public/styles/results.css

@@ -179,6 +179,12 @@ h4 {
 .timeline .domContentLoaded .color {
   background: #a7e846;
 }
+.timeline .domInteractive.interval {
+  background: #fffccc;
+}
+.timeline .domInteractive .color {
+  background: #ffe433;
+}
 .timeline .domCreation.interval {
   background: #ffe0cc;
 }
@@ -205,26 +211,29 @@ h4 {
   display: table-row;
 }
 .timeline .legend > div > div {
+  position: relative;
   display: table-cell;
   margin-top: 1em;
 }
 .timeline .titles {
   font-weight: bold;
 }
+.timeline .titles > div {
+  padding: 0 1em 0 2em;
+}
 .timeline .tips {
   font-size: 0.7em;
 }
 .timeline .tips > div {
-  padding: 1em 1.5em;
+  padding: 1em 1em 0 0;
 }
 .timeline .legend .color {
-  display: inline-block;
-  position: relative;
-  top: 0.4em;
+  display: block;
+  position: absolute;
+  left: 0;
   height: 1.5em;
   width: 1.5em;
   border-radius: 0.2em;
-  margin: 0 0.4em 0 1em;
 }
 .metrics h4 {
   padding-left: 2em;
@@ -289,7 +298,8 @@ input.textFilter {
   color: #e74c3c;
   font-weight: bold;
 }
-.table > div.windowPerformance > div {
+.table > div.windowPerformance > div,
+.table > div.windowPerformance > div.startTime {
   background: #EBD8E2;
 }
 .table > div.showingDetails > div {
@@ -357,6 +367,9 @@ input.textFilter {
 .table > div > .startTime.domContentLoaded {
   background: #e0ffd1;
 }
+.table > div > .startTime.domInteractive {
+  background: #fffccc;
+}
 .table > div > .startTime.domCreation {
   background: #ffe0cc;
 }