| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/tracing/base/base64.html"> |
| <link rel="import" |
| href="/tracing/ui/extras/about_tracing/record_controller.html"> |
| <link rel="import" |
| href="/tracing/ui/extras/about_tracing/inspector_tracing_controller_client.html"> |
| <link rel="import" |
| href="/tracing/ui/extras/about_tracing/xhr_based_tracing_controller_client.html"> |
| <link rel="import" href="/tracing/importer/import.html"> |
| <link rel="import" href="/tracing/ui/base/info_bar_group.html"> |
| <link rel="import" href="/tracing/ui/base/hotkey_controller.html"> |
| <link rel="import" href="/tracing/ui/base/overlay.html"> |
| <link rel="import" href="/tracing/ui/base/utils.html"> |
| <link rel="import" href="/tracing/ui/timeline_view.html"> |
| |
| <style> |
| x-profiling-view { |
| -webkit-flex-direction: column; |
| display: -webkit-flex; |
| padding: 0; |
| } |
| |
| x-profiling-view .controls #save-button { |
| margin-left: 64px !important; |
| } |
| |
| x-profiling-view > tr-ui-timeline-view { |
| -webkit-flex: 1 1 auto; |
| min-height: 0; |
| } |
| |
| .report-id-message { |
| -webkit-user-select: text; |
| } |
| |
| x-timeline-view-buttons { |
| display: flex; |
| align-items: center; |
| } |
| </style> |
| |
| <template id="profiling-view-template"> |
| <tr-ui-b-info-bar-group></tr-ui-b-info-bar-group> |
| <x-timeline-view-buttons> |
| <button id="record-button">Record</button> |
| <button id="save-button">Save</button> |
| <button id="load-button">Load</button> |
| </x-timeline-view-buttons> |
| <tr-ui-timeline-view> |
| <track-view-container id='track_view_container'></track-view-container> |
| </tr-ui-timeline-view> |
| </template> |
| |
| <script> |
| 'use strict'; |
| |
| /** |
| * @fileoverview ProfilingView glues the View control to |
| * TracingController. |
| */ |
| tr.exportTo('tr.ui.e.about_tracing', function() { |
| function readFile(file) { |
| return new Promise(function(resolve, reject) { |
| var reader = new FileReader(); |
| var filename = file.name; |
| reader.onload = function(data) { |
| resolve(data.target.result); |
| }; |
| reader.onerror = function(err) { |
| reject(err); |
| }; |
| |
| var is_binary = /[.]gz$/.test(filename) || /[.]zip$/.test(filename); |
| if (is_binary) |
| reader.readAsArrayBuffer(file); |
| else |
| reader.readAsText(file); |
| }); |
| } |
| |
| /** |
| * ProfilingView |
| * @constructor |
| * @extends {HTMLUnknownElement} |
| */ |
| var ProfilingView = tr.ui.b.define('x-profiling-view'); |
| var THIS_DOC = document.currentScript.ownerDocument; |
| |
| ProfilingView.prototype = { |
| __proto__: HTMLUnknownElement.prototype, |
| |
| decorate: function(tracingControllerClient) { |
| this.appendChild(tr.ui.b.instantiateTemplate('#profiling-view-template', |
| THIS_DOC)); |
| |
| this.timelineView_ = this.querySelector('tr-ui-timeline-view'); |
| this.infoBarGroup_ = this.querySelector('tr-ui-b-info-bar-group'); |
| |
| // Detach the buttons. We will reattach them to the timeline view. |
| // TODO(nduca): Make timeline-view have a content select="x-buttons" |
| // that pulls in any buttons. |
| this.recordButton_ = this.querySelector('#record-button'); |
| this.loadButton_ = this.querySelector('#load-button'); |
| this.saveButton_ = this.querySelector('#save-button'); |
| |
| var buttons = this.querySelector('x-timeline-view-buttons'); |
| buttons.parentElement.removeChild(buttons); |
| this.timelineView_.leftControls.appendChild(buttons); |
| this.initButtons_(); |
| |
| this.timelineView_.hotkeyController.addHotKey(new tr.ui.b.HotKey({ |
| eventType: 'keypress', |
| keyCode: 'r'.charCodeAt(0), |
| callback: function(e) { |
| this.beginRecording(); |
| event.stopPropagation(); |
| }, |
| thisArg: this |
| })); |
| |
| this.initDragAndDrop_(); |
| |
| if (tracingControllerClient) { |
| this.tracingControllerClient_ = tracingControllerClient; |
| } else if (window.DevToolsHost !== undefined) { |
| this.tracingControllerClient_ = |
| new tr.ui.e.about_tracing.InspectorTracingControllerClient(); |
| } else { |
| this.tracingControllerClient_ = |
| new tr.ui.e.about_tracing.XhrBasedTracingControllerClient(); |
| } |
| |
| this.isRecording_ = false; |
| this.activeTrace_ = undefined; |
| |
| this.updateTracingControllerSpecificState_(); |
| }, |
| |
| // Detach all document event listeners. Without this the tests can get |
| // confused as the element may still be listening when the next test runs. |
| detach_: function() { |
| this.detachDragAndDrop_(); |
| }, |
| |
| get isRecording() { |
| return this.isRecording_; |
| }, |
| |
| set tracingControllerClient(tracingControllerClient) { |
| this.tracingControllerClient_ = tracingControllerClient; |
| this.updateTracingControllerSpecificState_(); |
| }, |
| |
| updateTracingControllerSpecificState_: function() { |
| var isInspector = this.tracingControllerClient_ instanceof |
| tr.ui.e.about_tracing.InspectorTracingControllerClient; |
| |
| if (isInspector) { |
| this.infoBarGroup_.addMessage( |
| 'This about:tracing is connected to a remote device...', |
| [{buttonText: 'Wow!', onClick: function() {}}]); |
| } |
| }, |
| |
| beginRecording: function() { |
| if (this.isRecording_) |
| throw new Error('Already recording'); |
| this.isRecording_ = true; |
| var resultPromise = tr.ui.e.about_tracing.beginRecording( |
| this.tracingControllerClient_); |
| resultPromise.then( |
| function(data) { |
| this.isRecording_ = false; |
| var traceName = tr.ui.e.about_tracing.defaultTraceName( |
| this.tracingControllerClient_); |
| this.setActiveTrace(traceName, data, false); |
| }.bind(this), |
| function(err) { |
| this.isRecording_ = false; |
| if (err instanceof tr.ui.e.about_tracing.UserCancelledError) |
| return; |
| tr.ui.b.Overlay.showError('Error while recording', err); |
| }.bind(this)); |
| return resultPromise; |
| }, |
| |
| get timelineView() { |
| return this.timelineView_; |
| }, |
| |
| /////////////////////////////////////////////////////////////////////////// |
| |
| clearActiveTrace: function() { |
| this.saveButton_.disabled = true; |
| this.activeTrace_ = undefined; |
| }, |
| |
| setActiveTrace: function(filename, data) { |
| this.activeTrace_ = { |
| filename: filename, |
| data: data |
| }; |
| |
| this.infoBarGroup_.clearMessages(); |
| this.updateTracingControllerSpecificState_(); |
| this.saveButton_.disabled = false; |
| this.timelineView_.viewTitle = filename; |
| |
| var m = new tr.Model(); |
| var i = new tr.importer.Import(m); |
| var p = i.importTracesWithProgressDialog([data]); |
| p.then( |
| function() { |
| this.timelineView_.model = m; |
| this.timelineView_.updateDocumentFavicon(); |
| }.bind(this), |
| function(err) { |
| tr.ui.b.Overlay.showError('While importing: ', err); |
| }.bind(this)); |
| }, |
| |
| /////////////////////////////////////////////////////////////////////////// |
| |
| initButtons_: function() { |
| this.recordButton_.addEventListener( |
| 'click', function(event) { |
| event.stopPropagation(); |
| this.beginRecording(); |
| }.bind(this)); |
| |
| this.loadButton_.addEventListener( |
| 'click', function(event) { |
| event.stopPropagation(); |
| this.onLoadClicked_(); |
| }.bind(this)); |
| |
| this.saveButton_.addEventListener('click', |
| this.onSaveClicked_.bind(this)); |
| this.saveButton_.disabled = true; |
| }, |
| |
| requestFilename_: function() { |
| |
| // unsafe filename patterns: |
| var illegalRe = /[\/\?<>\\:\*\|":]/g; |
| var controlRe = /[\x00-\x1f\x80-\x9f]/g; |
| var reservedRe = /^\.+$/; |
| |
| var filename; |
| var defaultName = this.activeTrace_.filename; |
| var fileExtension = '.json'; |
| var fileRegex = /\.json$/; |
| if (/[.]gz$/.test(defaultName)) { |
| fileExtension += '.gz'; |
| fileRegex = /\.json\.gz$/; |
| } else if (/[.]zip$/.test(defaultName)) { |
| fileExtension = '.zip'; |
| fileRegex = /\.zip$/; |
| } |
| |
| var custom = prompt('Filename? (' + fileExtension + |
| ' appended) Or leave blank:'); |
| if (custom === null) |
| return undefined; |
| |
| var name; |
| if (custom) { |
| name = ' ' + custom; |
| } else { |
| var date = new Date(); |
| var dateText = ' ' + date.toDateString() + |
| ' ' + date.toLocaleTimeString(); |
| name = dateText; |
| } |
| |
| filename = defaultName.replace(fileRegex, name) + fileExtension; |
| |
| return filename |
| .replace(illegalRe, '.') |
| .replace(controlRe, '\u2022') |
| .replace(reservedRe, '') |
| .replace(/\s+/g, '_'); |
| }, |
| |
| onSaveClicked_: function() { |
| // Create a blob URL from the binary array. |
| var blob = new Blob([this.activeTrace_.data], |
| {type: 'application/octet-binary'}); |
| var blobUrl = window.webkitURL.createObjectURL(blob); |
| |
| // Create a link and click on it. BEST API EVAR! |
| var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); |
| link.href = blobUrl; |
| var filename = this.requestFilename_(); |
| if (filename) { |
| link.download = filename; |
| link.click(); |
| } |
| }, |
| |
| onLoadClicked_: function() { |
| var inputElement = document.createElement('input'); |
| inputElement.type = 'file'; |
| inputElement.multiple = false; |
| |
| var changeFired = false; |
| inputElement.addEventListener( |
| 'change', |
| function(e) { |
| if (changeFired) |
| return; |
| changeFired = true; |
| |
| var file = inputElement.files[0]; |
| readFile(file).then( |
| function(data) { |
| this.setActiveTrace(file.name, data); |
| }.bind(this), |
| function(err) { |
| tr.ui.b.Overlay.showError('Error while loading file: ' + err); |
| }); |
| }.bind(this), false); |
| inputElement.click(); |
| }, |
| |
| /////////////////////////////////////////////////////////////////////////// |
| |
| initDragAndDrop_: function() { |
| this.dropHandler_ = this.dropHandler_.bind(this); |
| this.ignoreDragEvent_ = this.ignoreDragEvent_.bind(this); |
| document.addEventListener('dragstart', this.ignoreDragEvent_, false); |
| document.addEventListener('dragend', this.ignoreDragEvent_, false); |
| document.addEventListener('dragenter', this.ignoreDragEvent_, false); |
| document.addEventListener('dragleave', this.ignoreDragEvent_, false); |
| document.addEventListener('dragover', this.ignoreDragEvent_, false); |
| document.addEventListener('drop', this.dropHandler_, false); |
| }, |
| |
| detachDragAndDrop_: function() { |
| document.removeEventListener('dragstart', this.ignoreDragEvent_); |
| document.removeEventListener('dragend', this.ignoreDragEvent_); |
| document.removeEventListener('dragenter', this.ignoreDragEvent_); |
| document.removeEventListener('dragleave', this.ignoreDragEvent_); |
| document.removeEventListener('dragover', this.ignoreDragEvent_); |
| document.removeEventListener('drop', this.dropHandler_); |
| }, |
| |
| ignoreDragEvent_: function(e) { |
| e.preventDefault(); |
| return false; |
| }, |
| |
| dropHandler_: function(e) { |
| if (this.isAnyDialogUp_) |
| return; |
| |
| e.stopPropagation(); |
| e.preventDefault(); |
| |
| var files = e.dataTransfer.files; |
| if (files.length !== 1) { |
| tr.ui.b.Overlay.showError('1 file supported at a time.'); |
| return; |
| } |
| |
| readFile(files[0]).then( |
| function(data) { |
| this.setActiveTrace(files[0].name, data); |
| }.bind(this), |
| function(err) { |
| tr.ui.b.Overlay.showError('Error while loading file: ' + err); |
| }); |
| return false; |
| } |
| }; |
| |
| return { |
| ProfilingView: ProfilingView |
| }; |
| }); |
| </script> |
