Bug 1398149 - Waterfall timing is broken. r=Honza

- Removed flex based CSS for .requests-list-timings
- Added 20px buffer for .requests-list-timings-total

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -75,7 +75,6 @@
 .requests-list-column {
   display: table-cell;
   cursor: default;
-  text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -546,9 +545,6 @@
 }
 
 .requests-list-timings {
-  display: flex;
-  flex: none;
-  align-items: center;
   transform: scaleX(var(--timings-scale));
 }
 
@@ -606,6 +602,7 @@
   white-space: nowrap;
   /* This node should not be scaled - apply a reversed transformation */
   transform: scaleX(var(--timings-rev-scale));
+  text-align: left;
 }
 
 .requests-list-timings-total:dir(ltr) {

devtools/client/netmonitor/src/reducers/requests.js

@@ -89,11 +89,14 @@ function requestsReducer(state = Requests(), action) {
         ...request,
         ...processNetworkUpdates(action.data),
       };
+      let requestEndTime = request.startedMillis +
+        (request.eventTimings ? request.eventTimings.totalTime : 0);
 
       return {
         ...state,
         requests: mapSet(state.requests, action.id, request),
-        lastEndedMillis: lastEndedMillis,
+        lastEndedMillis: requestEndTime > lastEndedMillis ?
+          requestEndTime : lastEndedMillis,
       };
     }
 

devtools/client/netmonitor/src/selectors/ui.js

@@ -27,8 +27,11 @@ const getWaterfallScale = createSelector(
                                      timingMarkers.firstDocumentDOMContentLoadedTimestamp,
                                      timingMarkers.firstDocumentLoadTimestamp);
     const longestWidth = lastEventMillis - requests.firstStartedMillis;
+
+  // Reduce 20px for the last request's requests-list-timings-total
     return Math.min(Math.max(
-      (ui.waterfallWidth - REQUESTS_WATERFALL.LABEL_WIDTH) / longestWidth, EPSILON), 1);
+      (ui.waterfallWidth - REQUESTS_WATERFALL.LABEL_WIDTH - 20) / longestWidth,
+      EPSILON), 1);
   }
 );