#142 UI/UX tweaks (#148)

- make raw view fill the whole holder
- move `output` style out of bundle css
- add explicit button pointer cursor (do not rely on outside styles)
- add header link and row pointer
- added some more type comments
- remove normalize from dev-bundle.
- replace WaterfallEntry's name with url

build-utils/grunt-config/concat.js

@@ -3,7 +3,7 @@ module.exports = {
     banner: "<%= banner %>"
   },
   demoCss: {
-    src: ["src/css-raw/normalize.css", "src/css-raw/page.css", "src/css-raw/perf-cascade.css"],
+    src: ["src/css-raw/page.css", "src/css-raw/perf-cascade.css"],
     dest: "build/stage/perf-cascade-demo.css",
   },
   mainCss: {

src/css-raw/page.css

@@ -42,4 +42,6 @@ textarea {
     display: none;
     clear: both;
     margin: 1em 0;
-}
+}
+
+.output {margin: 2em 0; }

src/css-raw/perf-cascade.css

@@ -1,11 +1,9 @@
-
-* {box-sizing: border-box;}
-
-.output {margin: 2em 0; font-size: 12px; line-height: 1em;}
+.water-fall-chart {width:100%; overflow: visible; font-size: 12px; line-height: 1em;}
+.water-fall-chart * {box-sizing: border-box;}
+.water-fall-chart button {cursor: pointer;}
 
 .water-fall-holder {fill:#ccc;}
 
-svg.water-fall-chart {width:100%; overflow: visible;}
 .water-fall-chart .left-fixed-holder {overflow: visible;}
 .water-fall-chart .marker-holder {width:100%;}
 .water-fall-chart .line-holder {stroke-width:1; stroke: #ccc; stroke-opacity:0.5;}
@@ -29,6 +27,7 @@ svg.water-fall-chart {width:100%; overflow: visible;}
 .time-scale line.sub-second-line {stroke: #ccc; opacity: 0.75; stroke-width:0.50;}
 .time-scale text {font-weight:bold;}
 
+.row-item {cursor: pointer}
 .row-item .even {fill: #ccc; opacity: 0.05;}
 .row-item .odd {fill: #000; opacity: 0.05;}
 .row-item:hover .odd,
@@ -128,14 +127,19 @@ svg.water-fall-chart {width:100%; overflow: visible;}
 .info-overlay-holder body .wrapper { height: 450px; width: 100%; overflow: scroll;}
 
 /* Info overlay HTML - header */
-.info-overlay-holder header {color: #fff; box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.25);}
+.info-overlay-holder header {position: relative; box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.25);}
+.info-overlay-holder header,
+.info-overlay-holder header a,
+.info-overlay-holder header button {color: #fff; text-decoration: none;}
+.info-overlay-holder header a:hover,
+.info-overlay-holder header a:focus {text-decoration: underline;}
 .info-overlay-holder .requestID {font-weight: bold;}
-.info-overlay-holder h3 {font-size: 1.1em; padding: 1em; margin:0; font-weight: normal;}
+.info-overlay-holder h3,
+.info-overlay-holder h3 a {font-size: 1.1em; padding: 1em; margin:0; font-weight: normal;}
 .info-overlay-holder h3 strong {font-size: 1.1em;}
 .info-overlay-holder .tab-nav ul {margin: 0; padding: 0;}
 .info-overlay-holder .tab-nav li {margin: 0; padding: 0; display: inline-block;}
-.info-overlay-holder button { background: transparent; outline:0; border:0; border-bottom: solid 2px transparent;
-  padding: 0.5em 1em; margin:0 0.25em;}
+.info-overlay-holder button { background: transparent; outline:0; border:0; border-bottom: solid 2px transparent; padding: 0.5em 1em; margin:0 0.25em;}
 .info-overlay-holder li:first-child  button {margin-left: 1em;}
 .info-overlay-holder button:focus,.info-overlay-holder button:hover {border-color: rgba(255,255,255, 0.6);}
 .info-overlay-holder button.active {border-color: #fff; cursor: default;}
@@ -149,9 +153,11 @@ svg.water-fall-chart {width:100%; overflow: visible;}
 .info-overlay-holder .tab {float: left; width:100%; height: 350px; padding:12px 12px 24px;}
 .info-overlay-holder .tab h2 {font-size: 1.2em; margin:0.5em 0 0; padding: 0.5em 0 0.5em 1em; clear: both; border-top: solid 1px #efefef;}
 .info-overlay-holder .tab h2:first-child {border-top: 0; padding-top: 0;}
-.info-overlay-holder .tab pre {overflow-y: hidden;}
+.info-overlay-holder .tab pre {overflow-y: hidden; width:100%; min-height: 100%;}
 .info-overlay-holder .tab .preview {width: auto; max-width: 100%; max-height: 500px; border: solid 1px #666;}
 .info-overlay-holder .tab dl:after {content: ""; display: table; clear: both;}
+.info-overlay-holder .tab.raw-data {padding: 0;}
+.info-overlay-holder .tab.raw-data pre {padding:12px 12px 24px;}
 
 /** Legend */
 .resource-legend { margin: 0; padding: 0; font-size: 0.75em; line-height: 1.5em; display: inline-block;}

src/ts/transformers/har.ts

@@ -13,7 +13,7 @@ import {
 } from "../typing/waterfall";
 import * as harHeuristics from "./har-heuristics";
 
-function createWaterfallEntry(name: string,
+function createWaterfallEntry(url: string,
                               start: number,
                               end: number,
                               segments: WaterfallEntryTiming[] = [],
@@ -23,7 +23,7 @@ function createWaterfallEntry(name: string,
   const total = (typeof start !== "number" || typeof end !== "number") ? undefined : (end - start);
   return {
     total,
-    name,
+    url,
     start,
     end,
     segments,

src/ts/typing/waterfall.ts

@@ -20,11 +20,17 @@ export interface Mark extends UserTiming {
 /** Representation of one loaded resource  */
 export interface WaterfallEntry {
   total: number;
-  name: string;
+  /** URL of the resource entry */
+  url: string;
+  /** Start time in ms - relative to initial document request */
   start: number;
+  /** End time in ms - relative to initial document request */
   end: number;
+  /** time segments (dns, tls/ssl, connect...) */
   segments: WaterfallEntryTiming[];
+  /** raw e.g. HAR entry */
   rawResource: Entry;
+  /** media type category */
   requestType: RequestType;
   /** Warnings, Errors and Info indicators  */
   indicators: WaterfallEntryIndicator[];
@@ -46,10 +52,14 @@ export interface WaterfallEntryIndicator {
   type: IndicatorType;
 }
 
+/** Time segment of an `WaterfallEntry` */
 export interface WaterfallEntryTiming {
+  /** total duration in ms */
   total: number;
   type: TimingType;
+  /** start time in ms - relative to initial document request */
   start: number;
+  /** end time in ms - relative to initial document request */
   end: number;
 }
 

src/ts/waterfall/details-overlay/html-details-body.ts

@@ -32,7 +32,7 @@ function makeImgTab(accordionHeight: number, entry: WaterfallEntry) {
     return "";
   }
   const imgTag = `<img class="preview" style="max-height:${(accordionHeight - 100)}px"
-                        data-src="${entry.rawResource.request.url}" />`;
+                        data-src="${entry.url}" />`;
   return makeTab(imgTag, false);
 }
 
@@ -96,7 +96,7 @@ export function createDetailsBody(requestID: number, entry: WaterfallEntry, acco
   body.innerHTML = `
     <div class="wrapper">
       <header class="type-${entry.requestType}">
-        <h3><strong>#${requestID}</strong> ${entry.name}</h3>
+        <h3><strong>#${requestID}</strong> <a href="${entry.url}">${entry.url}</a></h3>
         <nav class="tab-nav">
         <ul>
           ${makeTabBtn("General", generalTab)}
@@ -128,7 +128,7 @@ export function createDetailsBody(requestID: number, entry: WaterfallEntry, acco
         </dl>
       </div>
       ${timingsTab}
-      <div class="tab">
+      <div class="tab raw-data">
         <pre><code>${JSON.stringify(entry.rawResource, null, 2)}</code></pre>
       </div>
       ${imgTab}

src/ts/waterfall/row/svg-row.ts

@@ -80,9 +80,9 @@ export function createRow(context: Context, index: number,
   const requestNumberLabel = rowSubComponents.createRequestNumberLabel(x, y, requestNumber, rowHeight, maxNumberWidth);
   // 4 is slightly bigger than the hover "glow" around the url
   x += maxNumberWidth + 4;
-  let shortLabel = rowSubComponents.createRequestLabelClipped(x, y, misc.resourceUrlFormatter(entry.name, 40),
+  let shortLabel = rowSubComponents.createRequestLabelClipped(x, y, misc.resourceUrlFormatter(entry.url, 40),
     rowHeight);
-  let fullLabel = rowSubComponents.createRequestLabelFull(x, y, entry.name, rowHeight);
+  let fullLabel = rowSubComponents.createRequestLabelFull(x, y, entry.url, rowHeight);
 
   // create and attach request block
   rowBar.appendChild(rect);

src/ts/waterfall/sub-components/svg-general-components.ts

@@ -95,7 +95,7 @@ export function createBgRect(context: Context, entry: WaterfallEntry): SVGRectEl
     "y": 0,
   }, requestTypeToCssClass(entry.requestType));
 
-  rect.appendChild(svg.newTitle(entry.name)); // Add tile to wedge path
+  rect.appendChild(svg.newTitle(entry.url)); // Add tile to wedge path
 
   return rect;
 }

src/ts/waterfall/svg-chart.ts

@@ -162,7 +162,7 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartOptions):
       "cssClass": requestTypeToCssClass(entry.requestType),
       "height": options.rowHeight,
       "hideOverlay": options.showAlignmentHelpers ? mouseListeners.onMouseLeavePartial : undefined,
-      "label": entry.name + " (" + entry.start + "ms - " + entry.end + "ms | total: " + entry.total + "ms)",
+      "label": entry.url + " (" + entry.start + "ms - " + entry.end + "ms | total: " + entry.total + "ms)",
       "showOverlay": options.showAlignmentHelpers ? mouseListeners.onMouseEnterPartial : undefined,
       "unit": context.unit,
       "width": entryWidth,