Merge branch 'main' into dhat

firefox-devtools · Aug 5, 2021 · 8406440 · 8406440
2 parents 12dec49 + 5707f11
commit 8406440
Show file tree

Hide file tree

Showing 22 changed files with 74 additions and 128 deletions.
diff --git a/src/components/shared/Backtrace.css b/src/components/shared/Backtrace.css
@@ -1,5 +1,4 @@
 .backtrace {
-  max-width: var(--tooltip-detail-max-width);
   padding: 0;
   margin: 0;
 }

diff --git a/src/components/timeline/TrackNetwork.js b/src/components/timeline/TrackNetwork.js
@@ -298,6 +298,7 @@ class Network extends PureComponent<Props, State> {
         {shouldShowTooltip && hoveredMarkerIndex !== null && hoveredMarker ? (
           <Tooltip mouseX={mouseX} mouseY={mouseY}>
             <TooltipMarker
+              className="tooltipNetwork"
               markerIndex={hoveredMarkerIndex}
               marker={hoveredMarker}
               threadsKey={threadIndex}

diff --git a/src/components/tooltip/CallNode.js b/src/components/tooltip/CallNode.js
@@ -216,7 +216,9 @@ export class TooltipCallNode extends React.PureComponent<Props> {
         <div className="tooltipLabel" key="file">
           Script URL:
         </div>,
-        fileNameURL,
+        <div className="tooltipDetailsUrl" key="fileVal">
+          {fileNameURL}
+        </div>,
       ];
     }
 
@@ -249,7 +251,9 @@ export class TooltipCallNode extends React.PureComponent<Props> {
             <div className="tooltipLabel" key="iframe">
               iframe URL:
             </div>,
-            <div key="iframeVal">{page.url}</div>,
+            <div className="tooltipDetailsUrl" key="iframeVal">
+              {page.url}
+            </div>,
           ];
 
           // Getting the embedder URL now.
@@ -271,7 +275,9 @@ export class TooltipCallNode extends React.PureComponent<Props> {
             <div className="tooltipLabel" key="page">
               Page URL:
             </div>,
-            <div key="pageVal">{page.url}</div>,
+            <div className="tooltipDetailsUrl" key="pageVal">
+              {page.url}
+            </div>,
           ];
         }
       }

diff --git a/src/components/tooltip/Marker.js b/src/components/tooltip/Marker.js
@@ -391,14 +391,9 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
    * a short list of rendering strategies, in the order they appear.
    */
   render() {
-    const { className, restrictHeightWidth } = this.props;
+    const { className } = this.props;
     return (
-      <div
-        className={classNames('tooltipMarker', className)}
-        style={{
-          '--tooltip-detail-max-width': restrictHeightWidth ? '600px' : '100%',
-        }}
-      >
+      <div className={classNames('tooltipMarker', className)}>
         <div className="tooltipHeader">
           <div className="tooltipOneLine">
             {this._maybeRenderMarkerDuration()}

diff --git a/src/components/tooltip/NetworkMarker.css b/src/components/tooltip/NetworkMarker.css
@@ -51,7 +51,3 @@
 .tooltipNetworkMimeTypeSwatch {
   background-color: var(--marker-color);
 }
-
-.tooltipNetworkUrl {
-  word-break: break-word;
-}
diff --git a/src/components/tooltip/NetworkMarker.js b/src/components/tooltip/NetworkMarker.js
@@ -62,8 +62,8 @@ function _getHumanReadableDataStatus(status: NetworkStatus): string {
       return 'Response received';
     case 'STATUS_REDIRECT':
       return 'Redirecting request';
-    case 'STATUS_ABORT':
-      return 'Request was aborted';
+    case 'STATUS_CANCEL':
+      return 'Request was canceled';
     default:
       throw assertExhaustiveCheck(status);
   }
@@ -381,14 +381,14 @@ export function getNetworkMarkerDetails(
       {payload.cache}
     </TooltipDetail>,
     <TooltipDetail label="URL" key="Network-URL">
-      <span className="tooltipNetworkUrl">{payload.URI}</span>
+      <span className="tooltipDetailsUrl">{payload.URI}</span>
     </TooltipDetail>
   );
 
   if (payload.RedirectURI) {
     details.push(
       <TooltipDetail label="Redirect URL" key="Network-Redirect URL">
-        <span className="tooltipNetworkUrl">{payload.RedirectURI}</span>
+        <span className="tooltipDetailsUrl">{payload.RedirectURI}</span>
       </TooltipDetail>
     );
   }

diff --git a/src/components/tooltip/Tooltip.css b/src/components/tooltip/Tooltip.css
@@ -2,13 +2,7 @@
   position: fixed;
   display: inline-block;
   overflow: hidden;
-
-  /**
-   * The VISUAL_MARGIN = 8 for the Tooltip is defined in src/components/tooltip/Tooltip.js.
-   * Both added together equals: 8px + 8px = 16px
-   */
-  max-width: calc(100% - 16px);
-  box-sizing: border-box;
+  max-width: 600px;
   padding: 8px;
   border: 1px solid #ccc;
   background-color: var(--grey-10);
@@ -69,7 +63,10 @@
   display: grid;
   padding-top: 5px;
   grid-gap: 2px 5px;
-  grid-template-columns: min-content auto;
+
+  /* Make the right column "definitely" sized (ignore its intrinsic size) by setting a min-width of 0.
+   * This stops long contents from overflowing the tooltip. */
+  grid-template-columns: min-content minmax(0, 1fr);
 }
 
 .tooltipDetailSeparator {
@@ -79,22 +76,13 @@
 }
 
 .tooltipDetailsUrl {
-  /* URLs can be really long, and it's disruptive when widths change rapidly
-   * this components. Define an arbitrary max-width in px to restrict this change.
-   * Set the variable to 100% to allow the full-width, e.g. in the sidebar. */
-  max-width: var(--tooltip-detail-max-width);
   word-break: break-all;
 }
 
 .tooltipDetailsDim {
   color: var(--grey-50);
 }
 
-.tooltipDetailsDescription {
-  /* Stop long descriptions from making the tooltip disruptively long. */
-  max-width: var(--tooltip-detail-max-width);
-}
-
 .tooltipLabel {
   color: var(--grey-50);
   text-align: right;

diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
@@ -93,10 +93,6 @@ export class Tooltip extends React.PureComponent<Props> {
       <div
         className="tooltip"
         data-testid="tooltip"
-        style={{
-          /* This is the default max width, but can be redefined in children */
-          '--tooltip-detail-max-width': '600px',
-        }}
         ref={this._interiorElementRef}
       >
         {this.props.children}

diff --git a/src/profile-logic/marker-data.js b/src/profile-logic/marker-data.js
@@ -493,7 +493,7 @@ export function deriveMarkersFromRawMarkerTable(
             openNetworkMarkers.set(data.id, rawMarkerIndex);
           } else {
             // End status can be any status other than 'STATUS_START'. They are
-            // either 'STATUS_STOP', 'STATUS_REDIRECT' or 'STATUS_ABORT'.
+            // either 'STATUS_STOP', 'STATUS_REDIRECT' or 'STATUS_CANCEL'.
             const endData = data;
 
             const startIndex = openNetworkMarkers.get(data.id);

diff --git a/src/test/components/Tooltip.test.js b/src/test/components/Tooltip.test.js
@@ -43,7 +43,6 @@ describe('shared/Tooltip', () => {
       expect(getTooltipStyle()).toEqual({
         left: `${MOUSE_OFFSET}px`,
         top: `${MOUSE_OFFSET}px`,
-        '--tooltip-detail-max-width': '600px',
       });
 
       const mouseX = 50;
@@ -53,7 +52,6 @@ describe('shared/Tooltip', () => {
       expect(getTooltipStyle()).toEqual({
         left: `${mouseX + MOUSE_OFFSET}px`,
         top: `${mouseY + MOUSE_OFFSET}px`,
-        '--tooltip-detail-max-width': '600px',
       });
     });
 
@@ -72,7 +70,6 @@ describe('shared/Tooltip', () => {
       expect(getTooltipStyle()).toEqual({
         left: `${expectedLeft}px`,
         top: `${expectedTop}px`,
-        '--tooltip-detail-max-width': '600px',
       });
     });
 
@@ -87,7 +84,6 @@ describe('shared/Tooltip', () => {
       expect(getTooltipStyle()).toEqual({
         left: `${expectedLeft}px`,
         top: `${expectedTop}px`,
-        '--tooltip-detail-max-width': '600px',
       });
     });
   });

diff --git a/src/test/components/TooltipMarker.test.js b/src/test/components/TooltipMarker.test.js
@@ -757,7 +757,7 @@ describe('TooltipMarker', function() {
         payload: {
           contentType: null,
           cache: 'Unresolved',
-          status: 'STATUS_ABORT',
+          status: 'STATUS_CANCEL',
         },
       })
     );

diff --git a/src/test/components/__snapshots__/FlameGraph.test.js.snap b/src/test/components/__snapshots__/FlameGraph.test.js.snap
@@ -21,7 +21,7 @@ exports[`FlameGraph has a tooltip that matches the snapshot 1`] = `
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 14px; top: 306px;"
+  style="left: 14px; top: 306px;"
 >
   <div
     class="tooltipCallNode"
@@ -152,7 +152,11 @@ exports[`FlameGraph has a tooltip that matches the snapshot 1`] = `
         >
           Script URL:
         </div>
-        path/to/file:10:100
+        <div
+          class="tooltipDetailsUrl"
+        >
+          path/to/file:10:100
+        </div>
       </div>
     </div>
   </div>
@@ -694,7 +698,7 @@ exports[`FlameGraph shows a tooltip with the resource information 1`] = `
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 80.66666666666666px; top: 226px;"
+  style="left: 80.66666666666666px; top: 226px;"
 >
   <div
     class="tooltipCallNode"
@@ -825,7 +829,11 @@ exports[`FlameGraph shows a tooltip with the resource information 1`] = `
         >
           Script URL:
         </div>
-        path/to/file:17:107
+        <div
+          class="tooltipDetailsUrl"
+        >
+          path/to/file:17:107
+        </div>
         <div
           class="tooltipLabel"
         >

diff --git a/src/test/components/__snapshots__/MarkerChart.test.js.snap b/src/test/components/__snapshots__/MarkerChart.test.js.snap
@@ -256,11 +256,10 @@ exports[`MarkerChart renders the hoveredItem markers properly 2`] = `
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 189px; top: 150px;"
+  style="left: 189px; top: 150px;"
 >
   <div
     class="tooltipMarker"
-    style="--tooltip-detail-max-width: 600px;"
   >
     <div
       class="tooltipHeader"
@@ -1081,11 +1080,10 @@ exports[`MarkerChart with active tab renders the hovered marker properly 2`] = `
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 102px; top: 38px;"
+  style="left: 102px; top: 38px;"
 >
   <div
     class="tooltipMarker"
-    style="--tooltip-detail-max-width: 600px;"
   >
     <div
       class="tooltipHeader"

diff --git a/src/test/components/__snapshots__/MarkerSidebar.test.js.snap b/src/test/components/__snapshots__/MarkerSidebar.test.js.snap
@@ -9,7 +9,6 @@ exports[`MarkerSidebar matches the snapshots when displaying data about the curr
   >
     <div
       class="tooltipMarker"
-      style="--tooltip-detail-max-width: 100%;"
     >
       <div
         class="tooltipHeader"

diff --git a/src/test/components/__snapshots__/SampleTooltipContents.test.js.snap b/src/test/components/__snapshots__/SampleTooltipContents.test.js.snap
@@ -4,7 +4,7 @@ exports[`SampleTooltipContents renders the sample tooltip properly 1`] = `
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 11px; top: 10px;"
+  style="left: 11px; top: 10px;"
 >
   <div
     class="tooltipDetails"
@@ -285,7 +285,7 @@ exports[`SampleTooltipContents renders the sample with "variable CPU cycles" CPU
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 11px; top: 10px;"
+  style="left: 11px; top: 10px;"
 >
   <div
     class="tooltipDetails"
@@ -397,7 +397,7 @@ exports[`SampleTooltipContents renders the sample with ns CPU usage information
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 11px; top: 10px;"
+  style="left: 11px; top: 10px;"
 >
   <div
     class="tooltipDetails"
@@ -509,7 +509,7 @@ exports[`SampleTooltipContents renders the sample with µs CPU usage information
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 11px; top: 10px;"
+  style="left: 11px; top: 10px;"
 >
   <div
     class="tooltipDetails"

diff --git a/src/test/components/__snapshots__/StackChart.test.js.snap b/src/test/components/__snapshots__/StackChart.test.js.snap
@@ -865,11 +865,10 @@ exports[`MarkerChart shows a tooltip when hovering 1`] = `
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 200.36363636363637px; top: 54px;"
+  style="left: 200.36363636363637px; top: 54px;"
 >
   <div
     class="tooltipMarker"
-    style="--tooltip-detail-max-width: 600px;"
   >
     <div
       class="tooltipHeader"

diff --git a/src/test/components/__snapshots__/Tooltip.test.js.snap b/src/test/components/__snapshots__/Tooltip.test.js.snap
@@ -4,7 +4,7 @@ exports[`shared/Tooltip is rendered appropriately 1`] = `
 <div
   class="tooltip"
   data-testid="tooltip"
-  style="--tooltip-detail-max-width: 600px; left: 11px; top: 11px;"
+  style="left: 11px; top: 11px;"
 >
   <p>
     Lorem ipsum

diff --git a/src/test/components/__snapshots__/TooltipCallnode.test.js.snap b/src/test/components/__snapshots__/TooltipCallnode.test.js.snap
@@ -124,7 +124,9 @@ exports[`TooltipCallNode with page information displays Page URL for iframe page
       >
         iframe URL:
       </div>
-      <div>
+      <div
+        class="tooltipDetailsUrl"
+      >
         https://iframe.example.com/
       </div>
       <div
@@ -192,7 +194,9 @@ exports[`TooltipCallNode with page information displays Page URL for non-iframe
       >
         Page URL:
       </div>
-      <div>
+      <div
+        class="tooltipDetailsUrl"
+      >
         https://developer.mozilla.org/en-US/
       </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up @@
       >
         <div
           class="tooltipMarker"
-          style="--tooltip-detail-max-width: 100%;"
         >
           <div
             class="tooltipHeader"
@@ Expand Down @@