Confirmed users
125
edits
DevTools/OperationInstrument: Difference between revisions
Jump to navigation
Jump to search
adding example
(Created page with "== Instrumenting Gecko: adding new markers == The Firefox performance tool breaks Gecko operations into labeled chunks of time, displayed as a waterfall (reflows, painting, r...") |
(adding example) |
||
| Line 1: | Line 1: | ||
== Instrumenting Gecko: adding new markers == | == Instrumenting Gecko: adding new markers == | ||
The Firefox performance tool breaks Gecko operations into labeled chunks of time, displayed as a waterfall (reflows, painting, restyle, JS run-to-completion,...). Each of these chunks is registered with a pair of markers. A marker for when the operation starts | The Firefox performance tool breaks Gecko operations into labeled chunks of time, displayed as a waterfall (reflows, painting, restyle, JS run-to-completion, parse HTML, ...). Each of these chunks is registered with a '''pair''' of markers. A marker for when the operation '''starts''', and a marker for when the operations '''end'''. To add a new type of marker, instrumentation is required at the Gecko platform level, and some minimal configuration on the devtools frontend side. | ||
=== Example Bug: Tracing HTML and XML Parsing === | |||
[https://bugzilla.mozilla.org/show_bug.cgi?id=1151703 Bug 1151703 - Add profiler timeline markers for HTML/XML parsing] | |||
=== Platform === | === Platform === | ||
The TimelineMarker class is defined in docshell/base/TimelineMarker.h. | The '''<code>TimelineMarker</code>''' class is defined in <code>docshell/base/TimelineMarker.h</code>. A timestamp, and the JS stack (if any) is recorded when the marker is instantiated. The stack is recorded when a start marker is instantiated. It's possible to pass metadata which will be used in the performance tool. For now, only the main thread is instrumented. Markers are stored in the docshell being profiled. To store a marker: nsDocShell->AddProfileTimelineMarker(). See nsDocShell.h. Markers are popped out from the docshell at regular interval via nsIDocShell.popProfileTimelineMarkers() by devtools code (timeline actor). See nsIDocShell.idl and toolkit/devtools/server/actors/timeline.js. | ||
See '''Part 1''' in the example bug above. | |||
nsresult | |||
nsContentUtils::ParseFragmentHTML(const nsAString& aSourceBuffer, | |||
nsIContent* aTargetNode, | |||
nsIAtom* aContextLocalName, | |||
int32_t aContextNamespace, | |||
bool aQuirks, | |||
bool aPreventScriptExecution) | |||
{ | |||
+ AutoTimelineMarker m(aTargetNode->OwnerDoc()->GetDocShell(), "Parse HTML"); | |||
+ | |||
if (nsContentUtils::sFragmentParsingActive) { | |||
NS_NOTREACHED("Re-entrant fragment parsing attempted."); | |||
return NS_ERROR_DOM_INVALID_STATE_ERR; | |||
} | |||
mozilla::AutoRestore<bool> guard(nsContentUtils::sFragmentParsingActive); | |||
nsContentUtils::sFragmentParsingActive = true; | |||
if (!sHTMLFragmentParser) { | |||
NS_ADDREF(sHTMLFragmentParser = new nsHtml5StringParser()); | |||
=== Frontend === | === Frontend === | ||
The performance tool expects some pre-defined type of markers. Defined in browser/devtools/timeline/widgets/global.js. To add a new type of markers, updating this file is enough. To display marker's metadata - if any (displayed when marker is selected in the waterfall) add a rendering function in browser/devtools/timeline/widgets/marker-details.js. | The performance tool expects some pre-defined type of markers. Defined in browser/devtools/timeline/widgets/global.js. To add a new type of markers, updating this file is enough. To display marker's metadata - if any (displayed when marker is selected in the waterfall) add a rendering function in browser/devtools/timeline/widgets/marker-details.js. | ||
https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors#Highlight_Colors | |||
See '''Part 2''' in the example bug above. | |||
--- a/browser/devtools/shared/timeline/global.js | |||
+++ b/browser/devtools/shared/timeline/global.js | |||
@@ -48,16 +48,26 @@ const TIMELINE_BLUEPRINT = { | |||
colorName: "highlight-lightorange", | |||
label: L10N.getStr("timeline.label.domevent") | |||
}, | |||
"Javascript": { | |||
group: 1, | |||
colorName: "highlight-lightorange", | |||
label: L10N.getStr("timeline.label.javascript2") | |||
}, | |||
+ "Parse HTML": { | |||
+ group: 1, | |||
+ colorName: "highlight-purple", | |||
+ label: L10N.getStr("timeline.label.parseHTML") | |||
+ }, | |||
"ConsoleTime": { | |||
group: 2, | |||
colorName: "highlight-bluegrey", | |||
label: L10N.getStr("timeline.label.consoleTime") | |||
}, | |||
}; | |||
=== Recording markers in a different thread === | === Recording markers in a different thread === | ||