Confirmed users
125
edits
DevTools/OperationInstrument: Difference between revisions
→2. Telling the DevTools Frontend About the New Markers: describe properties
(more changes) |
(→2. Telling the DevTools Frontend About the New Markers: describe properties) |
||
| Line 56: | Line 56: | ||
To get your new markers displayed in the performance tool's UI, edit the configuration data in '''<code>browser/devtools/shared/timeline/global.js</code>'''. | To get your new markers displayed in the performance tool's UI, edit the configuration data in '''<code>browser/devtools/shared/timeline/global.js</code>'''. | ||
https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors#Highlight_Colors | Add a property to the <code>TIMELINE_BLUEPRINT</code> object. The property key should be the <code>const char *</code> literal that you added in step 1 ("Parse HTML" in our example). The new property should be an object with the following properties: | ||
* <code>group</code>: 0, 1, or 2. Controls which line the markers are rendered on in the trace events summary along the top of the performance tool. When in doubt, just use 0 and ask your reviewer. | |||
* <code>colorName</code>: The [https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors#Highlight_Colors DevTools color] that the trace should be rendered as in the UI. Its value should be the string name of a CSS variable from that MDN page, without the leading <code>--</code> prefix. | |||
* <code>label</code>: The L10N string name for the marker. | |||
--- a/browser/devtools/shared/timeline/global.js | --- a/browser/devtools/shared/timeline/global.js | ||
| Line 73: | Line 79: | ||
colorName: "highlight-bluegrey", | colorName: "highlight-bluegrey", | ||
Finally, add a localizable label for the new marker: | Finally, add a localizable string label for the new marker: | ||
--- a/browser/locales/en-US/chrome/browser/devtools/timeline.properties | --- a/browser/locales/en-US/chrome/browser/devtools/timeline.properties | ||