Skip to content

Commit

Permalink
Extract the button from MetaInfo back to the index of menu buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@julienw
julienw committed Oct 27, 2020
1 parent 8b2c5e7 commit 3b50406
Show file tree
Hide file tree
Showing 4 changed files with 700 additions and 756 deletions.
255 changes: 123 additions & 132 deletions src/components/app/MenuButtons/MetaInfo.js
View file
Expand Up @@ -4,7 +4,6 @@

// @flow
import * as React from 'react';
import { ButtonWithPanel } from 'firefox-profiler/components/shared/ButtonWithPanel';
import { MetaOverheadStatistics } from './MetaOverheadStatistics';
import {
formatBytes,
Expand All @@ -31,7 +30,7 @@ type Props = {|
/**
* This component formats the profile's meta information into a dropdown panel.
*/
export class MenuButtonsMetaInfo extends React.PureComponent<Props> {
export class MetaInfoPanel extends React.PureComponent<Props> {
/**
* This method provides information about the symbolication status, and a button
* to re-trigger symbolication.
Expand Down Expand Up @@ -114,143 +113,135 @@ export class MenuButtonsMetaInfo extends React.PureComponent<Props> {
}

return (
<ButtonWithPanel
className="menuButtonsMetaInfoButton"
buttonClassName="menuButtonsButton menuButtonsMetaInfoButtonButton"
label="Profile Info"
panelClassName="metaInfoPanel"
panelContent={
<>
<h2 className="metaInfoSubTitle">Profile Information</h2>
<div className="metaInfoSection">
{meta.startTime ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Recording started:</span>
{_formatDate(meta.startTime)}
</div>
) : null}
{meta.interval ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Interval:</span>
{formatTimestamp(meta.interval, 4, 1)}
</div>
) : null}
{meta.preprocessedProfileVersion ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Profile Version:</span>
{meta.preprocessedProfileVersion}
</div>
) : null}
{configuration ? (
<>
<div className="metaInfoRow">
<span className="metaInfoLabel">Buffer Capacity:</span>
{formatBytes(configuration.capacity)}
</div>
<div className="metaInfoRow">
<span className="metaInfoLabel">Buffer Duration:</span>
{configuration.duration
? `${configuration.duration} seconds`
: 'Unlimited'}
</div>
<div className="metaInfoSection">
{_renderRowOfList('Features', configuration.features)}
{_renderRowOfList('Threads Filter', configuration.threads)}
</div>
</>
) : null}
{this.renderSymbolication()}
<>
<h2 className="metaInfoSubTitle">Profile Information</h2>
<div className="metaInfoSection">
{meta.startTime ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Recording started:</span>
{_formatDate(meta.startTime)}
</div>
<h2 className="metaInfoSubTitle">Application</h2>
<div className="metaInfoSection">
{meta.product ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Name and version:</span>
{formatProductAndVersion(meta)}
</div>
) : null}
{meta.updateChannel ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Update Channel:</span>
{meta.updateChannel}
</div>
) : null}
{meta.appBuildID ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Build ID:</span>
{meta.sourceURL ? (
<a
href={meta.sourceURL}
title={meta.sourceURL}
target="_blank"
rel="noopener noreferrer"
>
{meta.appBuildID}
</a>
) : (
meta.appBuildID
)}
</div>
) : null}
{meta.debug !== undefined ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Build Type:</span>
{meta.debug ? 'Debug' : 'Opt'}
</div>
) : null}
{meta.extensions
? _renderRowOfList('Extensions', meta.extensions.name)
: null}
) : null}
{meta.interval ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Interval:</span>
{formatTimestamp(meta.interval, 4, 1)}
</div>
) : null}
{meta.preprocessedProfileVersion ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Profile Version:</span>
{meta.preprocessedProfileVersion}
</div>
<h2 className="metaInfoSubTitle">Platform</h2>
) : null}
{configuration ? (
<>
<div className="metaInfoRow">
<span className="metaInfoLabel">Buffer Capacity:</span>
{formatBytes(configuration.capacity)}
</div>
<div className="metaInfoRow">
<span className="metaInfoLabel">Buffer Duration:</span>
{configuration.duration
? `${configuration.duration} seconds`
: 'Unlimited'}
</div>
<div className="metaInfoSection">
{_renderRowOfList('Features', configuration.features)}
{_renderRowOfList('Threads Filter', configuration.threads)}
</div>
</>
) : null}
{this.renderSymbolication()}
</div>
<h2 className="metaInfoSubTitle">Application</h2>
<div className="metaInfoSection">
{meta.product ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Name and version:</span>
{formatProductAndVersion(meta)}
</div>
) : null}
{meta.updateChannel ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Update Channel:</span>
{meta.updateChannel}
</div>
) : null}
{meta.appBuildID ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Build ID:</span>
{meta.sourceURL ? (
<a
href={meta.sourceURL}
title={meta.sourceURL}
target="_blank"
rel="noopener noreferrer"
>
{meta.appBuildID}
</a>
) : (
meta.appBuildID
)}
</div>
) : null}
{meta.debug !== undefined ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">Build Type:</span>
{meta.debug ? 'Debug' : 'Opt'}
</div>
) : null}
{meta.extensions
? _renderRowOfList('Extensions', meta.extensions.name)
: null}
</div>
<h2 className="metaInfoSubTitle">Platform</h2>
<div className="metaInfoSection">
{platformInformation ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">OS:</span>
{platformInformation}
</div>
) : null}
{meta.abi ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">ABI:</span>
{meta.abi}
</div>
) : null}
{cpuCount}
</div>
{meta.visualMetrics ? (
<>
<h2 className="metaInfoSubTitle">Visual Metrics</h2>
<div className="metaInfoSection">
{platformInformation ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">OS:</span>
{platformInformation}
</div>
) : null}
{meta.abi ? (
<div className="metaInfoRow">
<span className="metaInfoLabel">ABI:</span>
{meta.abi}
</div>
) : null}
{cpuCount}
<div className="metaInfoRow">
<span className="visualMetricsLabel">Speed Index:</span>
{meta.visualMetrics.SpeedIndex}
</div>
<div className="metaInfoRow">
<span className="visualMetricsLabel">
Perceptual Speed Index:
</span>
{meta.visualMetrics.PerceptualSpeedIndex}
</div>
<div className="metaInfoRow">
<span className="visualMetricsLabel">
Contentful Speed Index:
</span>
{meta.visualMetrics.ContentfulSpeedIndex}
</div>
</div>
{meta.visualMetrics ? (
<>
<h2 className="metaInfoSubTitle">Visual Metrics</h2>
<div className="metaInfoSection">
<div className="metaInfoRow">
<span className="visualMetricsLabel">Speed Index:</span>
{meta.visualMetrics.SpeedIndex}
</div>
<div className="metaInfoRow">
<span className="visualMetricsLabel">
Perceptual Speed Index:
</span>
{meta.visualMetrics.PerceptualSpeedIndex}
</div>
<div className="metaInfoRow">
<span className="visualMetricsLabel">
Contentful Speed Index:
</span>
{meta.visualMetrics.ContentfulSpeedIndex}
</div>
</div>
</>
) : null}
{/*
</>
) : null}
{/*
Older profiles(before FF 70) don't have any overhead info.
Don't show anything if that's the case.
*/}
{profilerOverhead ? (
<MetaOverheadStatistics profilerOverhead={profilerOverhead} />
) : null}
</>
}
/>
{profilerOverhead ? (
<MetaOverheadStatistics profilerOverhead={profilerOverhead} />
) : null}
</>
);
}
}
Expand Down
33 changes: 25 additions & 8 deletions src/components/app/MenuButtons/index.js
View file
Expand Up @@ -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 {
Expand Down Expand Up @@ -75,6 +78,25 @@ class MenuButtonsImpl extends React.PureComponent<Props> {
this.props.dismissNewlyPublished();
}

_renderMetaInfoButton() {
const { profile, symbolicationStatus, resymbolicateProfile } = this.props;
return (
<ButtonWithPanel
className="menuButtonsMetaInfoButton"
buttonClassName="menuButtonsButton menuButtonsMetaInfoButtonButton"
label="Profile Info"
panelClassName="metaInfoPanel"
panelContent={
<MetaInfoPanel
profile={profile}
symbolicationStatus={symbolicationStatus}
resymbolicateProfile={resymbolicateProfile}
/>
}
/>
);
}

_renderPublishPanel() {
const { uploadPhase, dataSource, abortFunction } = this.props;

Expand Down Expand Up @@ -152,15 +174,10 @@ class MenuButtonsImpl extends React.PureComponent<Props> {
}

render() {
const { profile, symbolicationStatus, resymbolicateProfile } = this.props;
return (
<>
{/* Place the info button outside of the menu buttons to allow it to shrink. */}
<MenuButtonsMetaInfo
profile={profile}
symbolicationStatus={symbolicationStatus}
resymbolicateProfile={resymbolicateProfile}
/>
{this._renderMetaInfoButton()}
<div className="menuButtons">
{this._renderRevertProfile()}
{this._renderPublishPanel()}
Expand Down

0 comments on commit 3b50406

Please sign in to comment.