Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core(tsc): add explicit index signature in mainthread-work-breakdown #5859

Merged
merged 1 commit into from
Aug 20, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions lighthouse-core/audits/mainthread-work-breakdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ const UIStrings = {

const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

/** @typedef {import('../lib/task-groups.js').TaskGroupIds} TaskGroupIds */

class MainThreadWorkBreakdown extends Audit {
/**
* @return {LH.Audit.Meta}
Expand Down Expand Up @@ -56,10 +58,10 @@ class MainThreadWorkBreakdown extends Audit {

/**
* @param {LH.Artifacts.TaskNode[]} tasks
* @return {Map<string, number>}
* @return {Map<TaskGroupIds, number>}
*/
static getExecutionTimingsByGroup(tasks) {
/** @type {Map<string, number>} */
/** @type {Map<TaskGroupIds, number>} */
const result = new Map();

for (const task of tasks) {
Expand All @@ -86,6 +88,7 @@ class MainThreadWorkBreakdown extends Audit {
const executionTimings = MainThreadWorkBreakdown.getExecutionTimingsByGroup(tasks);

let totalExecutionTime = 0;
/** @type {Record<string, number>} */
const categoryTotals = {};
const results = Array.from(executionTimings).map(([groupId, rawDuration]) => {
const duration = rawDuration * multiplier;
Expand Down
22 changes: 12 additions & 10 deletions lighthouse-core/lib/task-groups.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
*/
'use strict';

/** @typedef {'parseHTML'|'styleLayout'|'paintCompositeRender'|'scriptParseCompile'|'scriptEvaluation'|'garbageCollection'|'other'} TaskGroupIds */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been wondering is there not a way to get these programmtically via some keyof magic?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know we're going the opposite direction by declaring the type of the object as matching this, but ya know just for knowledge :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been wondering is there not a way to get these programmtically via some keyof magic?

I tried really hard :) but I couldn't find a way to get out of the circularity of needing TaskGroup.id to be able to index taskGroups in mainthread-work-breakdown.js, which means the taskGroups declaration needs to be typed, not just inferred (it would go to string), which means you can't meaningfully do keyof on it

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually, you could do one really terrible thing...

const taskGroups = {
  parseHTML: {
    id: /** @type {'parseHTML'} */ ('parseHTML'),
    // ...
  },
  styleLayout: {
    id: /** @type {'styleLayout'} */ ('styleLayout'),
    // ...
  }, // ...
};

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alright thanks good to know!


/**
* @typedef TaskGroup
* @property {string} id
* @property {TaskGroupIds} id
* @property {string} label
* @property {string[]} traceEventNames
*/
Expand All @@ -16,15 +18,16 @@
* Make sure the traceEventNames keep up with the ones in DevTools
* @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/timeline_model/TimelineModel.js?type=cs&q=TimelineModel.TimelineModel.RecordType+%3D&g=0&l=1156
* @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/timeline/TimelineUIUtils.js?type=cs&q=_initEventStyles+-f:out+f:devtools&sq=package:chromium&g=0&l=39
* @type {{[P in TaskGroupIds]: {id: P, label: string, traceEventNames: Array<string>}}}
*/
const taskGroups = {
parseHTML: {
id: '',
id: 'parseHTML',
label: 'Parse HTML & CSS',
traceEventNames: ['ParseHTML', 'ParseAuthorStyleSheet'],
},
styleLayout: {
id: '',
id: 'styleLayout',
label: 'Style & Layout',
traceEventNames: [
'ScheduleStyleRecalculation',
Expand All @@ -35,7 +38,7 @@ const taskGroups = {
],
},
paintCompositeRender: {
id: '',
id: 'paintCompositeRender',
label: 'Rendering',
traceEventNames: [
'Animation',
Expand All @@ -55,12 +58,12 @@ const taskGroups = {
],
},
scriptParseCompile: {
id: '',
id: 'scriptParseCompile',
label: 'Script Parsing & Compilation',
traceEventNames: ['v8.compile', 'v8.compileModule', 'v8.parseOnBackground'],
},
scriptEvaluation: {
id: '',
id: 'scriptEvaluation',
label: 'Script Evaluation',
traceEventNames: [
'EventDispatch',
Expand All @@ -75,7 +78,7 @@ const taskGroups = {
],
},
garbageCollection: {
id: '',
id: 'garbageCollection',
label: 'Garbage Collection',
traceEventNames: [
'GCEvent',
Expand All @@ -87,7 +90,7 @@ const taskGroups = {
],
},
other: {
id: '',
id: 'other',
label: 'Other',
traceEventNames: [
'MessageLoop::RunTask',
Expand All @@ -99,8 +102,7 @@ const taskGroups = {

/** @type {Object<string, TaskGroup>} */
const taskNameToGroup = {};
for (const [groupId, group] of Object.entries(taskGroups)) {
group.id = groupId;
for (const group of Object.values(taskGroups)) {
for (const traceEventName of group.traceEventNames) {
taskNameToGroup[traceEventName] = group;
}
Expand Down