1 # Making standalone HTML files 2 3 If you have a trace file that you want to turn into a html file with a viewer then: 4 5 ``` 6 sys.path.append(os.path.join(path_to_catapult, 'tracing')) 7 from trace_viewer_build import trace2html 8 with open('my_trace.html', 'w') as new_file: 9 trace2html.WriteHTMLForTracesToFile(['my_trace.json'], new_file) 10 ``` 11 12 This will produce a standalone trace viewer with my_trace packed inside. 13 14 # Embedding the Easy Way 15 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. 16 17 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: 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 31 With 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 42 Model has a variety of import options, from synchronous import to importWithProgressDialog. And, it 43 lets you customize the types of postprocessing to be done on the model before it is displayed by the view. 44 45 # Configs 46 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 47 vulcanize 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 51 For more information on how to customize and extend trace viewer, see [Extending-and-Customizing-Trace-Viewer](Extending-and-Customizing-Trace-Viewer) 52 53 # Example 54 See bin/index.html for an example of using the embedding system. 55
