diff --git a/src/components/shared/WithSize.tsx b/src/components/shared/WithSize.tsx index 596ddabba7..dfa33abbec 100644 --- a/src/components/shared/WithSize.tsx +++ b/src/components/shared/WithSize.tsx @@ -2,16 +2,15 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react'; -import { findDOMNode } from 'react-dom'; import type { CssPixels } from 'firefox-profiler/types'; import { getResizeObserverWrapper } from 'firefox-profiler/utils/resize-observer-wrapper'; -type State = { +type SizeState = { width: CssPixels; height: CssPixels; }; -export type SizeProps = Readonly; +export type SizeProps = Readonly; export type PropsWithSize = Props & SizeProps; @@ -19,59 +18,40 @@ export type PropsWithSize = Props & SizeProps; * Wraps a React component and makes 'width' and 'height' available in the * wrapped component's props. These props start out at zero and are updated to * the component's DOM node's getBoundingClientRect().width/.height after the - * component has been mounted. They also get updated when the window is - * resized. - * - * Note that the props are *not* updated if the size of the element changes - * for reasons other than a window resize. + * component has been mounted. They also get updated whenever the element's + * size changes. */ export function withSize( Wrapped: React.ComponentType> ): React.ComponentType { - return class WithSizeWrapper extends React.PureComponent { - override state = { width: 0, height: 0 }; - _container: HTMLElement | null = null; - - override componentDidMount() { - const container = findDOMNode(this) as HTMLElement; // eslint-disable-line react/no-find-dom-node - if (!container) { - throw new Error('Unable to find the DOMNode'); + return function WithSizeWrapper(props: Props) { + const [size, setSize] = React.useState({ width: 0, height: 0 }); + const wrapperRef = React.useRef(null); + + React.useEffect(() => { + const wrapper = wrapperRef.current; + if (!wrapper) { + return undefined; } - this._container = container; - getResizeObserverWrapper().subscribe(container, this._resizeListener); - } - - // The listener is only called when the document is visible. - _resizeListener = (contentRect: DOMRectReadOnly) => { - const container = this._container; - if (!container) { - return; + const child = wrapper.firstElementChild as HTMLElement | null; + if (!child) { + throw new Error( + 'WithSize: the wrapped component must render a DOM element as its root.' + ); } - this._updateSize(container, contentRect); - }; - - override componentWillUnmount() { - const container = this._container; - if (container) { - getResizeObserverWrapper().unsubscribe(container, this._resizeListener); - } - - this._container = null; - } - - _updateSize(_container: HTMLElement, contentRect: DOMRectReadOnly) { - this.setState({ - width: contentRect.width, - height: contentRect.height, - }); - } - - override render() { - const combinedProps: Props & SizeProps = { - ...this.props, - ...this.state, + const listener = (contentRect: DOMRectReadOnly) => { + setSize({ width: contentRect.width, height: contentRect.height }); }; - return ; - } + getResizeObserverWrapper().subscribe(child, listener); + return () => { + getResizeObserverWrapper().unsubscribe(child, listener); + }; + }, []); + + return ( +
+ +
+ ); }; } diff --git a/src/test/components/EmptyThreadIndicator.test.tsx b/src/test/components/EmptyThreadIndicator.test.tsx index d783dc58e5..d835738784 100644 --- a/src/test/components/EmptyThreadIndicator.test.tsx +++ b/src/test/components/EmptyThreadIndicator.test.tsx @@ -2,8 +2,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import ReactDOM from 'react-dom'; - import { render } from 'firefox-profiler/test/fixtures/testing-library'; import { EmptyThreadIndicator, @@ -11,7 +9,7 @@ import { } from '../../components/timeline/EmptyThreadIndicator'; import { getProfileFromTextSamples } from '../fixtures/profiles/processed-profile'; import { mockRaf } from '../fixtures/mocks/request-animation-frame'; -import { getElementWithFixedSize } from '../fixtures/mocks/element-size'; +import { autoMockElementSize } from '../fixtures/mocks/element-size'; import type { StartEndRange } from 'firefox-profiler/types'; @@ -20,11 +18,7 @@ describe('EmptyThreadIndicator', function () { const width = 100; const height = 10; - beforeEach(() => { - jest - .spyOn(ReactDOM, 'findDOMNode') - .mockImplementation(() => getElementWithFixedSize({ width, height })); - }); + autoMockElementSize({ width, height }); const { derivedThreads } = getProfileFromTextSamples(` A A A diff --git a/src/test/components/Timeline.test.tsx b/src/test/components/Timeline.test.tsx index bd0602b370..79b71f62dd 100644 --- a/src/test/components/Timeline.test.tsx +++ b/src/test/components/Timeline.test.tsx @@ -33,10 +33,7 @@ import { import { autoMockCanvasContext } from '../fixtures/mocks/canvas-context'; import { autoMockDomRect } from 'firefox-profiler/test/fixtures/mocks/domrect'; import { mockRaf } from '../fixtures/mocks/request-animation-frame'; -import { - autoMockElementSize, - getElementWithFixedSize, -} from '../fixtures/mocks/element-size'; +import { autoMockElementSize } from '../fixtures/mocks/element-size'; import { getMouseEvent, fireFullClick, @@ -44,7 +41,6 @@ import { fireFullContextMenu, type FakeMouseEventInit, } from '../fixtures/utils'; -import ReactDOM from 'react-dom'; import { getProfileWithNiceTracks, getProfileWithMoreNiceTracks, @@ -1234,14 +1230,6 @@ function _getProfileWithDroppedSamples(): Profile { } describe('Timeline', function () { - beforeEach(() => { - jest - .spyOn(ReactDOM, 'findDOMNode') - .mockImplementation(() => - getElementWithFixedSize({ width: 200, height: 300 }) - ); - }); - it('displays a context menu when right clicking global and local tracks', () => { const profile = getProfileWithNiceTracks(); diff --git a/src/test/components/__snapshots__/EmptyThreadIndicator.test.tsx.snap b/src/test/components/__snapshots__/EmptyThreadIndicator.test.tsx.snap index 726537d47a..0332a90dc3 100644 --- a/src/test/components/__snapshots__/EmptyThreadIndicator.test.tsx.snap +++ b/src/test/components/__snapshots__/EmptyThreadIndicator.test.tsx.snap @@ -2,25 +2,33 @@ exports[`EmptyThreadIndicator rendering matches the snapshot when rendering all three types of indicators 1`] = `
-
-
+ class="timelineEmptyThreadIndicator" + > +
+
+
+
`; exports[`EmptyThreadIndicator rendering matches the snapshot when rendering no indicators 1`] = `
+ style="display: contents;" +> +
+
`; diff --git a/src/test/components/__snapshots__/GlobalTrack.test.tsx.snap b/src/test/components/__snapshots__/GlobalTrack.test.tsx.snap index 8c5f5806a5..b2e5480b8e 100644 --- a/src/test/components/__snapshots__/GlobalTrack.test.tsx.snap +++ b/src/test/components/__snapshots__/GlobalTrack.test.tsx.snap @@ -35,136 +35,57 @@ Process: \\"tab\\" (222)" class="timelineTrackTrack" >
-
- -
-
-
-
-
-
- +
+
+
+ +
+
-
-
-
- -
-
-
-
-
- -

- Activity Graph for - Content Process -

-

- This graph shows a visual chart of thread activity. -

- -
-
-
-
- -

- Stack Graph for - Content Process -

-

- This graph charts the stack height of each sample. -

- +
+
+ +
+
+
-
-
-
-
-
-
    -
  1. -
    -
    - -
    -
    +
    +
    @@ -189,7 +114,7 @@ Process: \\"tab\\" (222)" >

    Activity Graph for - DOM Worker + Content Process

    This graph shows a visual chart of thread activity. @@ -197,6 +122,10 @@ Process: \\"tab\\" (222)"

    +
    +
    @@ -208,7 +137,7 @@ Process: \\"tab\\" (222)" >

    Stack Graph for - DOM Worker + Content Process

    This graph charts the stack height of each sample. @@ -216,12 +145,131 @@ Process: \\"tab\\" (222)"

    +
    +
+
+
+
    +
  1. +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +

    + Activity Graph for + DOM Worker +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    +
    +
    +
    +
    + +

    + Stack Graph for + DOM Worker +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    +
    +
    +
    +
    +
  2. -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    -

    - Activity Graph for - Style -

    -

    - This graph shows a visual chart of thread activity. -

    - +
    + +

    + Activity Graph for + Style +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    -
    -
    -
    - +
    -

    - Stack Graph for - Style -

    -

    - This graph charts the stack height of each sample. -

    - +
    + +

    + Stack Graph for + Style +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    -
    @@ -347,97 +415,125 @@ Process: \\"tab\\" (0)" class="timelineTrackTrack" >
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    -

    - Activity Graph for - Content Process -

    -

    - This graph shows a visual chart of thread activity. -

    - +
    + +

    + Activity Graph for + Content Process +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    -
    -
    -
    - +
    -

    - Stack Graph for - Content Process -

    -

    - This graph charts the stack height of each sample. -

    - +
    + +

    + Stack Graph for + Content Process +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    -
    @@ -506,65 +602,85 @@ Process: \\"default\\" (5555)" class="timelineTrackTrack" >
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    -

    - Activity Graph for - NoMain -

    -

    - This graph shows a visual chart of thread activity. -

    - +
    + +

    + Activity Graph for + NoMain +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    -
    -
    -
    - +
    -

    - Stack Graph for - NoMain -

    -

    - This graph charts the stack height of each sample. -

    - +
    + +

    + Stack Graph for + NoMain +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    -
    @@ -630,65 +746,85 @@ Process: \\"default\\" (0)" class="timelineTrackTrack" >
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    -

    - Activity Graph for - Task Thread -

    -

    - This graph shows a visual chart of thread activity. -

    - +
    + +

    + Activity Graph for + Task Thread +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    -
    -
    -
    - +
    -

    - Stack Graph for - Task Thread -

    -

    - This graph charts the stack height of each sample. -

    - +
    + +

    + Stack Graph for + Task Thread +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    -
    @@ -2002,81 +2138,105 @@ Process: \\"default\\" (0)" class="timelineTrackTrack" >
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    -

    - Activity Graph for - Task Thread -

    -

    - This graph shows a visual chart of thread activity. -

    - +
    + +

    + Activity Graph for + Task Thread +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    -
    -
    -
    - +
    -

    - Stack Graph for - Task Thread -

    -

    - This graph charts the stack height of each sample. -

    - +
    + +

    + Stack Graph for + Task Thread +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    -
    @@ -3325,6 +3485,23 @@ Array [ 1, 1, ], + Array [ + "scale", + 1, + 1, + ], + Array [ + "clearRect", + 0, + 0, + 400, + 400, + ], + Array [ + "scale", + 1, + 1, + ], Array [ "set fillStyle", "black", @@ -3430,22 +3607,5 @@ Array [ 1, 1, ], - Array [ - "clearRect", - 0, - 0, - 400, - 400, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "scale", - 1, - 1, - ], ] `; diff --git a/src/test/components/__snapshots__/LocalTrack.test.tsx.snap b/src/test/components/__snapshots__/LocalTrack.test.tsx.snap index 6247499fde..69ddc798a0 100644 --- a/src/test/components/__snapshots__/LocalTrack.test.tsx.snap +++ b/src/test/components/__snapshots__/LocalTrack.test.tsx.snap @@ -31,34 +31,46 @@ exports[`timeline/LocalTrack with a memory track matches the snapshot of the mem style="--graph-height: 25px; --markers-height: 15px;" >
    -
    - +
    +
    + +
    -
    - -
    + class="timelineTrackCounterGraph" + > +
    + +
    +
    +
    +
    +
    @@ -92,47 +104,51 @@ exports[`timeline/LocalTrack with a network track matches the snapshot of the ne class="timelineTrackTrack" >
    - -
    -
    -
    -
    + class="react-contextmenu-wrapper treeViewContextMenu" + > + +
    +
    +
    +
    +
    +
    @@ -169,65 +185,85 @@ Process: \\"tab\\" (222)" class="timelineTrackTrack" >
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    -

    - Activity Graph for - DOM Worker -

    -

    - This graph shows a visual chart of thread activity. -

    - +
    + +

    + Activity Graph for + DOM Worker +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    -
    -
    -
    - +
    -

    - Stack Graph for - DOM Worker -

    -

    - This graph charts the stack height of each sample. -

    - +
    + +

    + Stack Graph for + DOM Worker +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    -
    @@ -263,18 +299,22 @@ exports[`timeline/LocalTrack with an IPC track matches the snapshot of the IPC t style="height: 25px; --markers-height: 25px;" >
    -
    - +
    +
    + +
    diff --git a/src/test/components/__snapshots__/NetworkChart.test.tsx.snap b/src/test/components/__snapshots__/NetworkChart.test.tsx.snap index ca0a271468..6cb65bc145 100644 --- a/src/test/components/__snapshots__/NetworkChart.test.tsx.snap +++ b/src/test/components/__snapshots__/NetworkChart.test.tsx.snap @@ -19,461 +19,465 @@ exports[`EmptyReasons shows a reason when a profile's network markers have been exports[`NetworkChart renders NetworkChart correctly 1`] = `
    -
    -
    +
    - Did you know you can use the comma (,) to search using several terms? + +
    + Did you know you can use the comma (,) to search using several terms? +
    -
    -
    -
    +
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - + https:// + + + mozilla.org + + + / + +
    +
    - / - +
    +
    -
    -
    -
    -
    - - https:// - - - mozilla.org - - - / - -
    -
    + + https:// + + + mozilla.org + + + / + +
    + class="networkChartRowItemBar" + style="width: 68.96551724137933px; left: 212.06896551724137px;" + > +
    +
    diff --git a/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap b/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap index 8a0a5b41dc..7c93f9d4a0 100644 --- a/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap +++ b/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap @@ -9547,64 +9547,84 @@ Array [ exports[`ThreadActivityGraph matches the component snapshot 1`] = `
    -
    - +
    +
    +
    + +
    +
    -
    -
    -
    - +
    -

    - Activity Graph for - Test Track -

    -

    - This graph shows a visual chart of thread activity. -

    - +
    + +

    + Activity Graph for + Test Track +

    +

    + This graph shows a visual chart of thread activity. +

    +     +
    +
    -
    -
    -
    - +
    -

    - Stack Graph for - Test Track -

    -

    - This graph charts the stack height of each sample. -

    - +
    + +

    + Stack Graph for + Test Track +

    +

    + This graph charts the stack height of each sample. +

    +     +
    +
    +
    +
    +
    -
    `; diff --git a/src/test/components/__snapshots__/Timeline.test.tsx.snap b/src/test/components/__snapshots__/Timeline.test.tsx.snap index 204cca2f27..ecc1736ed4 100644 --- a/src/test/components/__snapshots__/Timeline.test.tsx.snap +++ b/src/test/components/__snapshots__/Timeline.test.tsx.snap @@ -4,266 +4,290 @@ exports[`TimelineSelection does not crash when there are no samples or markers 1
    - +
    - ⁨2⁩ - - tracks - -
    -
      +
        +
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    -
      -
    1. -
      - -
      -
      + +
      + class="timelineTrackTrack" + > +
      +
      -
      -
        -
      1. -
        +
        - -
        -
        + +
        -
        - +
        +
        +
        +
        + +
        +
        +
        -
        -
        -
        -
        - -

        - Activity Graph for - Empty -

        -

        - This graph shows a visual chart of thread activity. -

        -         -
        -
        -
        -
        - +
        + +

        + Activity Graph for + Empty +

        +

        + This graph shows a visual chart of thread activity. +

        +         +
        +
        +
        +
        +
        +
        + +

        + Stack Graph for + Empty +

        +

        + This graph charts the stack height of each sample. +

        +         +
        +
        +
        +
        -

        - Stack Graph for - Empty -

        -

        - This graph charts the stack height of each sample. -

        - +
        +
        -
        -
        -
        2. -
      -
      2. -
    +
    3. +
+ + +
+ - - - + + Process 0 + + + + ( + 0 + ) + + +
+ Empty +
+ + `; @@ -272,329 +296,353 @@ exports[`TimelineSelection renders the vertical line indicating the time positio
-
-
    -
  1. - - 0s - -
    2. -
  2. + / + - - 2ms - -
    3. -
  3. + tracks + +
    +
      - - 4ms - - -
    1. - + 0s + +
      2. +
    2. - 6ms - -
      3. -
    3. - + 2ms + +
      4. +
    4. - 8ms - -
      5. -
    5. - + 4ms + +
      6. +
    6. + + 6ms + +
      7. +
    7. - 10ms - -
      8. -
    + + 8ms + +
    4. +
  4. + + 10ms + +
    5. +
+
-
-
-
-
-
-
+
+
+
+
-
    -
  1. -
    - -
    -
    + +
    + class="timelineTrackTrack" + > +
    +
    -
    -
      -
    1. -
      +
      - -
      -
      + +
      -
      - +
      +
      +
      +
      + +
      +
      +
      -
      -
      -
      -
      - -

      - Activity Graph for - Empty -

      -

      - This graph shows a visual chart of thread activity. -

      -       -
      -
      -
      -
      - +
      + +

      + Activity Graph for + Empty +

      +

      + This graph shows a visual chart of thread activity. +

      +       +
      +
      +
      +
      +
      +
      + +

      + Stack Graph for + Empty +

      +

      + This graph charts the stack height of each sample. +

      +       +
      +
      +
      +
      -

      - Stack Graph for - Empty -

      -

      - This graph charts the stack height of each sample. -

      - +
      +
      -
      -
      -
      2. -
    -
    2. -
+ + + + +
-
-
- - 3ms - + + 3ms + +
-
- + + Process 0 + + + + ( + 0 + ) + +
+
+ Empty +
+ +
`; diff --git a/src/test/components/__snapshots__/TimelineMarkers.test.tsx.snap b/src/test/components/__snapshots__/TimelineMarkers.test.tsx.snap index ba106c1415..e9a9c9cccd 100644 --- a/src/test/components/__snapshots__/TimelineMarkers.test.tsx.snap +++ b/src/test/components/__snapshots__/TimelineMarkers.test.tsx.snap @@ -2,18 +2,22 @@ exports[`TimelineMarkers renders correctly memory markers 1`] = `
-
- +
+
+ +
@@ -65,18 +69,22 @@ Array [ exports[`TimelineMarkers renders correctly overview markers 1`] = `
-
- +
+
+ +
diff --git a/src/test/components/__snapshots__/TrackBandwidth.test.tsx.snap b/src/test/components/__snapshots__/TrackBandwidth.test.tsx.snap index 0af9de7c48..6b9f70ad32 100644 --- a/src/test/components/__snapshots__/TrackBandwidth.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackBandwidth.test.tsx.snap @@ -125,18 +125,26 @@ exports[`TrackBandwidth matches the component snapshot 1`] = ` style="--graph-height: 25px; --markers-height: 15px;" >
-
- -
+ class="timelineTrackCounterGraph" + > +
+ +
+
+
+
+
`; diff --git a/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap b/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap index 3234f9c988..88993be1d5 100644 --- a/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackCustomMarker.test.tsx.snap @@ -234,14 +234,18 @@ exports[`TrackCustomMarker matches the component snapshot 1`] = ` style="height: 25px; --graph-height: 25px;" >
-
- +
+
+ +
diff --git a/src/test/components/__snapshots__/TrackEventDelay.test.tsx.snap b/src/test/components/__snapshots__/TrackEventDelay.test.tsx.snap index 8a8b33fbbd..defeff37cb 100644 --- a/src/test/components/__snapshots__/TrackEventDelay.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackEventDelay.test.tsx.snap @@ -842,16 +842,24 @@ exports[`TrackEventDelay matches the component snapshot when event delay tracks style="height: 40px; --graph-height: 40px; --markers-height: 0px;" >
-
+ class="timelineTrackEventDelayGraph" + > + +
+
+
+
`; diff --git a/src/test/components/__snapshots__/TrackMemory.test.tsx.snap b/src/test/components/__snapshots__/TrackMemory.test.tsx.snap index 77575f665c..956d9e71d4 100644 --- a/src/test/components/__snapshots__/TrackMemory.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackMemory.test.tsx.snap @@ -73,6 +73,23 @@ exports[`TrackMemory has a tooltip that matches the snapshot for counts equallin exports[`TrackMemory matches the 2d canvas draw snapshot 1`] = ` Array [ + Array [ + "clearRect", + 0, + 0, + 80, + 10, + ], + Array [ + "scale", + 1, + 1, + ], + Array [ + "scale", + 1, + 1, + ], Array [ "clearRect", 0, @@ -160,23 +177,6 @@ Array [ Array [ "fill", ], - Array [ - "clearRect", - 0, - 0, - 80, - 10, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "scale", - 1, - 1, - ], ] `; @@ -186,34 +186,46 @@ exports[`TrackMemory matches the component snapshot 1`] = ` style="--graph-height: 25px; --markers-height: 15px;" >
-
- +
+
+ +
-
- -
+ class="timelineTrackCounterGraph" + > +
+ +
+
+
+
+
`; diff --git a/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap b/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap index 654cfcd788..853fc34e7a 100644 --- a/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackNetwork.test.tsx.snap @@ -692,47 +692,51 @@ Array [ exports[`timeline/TrackNetwork matches the component snapshot 1`] = `
- -
-
-
-
+ class="react-contextmenu-wrapper treeViewContextMenu" + > + +
+
+
+
+
+
`; diff --git a/src/test/components/__snapshots__/TrackPower.test.tsx.snap b/src/test/components/__snapshots__/TrackPower.test.tsx.snap index d0285e6d0f..bbc0ab47c7 100644 --- a/src/test/components/__snapshots__/TrackPower.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackPower.test.tsx.snap @@ -150,18 +150,26 @@ exports[`TrackPower matches the component snapshot 1`] = ` style="--graph-height: 25px; --markers-height: 15px;" >
-
- -
+ class="timelineTrackCounterGraph" + > +
+ +
+
+
+
+
`; diff --git a/src/test/components/__snapshots__/TrackProcessCPU.test.tsx.snap b/src/test/components/__snapshots__/TrackProcessCPU.test.tsx.snap index a5cbda9940..22c0e5a7cb 100644 --- a/src/test/components/__snapshots__/TrackProcessCPU.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackProcessCPU.test.tsx.snap @@ -123,18 +123,26 @@ exports[`TrackProcessCPU matches the component snapshot 1`] = ` style="--graph-height: 25px; --markers-height: 15px;" >
-
- -
+ class="timelineTrackCounterGraph" + > +
+ +
+
+
+
+
`; diff --git a/src/test/components/__snapshots__/TrackScreenshots.test.tsx.snap b/src/test/components/__snapshots__/TrackScreenshots.test.tsx.snap index ac11fb479b..bb50f9aa2b 100644 --- a/src/test/components/__snapshots__/TrackScreenshots.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackScreenshots.test.tsx.snap @@ -2,118 +2,122 @@ exports[`timeline/TrackScreenshots matches the component snapshot 1`] = `
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
`; diff --git a/src/test/components/__snapshots__/TrackThread.test.tsx.snap b/src/test/components/__snapshots__/TrackThread.test.tsx.snap index b0c656ea31..b730888b62 100644 --- a/src/test/components/__snapshots__/TrackThread.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackThread.test.tsx.snap @@ -56,43 +56,55 @@ Array [ exports[`timeline/TrackThread matches the snapshot for the component 1`] = `
-
- +
+
+
+ +
+
-
-
- -

- Stack Graph for - Test Track -

-

- This graph charts the stack height of each sample. -

- + +

+ Stack Graph for + Test Track +

+

+ This graph charts the stack height of each sample. +

+ +
+
+
+
-
`; diff --git a/src/test/components/__snapshots__/TrackVisualProgress.test.tsx.snap b/src/test/components/__snapshots__/TrackVisualProgress.test.tsx.snap index 3f9d0e3a46..a4e215fff3 100644 --- a/src/test/components/__snapshots__/TrackVisualProgress.test.tsx.snap +++ b/src/test/components/__snapshots__/TrackVisualProgress.test.tsx.snap @@ -143,13 +143,17 @@ exports[`TrackVisualProgress matches the component snapshot 1`] = ` style="height: 40px; --graph-height: 40px;" >
- +
+ +
`;