Bug 1353798 - [devtools] Cleanup the timing bar calculations r=devtools-reviewers,nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D196581

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

@@ -390,6 +390,13 @@
   display: flex;
   flex: 1;
   align-items: center;
+  padding-inline-end: 20px;
+  --total-timings-width-percentage: 90%;
+
+}
+
+.network-monitor .requests-list-timings-total {
+  width: calc(100% - var(--total-timings-width-percentage));
 }
 
 .network-monitor .requests-list-timings-offset {
@@ -400,6 +407,8 @@
   border: none;
   min-width: 1px;
   transition: width 0.2s ease-out;
+  margin-inline-start: calc(var(--current-timing-offset, 0) * var(--total-timings-width-percentage));
+  width: calc(var(--current-timing-width, 0) * var(--total-timings-width-percentage));
 }
 
 .network-monitor .label-separator {

devtools/client/netmonitor/src/components/request-details/TimingsPanel.js

@@ -33,8 +33,6 @@ const MDNLink = require("resource://devtools/client/shared/components/MdnLink.js
 
 const { div, span } = dom;
 
-const TIMINGS_END_PADDING = "80px";
-
 /**
  * Timings panel component
  * Display timeline bars that shows the total wait time for various stages
@@ -97,23 +95,14 @@ class TimingsPanel extends Component {
           ),
           div(
             { className: "requests-list-timings-container" },
-            span({
-              className: "requests-list-timings-offset",
-              style: {
-                width: `calc(${
-                  offset > 0 ? offset : 0
-                } * (100% - ${TIMINGS_END_PADDING})`,
-              },
-            }),
             span({
               className: `requests-list-timings-box serviceworker-timings-color-${key.replace(
                 "ServiceWorker",
                 ""
               )}`,
               style: {
-                width: `calc(${
-                  value / totalTime
-                } * (100% - ${TIMINGS_END_PADDING}))`,
+                "--current-timing-offset": offset > 0 ? offset : 0,
+                "--current-timing-width": value / totalTime,
               },
             }),
             span(
@@ -153,20 +142,11 @@ class TimingsPanel extends Component {
           ),
           div(
             { className: "requests-list-timings-container" },
-            span({
-              className: "requests-list-timings-offset",
-              style: {
-                width: `calc(${
-                  (totalTime - duration) / totalTime
-                } * (100% - ${TIMINGS_END_PADDING})`,
-              },
-            }),
             span({
               className: `requests-list-timings-box server-timings-color-${color}`,
               style: {
-                width: `calc(${
-                  duration / totalTime
-                } * (100% - ${TIMINGS_END_PADDING}))`,
+                "--current-timing-offset": (totalTime - duration) / totalTime,
+                "--current-timing-width": duration / totalTime,
               },
             }),
             span(
@@ -230,16 +210,11 @@ class TimingsPanel extends Component {
         ),
         div(
           { className: "requests-list-timings-container" },
-          span({
-            className: "requests-list-timings-offset",
-            style: {
-              width: `calc(${offsetScale} * (100% - ${TIMINGS_END_PADDING})`,
-            },
-          }),
           span({
             className: `requests-list-timings-box ${type}`,
             style: {
-              width: `calc(${timelineScale} * (100% - ${TIMINGS_END_PADDING}))`,
+              "--current-timing-offset": offsetScale,
+              "--current-timing-width": timelineScale,
             },
           }),
           span(