1 files changed, 54 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/tracing/docs/embedding-trace-viewer.md b/chromium/third_party/catapult/tracing/docs/embedding-trace-viewer.md
new file mode 100644
index 00000000000..2f3778c0d8e
--- /dev/null
+++ b/chromium/third_party/catapult/tracing/docs/embedding-trace-viewer.md
@@ -0,0 +1,54 @@
+# Making standalone HTML files
+
+If you have a trace file that you want to turn into a html file with a viewer then:
+
+```
+sys.path.append(os.path.join(path_to_catapult, 'tracing'))
+from trace_viewer_build import trace2html
+with open('my_trace.html', 'w') as new_file:
+   trace2html.WriteHTMLForTracesToFile(['my_trace.json'], new_file)
+```
+
+This will produce a standalone trace viewer with my_trace packed inside.
+
+# Embedding the Easy Way
+Running `$CATAPULT/tracing/bin/vulcanize_trace_viewer` will create `$CATAPULT/tracing/bin/trace_viewer_full.html`. That file has all the js, css and html-templates that you need for a standalone trace viewer instance.
+
+In your code, `<link rel="import" href="trace_viewer_full.html">`. Then, to get a trace viewer up, you need to do two things: make the timeline viewer, and make a model and give it to the viewer:
+```
+    var container = document.createElement('track-view-container');
+    container.id = 'track_view_container';
+
+    viewer = document.createElement('tr-ui-timeline-view');
+    viewer.track_view_container = container;
+    Polymer.dom(viewer).appendChild(container);
+
+    viewer.id = 'trace-viewer';
+    viewer.globalMode = true;
+    Polymer.dom(document.body).appendChild(viewer);
+```
+
+With the viewer created, you need to then make a TraceModel:
+```
+    var model = new tr.Model();
+    var i = new tr.importer.Import(m);
+    var p = i.importTracesWithProgressDialog([result]);
+    p.then(function() {
+      viewer.model = model;
+    }, onImportFail);
+
+```
+
+Model has a variety of import options, from synchronous import to importWithProgressDialog. And, it
+lets you customize the types of postprocessing to be done on the model before it is displayed by the view.
+
+# Configs
+Trace viewer has a lot of extra pieces, for domain-specific use cases. By default, trace2html and vulcanize take everything and combine them together. We call this the "full" config. Passing --help to
+vulcanize or trace2html will show the current set of configs we support, which maps to
+`trace_viewer/extras/*_config.html`. Some of the other configs are smaller, leading to a more compact redistributable.
+
+# Customizing
+For more information on how to customize and extend trace viewer, see [Extending-and-Customizing-Trace-Viewer](Extending-and-Customizing-Trace-Viewer)
+
+# Example
+See bin/index.html for an example of using the embedding system.