1# Making standalone HTML files 2 3If you have a trace file that you want to turn into a html file with a viewer then: 4 5``` 6sys.path.append(os.path.join(path_to_catapult, 'tracing')) 7from trace_viewer_build import trace2html 8with open('my_trace.html', 'w') as new_file: 9 trace2html.WriteHTMLForTracesToFile(['my_trace.json'], new_file) 10``` 11 12This will produce a standalone trace viewer with my_trace packed inside. 13 14# Embedding the Easy Way 15Running `$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. 16 17In 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: 18``` 19 var container = document.createElement('track-view-container'); 20 container.id = 'track_view_container'; 21 22 viewer = document.createElement('tr-ui-timeline-view'); 23 viewer.track_view_container = container; 24 viewer.appendChild(container); 25 26 viewer.id = 'trace-viewer'; 27 viewer.globalMode = true; 28 document.body.appendChild(viewer); 29``` 30 31With the viewer created, you need to then make a TraceModel: 32``` 33 var model = new tr.Model(); 34 var i = new tr.importer.Import(m); 35 var p = i.importTracesWithProgressDialog([result]); 36 p.then(function() { 37 viewer.model = model; 38 }, onImportFail); 39 40``` 41 42Model has a variety of import options, from synchronous import to importWithProgressDialog. And, it 43lets you customize the types of postprocessing to be done on the model before it is displayed by the view. 44 45# Configs 46Trace 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 47vulcanize or trace2html will show the current set of configs we support, which maps to 48`trace_viewer/extras/*_config.html`. Some of the other configs are smaller, leading to a more compact redistributable. 49 50# Customizing 51For more information on how to customize and extend trace viewer, see [Extending-and-Customizing-Trace-Viewer](Extending-and-Customizing-Trace-Viewer) 52 53# Example 54See bin/index.html for an example of using the embedding system. 55