From 08bc7eab67b9f7052ae7afaef9b3bad675ef4d9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 18 Jul 2022 14:43:37 +0200 Subject: [PATCH 1/8] Default to cpu-category for timeline type url state and add an upgrader --- src/app-logic/url-handling.js | 31 +++++++-- src/reducers/url-state.js | 5 +- .../__snapshots__/Timeline.test.js.snap | 1 - src/test/store/active-tab.test.js | 2 +- src/test/store/profile-view.test.js | 6 +- src/test/url-handling.test.js | 63 ++++++++++++++++++- 6 files changed, 96 insertions(+), 12 deletions(-) diff --git a/src/app-logic/url-handling.js b/src/app-logic/url-handling.js index 4b3c52979c..00e434f6f6 100644 --- a/src/app-logic/url-handling.js +++ b/src/app-logic/url-handling.js @@ -46,7 +46,7 @@ import { } from '../utils/uintarray-encoding'; import { tabSlugs } from '../app-logic/tabs-handling'; -export const CURRENT_URL_VERSION = 6; +export const CURRENT_URL_VERSION = 7; /** * This static piece of state might look like an anti-pattern, but it's a relatively @@ -366,10 +366,9 @@ export function getQueryStringFromUrlState(urlState: UrlState): string { ? undefined : urlState.profileSpecific.implementation, timelineType: - // The default is the category view, so only add it to the URL if it's the - // stack or cpu-category view. - // TODO: We should make the 'cpu-category' the new default with an upgrader. - urlState.profileSpecific.timelineType === 'category' + // The default is the cpu-category view, so only add it to the URL if it's + // the stack or category view. + urlState.profileSpecific.timelineType === 'cpu-category' ? undefined : urlState.profileSpecific.timelineType, }: BaseQueryShape); @@ -1088,6 +1087,26 @@ const _upgraders: {| delete query.transforms; } }, + [7]: ({ query }: ProcessedLocationBeforeUpgrade) => { + // Default timeline type has been changed to 'cpu-category' from 'category'. + // Default timeline type isn't needed to be in the url, revert the values in + // the query to reflect that. + switch (query.timelineType) { + case 'cpu-category': + // This is the default value now. It's not needed in the url. + delete query.timelineType; + break; + case 'stack': + // Do nothing for this. + break; + case 'category': + default: + // We can either have 'category' or nothing for this value. We should + // explicitly add for this case. + query.timelineType = 'category'; + break; + } + }, }; for (let destVersion = 1; destVersion <= CURRENT_URL_VERSION; destVersion++) { @@ -1213,6 +1232,6 @@ function validateTimelineType(type: ?string): TimelineType { default: // Type assert we've checked everything: (timelineType: empty); - return 'category'; + return 'cpu-category'; } } diff --git a/src/reducers/url-state.js b/src/reducers/url-state.js index 10b0a5f91c..4a6499f5aa 100644 --- a/src/reducers/url-state.js +++ b/src/reducers/url-state.js @@ -226,7 +226,10 @@ const transforms: Reducer = (state = {}, action) => { } }; -const timelineType: Reducer = (state = 'category', action) => { +const timelineType: Reducer = ( + state = 'cpu-category', + action +) => { switch (action.type) { case 'PROFILE_LOADED': if (!action.profile.meta.categories) { diff --git a/src/test/components/__snapshots__/Timeline.test.js.snap b/src/test/components/__snapshots__/Timeline.test.js.snap index 9bb55f65cf..c1aa5623f8 100644 --- a/src/test/components/__snapshots__/Timeline.test.js.snap +++ b/src/test/components/__snapshots__/Timeline.test.js.snap @@ -14,7 +14,6 @@ exports[`Timeline renders the header 1`] = ` class="photon-label photon-label-micro timelineSettingsToggleLabel" > { + it('should default to the cpu-category view', () => { const { profile } = getProfileFromTextSamples('A'); const { getState } = storeWithProfile(profile); - expect(UrlStateSelectors.getTimelineType(getState())).toEqual('category'); + expect(UrlStateSelectors.getTimelineType(getState())).toEqual( + 'cpu-category' + ); }); it('should use the stack height view when using an imported profile', () => { diff --git a/src/test/url-handling.test.js b/src/test/url-handling.test.js index 3118b6c6b5..ae455de173 100644 --- a/src/test/url-handling.test.js +++ b/src/test/url-handling.test.js @@ -1339,6 +1339,67 @@ describe('url upgrading', function () { }); }); + describe('version 7: change default timeline type', function () { + it('removes the explicit cpu-category from the url', function () { + const { getState } = _getStoreWithURL({ + pathname: '/public/e71ce9584da34298627fb66ac7f2f245ba5edbf5/calltree/', + search: '?timelineType=cpu-category', + v: 6, + }); + + expect(urlStateSelectors.getTimelineType(getState())).toBe( + 'cpu-category' + ); + + const newUrl = new URL( + urlFromState(urlStateSelectors.getUrlState(getState())), + 'https://profiler.firefox.com' + ); + const query = queryString.parse(newUrl.search.substr(1), { + arrayFormat: 'bracket', + }); + expect(query.timelineType).toBeFalsy(); + }); + + it('add an explicit category from the url', function () { + const { getState } = _getStoreWithURL({ + pathname: '/public/e71ce9584da34298627fb66ac7f2f245ba5edbf5/calltree/', + search: '', + v: 6, + }); + + expect(urlStateSelectors.getTimelineType(getState())).toBe('category'); + + const newUrl = new URL( + urlFromState(urlStateSelectors.getUrlState(getState())), + 'https://profiler.firefox.com' + ); + const query = queryString.parse(newUrl.search.substr(1), { + arrayFormat: 'bracket', + }); + expect(query.timelineType).toBe('category'); + }); + + it('keeps stack category the same', function () { + const { getState } = _getStoreWithURL({ + pathname: '/public/e71ce9584da34298627fb66ac7f2f245ba5edbf5/calltree/', + search: '?timelineType=stack', + v: 6, + }); + + expect(urlStateSelectors.getTimelineType(getState())).toBe('stack'); + + const newUrl = new URL( + urlFromState(urlStateSelectors.getUrlState(getState())), + 'https://profiler.firefox.com' + ); + const query = queryString.parse(newUrl.search.substr(1), { + arrayFormat: 'bracket', + }); + expect(query.timelineType).toBe('stack'); + }); + }); + // More general checks it("won't run if the current version is specified", function () { const { getState } = _getStoreWithURL({ @@ -1555,7 +1616,7 @@ describe('urlFromState', function () { '/public/1ecd7a421948995171a4bb483b7bcc8e1868cc57/calltree'; const newUrlState = stateFromLocation({ pathname: pathname, - search: '', + search: `?v=${CURRENT_URL_VERSION}`, hash: '', }); expect(urlFromState(newUrlState)).toEqual( From f348aac95e610c965ce96f37de606413c04f52ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 18 Jul 2022 16:28:17 +0200 Subject: [PATCH 2/8] Determine the timeline type depending on the profile data --- src/actions/receive-profile.js | 28 ++++------------- src/profile-logic/profile-data.js | 30 +++++++++++++++++++ src/reducers/url-state.js | 6 +--- .../__snapshots__/Timeline.test.js.snap | 1 + src/test/store/profile-view.test.js | 15 ++++++++-- 5 files changed, 49 insertions(+), 31 deletions(-) diff --git a/src/actions/receive-profile.js b/src/actions/receive-profile.js index 744ccfb02f..46b985bbc3 100644 --- a/src/actions/receive-profile.js +++ b/src/actions/receive-profile.js @@ -33,7 +33,6 @@ import { getProfile, getView, getRelevantPagesForActiveTab, - getIsCPUUtilizationProvided, getSymbolServerUrl, getActiveTabID, } from 'firefox-profiler/selectors'; @@ -58,6 +57,7 @@ import { computeActiveTabTracks } from 'firefox-profiler/profile-logic/active-ta import { setDataSource } from './profile-view'; import { fatalError } from './errors'; import { GOOGLE_STORAGE_BUCKET } from 'firefox-profiler/app-logic/constants'; +import { determineTimelineType } from 'firefox-profiler/profile-logic/profile-data'; import type { RequestedLib, @@ -335,20 +335,9 @@ export function finalizeFullProfileView( profile ); - // Check the profile to see if we have threadCPUDelta values and switch to - // the category view with CPU if we have. This is needed only while we are - // still experimenting with the new activity graph. We should remove this - // when we have this on by default. let timelineType = null; - if ( - !hasUrlInfo && - profile.meta.sampleUnits && - profile.threads.some((thread) => thread.samples.threadCPUDelta) - ) { - const hasCPUDeltaValues = getIsCPUUtilizationProvided(getState()); - if (hasCPUDeltaValues) { - timelineType = 'cpu-category'; - } + if (!hasUrlInfo) { + timelineType = determineTimelineType(profile); } withHistoryReplaceStateSync(() => { @@ -588,15 +577,8 @@ export function finalizeActiveTabProfileView( // still experimenting with the new activity graph. We should remove this // when we have this on by default. let timelineType = null; - if ( - !hasUrlInfo && - profile.meta.sampleUnits && - profile.threads[0].samples.threadCPUDelta - ) { - const hasCPUDeltaValues = getIsCPUUtilizationProvided(getState()); - if (hasCPUDeltaValues) { - timelineType = 'cpu-category'; - } + if (!hasUrlInfo) { + timelineType = determineTimelineType(profile); } dispatch({ diff --git a/src/profile-logic/profile-data.js b/src/profile-logic/profile-data.js index e26d969802..6753e912bc 100644 --- a/src/profile-logic/profile-data.js +++ b/src/profile-logic/profile-data.js @@ -74,6 +74,7 @@ import type { MarkerPayload, Address, AddressProof, + TimelineType, } from 'firefox-profiler/types'; import type { UniqueStringArray } from 'firefox-profiler/utils/unique-string-array'; @@ -3434,3 +3435,32 @@ export function findAddressProofForFile( } return null; } + +/** + * Determines the timeline type by looking at the profile data. + * + * There are three options: + * 'cpu-category': If a profile has both category and cpu usage information. + * 'category': If a profile has category information but not the cpu usage. + * 'stack': If a profile doesn't have category or cpu usage information. + */ +export function determineTimelineType(profile: Profile): TimelineType { + if (!profile.meta.categories) { + // Profile doesn't have categories. We don't have enough information to draw + // a proper category view with activity graph. Use the stack chart instead. + // It can be either an imported or a very old profile. + return 'stack'; + } + + if ( + !profile.meta.sampleUnits || + !profile.threads.some((thread) => thread.samples.threadCPUDelta) + ) { + // Have category information but doesn't have the CPU usage information. + // Use 'category'. + return 'category'; + } + + // Have both category and CPU usage information. Use 'cpu-category'. + return 'cpu-category'; +} diff --git a/src/reducers/url-state.js b/src/reducers/url-state.js index 4a6499f5aa..1dac5cf95f 100644 --- a/src/reducers/url-state.js +++ b/src/reducers/url-state.js @@ -232,16 +232,12 @@ const timelineType: Reducer = ( ) => { switch (action.type) { case 'PROFILE_LOADED': - if (!action.profile.meta.categories) { - // An imported profile did not provide its own categories. Use the stack view instead. - return 'stack'; - } return state; case 'CHANGE_TIMELINE_TYPE': return action.timelineType; case 'VIEW_FULL_PROFILE': case 'VIEW_ACTIVE_TAB_PROFILE': - // The timelineType can be set at loadtime from a URL value. + // The timelineType can be set at load time from a URL value. // If it's not set from a URL value we provide a default value from this action. // When it's null we don't want to override the value that was set already. if (action.timelineType !== null) { diff --git a/src/test/components/__snapshots__/Timeline.test.js.snap b/src/test/components/__snapshots__/Timeline.test.js.snap index c1aa5623f8..9bb55f65cf 100644 --- a/src/test/components/__snapshots__/Timeline.test.js.snap +++ b/src/test/components/__snapshots__/Timeline.test.js.snap @@ -14,6 +14,7 @@ exports[`Timeline renders the header 1`] = ` class="photon-label photon-label-micro timelineSettingsToggleLabel" > { - const { profile } = getProfileFromTextSamples('A'); + it('should use the cpu-category view when CPU usage is provided', () => { + const profile = getProfileWithThreadCPUDelta([[1, 2, 1]]); const { getState } = storeWithProfile(profile); expect(UrlStateSelectors.getTimelineType(getState())).toEqual( 'cpu-category' ); }); - it('should use the stack height view when using an imported profile', () => { + it('should use the category view when cpu is not provided', () => { + const { profile } = getProfileFromTextSamples('A'); + + // Load the store after mutating the profile. + const { getState } = storeWithProfile(profile); + expect(UrlStateSelectors.getTimelineType(getState())).toEqual('category'); + }); + + it('should use the stack height view when category and cpu is not provided', () => { const { profile } = getProfileFromTextSamples('A'); delete profile.meta.categories; From 224396f4361d728dd22d2cb7b8756c224dfd6565 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 18 Jul 2022 16:30:35 +0200 Subject: [PATCH 3/8] Do not show the CPU usage field in the tooltip if the view is not cpu --- src/components/shared/thread/ActivityGraph.js | 9 ++++++++- src/components/timeline/TrackThread.js | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/shared/thread/ActivityGraph.js b/src/components/shared/thread/ActivityGraph.js index 1e65616e48..e9ab1cd886 100644 --- a/src/components/shared/thread/ActivityGraph.js +++ b/src/components/shared/thread/ActivityGraph.js @@ -26,6 +26,7 @@ import type { SelectedState, Milliseconds, CssPixels, + TimelineType, } from 'firefox-profiler/types'; import type { ActivityFillGraphQuerier, @@ -54,6 +55,7 @@ export type Props = {| +enableCPUUsage: boolean, +maxThreadCPUDeltaPerMs: number, +implementationFilter: ImplementationFilter, + +timelineType: TimelineType, ...SizeProps, |}; @@ -169,6 +171,7 @@ class ThreadActivityGraphImpl extends React.PureComponent { implementationFilter, width, height, + timelineType, } = this.props; const { hoveredPixelState, mouseX, mouseY } = this.state; return ( @@ -204,7 +207,11 @@ class ThreadActivityGraphImpl extends React.PureComponent { { enableCPUUsage={enableCPUUsage} maxThreadCPUDeltaPerMs={maxThreadCPUDeltaPerMs} implementationFilter={implementationFilter} + timelineType={timelineType} /> {trackType === 'expanded' ? ( Date: Mon, 18 Jul 2022 16:40:59 +0200 Subject: [PATCH 4/8] Remove the timeline type radio buttons from the timeline --- locales/en-US/app.ftl | 5 -- src/components/timeline/FullTimeline.js | 65 ------------------- .../__snapshots__/Timeline.test.js.snap | 31 +-------- 3 files changed, 1 insertion(+), 100 deletions(-) diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl index a8d8eec868..30cf369762 100644 --- a/locales/en-US/app.ftl +++ b/locales/en-US/app.ftl @@ -223,11 +223,6 @@ FooterLinks--hide-button = ## The timeline component of the full view in the analysis UI at the top of the ## page. -FullTimeline--graph-type = Graph type: -FullTimeline--categories-with-cpu = Categories with CPU -FullTimeline--categories = Categories -FullTimeline--stack-height = Stack height - # This string is used as the text of the track selection button. # Displays the ratio of visible tracks count to total tracks count in the timeline. # We have spans here to make the numbers bold. diff --git a/src/components/timeline/FullTimeline.js b/src/components/timeline/FullTimeline.js index a9a0e6a0c8..73d900cfec 100644 --- a/src/components/timeline/FullTimeline.js +++ b/src/components/timeline/FullTimeline.js @@ -26,7 +26,6 @@ import { getGlobalTrackOrder, getTimelineType, getPanelLayoutGeneration, - getIsCPUUtilizationProvided, } from 'firefox-profiler/selectors'; import { TIMELINE_MARGIN_LEFT, @@ -72,7 +71,6 @@ type StateProps = {| +hiddenTrackCount: HiddenTrackCount, +activeTabID: TabID | null, +timelineTrackOrganization: TimelineTrackOrganization, - +isCPUUtilizationProvided: boolean, |}; type DispatchProps = {| @@ -91,62 +89,6 @@ type State = {| initialSelected: InitialSelectedTrackReference | null, |}; -class TimelineSettingsGraphType extends React.PureComponent<{| - +timelineType: TimelineType, - +changeTimelineType: typeof changeTimelineType, - +isCPUUtilizationProvided: boolean, -|}> { - _changeToCategories = () => this.props.changeTimelineType('category'); - _changeToCPUCategories = () => this.props.changeTimelineType('cpu-category'); - _changeToStacks = () => this.props.changeTimelineType('stack'); - - render() { - const { timelineType, isCPUUtilizationProvided } = this.props; - - return ( -
-
- Graph type: - {isCPUUtilizationProvided ? ( - - ) : null} - - -
-
- ); - } -} - class TimelineSettingsHiddenTracks extends React.PureComponent<{| +hiddenTrackCount: HiddenTrackCount, +changeRightClickedTrack: typeof changeRightClickedTrack, @@ -269,7 +211,6 @@ class FullTimelineImpl extends React.PureComponent { activeTabID, timelineTrackOrganization, changeTimelineTrackOrganization, - isCPUUtilizationProvided, } = this.props; // Do not include the left and right margins when computing the timeline width. @@ -283,11 +224,6 @@ class FullTimelineImpl extends React.PureComponent { '--timeline-settings-height': `${TIMELINE_SETTINGS_HEIGHT}px`, }} > - {/* Removing the active tab view checkbox for now. TODO: Bring it back once we are done with the new active tab UI implementation. @@ -356,7 +292,6 @@ export const FullTimeline = explicitConnect<{||}, StateProps, DispatchProps>({ hiddenTrackCount: getHiddenTrackCount(state), activeTabID: getActiveTabID(state), timelineTrackOrganization: getTimelineTrackOrganization(state), - isCPUUtilizationProvided: getIsCPUUtilizationProvided(state), }), mapDispatchToProps: { changeGlobalTrackOrder, diff --git a/src/test/components/__snapshots__/Timeline.test.js.snap b/src/test/components/__snapshots__/Timeline.test.js.snap index 9bb55f65cf..5fd4cb114d 100644 --- a/src/test/components/__snapshots__/Timeline.test.js.snap +++ b/src/test/components/__snapshots__/Timeline.test.js.snap @@ -4,36 +4,7 @@ exports[`Timeline renders the header 1`] = `
-
-
- Graph type: - - -
-
-
+/> `; exports[`Timeline renders the header 2`] = ` From 1261c2c2b4fe03b39ce47d0e7735f867bf18a62e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 18 Jul 2022 16:43:06 +0200 Subject: [PATCH 5/8] Remove the unused active tab checkbox from the timeline This was disabled for a long while ago and was waiting for us to re-enabled it again. But we've changed our minds about adding a checkbox here. It's not needed anymore. --- src/components/timeline/FullTimeline.js | 82 +------------------------ src/test/components/Timeline.test.js | 52 ---------------- 2 files changed, 1 insertion(+), 133 deletions(-) diff --git a/src/components/timeline/FullTimeline.js b/src/components/timeline/FullTimeline.js index 73d900cfec..b110ab966d 100644 --- a/src/components/timeline/FullTimeline.js +++ b/src/components/timeline/FullTimeline.js @@ -21,10 +21,7 @@ import { getGlobalTracks, getGlobalTrackReferences, getHiddenTrackCount, - getActiveTabID, - getTimelineTrackOrganization, getGlobalTrackOrder, - getTimelineType, getPanelLayoutGeneration, } from 'firefox-profiler/selectors'; import { @@ -40,19 +37,14 @@ import type { SizeProps } from 'firefox-profiler/components/shared/WithSize'; import { changeGlobalTrackOrder, - changeTimelineType, changeRightClickedTrack, } from 'firefox-profiler/actions/profile-view'; -import { changeTimelineTrackOrganization } from 'firefox-profiler/actions/receive-profile'; import type { - TabID, TrackIndex, GlobalTrack, InitialSelectedTrackReference, - TimelineTrackOrganization, GlobalTrackReference, - TimelineType, HiddenTrackCount, Milliseconds, StartEndRange, @@ -67,17 +59,12 @@ type StateProps = {| +globalTrackReferences: GlobalTrackReference[], +panelLayoutGeneration: number, +zeroAt: Milliseconds, - +timelineType: TimelineType, +hiddenTrackCount: HiddenTrackCount, - +activeTabID: TabID | null, - +timelineTrackOrganization: TimelineTrackOrganization, |}; type DispatchProps = {| +changeGlobalTrackOrder: typeof changeGlobalTrackOrder, - +changeTimelineType: typeof changeTimelineType, +changeRightClickedTrack: typeof changeRightClickedTrack, - +changeTimelineTrackOrganization: typeof changeTimelineTrackOrganization, |}; type Props = {| @@ -137,50 +124,6 @@ class TimelineSettingsHiddenTracks extends React.PureComponent<{| } } -class TimelineSettingsActiveTabView extends React.PureComponent<{| - +activeTabID: TabID | null, - +timelineTrackOrganization: TimelineTrackOrganization, - +changeTimelineTrackOrganization: typeof changeTimelineTrackOrganization, -|}> { - _toggleActiveTabView = () => { - const { - timelineTrackOrganization, - changeTimelineTrackOrganization, - activeTabID, - } = this.props; - if (timelineTrackOrganization.type === 'full' && activeTabID !== null) { - changeTimelineTrackOrganization({ - type: 'active-tab', - tabID: activeTabID, - }); - } else { - changeTimelineTrackOrganization({ type: 'full' }); - } - }; - - render() { - const { activeTabID, timelineTrackOrganization } = this.props; - if (activeTabID === null) { - return null; - } - - return ( -
- -
- ); - } -} - class FullTimelineImpl extends React.PureComponent { state = { initialSelected: null, @@ -204,13 +147,8 @@ class FullTimelineImpl extends React.PureComponent { width, globalTrackReferences, panelLayoutGeneration, - timelineType, hiddenTrackCount, - changeTimelineType, changeRightClickedTrack, - activeTabID, - timelineTrackOrganization, - changeTimelineTrackOrganization, } = this.props; // Do not include the left and right margins when computing the timeline width. @@ -223,20 +161,7 @@ class FullTimelineImpl extends React.PureComponent { style={{ '--timeline-settings-height': `${TIMELINE_SETTINGS_HEIGHT}px`, }} - > - {/* - Removing the active tab view checkbox for now. - TODO: Bring it back once we are done with the new active tab UI implementation. - */} - {/* eslint-disable-next-line no-constant-condition */} - {true ? null : ( - - )} - + >
({ committedRange: getCommittedRange(state), zeroAt: getZeroAt(state), panelLayoutGeneration: getPanelLayoutGeneration(state), - timelineType: getTimelineType(state), hiddenTrackCount: getHiddenTrackCount(state), - activeTabID: getActiveTabID(state), - timelineTrackOrganization: getTimelineTrackOrganization(state), }), mapDispatchToProps: { changeGlobalTrackOrder, - changeTimelineType, changeRightClickedTrack, - changeTimelineTrackOrganization, }, component: withSize(FullTimelineImpl), }); diff --git a/src/test/components/Timeline.test.js b/src/test/components/Timeline.test.js index 4724bf0e51..6be79efbcf 100644 --- a/src/test/components/Timeline.test.js +++ b/src/test/components/Timeline.test.js @@ -27,7 +27,6 @@ import { } from '../fixtures/utils'; import ReactDOM from 'react-dom'; import { - getTimelineTrackOrganization, selectedThreadSelectors, getRightClickedTrack, } from 'firefox-profiler/selectors'; @@ -444,57 +443,6 @@ describe('Timeline', function () { ); }); - // These tests are disabled for now because active tab view checkbox is disabled for now. - // TODO: Enable it again once we have that checbox back. - // eslint-disable-next-line jest/no-disabled-tests - describe.skip('TimelineSettingsActiveTabView', function () { - autoMockCanvasContext(); - - it('"Show active tab only" checkbox should not present in a profile without active tab metadata', () => { - const store = storeWithProfile(); - render( - - - - ); - - expect( - screen.queryByText('Show active tab only') - ).not.toBeInTheDocument(); - }); - - it('can switch between active tab view and advanced view', () => { - const profile = _getProfileWithDroppedSamples(); - profile.meta.configuration = { - threads: [], - features: [], - capacity: 1000000, - activeTabID: 123, - }; - const store = storeWithProfile(profile); - render( - - - - ); - - expect(getTimelineTrackOrganization(store.getState())).toEqual({ - type: 'full', - }); - - fireFullClick(screen.getByText('Show active tab only')); - expect(getTimelineTrackOrganization(store.getState())).toEqual({ - type: 'active-tab', - tabID: 123, - }); - - fireFullClick(screen.getByText('Show active tab only')); - expect(getTimelineTrackOrganization(store.getState())).toEqual({ - type: 'full', - }); - }); - }); - describe('TimelineSettingsHiddenTracks', () => { it('resets "rightClickedTrack" state when clicked', () => { const profile = _getProfileWithDroppedSamples(); From af151da378d1bc4f8ff18037e72877828fa679bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 18 Jul 2022 16:50:38 +0200 Subject: [PATCH 6/8] Remove the timeline header --- src/app-logic/constants.js | 2 - src/components/timeline/FullTimeline.js | 18 +- src/components/timeline/index.css | 30 - src/selectors/app.js | 4 - src/test/components/ProfileViewer.test.js | 2 +- src/test/components/Timeline.test.js | 27 +- .../__snapshots__/Timeline.test.js.snap | 8104 ----------------- 7 files changed, 4 insertions(+), 8183 deletions(-) delete mode 100644 src/test/components/__snapshots__/Timeline.test.js.snap diff --git a/src/app-logic/constants.js b/src/app-logic/constants.js index 3302c0926a..a792e7dbbf 100644 --- a/src/app-logic/constants.js +++ b/src/app-logic/constants.js @@ -18,8 +18,6 @@ export const TIMELINE_MARGIN_RIGHT = 15; export const TIMELINE_MARGIN_LEFT = 150; export const ACTIVE_TAB_TIMELINE_MARGIN_LEFT = 0; -export const TIMELINE_SETTINGS_HEIGHT = 26; - // Export the value for tests, and for computing the max height of the timeline // for the splitter. export const FULL_TRACK_SCREENSHOT_HEIGHT = 50; diff --git a/src/components/timeline/FullTimeline.js b/src/components/timeline/FullTimeline.js index b110ab966d..afe545fe90 100644 --- a/src/components/timeline/FullTimeline.js +++ b/src/components/timeline/FullTimeline.js @@ -24,11 +24,6 @@ import { getGlobalTrackOrder, getPanelLayoutGeneration, } from 'firefox-profiler/selectors'; -import { - TIMELINE_MARGIN_LEFT, - TIMELINE_MARGIN_RIGHT, - TIMELINE_SETTINGS_HEIGHT, -} from 'firefox-profiler/app-logic/constants'; import { TimelineTrackContextMenu } from './TrackContextMenu'; import './index.css'; @@ -151,18 +146,9 @@ class FullTimelineImpl extends React.PureComponent { changeRightClickedTrack, } = this.props; - // Do not include the left and right margins when computing the timeline width. - const timelineWidth = width - TIMELINE_MARGIN_LEFT - TIMELINE_MARGIN_RIGHT; - return ( <> -
- +
{ zeroAt={zeroAt} rangeStart={committedRange.start} rangeEnd={committedRange.end} - width={timelineWidth} + width={width} />
= createSelector( return height; } case 'full': { - // Only the full view has the timeline settings panel. - height += TIMELINE_SETTINGS_HEIGHT; - for (const [trackIndex, globalTrack] of globalTracks.entries()) { if (!hiddenGlobalTracks.has(trackIndex)) { switch (globalTrack.type) { diff --git a/src/test/components/ProfileViewer.test.js b/src/test/components/ProfileViewer.test.js index c620621328..930e662da2 100644 --- a/src/test/components/ProfileViewer.test.js +++ b/src/test/components/ProfileViewer.test.js @@ -70,6 +70,6 @@ describe('ProfileViewer', function () { const { getState } = setup(); // Note: You should update this total height if you changed the height calculation algorithm. - expect(getTimelineHeight(getState())).toBe(1250); + expect(getTimelineHeight(getState())).toBe(1224); }); }); diff --git a/src/test/components/Timeline.test.js b/src/test/components/Timeline.test.js index 6be79efbcf..516f1043b1 100644 --- a/src/test/components/Timeline.test.js +++ b/src/test/components/Timeline.test.js @@ -10,10 +10,7 @@ import { render, screen } from 'firefox-profiler/test/fixtures/testing-library'; import { Timeline } from '../../components/timeline'; import { storeWithProfile } from '../fixtures/stores'; import { getProfileFromTextSamples } from '../fixtures/profiles/processed-profile'; -import { - autoMockCanvasContext, - flushDrawLog, -} from '../fixtures/mocks/canvas-context'; +import { autoMockCanvasContext } from '../fixtures/mocks/canvas-context'; import { autoMockDomRect } from 'firefox-profiler/test/fixtures/mocks/domrect.js'; import { mockRaf } from '../fixtures/mocks/request-animation-frame'; import { @@ -373,28 +370,6 @@ describe('Timeline', function () { ); }); - it('renders the header', () => { - const flushRafCalls = mockRaf(); - window.devicePixelRatio = 1; - - const profile = _getProfileWithDroppedSamples(); - - const { container } = render( - - - - ); - - flushRafCalls(); - - const drawCalls = flushDrawLog(); - - expect(container.firstChild).toMatchSnapshot(); - expect(drawCalls).toMatchSnapshot(); - - delete window.devicePixelRatio; - }); - it('displays a context menu when right clicking global and local tracks', () => { const profile = getProfileWithNiceTracks(); diff --git a/src/test/components/__snapshots__/Timeline.test.js.snap b/src/test/components/__snapshots__/Timeline.test.js.snap deleted file mode 100644 index 5fd4cb114d..0000000000 --- a/src/test/components/__snapshots__/Timeline.test.js.snap +++ /dev/null @@ -1,8104 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Timeline renders the header 1`] = ` -
-`; - -exports[`Timeline renders the header 2`] = ` -Array [ - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.25, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.75, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#d7d7db60", - ], - Array [ - 0.25, - "#d7d7db60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#d7d7db60", - ], - Array [ - 0.75, - "#d7d7db60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "transparent", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "transparent", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#6200a460", - ], - Array [ - "addColorStop", - 0.25, - "#6200a460", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#6200a460", - ], - Array [ - "addColorStop", - 0.75, - "#6200a460", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#6200a460", - ], - Array [ - 0.25, - "#6200a460", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#6200a460", - ], - Array [ - 0.75, - "#6200a460", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.25, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.75, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#ffe90060", - ], - Array [ - 0.25, - "#ffe90060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#ffe90060", - ], - Array [ - 0.75, - "#ffe90060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#ff940060", - ], - Array [ - "addColorStop", - 0.25, - "#ff940060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#ff940060", - ], - Array [ - "addColorStop", - 0.75, - "#ff940060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#ff940060", - ], - Array [ - 0.25, - "#ff940060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#ff940060", - ], - Array [ - 0.75, - "#ff940060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.25, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.75, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#45a1ff60", - ], - Array [ - 0.25, - "#45a1ff60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#45a1ff60", - ], - Array [ - 0.75, - "#45a1ff60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.25, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.75, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#12bc0060", - ], - Array [ - 0.25, - "#12bc0060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#12bc0060", - ], - Array [ - 0.75, - "#12bc0060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#0060df60", - ], - Array [ - "addColorStop", - 0.25, - "#0060df60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#0060df60", - ], - Array [ - "addColorStop", - 0.75, - "#0060df60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#0060df60", - ], - Array [ - 0.25, - "#0060df60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#0060df60", - ], - Array [ - 0.75, - "#0060df60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "set globalCompositeOperation", - "lighter", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - "#d7d7db", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - "#ffe900", - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - "#6200a4", - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - "#12bc00", - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - "#0060df", - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - "#ff9400", - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - "#45a1ff", - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - -0.4, - 0, - 0.8, - 0, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.25, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.75, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#d7d7db60", - ], - Array [ - 0.25, - "#d7d7db60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#d7d7db60", - ], - Array [ - 0.75, - "#d7d7db60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "transparent", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "transparent", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#6200a460", - ], - Array [ - "addColorStop", - 0.25, - "#6200a460", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#6200a460", - ], - Array [ - "addColorStop", - 0.75, - "#6200a460", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#6200a460", - ], - Array [ - 0.25, - "#6200a460", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#6200a460", - ], - Array [ - 0.75, - "#6200a460", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.25, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.75, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#ffe90060", - ], - Array [ - 0.25, - "#ffe90060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#ffe90060", - ], - Array [ - 0.75, - "#ffe90060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#ff940060", - ], - Array [ - "addColorStop", - 0.25, - "#ff940060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#ff940060", - ], - Array [ - "addColorStop", - 0.75, - "#ff940060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#ff940060", - ], - Array [ - 0.25, - "#ff940060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#ff940060", - ], - Array [ - 0.75, - "#ff940060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.25, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.75, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#45a1ff60", - ], - Array [ - 0.25, - "#45a1ff60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#45a1ff60", - ], - Array [ - 0.75, - "#45a1ff60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.25, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.75, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#12bc0060", - ], - Array [ - 0.25, - "#12bc0060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#12bc0060", - ], - Array [ - 0.75, - "#12bc0060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#0060df60", - ], - Array [ - "addColorStop", - 0.25, - "#0060df60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#0060df60", - ], - Array [ - "addColorStop", - 0.75, - "#0060df60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#0060df60", - ], - Array [ - 0.25, - "#0060df60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#0060df60", - ], - Array [ - 0.75, - "#0060df60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "set globalCompositeOperation", - "lighter", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - "#d7d7db", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - "#ffe900", - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - "#6200a4", - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - "#12bc00", - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - "#0060df", - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - "#ff9400", - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - "#45a1ff", - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - -0.4, - 0, - 0.8, - 0, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.25, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.75, - "#d7d7db60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#d7d7db60", - ], - Array [ - 0.25, - "#d7d7db60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#d7d7db60", - ], - Array [ - 0.75, - "#d7d7db60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "transparent", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "transparent", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#6200a460", - ], - Array [ - "addColorStop", - 0.25, - "#6200a460", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#6200a460", - ], - Array [ - "addColorStop", - 0.75, - "#6200a460", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#6200a460", - ], - Array [ - 0.25, - "#6200a460", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#6200a460", - ], - Array [ - 0.75, - "#6200a460", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.25, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.75, - "#ffe90060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#ffe90060", - ], - Array [ - 0.25, - "#ffe90060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#ffe90060", - ], - Array [ - 0.75, - "#ffe90060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#ff940060", - ], - Array [ - "addColorStop", - 0.25, - "#ff940060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#ff940060", - ], - Array [ - "addColorStop", - 0.75, - "#ff940060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#ff940060", - ], - Array [ - 0.25, - "#ff940060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#ff940060", - ], - Array [ - 0.75, - "#ff940060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.25, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.75, - "#45a1ff60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#45a1ff60", - ], - Array [ - 0.25, - "#45a1ff60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#45a1ff60", - ], - Array [ - 0.75, - "#45a1ff60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.25, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.75, - "#12bc0060", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#12bc0060", - ], - Array [ - 0.25, - "#12bc0060", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#12bc0060", - ], - Array [ - 0.75, - "#12bc0060", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "createLinearGradient", - 0, - 0, - 4, - 4, - ], - Array [ - "addColorStop", - 0, - "#0060df60", - ], - Array [ - "addColorStop", - 0.25, - "#0060df60", - ], - Array [ - "addColorStop", - 0.25, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "transparent", - ], - Array [ - "addColorStop", - 0.5, - "#0060df60", - ], - Array [ - "addColorStop", - 0.75, - "#0060df60", - ], - Array [ - "addColorStop", - 0.75, - "transparent", - ], - Array [ - "addColorStop", - 1, - "transparent", - ], - Array [ - "set fillStyle", - Object { - "addColorStop": [MockFunction] { - "calls": Array [ - Array [ - 0, - "#0060df60", - ], - Array [ - 0.25, - "#0060df60", - ], - Array [ - 0.25, - "transparent", - ], - Array [ - 0.5, - "transparent", - ], - Array [ - 0.5, - "#0060df60", - ], - Array [ - 0.75, - "#0060df60", - ], - Array [ - 0.75, - "transparent", - ], - Array [ - 1, - "transparent", - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - ], - Array [ - "fillRect", - 0, - 0, - 4, - 4, - ], - Array [ - "createPattern", - , - "repeat", - ], - Array [ - "set globalCompositeOperation", - "lighter", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - "#d7d7db", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - "#ffe900", - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - "#6200a4", - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - "#12bc00", - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - "#0060df", - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - "#ff9400", - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - "#45a1ff", - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - -0.4, - 0, - 0.8, - 0, - ], - Array [ - "set globalCompositeOperation", - "lighter", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - "#d7d7db", - ], - Array [ - "beginPath", - ], - Array [ - "moveTo", - 0, - 300, - ], - Array [ - "lineTo", - 1, - 300, - ], - Array [ - "lineTo", - 2, - 300, - ], - Array [ - "lineTo", - 3, - 300, - ], - Array [ - "lineTo", - 4, - 300, - ], - Array [ - "lineTo", - 5, - 300, - ], - Array [ - "lineTo", - 6, - 300, - ], - Array [ - "lineTo", - 7, - 300, - ], - Array [ - "lineTo", - 8, - 300, - ], - Array [ - "lineTo", - 9, - 300, - ], - Array [ - "lineTo", - 10, - 300, - ], - Array [ - "lineTo", - 11, - 300, - ], - Array [ - "lineTo", - 12, - 300, - ], - Array [ - "lineTo", - 13, - 300, - ], - Array [ - "lineTo", - 14, - 300, - ], - Array [ - "lineTo", - 15, - 300, - ], - Array [ - "lineTo", - 16, - 300, - ], - Array [ - "lineTo", - 17, - 300, - ], - Array [ - "lineTo", - 18, - 300, - ], - Array [ - "lineTo", - 19, - 300, - ], - Array [ - "lineTo", - 20, - 300, - ], - Array [ - "lineTo", - 21, - 300, - ], - Array [ - "lineTo", - 22, - 300, - ], - Array [ - "lineTo", - 23, - 300, - ], - Array [ - "lineTo", - 24, - 300, - ], - Array [ - "lineTo", - 25, - 300, - ], - Array [ - "lineTo", - 26, - 300, - ], - Array [ - "lineTo", - 27, - 300, - ], - Array [ - "lineTo", - 28, - 300, - ], - Array [ - "lineTo", - 29, - 300, - ], - Array [ - "lineTo", - 30, - 300, - ], - Array [ - "lineTo", - 31, - 300, - ], - Array [ - "lineTo", - 32, - 300, - ], - Array [ - "lineTo", - 33, - 300, - ], - Array [ - "lineTo", - 34, - 300, - ], - Array [ - "lineTo", - 35, - 300, - ], - Array [ - "lineTo", - 36, - 300, - ], - Array [ - "lineTo", - 37, - 300, - ], - Array [ - "lineTo", - 38, - 300, - ], - Array [ - "lineTo", - 39, - 300, - ], - Array [ - "lineTo", - 40, - 300, - ], - Array [ - "lineTo", - 41, - 300, - ], - Array [ - "lineTo", - 42, - 300, - ], - Array [ - "lineTo", - 43, - 300, - ], - Array [ - "lineTo", - 44, - 300, - ], - Array [ - "lineTo", - 45, - 300, - ], - Array [ - "lineTo", - 46, - 300, - ], - Array [ - "lineTo", - 47, - 300, - ], - Array [ - "lineTo", - 48, - 300, - ], - Array [ - "lineTo", - 49, - 300, - ], - Array [ - "lineTo", - 50, - 300, - ], - Array [ - "lineTo", - 51, - 300, - ], - Array [ - "lineTo", - 52, - 300, - ], - Array [ - "lineTo", - 53, - 300, - ], - Array [ - "lineTo", - 54, - 300, - ], - Array [ - "lineTo", - 55, - 300, - ], - Array [ - "lineTo", - 56, - 300, - ], - Array [ - "lineTo", - 57, - 300, - ], - Array [ - "lineTo", - 58, - 300, - ], - Array [ - "lineTo", - 59, - 300, - ], - Array [ - "lineTo", - 60, - 300, - ], - Array [ - "lineTo", - 61, - 300, - ], - Array [ - "lineTo", - 62, - 300, - ], - Array [ - "lineTo", - 63, - 300, - ], - Array [ - "lineTo", - 64, - 300, - ], - Array [ - "lineTo", - 65, - 300, - ], - Array [ - "lineTo", - 66, - 300, - ], - Array [ - "lineTo", - 67, - 300, - ], - Array [ - "lineTo", - 68, - 300, - ], - Array [ - "lineTo", - 69, - 300, - ], - Array [ - "lineTo", - 70, - 300, - ], - Array [ - "lineTo", - 71, - 300, - ], - Array [ - "lineTo", - 72, - 300, - ], - Array [ - "lineTo", - 73, - 300, - ], - Array [ - "lineTo", - 74, - 300, - ], - Array [ - "lineTo", - 75, - 300, - ], - Array [ - "lineTo", - 76, - 300, - ], - Array [ - "lineTo", - 77, - 300, - ], - Array [ - "lineTo", - 78, - 300, - ], - Array [ - "lineTo", - 79, - 300, - ], - Array [ - "lineTo", - 80, - 300, - ], - Array [ - "lineTo", - 81, - 300, - ], - Array [ - "lineTo", - 82, - 300, - ], - Array [ - "lineTo", - 83, - 300, - ], - Array [ - "lineTo", - 84, - 300, - ], - Array [ - "lineTo", - 85, - 300, - ], - Array [ - "lineTo", - 86, - 300, - ], - Array [ - "lineTo", - 87, - 300, - ], - Array [ - "lineTo", - 88, - 300, - ], - Array [ - "lineTo", - 89, - 300, - ], - Array [ - "lineTo", - 90, - 300, - ], - Array [ - "lineTo", - 91, - 300, - ], - Array [ - "lineTo", - 92, - 300, - ], - Array [ - "lineTo", - 93, - 300, - ], - Array [ - "lineTo", - 94, - 300, - ], - Array [ - "lineTo", - 95, - 300, - ], - Array [ - "lineTo", - 96, - 300, - ], - Array [ - "lineTo", - 97, - 300, - ], - Array [ - "lineTo", - 98, - 300, - ], - Array [ - "lineTo", - 99, - 300, - ], - Array [ - "lineTo", - 100, - 300, - ], - Array [ - "lineTo", - 101, - 300, - ], - Array [ - "lineTo", - 102, - 300, - ], - Array [ - "lineTo", - 103, - 300, - ], - Array [ - "lineTo", - 104, - 300, - ], - Array [ - "lineTo", - 105, - 300, - ], - Array [ - "lineTo", - 106, - 300, - ], - Array [ - "lineTo", - 107, - 300, - ], - Array [ - "lineTo", - 108, - 300, - ], - Array [ - "lineTo", - 109, - 300, - ], - Array [ - "lineTo", - 110, - 300, - ], - Array [ - "lineTo", - 111, - 300, - ], - Array [ - "lineTo", - 112, - 300, - ], - Array [ - "lineTo", - 113, - 300, - ], - Array [ - "lineTo", - 114, - 300, - ], - Array [ - "lineTo", - 115, - 300, - ], - Array [ - "lineTo", - 116, - 300, - ], - Array [ - "lineTo", - 117, - 300, - ], - Array [ - "lineTo", - 118, - 300, - ], - Array [ - "lineTo", - 119, - 300, - ], - Array [ - "lineTo", - 120, - 300, - ], - Array [ - "lineTo", - 121, - 300, - ], - Array [ - "lineTo", - 122, - 300, - ], - Array [ - "lineTo", - 123, - 300, - ], - Array [ - "lineTo", - 124, - 300, - ], - Array [ - "lineTo", - 125, - 300, - ], - Array [ - "lineTo", - 126, - 300, - ], - Array [ - "lineTo", - 127, - 300, - ], - Array [ - "lineTo", - 128, - 300, - ], - Array [ - "lineTo", - 129, - 300, - ], - Array [ - "lineTo", - 130, - 300, - ], - Array [ - "lineTo", - 131, - 300, - ], - Array [ - "lineTo", - 132, - 300, - ], - Array [ - "lineTo", - 133, - 300, - ], - Array [ - "lineTo", - 134, - 300, - ], - Array [ - "lineTo", - 135, - 300, - ], - Array [ - "lineTo", - 136, - 300, - ], - Array [ - "lineTo", - 137, - 300, - ], - Array [ - "lineTo", - 138, - 300, - ], - Array [ - "lineTo", - 139, - 300, - ], - Array [ - "lineTo", - 140, - 300, - ], - Array [ - "lineTo", - 141, - 300, - ], - Array [ - "lineTo", - 142, - 300, - ], - Array [ - "lineTo", - 143, - 300, - ], - Array [ - "lineTo", - 144, - 300, - ], - Array [ - "lineTo", - 145, - 300, - ], - Array [ - "lineTo", - 146, - 300, - ], - Array [ - "lineTo", - 147, - 300, - ], - Array [ - "lineTo", - 148, - 300, - ], - Array [ - "lineTo", - 149, - 300, - ], - Array [ - "lineTo", - 150, - 300, - ], - Array [ - "lineTo", - 151, - 300, - ], - Array [ - "lineTo", - 152, - 300, - ], - Array [ - "lineTo", - 153, - 300, - ], - Array [ - "lineTo", - 154, - 300, - ], - Array [ - "lineTo", - 155, - 300, - ], - Array [ - "lineTo", - 156, - 300, - ], - Array [ - "lineTo", - 157, - 300, - ], - Array [ - "lineTo", - 158, - 300, - ], - Array [ - "lineTo", - 159, - 300, - ], - Array [ - "lineTo", - 160, - 300, - ], - Array [ - "lineTo", - 161, - 300, - ], - Array [ - "lineTo", - 162, - 300, - ], - Array [ - "lineTo", - 163, - 300, - ], - Array [ - "lineTo", - 164, - 300, - ], - Array [ - "lineTo", - 165, - 300, - ], - Array [ - "lineTo", - 166, - 300, - ], - Array [ - "lineTo", - 167, - 300, - ], - Array [ - "lineTo", - 168, - 300, - ], - Array [ - "lineTo", - 169, - 300, - ], - Array [ - "lineTo", - 170, - 300, - ], - Array [ - "lineTo", - 171, - 300, - ], - Array [ - "lineTo", - 172, - 300, - ], - Array [ - "lineTo", - 173, - 300, - ], - Array [ - "lineTo", - 174, - 300, - ], - Array [ - "lineTo", - 175, - 300, - ], - Array [ - "lineTo", - 176, - 300, - ], - Array [ - "lineTo", - 177, - 300, - ], - Array [ - "lineTo", - 178, - 300, - ], - Array [ - "lineTo", - 179, - 300, - ], - Array [ - "lineTo", - 180, - 300, - ], - Array [ - "lineTo", - 181, - 300, - ], - Array [ - "lineTo", - 182, - 300, - ], - Array [ - "lineTo", - 183, - 300, - ], - Array [ - "lineTo", - 184, - 300, - ], - Array [ - "lineTo", - 185, - 300, - ], - Array [ - "lineTo", - 186, - 300, - ], - Array [ - "lineTo", - 187, - 300, - ], - Array [ - "lineTo", - 188, - 300, - ], - Array [ - "lineTo", - 189, - 300, - ], - Array [ - "lineTo", - 190, - 300, - ], - Array [ - "lineTo", - 191, - 300, - ], - Array [ - "lineTo", - 192, - 300, - ], - Array [ - "lineTo", - 193, - 300, - ], - Array [ - "lineTo", - 194, - 300, - ], - Array [ - "lineTo", - 195, - 300, - ], - Array [ - "lineTo", - 196, - 300, - ], - Array [ - "lineTo", - 195, - 298.47619039937854, - ], - Array [ - "lineTo", - 194, - 293.71428564190865, - ], - Array [ - "lineTo", - 193, - 283.9999996125698, - ], - Array [ - "lineTo", - 192, - 267.6190450787544, - ], - Array [ - "lineTo", - 191, - 242.8571417927742, - ], - Array [ - "lineTo", - 190, - 211.04761362075806, - ], - Array [ - "lineTo", - 189, - 173.90475869178772, - ], - Array [ - "lineTo", - 188, - 134.6666693687439, - ], - Array [ - "lineTo", - 187, - 96.76190614700317, - ], - Array [ - "lineTo", - 186, - 63.61904740333557, - ], - Array [ - "lineTo", - 185, - 37.14285492897034, - ], - Array [ - "lineTo", - 184, - 19.04761791229248, - ], - Array [ - "lineTo", - 183, - 7.999992370605469, - ], - Array [ - "lineTo", - 182, - 2.2857069969177246, - ], - Array [ - "lineTo", - 181, - 0.19047260284423828, - ], - Array [ - "lineTo", - 180, - 0, - ], - Array [ - "lineTo", - 179, - 0, - ], - Array [ - "lineTo", - 178, - 0, - ], - Array [ - "lineTo", - 177, - 0, - ], - Array [ - "lineTo", - 176, - 0, - ], - Array [ - "lineTo", - 175, - 0, - ], - Array [ - "lineTo", - 174, - 0, - ], - Array [ - "lineTo", - 173, - 0, - ], - Array [ - "lineTo", - 172, - 0, - ], - Array [ - "lineTo", - 171, - 0, - ], - Array [ - "lineTo", - 170, - 0, - ], - Array [ - "lineTo", - 169, - 0, - ], - Array [ - "lineTo", - 168, - 0, - ], - Array [ - "lineTo", - 167, - 0, - ], - Array [ - "lineTo", - 166, - 0, - ], - Array [ - "lineTo", - 165, - 0, - ], - Array [ - "lineTo", - 164, - 0, - ], - Array [ - "lineTo", - 163, - 0, - ], - Array [ - "lineTo", - 162, - 0, - ], - Array [ - "lineTo", - 161, - 0, - ], - Array [ - "lineTo", - 160, - 0, - ], - Array [ - "lineTo", - 159, - 0, - ], - Array [ - "lineTo", - 158, - 0, - ], - Array [ - "lineTo", - 157, - 0, - ], - Array [ - "lineTo", - 156, - 0, - ], - Array [ - "lineTo", - 155, - 0, - ], - Array [ - "lineTo", - 154, - 0, - ], - Array [ - "lineTo", - 153, - 0, - ], - Array [ - "lineTo", - 152, - 0, - ], - Array [ - "lineTo", - 151, - 0, - ], - Array [ - "lineTo", - 150, - 0, - ], - Array [ - "lineTo", - 149, - 0, - ], - Array [ - "lineTo", - 148, - 0, - ], - Array [ - "lineTo", - 147, - 0, - ], - Array [ - "lineTo", - 146, - 0, - ], - Array [ - "lineTo", - 145, - 0, - ], - Array [ - "lineTo", - 144, - 0, - ], - Array [ - "lineTo", - 143, - 0, - ], - Array [ - "lineTo", - 142, - 0, - ], - Array [ - "lineTo", - 141, - 0, - ], - Array [ - "lineTo", - 140, - 0, - ], - Array [ - "lineTo", - 139, - 0, - ], - Array [ - "lineTo", - 138, - 0, - ], - Array [ - "lineTo", - 137, - 0, - ], - Array [ - "lineTo", - 136, - 0, - ], - Array [ - "lineTo", - 135, - 0, - ], - Array [ - "lineTo", - 134, - 0, - ], - Array [ - "lineTo", - 133, - 0, - ], - Array [ - "lineTo", - 132, - 0, - ], - Array [ - "lineTo", - 131, - 0, - ], - Array [ - "lineTo", - 130, - 0, - ], - Array [ - "lineTo", - 129, - 0, - ], - Array [ - "lineTo", - 128, - 0, - ], - Array [ - "lineTo", - 127, - 0, - ], - Array [ - "lineTo", - 126, - 0, - ], - Array [ - "lineTo", - 125, - 0, - ], - Array [ - "lineTo", - 124, - 0, - ], - Array [ - "lineTo", - 123, - 0, - ], - Array [ - "lineTo", - 122, - 0, - ], - Array [ - "lineTo", - 121, - 0, - ], - Array [ - "lineTo", - 120, - 0, - ], - Array [ - "lineTo", - 119, - 0, - ], - Array [ - "lineTo", - 118, - 0, - ], - Array [ - "lineTo", - 117, - 0, - ], - Array [ - "lineTo", - 116, - 0, - ], - Array [ - "lineTo", - 115, - 0, - ], - Array [ - "lineTo", - 114, - 0, - ], - Array [ - "lineTo", - 113, - 0, - ], - Array [ - "lineTo", - 112, - 0, - ], - Array [ - "lineTo", - 111, - 0, - ], - Array [ - "lineTo", - 110, - 0, - ], - Array [ - "lineTo", - 109, - 0, - ], - Array [ - "lineTo", - 108, - 0, - ], - Array [ - "lineTo", - 107, - 0, - ], - Array [ - "lineTo", - 106, - 0, - ], - Array [ - "lineTo", - 105, - 0, - ], - Array [ - "lineTo", - 104, - 0, - ], - Array [ - "lineTo", - 103, - 0, - ], - Array [ - "lineTo", - 102, - 0, - ], - Array [ - "lineTo", - 101, - 0, - ], - Array [ - "lineTo", - 100, - 0, - ], - Array [ - "lineTo", - 99, - 0, - ], - Array [ - "lineTo", - 98, - 0, - ], - Array [ - "lineTo", - 97, - 0, - ], - Array [ - "lineTo", - 96, - 0, - ], - Array [ - "lineTo", - 95, - 0, - ], - Array [ - "lineTo", - 94, - 0, - ], - Array [ - "lineTo", - 93, - 0, - ], - Array [ - "lineTo", - 92, - 0, - ], - Array [ - "lineTo", - 91, - 0, - ], - Array [ - "lineTo", - 90, - 0, - ], - Array [ - "lineTo", - 89, - 0, - ], - Array [ - "lineTo", - 88, - 0, - ], - Array [ - "lineTo", - 87, - 0, - ], - Array [ - "lineTo", - 86, - 0, - ], - Array [ - "lineTo", - 85, - 0, - ], - Array [ - "lineTo", - 84, - 0, - ], - Array [ - "lineTo", - 83, - 0, - ], - Array [ - "lineTo", - 82, - 0, - ], - Array [ - "lineTo", - 81, - 0, - ], - Array [ - "lineTo", - 80, - 0, - ], - Array [ - "lineTo", - 79, - 0, - ], - Array [ - "lineTo", - 78, - 0, - ], - Array [ - "lineTo", - 77, - 0, - ], - Array [ - "lineTo", - 76, - 0, - ], - Array [ - "lineTo", - 75, - 0, - ], - Array [ - "lineTo", - 74, - 0, - ], - Array [ - "lineTo", - 73, - 0, - ], - Array [ - "lineTo", - 72, - 0, - ], - Array [ - "lineTo", - 71, - 0, - ], - Array [ - "lineTo", - 70, - 0, - ], - Array [ - "lineTo", - 69, - 0, - ], - Array [ - "lineTo", - 68, - 0, - ], - Array [ - "lineTo", - 67, - 0, - ], - Array [ - "lineTo", - 66, - 0, - ], - Array [ - "lineTo", - 65, - 0, - ], - Array [ - "lineTo", - 64, - 0, - ], - Array [ - "lineTo", - 63, - 0, - ], - Array [ - "lineTo", - 62, - 0, - ], - Array [ - "lineTo", - 61, - 0, - ], - Array [ - "lineTo", - 60, - 0, - ], - Array [ - "lineTo", - 59, - 0, - ], - Array [ - "lineTo", - 58, - 0, - ], - Array [ - "lineTo", - 57, - 0, - ], - Array [ - "lineTo", - 56, - 0, - ], - Array [ - "lineTo", - 55, - 0, - ], - Array [ - "lineTo", - 54, - 0, - ], - Array [ - "lineTo", - 53, - 0, - ], - Array [ - "lineTo", - 52, - 0, - ], - Array [ - "lineTo", - 51, - 0, - ], - Array [ - "lineTo", - 50, - 0, - ], - Array [ - "lineTo", - 49, - 0, - ], - Array [ - "lineTo", - 48, - 0, - ], - Array [ - "lineTo", - 47, - 0, - ], - Array [ - "lineTo", - 46, - 0, - ], - Array [ - "lineTo", - 45, - 0, - ], - Array [ - "lineTo", - 44, - 0, - ], - Array [ - "lineTo", - 43, - 0, - ], - Array [ - "lineTo", - 42, - 0, - ], - Array [ - "lineTo", - 41, - 0, - ], - Array [ - "lineTo", - 40, - 0, - ], - Array [ - "lineTo", - 39, - 0, - ], - Array [ - "lineTo", - 38, - 0, - ], - Array [ - "lineTo", - 37, - 0, - ], - Array [ - "lineTo", - 36, - 0, - ], - Array [ - "lineTo", - 35, - 0, - ], - Array [ - "lineTo", - 34, - 0, - ], - Array [ - "lineTo", - 33, - 0, - ], - Array [ - "lineTo", - 32, - 0, - ], - Array [ - "lineTo", - 31, - 0, - ], - Array [ - "lineTo", - 30, - 0, - ], - Array [ - "lineTo", - 29, - 0, - ], - Array [ - "lineTo", - 28, - 0, - ], - Array [ - "lineTo", - 27, - 0, - ], - Array [ - "lineTo", - 26, - 0, - ], - Array [ - "lineTo", - 25, - 0, - ], - Array [ - "lineTo", - 24, - 0, - ], - Array [ - "lineTo", - 23, - 0, - ], - Array [ - "lineTo", - 22, - 0, - ], - Array [ - "lineTo", - 21, - 0, - ], - Array [ - "lineTo", - 20, - 0, - ], - Array [ - "lineTo", - 19, - 0, - ], - Array [ - "lineTo", - 18, - 0, - ], - Array [ - "lineTo", - 17, - 0, - ], - Array [ - "lineTo", - 16, - 0, - ], - Array [ - "lineTo", - 15, - 0, - ], - Array [ - "lineTo", - 14, - 0, - ], - Array [ - "lineTo", - 13, - 0, - ], - Array [ - "lineTo", - 12, - 0, - ], - Array [ - "lineTo", - 11, - 0, - ], - Array [ - "lineTo", - 10, - 0, - ], - Array [ - "lineTo", - 9, - 0, - ], - Array [ - "lineTo", - 8, - 0, - ], - Array [ - "lineTo", - 7, - 0, - ], - Array [ - "lineTo", - 6, - 1.7142891883850098, - ], - Array [ - "lineTo", - 5, - 6.8571388721466064, - ], - Array [ - "lineTo", - 4, - 17.142856121063232, - ], - Array [ - "lineTo", - 3, - 39.42856192588806, - ], - Array [ - "lineTo", - 2, - 73.71429204940796, - ], - Array [ - "lineTo", - 1, - 131.99999928474426, - ], - Array [ - "lineTo", - 0, - 186.85713708400726, - ], - Array [ - "closePath", - ], - Array [ - "fill", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - "#ffe900", - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - "#6200a4", - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - "#12bc00", - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - "#0060df", - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - "#ff9400", - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - "#45a1ff", - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - -5, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 17.22222222222222, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 39.44444444444444, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 61.66666666666666, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 83.88888888888889, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 106.11111111111111, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 128.33333333333331, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 150.55555555555554, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 172.77777777777777, - 0, - 10, - 300, - ], - Array [ - "set globalCompositeOperation", - "lighter", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - "#d7d7db", - ], - Array [ - "beginPath", - ], - Array [ - "moveTo", - 70, - 300, - ], - Array [ - "lineTo", - 71, - 300, - ], - Array [ - "lineTo", - 72, - 300, - ], - Array [ - "lineTo", - 73, - 300, - ], - Array [ - "lineTo", - 74, - 300, - ], - Array [ - "lineTo", - 75, - 300, - ], - Array [ - "lineTo", - 76, - 300, - ], - Array [ - "lineTo", - 77, - 300, - ], - Array [ - "lineTo", - 78, - 300, - ], - Array [ - "lineTo", - 79, - 300, - ], - Array [ - "lineTo", - 80, - 300, - ], - Array [ - "lineTo", - 81, - 300, - ], - Array [ - "lineTo", - 82, - 300, - ], - Array [ - "lineTo", - 83, - 300, - ], - Array [ - "lineTo", - 84, - 300, - ], - Array [ - "lineTo", - 85, - 300, - ], - Array [ - "lineTo", - 86, - 300, - ], - Array [ - "lineTo", - 87, - 300, - ], - Array [ - "lineTo", - 88, - 300, - ], - Array [ - "lineTo", - 89, - 300, - ], - Array [ - "lineTo", - 90, - 300, - ], - Array [ - "lineTo", - 91, - 300, - ], - Array [ - "lineTo", - 92, - 300, - ], - Array [ - "lineTo", - 93, - 300, - ], - Array [ - "lineTo", - 94, - 300, - ], - Array [ - "lineTo", - 95, - 300, - ], - Array [ - "lineTo", - 96, - 300, - ], - Array [ - "lineTo", - 97, - 300, - ], - Array [ - "lineTo", - 98, - 300, - ], - Array [ - "lineTo", - 99, - 300, - ], - Array [ - "lineTo", - 100, - 300, - ], - Array [ - "lineTo", - 101, - 300, - ], - Array [ - "lineTo", - 102, - 300, - ], - Array [ - "lineTo", - 103, - 300, - ], - Array [ - "lineTo", - 104, - 300, - ], - Array [ - "lineTo", - 105, - 300, - ], - Array [ - "lineTo", - 106, - 300, - ], - Array [ - "lineTo", - 107, - 300, - ], - Array [ - "lineTo", - 108, - 300, - ], - Array [ - "lineTo", - 109, - 300, - ], - Array [ - "lineTo", - 110, - 300, - ], - Array [ - "lineTo", - 111, - 300, - ], - Array [ - "lineTo", - 112, - 300, - ], - Array [ - "lineTo", - 113, - 300, - ], - Array [ - "lineTo", - 114, - 300, - ], - Array [ - "lineTo", - 115, - 300, - ], - Array [ - "lineTo", - 116, - 300, - ], - Array [ - "lineTo", - 117, - 300, - ], - Array [ - "lineTo", - 118, - 300, - ], - Array [ - "lineTo", - 119, - 300, - ], - Array [ - "lineTo", - 120, - 300, - ], - Array [ - "lineTo", - 121, - 300, - ], - Array [ - "lineTo", - 122, - 300, - ], - Array [ - "lineTo", - 123, - 300, - ], - Array [ - "lineTo", - 124, - 300, - ], - Array [ - "lineTo", - 125, - 300, - ], - Array [ - "lineTo", - 126, - 300, - ], - Array [ - "lineTo", - 127, - 300, - ], - Array [ - "lineTo", - 128, - 300, - ], - Array [ - "lineTo", - 129, - 300, - ], - Array [ - "lineTo", - 130, - 300, - ], - Array [ - "lineTo", - 131, - 300, - ], - Array [ - "lineTo", - 132, - 300, - ], - Array [ - "lineTo", - 133, - 300, - ], - Array [ - "lineTo", - 134, - 300, - ], - Array [ - "lineTo", - 135, - 300, - ], - Array [ - "lineTo", - 136, - 300, - ], - Array [ - "lineTo", - 137, - 300, - ], - Array [ - "lineTo", - 138, - 300, - ], - Array [ - "lineTo", - 139, - 300, - ], - Array [ - "lineTo", - 140, - 300, - ], - Array [ - "lineTo", - 141, - 300, - ], - Array [ - "lineTo", - 142, - 300, - ], - Array [ - "lineTo", - 143, - 300, - ], - Array [ - "lineTo", - 144, - 300, - ], - Array [ - "lineTo", - 145, - 300, - ], - Array [ - "lineTo", - 146, - 300, - ], - Array [ - "lineTo", - 147, - 300, - ], - Array [ - "lineTo", - 148, - 300, - ], - Array [ - "lineTo", - 149, - 300, - ], - Array [ - "lineTo", - 150, - 300, - ], - Array [ - "lineTo", - 151, - 300, - ], - Array [ - "lineTo", - 152, - 300, - ], - Array [ - "lineTo", - 151, - 299.23809519968927, - ], - Array [ - "lineTo", - 150, - 295.99999990314245, - ], - Array [ - "lineTo", - 149, - 288.5714281350374, - ], - Array [ - "lineTo", - 148, - 275.2380944788456, - ], - Array [ - "lineTo", - 147, - 254.2857125401497, - ], - Array [ - "lineTo", - 146, - 225.52380859851837, - ], - Array [ - "lineTo", - 145, - 190.66666066646576, - ], - Array [ - "lineTo", - 144, - 152.1904706954956, - ], - Array [ - "lineTo", - 143, - 113.5237991809845, - ], - Array [ - "lineTo", - 142, - 78.09523344039917, - ], - Array [ - "lineTo", - 141, - 48.571425676345825, - ], - Array [ - "lineTo", - 140, - 26.666665077209473, - ], - Array [ - "lineTo", - 139, - 12.57142424583435, - ], - Array [ - "lineTo", - 138, - 4.571431875228882, - ], - Array [ - "lineTo", - 137, - 0.952380895614624, - ], - Array [ - "lineTo", - 136, - 0, - ], - Array [ - "lineTo", - 135, - 0, - ], - Array [ - "lineTo", - 134, - 0, - ], - Array [ - "lineTo", - 133, - 0, - ], - Array [ - "lineTo", - 132, - 0, - ], - Array [ - "lineTo", - 131, - 0, - ], - Array [ - "lineTo", - 130, - 0, - ], - Array [ - "lineTo", - 129, - 0, - ], - Array [ - "lineTo", - 128, - 0, - ], - Array [ - "lineTo", - 127, - 0, - ], - Array [ - "lineTo", - 126, - 0, - ], - Array [ - "lineTo", - 125, - 0, - ], - Array [ - "lineTo", - 124, - 0, - ], - Array [ - "lineTo", - 123, - 0, - ], - Array [ - "lineTo", - 122, - 0, - ], - Array [ - "lineTo", - 121, - 0, - ], - Array [ - "lineTo", - 120, - 0, - ], - Array [ - "lineTo", - 119, - 0, - ], - Array [ - "lineTo", - 118, - 0, - ], - Array [ - "lineTo", - 117, - 0, - ], - Array [ - "lineTo", - 116, - 0, - ], - Array [ - "lineTo", - 115, - 0, - ], - Array [ - "lineTo", - 114, - 0, - ], - Array [ - "lineTo", - 113, - 0, - ], - Array [ - "lineTo", - 112, - 0, - ], - Array [ - "lineTo", - 111, - 0, - ], - Array [ - "lineTo", - 110, - 0, - ], - Array [ - "lineTo", - 109, - 0, - ], - Array [ - "lineTo", - 108, - 0, - ], - Array [ - "lineTo", - 107, - 0, - ], - Array [ - "lineTo", - 106, - 0, - ], - Array [ - "lineTo", - 105, - 0, - ], - Array [ - "lineTo", - 104, - 0, - ], - Array [ - "lineTo", - 103, - 0, - ], - Array [ - "lineTo", - 102, - 0, - ], - Array [ - "lineTo", - 101, - 0, - ], - Array [ - "lineTo", - 100, - 0, - ], - Array [ - "lineTo", - 99, - 0, - ], - Array [ - "lineTo", - 98, - 0, - ], - Array [ - "lineTo", - 97, - 0, - ], - Array [ - "lineTo", - 96, - 0, - ], - Array [ - "lineTo", - 95, - 0, - ], - Array [ - "lineTo", - 94, - 0, - ], - Array [ - "lineTo", - 93, - 0, - ], - Array [ - "lineTo", - 92, - 0, - ], - Array [ - "lineTo", - 91, - 0, - ], - Array [ - "lineTo", - 90, - 0, - ], - Array [ - "lineTo", - 89, - 0, - ], - Array [ - "lineTo", - 88, - 0, - ], - Array [ - "lineTo", - 87, - 0, - ], - Array [ - "lineTo", - 86, - 0, - ], - Array [ - "lineTo", - 85, - 0, - ], - Array [ - "lineTo", - 84, - 1.3333261013031006, - ], - Array [ - "lineTo", - 83, - 5.714285373687744, - ], - Array [ - "lineTo", - 82, - 14.857149124145508, - ], - Array [ - "lineTo", - 81, - 30.47618865966797, - ], - Array [ - "lineTo", - 80, - 54.28571105003357, - ], - Array [ - "lineTo", - 79, - 85.33333539962769, - ], - Array [ - "lineTo", - 78, - 121.90475463867188, - ], - Array [ - "lineTo", - 77, - 160.95238029956818, - ], - Array [ - "lineTo", - 76, - 199.04761612415314, - ], - Array [ - "lineTo", - 75, - 232.76190161705017, - ], - Array [ - "lineTo", - 74, - 259.99999791383743, - ], - Array [ - "lineTo", - 73, - 279.0476180613041, - ], - Array [ - "lineTo", - 72, - 290.8571429550648, - ], - Array [ - "lineTo", - 71, - 297.14285703375936, - ], - Array [ - "lineTo", - 70, - 299.61904759984463, - ], - Array [ - "closePath", - ], - Array [ - "fill", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - "#ffe900", - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - "#6200a4", - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - "#12bc00", - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - "#0060df", - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - "#ff9400", - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - "#45a1ff", - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 83.88888888888889, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 106.11111111111111, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 128.33333333333331, - 0, - 10, - 300, - ], - Array [ - "set globalCompositeOperation", - "lighter", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - "#d7d7db", - ], - Array [ - "beginPath", - ], - Array [ - "moveTo", - 70, - 300, - ], - Array [ - "lineTo", - 71, - 300, - ], - Array [ - "lineTo", - 72, - 300, - ], - Array [ - "lineTo", - 73, - 300, - ], - Array [ - "lineTo", - 74, - 300, - ], - Array [ - "lineTo", - 75, - 300, - ], - Array [ - "lineTo", - 76, - 300, - ], - Array [ - "lineTo", - 77, - 300, - ], - Array [ - "lineTo", - 78, - 300, - ], - Array [ - "lineTo", - 79, - 300, - ], - Array [ - "lineTo", - 80, - 300, - ], - Array [ - "lineTo", - 81, - 300, - ], - Array [ - "lineTo", - 82, - 300, - ], - Array [ - "lineTo", - 83, - 300, - ], - Array [ - "lineTo", - 84, - 300, - ], - Array [ - "lineTo", - 85, - 300, - ], - Array [ - "lineTo", - 86, - 300, - ], - Array [ - "lineTo", - 87, - 300, - ], - Array [ - "lineTo", - 88, - 300, - ], - Array [ - "lineTo", - 89, - 300, - ], - Array [ - "lineTo", - 90, - 300, - ], - Array [ - "lineTo", - 91, - 300, - ], - Array [ - "lineTo", - 92, - 300, - ], - Array [ - "lineTo", - 93, - 300, - ], - Array [ - "lineTo", - 94, - 300, - ], - Array [ - "lineTo", - 95, - 300, - ], - Array [ - "lineTo", - 96, - 300, - ], - Array [ - "lineTo", - 97, - 300, - ], - Array [ - "lineTo", - 98, - 300, - ], - Array [ - "lineTo", - 99, - 300, - ], - Array [ - "lineTo", - 100, - 300, - ], - Array [ - "lineTo", - 101, - 300, - ], - Array [ - "lineTo", - 102, - 300, - ], - Array [ - "lineTo", - 103, - 300, - ], - Array [ - "lineTo", - 104, - 300, - ], - Array [ - "lineTo", - 105, - 300, - ], - Array [ - "lineTo", - 106, - 300, - ], - Array [ - "lineTo", - 107, - 300, - ], - Array [ - "lineTo", - 108, - 300, - ], - Array [ - "lineTo", - 109, - 300, - ], - Array [ - "lineTo", - 110, - 300, - ], - Array [ - "lineTo", - 111, - 300, - ], - Array [ - "lineTo", - 112, - 300, - ], - Array [ - "lineTo", - 113, - 300, - ], - Array [ - "lineTo", - 114, - 300, - ], - Array [ - "lineTo", - 115, - 300, - ], - Array [ - "lineTo", - 116, - 300, - ], - Array [ - "lineTo", - 117, - 300, - ], - Array [ - "lineTo", - 118, - 300, - ], - Array [ - "lineTo", - 119, - 300, - ], - Array [ - "lineTo", - 120, - 300, - ], - Array [ - "lineTo", - 121, - 300, - ], - Array [ - "lineTo", - 122, - 300, - ], - Array [ - "lineTo", - 123, - 300, - ], - Array [ - "lineTo", - 124, - 300, - ], - Array [ - "lineTo", - 125, - 300, - ], - Array [ - "lineTo", - 126, - 300, - ], - Array [ - "lineTo", - 127, - 300, - ], - Array [ - "lineTo", - 128, - 300, - ], - Array [ - "lineTo", - 129, - 300, - ], - Array [ - "lineTo", - 130, - 300, - ], - Array [ - "lineTo", - 131, - 300, - ], - Array [ - "lineTo", - 132, - 300, - ], - Array [ - "lineTo", - 133, - 300, - ], - Array [ - "lineTo", - 134, - 300, - ], - Array [ - "lineTo", - 135, - 300, - ], - Array [ - "lineTo", - 136, - 300, - ], - Array [ - "lineTo", - 137, - 300, - ], - Array [ - "lineTo", - 138, - 300, - ], - Array [ - "lineTo", - 139, - 300, - ], - Array [ - "lineTo", - 140, - 300, - ], - Array [ - "lineTo", - 141, - 300, - ], - Array [ - "lineTo", - 142, - 300, - ], - Array [ - "lineTo", - 143, - 300, - ], - Array [ - "lineTo", - 144, - 300, - ], - Array [ - "lineTo", - 145, - 300, - ], - Array [ - "lineTo", - 146, - 300, - ], - Array [ - "lineTo", - 147, - 300, - ], - Array [ - "lineTo", - 148, - 300, - ], - Array [ - "lineTo", - 149, - 300, - ], - Array [ - "lineTo", - 150, - 300, - ], - Array [ - "lineTo", - 151, - 300, - ], - Array [ - "lineTo", - 152, - 300, - ], - Array [ - "lineTo", - 151, - 299.23809519968927, - ], - Array [ - "lineTo", - 150, - 295.99999990314245, - ], - Array [ - "lineTo", - 149, - 288.5714281350374, - ], - Array [ - "lineTo", - 148, - 275.2380944788456, - ], - Array [ - "lineTo", - 147, - 254.2857125401497, - ], - Array [ - "lineTo", - 146, - 225.52380859851837, - ], - Array [ - "lineTo", - 145, - 190.66666066646576, - ], - Array [ - "lineTo", - 144, - 152.1904706954956, - ], - Array [ - "lineTo", - 143, - 113.5237991809845, - ], - Array [ - "lineTo", - 142, - 78.09523344039917, - ], - Array [ - "lineTo", - 141, - 48.571425676345825, - ], - Array [ - "lineTo", - 140, - 26.666665077209473, - ], - Array [ - "lineTo", - 139, - 12.57142424583435, - ], - Array [ - "lineTo", - 138, - 4.571431875228882, - ], - Array [ - "lineTo", - 137, - 0.952380895614624, - ], - Array [ - "lineTo", - 136, - 0, - ], - Array [ - "lineTo", - 135, - 0, - ], - Array [ - "lineTo", - 134, - 0, - ], - Array [ - "lineTo", - 133, - 0, - ], - Array [ - "lineTo", - 132, - 0, - ], - Array [ - "lineTo", - 131, - 0, - ], - Array [ - "lineTo", - 130, - 0, - ], - Array [ - "lineTo", - 129, - 0, - ], - Array [ - "lineTo", - 128, - 0, - ], - Array [ - "lineTo", - 127, - 0, - ], - Array [ - "lineTo", - 126, - 0, - ], - Array [ - "lineTo", - 125, - 0, - ], - Array [ - "lineTo", - 124, - 0, - ], - Array [ - "lineTo", - 123, - 0, - ], - Array [ - "lineTo", - 122, - 0, - ], - Array [ - "lineTo", - 121, - 0, - ], - Array [ - "lineTo", - 120, - 0, - ], - Array [ - "lineTo", - 119, - 0, - ], - Array [ - "lineTo", - 118, - 0, - ], - Array [ - "lineTo", - 117, - 0, - ], - Array [ - "lineTo", - 116, - 0, - ], - Array [ - "lineTo", - 115, - 0, - ], - Array [ - "lineTo", - 114, - 0, - ], - Array [ - "lineTo", - 113, - 0, - ], - Array [ - "lineTo", - 112, - 0, - ], - Array [ - "lineTo", - 111, - 0, - ], - Array [ - "lineTo", - 110, - 0, - ], - Array [ - "lineTo", - 109, - 0, - ], - Array [ - "lineTo", - 108, - 0, - ], - Array [ - "lineTo", - 107, - 0, - ], - Array [ - "lineTo", - 106, - 0, - ], - Array [ - "lineTo", - 105, - 0, - ], - Array [ - "lineTo", - 104, - 0, - ], - Array [ - "lineTo", - 103, - 0, - ], - Array [ - "lineTo", - 102, - 0, - ], - Array [ - "lineTo", - 101, - 0, - ], - Array [ - "lineTo", - 100, - 0, - ], - Array [ - "lineTo", - 99, - 0, - ], - Array [ - "lineTo", - 98, - 0, - ], - Array [ - "lineTo", - 97, - 0, - ], - Array [ - "lineTo", - 96, - 0, - ], - Array [ - "lineTo", - 95, - 0, - ], - Array [ - "lineTo", - 94, - 0, - ], - Array [ - "lineTo", - 93, - 0, - ], - Array [ - "lineTo", - 92, - 0, - ], - Array [ - "lineTo", - 91, - 0, - ], - Array [ - "lineTo", - 90, - 0, - ], - Array [ - "lineTo", - 89, - 0, - ], - Array [ - "lineTo", - 88, - 0, - ], - Array [ - "lineTo", - 87, - 0, - ], - Array [ - "lineTo", - 86, - 0, - ], - Array [ - "lineTo", - 85, - 0, - ], - Array [ - "lineTo", - 84, - 1.3333261013031006, - ], - Array [ - "lineTo", - 83, - 5.714285373687744, - ], - Array [ - "lineTo", - 82, - 14.857149124145508, - ], - Array [ - "lineTo", - 81, - 30.47618865966797, - ], - Array [ - "lineTo", - 80, - 54.28571105003357, - ], - Array [ - "lineTo", - 79, - 85.33333539962769, - ], - Array [ - "lineTo", - 78, - 121.90475463867188, - ], - Array [ - "lineTo", - 77, - 160.95238029956818, - ], - Array [ - "lineTo", - 76, - 199.04761612415314, - ], - Array [ - "lineTo", - 75, - 232.76190161705017, - ], - Array [ - "lineTo", - 74, - 259.99999791383743, - ], - Array [ - "lineTo", - 73, - 279.0476180613041, - ], - Array [ - "lineTo", - 72, - 290.8571429550648, - ], - Array [ - "lineTo", - 71, - 297.14285703375936, - ], - Array [ - "lineTo", - 70, - 299.61904759984463, - ], - Array [ - "closePath", - ], - Array [ - "fill", - ], - Array [ - "set fillStyle", - "#d7d7db60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - "#ffe900", - ], - Array [ - "set fillStyle", - "#ffe90060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - "#6200a4", - ], - Array [ - "set fillStyle", - "#6200a460", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - "#12bc00", - ], - Array [ - "set fillStyle", - "#12bc0060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - "#0060df", - ], - Array [ - "set fillStyle", - "#0060df60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - "#ff9400", - ], - Array [ - "set fillStyle", - "#ff940060", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - "#45a1ff", - ], - Array [ - "set fillStyle", - "#45a1ff60", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - "transparent", - ], - Array [ - "set fillStyle", - Object {}, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 83.88888888888889, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 106.11111111111111, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 128.33333333333331, - 0, - 10, - 300, - ], - Array [ - "clearRect", - 0, - 0, - 200, - 300, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "clearRect", - 0, - 0, - 200, - 300, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "clearRect", - 0, - 0, - 200, - 300, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "scale", - 1, - 1, - ], -] -`; From 5a94ed7102e2b5592c2e534c53f53fcc2654e579 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 18 Jul 2022 19:55:56 +0200 Subject: [PATCH 7/8] Add a toggleTimelineType function to window object for console usage --- .../__snapshots__/window-console.test.js.snap | 3 +++ src/utils/window-console.js | 24 +++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/src/test/unit/__snapshots__/window-console.test.js.snap b/src/test/unit/__snapshots__/window-console.test.js.snap index 24f2fe5fe1..e9b91bf42a 100644 --- a/src/test/unit/__snapshots__/window-console.test.js.snap +++ b/src/test/unit/__snapshots__/window-console.test.js.snap @@ -33,6 +33,7 @@ Array [ %cwindow.actions%c - All the actions that can be dispatched to change the state. %cwindow.experimental%c - The object that holds flags of all the experimental features. %cwindow.togglePseudoLocalization%c - Enable pseudo localizations by passing \\"accented\\" or \\"bidi\\" to this function, or disable using no parameters. +%cwindow.toggleTimelineType%c - Toggle timeline graph type by passing \\"cpu-category\\", \\"category\\", or \\"stack\\". The profile format is documented here: %chttps://github.com/firefox-devtools/profiler/blob/main/docs-developer/processed-profile-format.md%c @@ -61,6 +62,8 @@ The CallTree class's source code is available here: "", "font-weight: bold;", "", + "font-weight: bold;", + "", "font-style: italic; text-decoration: underline;", "", "font-style: italic; text-decoration: underline;", diff --git a/src/utils/window-console.js b/src/utils/window-console.js index ddbceaee0a..040c32b7fb 100644 --- a/src/utils/window-console.js +++ b/src/utils/window-console.js @@ -127,6 +127,26 @@ export function addDataToWindowObject( } }; + target.toggleTimelineType = function (timelineType?: string) { + if ( + timelineType !== 'cpu-category' && + timelineType !== 'category' && + timelineType !== 'stack' + ) { + console.log(stripIndent` + ❗ The timeline type "${timelineType}" is unknown. + 💡 Valid types are: "cpu-category", "category", or "stack". + Please try again 😊 + `); + return; + } + + dispatch(actions.changeTimelineType(timelineType)); + console.log(stripIndent` + ✅ The timeline type "${timelineType}" is now enabled for the timeline. + `); + }; + target.getState = getState; target.selectors = selectorsForConsole; target.dispatch = dispatch; @@ -183,6 +203,7 @@ export function logFriendlyPreamble() { %cwindow.actions%c - All the actions that can be dispatched to change the state. %cwindow.experimental%c - The object that holds flags of all the experimental features. %cwindow.togglePseudoLocalization%c - Enable pseudo localizations by passing "accented" or "bidi" to this function, or disable using no parameters. + %cwindow.toggleTimelineType%c - Toggle timeline graph type by passing "cpu-category", "category", or "stack". The profile format is documented here: %chttps://github.com/firefox-devtools/profiler/blob/main/docs-developer/processed-profile-format.md%c @@ -223,6 +244,9 @@ export function logFriendlyPreamble() { // "window.togglePseudoLocalization" bold, reset, + // "window.toggleTimelineType" + bold, + reset, // "processed-profile-format.md" link, reset, From 20397bbaba0973d5327d71b70775f03863561103 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Wed, 20 Jul 2022 16:14:42 +0200 Subject: [PATCH 8/8] Remove the unnecessary action case from timelineType selector --- src/reducers/url-state.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/reducers/url-state.js b/src/reducers/url-state.js index 1dac5cf95f..57de6ac7e7 100644 --- a/src/reducers/url-state.js +++ b/src/reducers/url-state.js @@ -231,8 +231,6 @@ const timelineType: Reducer = ( action ) => { switch (action.type) { - case 'PROFILE_LOADED': - return state; case 'CHANGE_TIMELINE_TYPE': return action.timelineType; case 'VIEW_FULL_PROFILE':