From 3b50406c58e83a9ca1ce0927f51f3116a249f902 Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Tue, 20 Oct 2020 14:40:58 +0200 Subject: [PATCH] Extract the button from MetaInfo back to the index of menu buttons --- src/components/app/MenuButtons/MetaInfo.js | 255 ++-- src/components/app/MenuButtons/index.js | 33 +- src/test/components/MenuButtons.test.js | 54 +- .../__snapshots__/MenuButtons.test.js.snap | 1114 ++++++++--------- 4 files changed, 700 insertions(+), 756 deletions(-) diff --git a/src/components/app/MenuButtons/MetaInfo.js b/src/components/app/MenuButtons/MetaInfo.js index 685e04d698c..324394be50a 100644 --- a/src/components/app/MenuButtons/MetaInfo.js +++ b/src/components/app/MenuButtons/MetaInfo.js @@ -4,7 +4,6 @@ // @flow import * as React from 'react'; -import { ButtonWithPanel } from 'firefox-profiler/components/shared/ButtonWithPanel'; import { MetaOverheadStatistics } from './MetaOverheadStatistics'; import { formatBytes, @@ -31,7 +30,7 @@ type Props = {| /** * This component formats the profile's meta information into a dropdown panel. */ -export class MenuButtonsMetaInfo extends React.PureComponent { +export class MetaInfoPanel extends React.PureComponent { /** * This method provides information about the symbolication status, and a button * to re-trigger symbolication. @@ -114,143 +113,135 @@ export class MenuButtonsMetaInfo extends React.PureComponent { } return ( - -

Profile Information

-
- {meta.startTime ? ( -
- Recording started: - {_formatDate(meta.startTime)} -
- ) : null} - {meta.interval ? ( -
- Interval: - {formatTimestamp(meta.interval, 4, 1)} -
- ) : null} - {meta.preprocessedProfileVersion ? ( -
- Profile Version: - {meta.preprocessedProfileVersion} -
- ) : null} - {configuration ? ( - <> -
- Buffer Capacity: - {formatBytes(configuration.capacity)} -
-
- Buffer Duration: - {configuration.duration - ? `${configuration.duration} seconds` - : 'Unlimited'} -
-
- {_renderRowOfList('Features', configuration.features)} - {_renderRowOfList('Threads Filter', configuration.threads)} -
- - ) : null} - {this.renderSymbolication()} + <> +

Profile Information

+
+ {meta.startTime ? ( +
+ Recording started: + {_formatDate(meta.startTime)}
-

Application

-
- {meta.product ? ( -
- Name and version: - {formatProductAndVersion(meta)} -
- ) : null} - {meta.updateChannel ? ( -
- Update Channel: - {meta.updateChannel} -
- ) : null} - {meta.appBuildID ? ( -
- Build ID: - {meta.sourceURL ? ( - - {meta.appBuildID} - - ) : ( - meta.appBuildID - )} -
- ) : null} - {meta.debug !== undefined ? ( -
- Build Type: - {meta.debug ? 'Debug' : 'Opt'} -
- ) : null} - {meta.extensions - ? _renderRowOfList('Extensions', meta.extensions.name) - : null} + ) : null} + {meta.interval ? ( +
+ Interval: + {formatTimestamp(meta.interval, 4, 1)} +
+ ) : null} + {meta.preprocessedProfileVersion ? ( +
+ Profile Version: + {meta.preprocessedProfileVersion}
-

Platform

+ ) : null} + {configuration ? ( + <> +
+ Buffer Capacity: + {formatBytes(configuration.capacity)} +
+
+ Buffer Duration: + {configuration.duration + ? `${configuration.duration} seconds` + : 'Unlimited'} +
+
+ {_renderRowOfList('Features', configuration.features)} + {_renderRowOfList('Threads Filter', configuration.threads)} +
+ + ) : null} + {this.renderSymbolication()} +
+

Application

+
+ {meta.product ? ( +
+ Name and version: + {formatProductAndVersion(meta)} +
+ ) : null} + {meta.updateChannel ? ( +
+ Update Channel: + {meta.updateChannel} +
+ ) : null} + {meta.appBuildID ? ( +
+ Build ID: + {meta.sourceURL ? ( + + {meta.appBuildID} + + ) : ( + meta.appBuildID + )} +
+ ) : null} + {meta.debug !== undefined ? ( +
+ Build Type: + {meta.debug ? 'Debug' : 'Opt'} +
+ ) : null} + {meta.extensions + ? _renderRowOfList('Extensions', meta.extensions.name) + : null} +
+

Platform

+
+ {platformInformation ? ( +
+ OS: + {platformInformation} +
+ ) : null} + {meta.abi ? ( +
+ ABI: + {meta.abi} +
+ ) : null} + {cpuCount} +
+ {meta.visualMetrics ? ( + <> +

Visual Metrics

- {platformInformation ? ( -
- OS: - {platformInformation} -
- ) : null} - {meta.abi ? ( -
- ABI: - {meta.abi} -
- ) : null} - {cpuCount} +
+ Speed Index: + {meta.visualMetrics.SpeedIndex} +
+
+ + Perceptual Speed Index: + + {meta.visualMetrics.PerceptualSpeedIndex} +
+
+ + Contentful Speed Index: + + {meta.visualMetrics.ContentfulSpeedIndex} +
- {meta.visualMetrics ? ( - <> -

Visual Metrics

-
-
- Speed Index: - {meta.visualMetrics.SpeedIndex} -
-
- - Perceptual Speed Index: - - {meta.visualMetrics.PerceptualSpeedIndex} -
-
- - Contentful Speed Index: - - {meta.visualMetrics.ContentfulSpeedIndex} -
-
- - ) : null} - {/* + + ) : null} + {/* Older profiles(before FF 70) don't have any overhead info. Don't show anything if that's the case. */} - {profilerOverhead ? ( - - ) : null} - - } - /> + {profilerOverhead ? ( + + ) : null} + ); } } diff --git a/src/components/app/MenuButtons/index.js b/src/components/app/MenuButtons/index.js index b59d620c306..85b56adb8a3 100644 --- a/src/components/app/MenuButtons/index.js +++ b/src/components/app/MenuButtons/index.js @@ -18,10 +18,13 @@ import { } from 'firefox-profiler/selectors/profile'; import { getDataSource } from 'firefox-profiler/selectors/url-state'; import { getIsNewlyPublished } from 'firefox-profiler/selectors/app'; -import { MenuButtonsMetaInfo } from 'firefox-profiler/components/app/MenuButtons/MetaInfo'; + +/* Note: the order of import is important, from most general to most specific, + * so that the CSS rules are in the correct order. */ +import { ButtonWithPanel } from 'firefox-profiler/components/shared/ButtonWithPanel'; +import { MetaInfoPanel } from 'firefox-profiler/components/app/MenuButtons/MetaInfo'; import { MenuButtonsPublish } from 'firefox-profiler/components/app/MenuButtons/Publish'; import { MenuButtonsPermalink } from 'firefox-profiler/components/app/MenuButtons/Permalink'; -import { ButtonWithPanel } from 'firefox-profiler/components/shared/ButtonWithPanel'; import { revertToPrePublishedState } from 'firefox-profiler/actions/publish'; import { dismissNewlyPublished } from 'firefox-profiler/actions/app'; import { @@ -75,6 +78,25 @@ class MenuButtonsImpl extends React.PureComponent { this.props.dismissNewlyPublished(); } + _renderMetaInfoButton() { + const { profile, symbolicationStatus, resymbolicateProfile } = this.props; + return ( + + } + /> + ); + } + _renderPublishPanel() { const { uploadPhase, dataSource, abortFunction } = this.props; @@ -152,15 +174,10 @@ class MenuButtonsImpl extends React.PureComponent { } render() { - const { profile, symbolicationStatus, resymbolicateProfile } = this.props; return ( <> {/* Place the info button outside of the menu buttons to allow it to shrink. */} - + {this._renderMetaInfoButton()}
{this._renderRevertProfile()} {this._renderPublishPanel()} diff --git a/src/test/components/MenuButtons.test.js b/src/test/components/MenuButtons.test.js index 6fa173dbe71..2b978d47940 100644 --- a/src/test/components/MenuButtons.test.js +++ b/src/test/components/MenuButtons.test.js @@ -5,7 +5,7 @@ // @flow import * as React from 'react'; import { MenuButtons } from '../../components/app/MenuButtons'; -import { MenuButtonsMetaInfo } from '../../components/app/MenuButtons/MetaInfo'; +import { MetaInfoPanel } from '../../components/app/MenuButtons/MetaInfo'; import { render, fireEvent, waitFor } from '@testing-library/react'; import { Provider } from 'react-redux'; import { storeWithProfile } from '../fixtures/stores'; @@ -283,35 +283,29 @@ describe('app/MenuButtons', function() { }); }); -describe('', function() { +describe('', function() { function setup(profile: Profile, symbolicationStatus = 'DONE') { - jest.useFakeTimers(); jest.spyOn(Date.prototype, 'toLocaleString').mockImplementation(function() { // eslint-disable-next-line babel/no-invalid-this return 'toLocaleString ' + this.toUTCString(); }); - const store = storeWithProfile(profile); const resymbolicateProfile = jest.fn(); const renderResults = render( - - - + ); return { - store, resymbolicateProfile, - renderResults, ...renderResults, }; } - it('matches the snapshot', async () => { + it('matches the snapshot', () => { // Using gecko profile because it has metadata and profilerOverhead data in it. const profile = processProfile(createGeckoProfile()); profile.meta.configuration = { @@ -321,15 +315,13 @@ describe('', function() { duration: 20, }; - const { container, getByText } = setup(profile); - const metaInfoButton = getByText('Profile Info'); - fireFullClick(metaInfoButton); - jest.runAllTimers(); - - expect(container.firstChild).toMatchSnapshot(); + const { container } = setup(profile); + // This component renders a fragment, so we look at the full container so + // that we get all children. + expect(container).toMatchSnapshot(); }); - it('with no statistics object should not make the app crash', async () => { + it('with no statistics object should not make the app crash', () => { // Using gecko profile because it has metadata and profilerOverhead data in it. const profile = processProfile(createGeckoProfile()); // We are removing statistics objects from all overhead objects to test @@ -340,13 +332,10 @@ describe('', function() { } } - const { getByText, container } = setup(profile); - - const metaInfoButton = getByText('Profile Info'); - fireFullClick(metaInfoButton); - jest.runAllTimers(); - - expect(container.firstChild).toMatchSnapshot(); + const { container } = setup(profile); + // This component renders a fragment, so we look at the full container so + // that we get all children. + expect(container).toMatchSnapshot(); }); describe('symbolication', function() { @@ -359,14 +348,7 @@ describe('', function() { const { profile } = getProfileFromTextSamples('A'); profile.meta.symbolicated = config.symbolicated; - const setupResult = setup(profile, config.symbolicationStatus); - - // Open up the arrow panel for the test. - const { getByText } = setupResult; - fireEvent.click(getByText('Profile Info')); - jest.runAllTimers(); - - return setupResult; + return setup(profile, config.symbolicationStatus); } it('handles successfully symbolicated profiles', () => { diff --git a/src/test/components/__snapshots__/MenuButtons.test.js.snap b/src/test/components/__snapshots__/MenuButtons.test.js.snap index 070b533ea62..ce0c2f6f663 100644 --- a/src/test/components/__snapshots__/MenuButtons.test.js.snap +++ b/src/test/components/__snapshots__/MenuButtons.test.js.snap @@ -1,618 +1,572 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` matches the snapshot 1`] = ` -
- +exports[` matches the snapshot 1`] = ` +
+

+ Profile Information +

+ + Recording started: + + toLocaleString Sat, 09 Apr 2016 17:02:32 GMT +
+
+ + Interval: + + 1ms +
+
+ + Profile Version: + + 32 +
+
+ + Buffer Capacity: + + 16.0KB +
+
+ + Buffer Duration: + + 20 seconds +
+
-
-

- Profile Information -

-
+
    -
    - - Recording started: - - toLocaleString Sat, 09 Apr 2016 17:02:32 GMT -
    -
    - - Interval: - - 1ms -
    -
    - - Profile Version: - - 32 -
    -
    - - Buffer Capacity: - - 16.0KB -
    -
    +
  • - - Buffer Duration: - - 20 seconds -
    • -
    -
    - - Features - : - -
      -
    • - js -
      • -
    • - threads -
      • -
    -
    -
    - - Threads Filter - : - -
      -
    • - GeckoMain -
      • -
    • - DOM Worker -
      • -
    -
    -
    -
    - - Symbols: - - Profile is not symbolicated -
    -
    - - -
    -
-

+ +

+
+ - Application - -
+
    -
    - - Name and version: - - Firefox 48 -
    -
    +
  • - - Update Channel: - - nightly -
    • -
    - - Build ID: - - 20181126165837 -
    -
    - - Build Type: - - Debug -
    -
    - - Extensions - : - -
      -
    • - Form Autofill -
      • -
    • - Firefox Screenshots -
      • -
    • - Gecko Profiler -
      • -
    -
    -
-

+ +

+
+
+ + Symbols: + + Profile is not symbolicated +
+
+ + +
+
+

+ Application +

+
+
+ + Name and version: + + Firefox 48 +
+
+ + Update Channel: + + nightly +
+
+ + Build ID: + + 20181126165837 +
+
+ + Build Type: + + Debug +
+
+ + Extensions + : + +
    +
  • - Platform - -
    +
  • -
    - - OS: - - macOS 10.11 -
    -
    - - ABI: - - x86_64-gcc3 -
    -
    - - CPU: - - 4 physical cores - , - 8 logical cores -
    -
-
- - Profiler Overhead - -
-
-
-
- Mean -
-
- Max -
-
- Min -
-
- Overhead -
-
- 227μs -
-
- 410μs -
-
- 38μs -
-
- Cleaning -
-
- 54μs -
-
- 100μs -
-
- 7.0μs -
-
- Counter -
-
- 59μs -
-
- 105μs -
-
- 12μs -
-
- Interval -
-
- 857μs -
-
- 1,000μs -
-
- 0.000μs -
-
- Lockings -
-
- 49μs -
-
- 95μs -
-
- 2.0μs -
-
-
- - Overhead Durations: - - - 1,586μs - -
-
- - Overhead Percentage: - - - 26,433% - -
-
- - Profiled Duration: - - - 6.0μs - -
-
-
-
+ Firefox Screenshots + +
  • + Gecko Profiler +
    • +
    -
    -`; - -exports[` with no statistics object should not make the app crash 1`] = ` -
    - +

    + Platform +

    + + OS: + + macOS 10.11 +
    +
    + + ABI: + + x86_64-gcc3 +
    +
    + + CPU: + + 4 physical cores + , + 8 logical cores +
    +
    +
    + + Profiler Overhead + +
    + class="metaInfoGrid" + > +
    +
    + Mean +
    +
    + Max +
    +
    + Min +
    +
    + Overhead +
    +
    + 227μs +
    +
    + 410μs +
    +
    + 38μs +
    +
    + Cleaning +
    +
    + 54μs +
    +
    + 100μs +
    +
    + 7.0μs +
    +
    + Counter +
    +
    + 59μs +
    +
    + 105μs +
    +
    + 12μs +
    +
    + Interval +
    +
    + 857μs +
    +
    + 1,000μs +
    +
    + 0.000μs +
    +
    + Lockings +
    +
    + 49μs +
    +
    + 95μs +
    +
    + 2.0μs +
    +
    -

    - Profile Information -

    -
    + -
    - - Recording started: - - toLocaleString Sat, 09 Apr 2016 17:02:32 GMT -
    -
    - - Interval: - - 1ms -
    -
    - - Profile Version: - - 32 -
    -
    - - Symbols: - - Profile is not symbolicated -
    -
    - - -
    -
    -

    +

    +
    + - Application - -
    + -
    - - Name and version: - - Firefox 48 -
    -
    - - Update Channel: - - nightly -
    -
    - - Build ID: - - 20181126165837 -
    -
    - - Build Type: - - Debug -
    -
    - - Extensions - : - -
      -
    • - Form Autofill -
      • -
    • - Firefox Screenshots -
      • -
    • - Gecko Profiler -
      • -
    -
    -
    -

    +

    +
    + - Platform - -
    + -
    - - OS: - - macOS 10.11 -
    -
    - - ABI: - - x86_64-gcc3 -
    -
    - - CPU: - - 4 physical cores - , - 8 logical cores -
    -
    + 6.0μs +
    +
    +
    +`; + +exports[` with no statistics object should not make the app crash 1`] = ` +
    +

    + Profile Information +

    +
    +
    + + Recording started: + + toLocaleString Sat, 09 Apr 2016 17:02:32 GMT +
    +
    + + Interval: + + 1ms +
    +
    + + Profile Version: + + 32 +
    +
    + + Symbols: + + Profile is not symbolicated +
    +
    + + +
    +
    +

    + Application +

    +
    +
    + + Name and version: + + Firefox 48 +
    +
    + + Update Channel: + + nightly +
    +
    + + Build ID: + + 20181126165837 +
    +
    + + Build Type: + + Debug +
    +
    + + Extensions + : + +
      +
    • + Form Autofill +
      • +
    • + Firefox Screenshots +
      • +
    • + Gecko Profiler +
      • +
    +
    +
    +

    + Platform +

    +
    +
    + + OS: + + macOS 10.11 +
    +
    + + ABI: + + x86_64-gcc3 +
    +
    + + CPU: + + 4 physical cores + , + 8 logical cores +
    `;