diff options
Diffstat (limited to 'chromium/third_party/catapult/tracing/tracing/ui/extras')
81 files changed, 0 insertions, 11962 deletions
diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/about_tracing.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/about_tracing.html deleted file mode 100644 index 1df923b4d42..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/about_tracing.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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="stylesheet" href="/tracing/ui/extras/about_tracing/common.css"> -<link rel="import" href="/tracing/ui/extras/about_tracing/profiling_view.html"> -<link rel="import" href="/tracing/ui/extras/full_config.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.e.about_tracing', function() { - window.profilingView = undefined; // Made global for debugging purposes only. - - document.addEventListener('DOMContentLoaded', function() { - window.profilingView = new tr.ui.e.about_tracing.ProfilingView(); - profilingView.timelineView.globalMode = true; - document.body.appendChild(profilingView); - }); - - return {}; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/common.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/common.css deleted file mode 100644 index 1ffb5f72e74..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/common.css +++ /dev/null @@ -1,25 +0,0 @@ -/* Copyright (c) 2012 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. - */ -html, -body { - height: 100%; -} - -body { - -webkit-flex-direction: column; - display: -webkit-flex; - margin: 0; - padding: 0; -} - -body > x-profiling-view { - -webkit-flex: 1 1 auto; - min-height: 0; -} - -body > x-profiling-view > x-timeline-view:focus { - outline: 0 -} - diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_connection.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_connection.html deleted file mode 100644 index bc2ba6e472c..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_connection.html +++ /dev/null @@ -1,125 +0,0 @@ -<!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/base.html"> -<script> - -'use strict'; - -/** - * Contains connection code that inspector's embedding framework calls on - * tracing, and that tracing can use to talk to inspector. - */ -tr.exportTo('tr.ui.e.about_tracing', function() { - // Interface used by inspector when it hands data to us from the backend. - window.DevToolsAPI = { - setToolbarColors: function() { }, - addExtensions: function() { }, - setInspectedPageId: function() { }, - - dispatchMessage: function(payload) { - throw new Error('Should have been patched by InspectorConnection'); - } - }; - // Temporary until inspector backend switches to DevToolsAPI. - window.InspectorFrontendAPI = window.DevToolsAPI; - - /** - * @constructor - */ - function InspectorConnection() { - if (InspectorConnection.instance) - throw new Error('Singleton'); - - this.nextRequestId_ = 1; - this.pendingRequestResolversId_ = {}; - - this.notificationListenersByMethodName_ = {}; - DevToolsAPI.dispatchMessage = this.dispatchMessage_.bind(this); - } - - InspectorConnection.prototype = { - req: function(method, params) { - var id = this.nextRequestId_++; - var msg = JSON.stringify({ - id: id, - method: method, - params: params - }); - var devtoolsMessageStr = JSON.stringify( - {'id': id, 'method': 'dispatchProtocolMessage', 'params': [msg]}); - DevToolsHost.sendMessageToEmbedder(devtoolsMessageStr); - - return new Promise(function(resolve, reject) { - this.pendingRequestResolversId_[id] = { - resolve: resolve, - reject: reject - }; - }.bind(this)); - }, - - setNotificationListener: function(method, listener) { - this.notificationListenersByMethodName_[method] = listener; - }, - - dispatchMessage_: function(payload) { - var isStringPayload = typeof payload === 'string'; - // Special handling for Tracing.dataCollected because it is high - // bandwidth. - var isDataCollectedMessage = isStringPayload ? - payload.indexOf('"method": "Tracing.dataCollected"') !== -1 : - payload.method === 'Tracing.dataCollected'; - if (isDataCollectedMessage) { - var listener = this.notificationListenersByMethodName_[ - 'Tracing.dataCollected']; - if (listener) { - // FIXME(loislo): trace viewer should be able to process - // raw message object because string based version a few times - // slower on the browser side. - // see https://codereview.chromium.org/784513002. - listener(isStringPayload ? payload : JSON.stringify(payload)); - return; - } - } - - var message = isStringPayload ? JSON.parse(payload) : payload; - if (message.id) { - var resolver = this.pendingRequestResolversId_[message.id]; - if (resolver === undefined) { - console.log('Unrecognized ack', message); - return; - } - if (message.error) { - resolver.reject(message.error); - return; - } - resolver.resolve(message.result); - return; - } - - if (message['method']) { - var listener = this.notificationListenersByMethodName_[message.method]; - if (listener === undefined) { - console.log('Unhandled ', message.method); - return; - } - listener(message.params); - return; - } - console.log('Unknown dispatchMessage: ', payload); - } - }; - - if (window.DevToolsHost) - InspectorConnection.instance = new InspectorConnection(); - else - InspectorConnection.instance = undefined; - - return { - InspectorConnection: InspectorConnection - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_tracing_controller_client.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_tracing_controller_client.html deleted file mode 100644 index 86c3e596054..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_tracing_controller_client.html +++ /dev/null @@ -1,187 +0,0 @@ -<!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/ui/extras/about_tracing/tracing_controller_client.html"> -<link rel="import" href="/tracing/ui/extras/about_tracing/inspector_connection.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.about_tracing', function() { - function createResolvedPromise(data) { - var promise = new Promise(function(resolve, reject) { - if (data) - resolve(data); - else - resolve(); - }); - return promise; - } - - function appendTraceChunksTo(chunks, messageString) { - if (typeof messageString !== 'string') - throw new Error('Invalid data'); - var re = /"params":\s*\{\s*"value":\s*\[([^]+)\]\s*\}\s*\}/; - var m = re.exec(messageString); - if (!m) - throw new Error('Malformed response'); - - if (chunks.length > 1) - chunks.push(','); - chunks.push(m[1]); - } - - /** - * Controls tracing using the inspector's FrontendAgentHost APIs. - * - * @constructor - */ - function InspectorTracingControllerClient() { - this.recording_ = false; - this.bufferUsage_ = 0; - this.conn_ = tr.ui.e.about_tracing.InspectorConnection.instance; - this.currentTraceTextChunks_ = undefined; - } - - InspectorTracingControllerClient.prototype = { - __proto__: tr.ui.e.about_tracing.TracingControllerClient.prototype, - - beginMonitoring: function(monitoringOptions) { - throw new Error('Not implemented'); - }, - - endMonitoring: function() { - throw new Error('Not implemented'); - }, - - captureMonitoring: function() { - throw new Error('Not implemented'); - }, - - getMonitoringStatus: function() { - return createResolvedPromise({ - isMonitoring: false, - categoryFilter: '', - useSystemTracing: false, - useContinuousTracing: false, - useSampling: false - }); - }, - - getCategories: function() { - var res = this.conn_.req('Tracing.getCategories', {}); - return res.then(function(result) { - return result.categories; - }, function(err) { - return []; - }); - }, - - beginRecording: function(recordingOptions) { - if (this.recording_) - throw new Error('Already recording'); - this.recording_ = 'starting'; - var res = this.conn_.req( - 'Tracing.start', - { - categories: recordingOptions.categoryFilter, - options: - [recordingOptions.tracingRecordMode, - (recordingOptions.useSampling ? 'enable-sampling' : '') - ].join(','), - bufferUsageReportingInterval: 1000 - }); - res = res.then( - function ok() { - this.conn_.setNotificationListener( - 'Tracing.bufferUsage', - this.onBufferUsageUpdateFromInspector_.bind(this)); - this.recording_ = true; - }.bind(this), - function error() { - this.recording_ = false; - }.bind(this)); - return res; - }, - - onBufferUsageUpdateFromInspector_: function(params) { - this.bufferUsage_ = params.value || params.percentFull; - }, - - beginGetBufferPercentFull: function() { - var that = this; - return new Promise(function(resolve, reject) { - setTimeout(function() { - resolve(that.bufferUsage_); - }, 100); - }); - }, - - onDataCollected_: function(messageString) { - appendTraceChunksTo(this.currentTraceTextChunks_, messageString); - }, - - endRecording: function() { - if (this.recording_ === false) - return createResolvedPromise(); - - if (this.recording_ !== true) - throw new Error('Cannot end'); - - this.currentTraceTextChunks_ = ['[']; - this.conn_.setNotificationListener( - 'Tracing.dataCollected', this.onDataCollected_.bind(this)); - - var clearListeners = function() { - this.conn_.setNotificationListener( - 'Tracing.bufferUsage', undefined); - this.conn_.setNotificationListener( - 'Tracing.tracingComplete', undefined); - this.conn_.setNotificationListener( - 'Tracing.dataCollected', undefined); - }.bind(this); - - this.recording_ = 'stopping'; - return new Promise(function(resolve, reject) { - function tracingComplete() { - clearListeners(); - this.recording_ = false; - this.currentTraceTextChunks_.push(']'); - var traceText = this.currentTraceTextChunks_.join(''); - this.currentTraceTextChunks_ = undefined; - resolve(traceText); - } - - function tracingFailed(err) { - clearListeners(); - this.recording_ = false; - reject(err); - } - - this.conn_.setNotificationListener( - 'Tracing.tracingComplete', tracingComplete.bind(this)); - this.conn_.req('Tracing.end', {}).then( - function end() { - // Nothing happens here. We're really waiting for - // Tracing.tracingComplete. - }.bind(this), - tracingFailed.bind(this)); - }.bind(this)); - }, - - defaultTraceName: function() { - return 'trace.json'; - } - }; - - return { - InspectorTracingControllerClient: InspectorTracingControllerClient, - appendTraceChunksTo: appendTraceChunksTo - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_tracing_controller_client_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_tracing_controller_client_test.html deleted file mode 100644 index bbff78a9855..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/inspector_tracing_controller_client_test.html +++ /dev/null @@ -1,83 +0,0 @@ -<!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/ui/extras/about_tracing/inspector_tracing_controller_client.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('beginRecording_sendCategoriesAndOptions', function() { - var controller = - new tr.ui.e.about_tracing.InspectorTracingControllerClient(); - controller.conn_ = new (function() { - this.req = function(method, params) { - var msg = JSON.stringify({ - id: 1, - method: method, - params: params - }); - return new (function() { - this.msg = msg; - this.then = function(m1, m2) { - return this; - }; - })(); - }; - this.setNotificationListener = function(method, listener) { - }; - })(); - - var recordingOptions = { - categoryFilter: JSON.stringify(['a', 'b', 'c']), - useSystemTracing: false, - tracingRecordMode: 'test-mode', - useSampling: true - }; - - var result = JSON.parse(controller.beginRecording(recordingOptions).msg); - assert.equal(result.params.categories, JSON.stringify(['a', 'b', 'c'])); - var options = result.params.options.split(','); - var tracingRecordTestMode = false; - var sampleFlag = false; - for (var s in options) { - if (options[s] === 'test-mode') tracingRecordTestMode = true; - else if (options[s] === 'enable-sampling') sampleFlag = true; - else assert.equal(options[s], ''); - } - assert.isTrue(tracingRecordTestMode); - assert.isTrue(sampleFlag); - }); - - test('oldFormat', function() { - var chunks = []; - tr.ui.e.about_tracing.appendTraceChunksTo(chunks, '"{ "method": "Tracing.dataCollected", "params": { "value": [ {"cat":"__metadata","pid":28871,"tid":0,"ts":0,"ph":"M","name":"num_cpus","args":{"number":4}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"process_sort_index","args":{"sort_index":-5}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"process_name","args":{"name":"Renderer"}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"process_labels","args":{"labels":"JS Bin"}},{"cat":"__metadata","pid":28871,"tid":28908,"ts":0,"ph":"M","name":"thread_sort_index","args":{"sort_index":-1}},{"cat":"__metadata","pid":28871,"tid":28917,"ts":0,"ph":"M","name":"thread_name","args":{"name":"Compositor"}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"thread_name","args":{"name":"Chrome_ChildIOThread"}},{"cat":"__metadata","pid":28871,"tid":28919,"ts":0,"ph":"M","name":"thread_name","args":{"name":"CompositorRasterWorker1/28919"}},{"cat":"__metadata","pid":28871,"tid":28908,"ts":0,"ph":"M","name":"thread_name","args":{"name":"CrRendererMain"}},{"cat":"ipc,toplevel","pid":28871,"tid":28911,"ts":22000084746,"ph":"X","name":"ChannelReader::DispatchInputData","args":{"class":64,"line":25},"tdur":0,"tts":1853064},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"overhead","args":{"average_overhead":0.015}} ] } }"'); // @suppress longLineCheck - assert.equal(chunks.length, 1); - JSON.parse('[' + chunks.join('') + ']'); - }); - - test('newFormat', function() { - var chunks = []; - tr.ui.e.about_tracing.appendTraceChunksTo(chunks, '"{ "method": "Tracing.dataCollected", "params": { "value": [{"cat":"__metadata","pid":28871,"tid":0,"ts":0,"ph":"M","name":"num_cpus","args":{"number":4}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"process_sort_index","args":{"sort_index":-5}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"process_name","args":{"name":"Renderer"}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"process_labels","args":{"labels":"JS Bin"}},{"cat":"__metadata","pid":28871,"tid":28908,"ts":0,"ph":"M","name":"thread_sort_index","args":{"sort_index":-1}},{"cat":"__metadata","pid":28871,"tid":28917,"ts":0,"ph":"M","name":"thread_name","args":{"name":"Compositor"}},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"thread_name","args":{"name":"Chrome_ChildIOThread"}},{"cat":"__metadata","pid":28871,"tid":28919,"ts":0,"ph":"M","name":"thread_name","args":{"name":"CompositorRasterWorker1/28919"}},{"cat":"__metadata","pid":28871,"tid":28908,"ts":0,"ph":"M","name":"thread_name","args":{"name":"CrRendererMain"}},{"cat":"ipc,toplevel","pid":28871,"tid":28911,"ts":22000084746,"ph":"X","name":"ChannelReader::DispatchInputData","args":{"class":64,"line":25},"tdur":0,"tts":1853064},{"cat":"__metadata","pid":28871,"tid":28911,"ts":0,"ph":"M","name":"overhead","args":{"average_overhead":0.015}}] } }"'); // @suppress longLineCheck - assert.equal(chunks.length, 1); - JSON.parse('[' + chunks.join('') + ']'); - }); - - test('stringAndObjectPayload', function() { - var connection = new tr.ui.e.about_tracing.InspectorConnection(); - connection.setNotificationListener('Tracing.dataCollected', - function(message) { - assert.typeOf(message, 'string'); - JSON.parse(message); - } - ); - connection.dispatchMessage_('{ "method": "Tracing.dataCollected", "params": { "value": [] } }'); // @suppress longLineCheck - connection.dispatchMessage_({'method': 'Tracing.dataCollected', 'params': {'value': [] } }); // @suppress longLineCheck - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/mock_tracing_controller_client.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/mock_tracing_controller_client.html deleted file mode 100644 index a88122ff636..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/mock_tracing_controller_client.html +++ /dev/null @@ -1,86 +0,0 @@ -<!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/ui/extras/about_tracing/tracing_controller_client.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.about_tracing', function() { - function MockTracingControllerClient() { - this.requests = []; - this.nextRequestIndex = 0; - this.allowLooping = false; - } - - MockTracingControllerClient.prototype = { - __proto__: tr.ui.e.about_tracing.TracingControllerClient.prototype, - - expectRequest: function(method, generateResponse) { - var generateResponseCb; - if (typeof generateResponse === 'function') { - generateResponseCb = generateResponse; - } else { - generateResponseCb = function() { - return generateResponse; - }; - } - - this.requests.push({ - method: method, - generateResponseCb: generateResponseCb}); - }, - - _request: function(method, args) { - return new Promise(function(resolve) { - var requestIndex = this.nextRequestIndex; - if (requestIndex >= this.requests.length) - throw new Error('Unhandled request'); - if (!this.allowLooping) { - this.nextRequestIndex++; - } else { - this.nextRequestIndex = (this.nextRequestIndex + 1) % - this.requests.length; - } - - var req = this.requests[requestIndex]; - assert.equal(method, req.method); - var resp = req.generateResponseCb(args); - resolve(resp); - }.bind(this)); - }, - - assertAllRequestsHandled: function() { - if (this.allowLooping) - throw new Error('Incompatible with allowLooping'); - assert.equal(this.requests.length, this.nextRequestIndex); - }, - - getCategories: function() { - return this._request('getCategories'); - }, - - beginRecording: function(recordingOptions) { - return this._request('beginRecording', recordingOptions); - }, - - beginGetBufferPercentFull: function() { - return this._request('beginGetBufferPercentFull'); - }, - - endRecording: function() { - return this._request('endRecording'); - } - }; - - return { - MockTracingControllerClient: MockTracingControllerClient - }; -}); -</script> - diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/profiling_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/profiling_view.html deleted file mode 100644 index accff574c54..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/profiling_view.html +++ /dev/null @@ -1,369 +0,0 @@ -<!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/importer/import.html"> -<link rel="import" href="/tracing/ui/base/file.html"> -<link rel="import" href="/tracing/ui/base/hotkey_controller.html"> -<link rel="import" href="/tracing/ui/base/info_bar_group.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/extras/about_tracing/inspector_tracing_controller_client.html"> -<link rel="import" - href="/tracing/ui/extras/about_tracing/record_controller.html"> -<link rel="import" - href="/tracing/ui/extras/about_tracing/xhr_based_tracing_controller_client.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() { - /** - * 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]; - tr.ui.b.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; - } - - tr.ui.b.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> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/profiling_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/profiling_view_test.html deleted file mode 100644 index 457d074fe24..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/profiling_view_test.html +++ /dev/null @@ -1,84 +0,0 @@ -<!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/base.html"> -<link rel="import" href="/tracing/base/base64.html"> -<link rel="import" - href="/tracing/ui/extras/about_tracing/mock_tracing_controller_client.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/ui/extras/about_tracing/profiling_view.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var Base64 = tr.b.Base64; - var testData = [ - {name: 'a', args: {}, pid: 52, ts: 15000, cat: 'foo', tid: 53, ph: 'B'}, - {name: 'a', args: {}, pid: 52, ts: 19000, cat: 'foo', tid: 53, ph: 'E'}, - {name: 'b', args: {}, pid: 52, ts: 32000, cat: 'foo', tid: 53, ph: 'B'}, - {name: 'b', args: {}, pid: 52, ts: 54000, cat: 'foo', tid: 53, ph: 'E'} - ]; - - var monitoringOptions = { - isMonitoring: false, - categoryFilter: '*', - useSystemTracing: false, - useContinuousTracing: false, - useSampling: false - }; - - var ProfilingView = tr.ui.e.about_tracing.ProfilingView; - - test('recording', function() { - var mock = new tr.ui.e.about_tracing.MockTracingControllerClient(); - mock.allowLooping = true; - mock.expectRequest('endRecording', function() { - return ''; - }); - mock.expectRequest('getCategories', function() { - return ['a', 'b', 'c']; - }); - mock.expectRequest('beginRecording', function(data) { - return ''; - }); - mock.expectRequest('endRecording', function(data) { - return JSON.stringify(testData); - }); - - var view = new ProfilingView(mock); - view.style.height = '400px'; - view.style.border = '1px solid black'; - this.addHTMLOutput(view); - - return new Promise(function(resolve, reject) { - var recordingPromise = view.beginRecording(); - - var didAbort = false; - function pressRecord() { - if (didAbort) - return; - recordingPromise.selectionDlg.clickRecordButton(); - setTimeout(pressStop, 60); - } - function pressStop() { - recordingPromise.progressDlg.clickStopButton(); - } - setTimeout(pressRecord, 60); - recordingPromise.then( - function() { - resolve(); - }, - function(err) { - didAbort = true; - reject(err); - }); - }); - }); -}); -</script> - diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_controller.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_controller.html deleted file mode 100644 index 2284b0fa3e7..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_controller.html +++ /dev/null @@ -1,181 +0,0 @@ -<!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/ui/extras/about_tracing/record_selection_dialog.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.about_tracing', function() { - function beginRecording(tracingControllerClient) { - var finalPromiseResolver; - var finalPromise = new Promise(function(resolve, reject) { - finalPromiseResolver = { - resolve: resolve, - reject: reject - }; - }); - finalPromise.selectionDlg = undefined; - finalPromise.progressDlg = undefined; - - function beginRecordingError(err) { - finalPromiseResolver.reject(err); - } - - // Step 0: End recording. This is necessary when the user reloads the - // about:tracing page when we are recording. Window.onbeforeunload is not - // reliable to end recording on reload. - endRecording(tracingControllerClient).then( - getCategories, - getCategories); // Ignore error. - - // But just in case, bind onbeforeunload anyway. - window.onbeforeunload = function(e) { - endRecording(tracingControllerClient); - }; - - // Step 1: Get categories. - function getCategories() { - var p = tracingControllerClient.getCategories().then( - showTracingDialog, - beginRecordingError); - p.catch(function(err) { - beginRecordingError(err); - }); - } - - // Step 2: Show tracing dialog. - var selectionDlg; - function showTracingDialog(categories) { - selectionDlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - selectionDlg.categories = categories; - selectionDlg.settings_key = - 'tr.ui.e.about_tracing.record_selection_dialog'; - selectionDlg.addEventListener('recordclick', startTracing); - selectionDlg.addEventListener('closeclick', cancelRecording); - selectionDlg.visible = true; - - finalPromise.selectionDlg = selectionDlg; - } - - function cancelRecording() { - finalPromise.selectionDlg = undefined; - finalPromiseResolver.reject(new UserCancelledError()); - } - - // Step 2: Do the actual tracing dialog. - var progressDlg; - var bufferPercentFullDiv; - function startTracing() { - progressDlg = new tr.ui.b.Overlay(); - progressDlg.textContent = 'Recording...'; - progressDlg.userCanClose = false; - - bufferPercentFullDiv = document.createElement('div'); - progressDlg.appendChild(bufferPercentFullDiv); - - var stopButton = document.createElement('button'); - stopButton.textContent = 'Stop'; - progressDlg.clickStopButton = function() { - stopButton.click(); - }; - progressDlg.appendChild(stopButton); - - var recordingOptions = { - categoryFilter: selectionDlg.categoryFilter(), - useSystemTracing: selectionDlg.useSystemTracing, - tracingRecordMode: selectionDlg.tracingRecordMode, - useSampling: selectionDlg.useSampling - }; - - - var requestPromise = tracingControllerClient.beginRecording( - recordingOptions); - requestPromise.then( - function() { - progressDlg.visible = true; - stopButton.focus(); - updateBufferPercentFull('0'); - }, - recordFailed); - - stopButton.addEventListener('click', function() { - // TODO(chrishenry): Currently, this only dismiss the progress - // dialog when tracingComplete event is received. When performing - // remote debugging, the tracingComplete event may be delayed - // considerable. We should indicate to user that we are waiting - // for tracingComplete event instead of being unresponsive. (For - // now, I disable the "stop" button, since clicking on the button - // again now cause exception.) - var recordingPromise = endRecording(tracingControllerClient); - recordingPromise.then( - recordFinished, - recordFailed); - stopButton.disabled = true; - bufferPercentFullDiv = undefined; - }); - finalPromise.progressDlg = progressDlg; - } - - function recordFinished(tracedData) { - progressDlg.visible = false; - finalPromise.progressDlg = undefined; - finalPromiseResolver.resolve(tracedData); - } - - function recordFailed(err) { - progressDlg.visible = false; - finalPromise.progressDlg = undefined; - finalPromiseResolver.reject(err); - } - - function getBufferPercentFull() { - if (!bufferPercentFullDiv) - return; - - tracingControllerClient.beginGetBufferPercentFull().then( - updateBufferPercentFull); - } - - function updateBufferPercentFull(percent_full) { - if (!bufferPercentFullDiv) - return; - - percent_full = Math.round(100 * parseFloat(percent_full)); - var newText = 'Buffer usage: ' + percent_full + '%'; - if (bufferPercentFullDiv.textContent != newText) - bufferPercentFullDiv.textContent = newText; - - window.setTimeout(getBufferPercentFull, 500); - } - - // Thats it! We're done. - return finalPromise; - }; - - function endRecording(tracingControllerClient) { - return tracingControllerClient.endRecording(); - } - - function defaultTraceName(tracingControllerClient) { - return tracingControllerClient.defaultTraceName(); - } - - function UserCancelledError() { - Error.apply(this, arguments); - } - UserCancelledError.prototype = { - __proto__: Error.prototype - }; - - return { - beginRecording: beginRecording, - UserCancelledError: UserCancelledError, - defaultTraceName: defaultTraceName - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_controller_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_controller_test.html deleted file mode 100644 index 69c9cc8173d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_controller_test.html +++ /dev/null @@ -1,65 +0,0 @@ -<!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/ui/extras/about_tracing/mock_tracing_controller_client.html"> -<link rel="import" - href="/tracing/ui/extras/about_tracing/record_controller.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var testData = [ - {name: 'a', args: {}, pid: 52, ts: 15000, cat: 'foo', tid: 53, ph: 'B'}, - {name: 'a', args: {}, pid: 52, ts: 19000, cat: 'foo', tid: 53, ph: 'E'}, - {name: 'b', args: {}, pid: 52, ts: 32000, cat: 'foo', tid: 53, ph: 'B'}, - {name: 'b', args: {}, pid: 52, ts: 54000, cat: 'foo', tid: 53, ph: 'E'} - ]; - - test('fullRecording', function() { - return new Promise(function(resolve, reject) { - var mock = new tr.ui.e.about_tracing.MockTracingControllerClient(); - mock.expectRequest('endRecording', function() { - return ''; - }); - mock.expectRequest('getCategories', function() { - setTimeout(function() { - recordingPromise.selectionDlg.clickRecordButton(); - }, 20); - return ['a', 'b', 'c']; - }); - mock.expectRequest('beginRecording', function(recordingOptions) { - assert.typeOf(recordingOptions.categoryFilter, 'string'); - assert.typeOf(recordingOptions.useSystemTracing, 'boolean'); - assert.typeOf(recordingOptions.useSampling, 'boolean'); - assert.typeOf(recordingOptions.tracingRecordMode, 'string'); - setTimeout(function() { - recordingPromise.progressDlg.clickStopButton(); - }, 10); - return ''; - }); - mock.expectRequest('endRecording', function(data) { - return JSON.stringify(testData); - }); - - var recordingPromise = tr.ui.e.about_tracing.beginRecording(mock); - - return recordingPromise.then( - function(data) { - mock.assertAllRequestsHandled(); - var testDataString = JSON.stringify(testData); - assert.equal(data, testDataString); - resolve(); - }, - function(error) { - reject('This should never be reached'); - }); - }); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_selection_dialog.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_selection_dialog.html deleted file mode 100644 index 79ce154dba8..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_selection_dialog.html +++ /dev/null @@ -1,672 +0,0 @@ -<!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/core/filter.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/info_bar_group.html"> -<link rel="import" href="/tracing/ui/base/overlay.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> - -<template id="record-selection-dialog-template"> - <style> - .categories-column-view { - display: -webkit-flex; - -webkit-flex-direction: column; - font-family: sans-serif; - max-width: 640px; - min-height: 0; - min-width: 0; - opacity: 1; - transition: max-height 1s ease, max-width 1s ease, opacity 1s ease; - will-change: opacity; - } - - .categories-column-view-hidden { - max-height: 0; - max-width: 0; - opacity: 0; - overflow: hidden; - } - - .categories-selection { - display: -webkit-flex; - -webkit-flex-direction: row; - } - - .category-presets { - padding: 4px; - } - - .category-description { - color: #aaa; - font-size: small; - max-height: 1em; - opacity: 1; - padding-left: 4px; - padding-right: 4px; - text-align: right; - transition: max-height 1s ease, opacity 1s ease; - will-change: opacity; - } - - .category-description-hidden { - max-height: 0; - opacity: 0; - } - - .default-enabled-categories, - .default-disabled-categories { - -webkit-flex: 1 1 auto; - display: -webkit-flex; - -webkit-flex-direction: column; - padding: 4px; - width: 300px; - } - - .default-enabled-categories > div, - .default-disabled-categories > div { - padding: 4px; - } - - .tracing-modes { - -webkit-flex: 1 0 auto; - display: -webkit-flex; - -webkit-flex-direction: reverse; - padding: 4px; - border-bottom: 2px solid #ddd; - border-top: 2px solid #ddd; - } - - .default-disabled-categories { - border-left: 2px solid #ddd; - } - - .warning-default-disabled-categories { - display: inline-block; - font-weight: bold; - text-align: center; - color: #BD2E2E; - width: 2.0ex; - height: 2.0ex; - border-radius: 2.0ex; - border: 1px solid #BD2E2E; - } - - .categories { - font-size: 80%; - padding: 10px; - -webkit-flex: 1 1 auto; - } - - .group-selectors { - font-size: 80%; - border-bottom: 1px solid #ddd; - padding-bottom: 6px; - -webkit-flex: 0 0 auto; - } - - .group-selectors button { - padding: 1px; - } - - .record-selection-dialog .labeled-option-group { - -webkit-flex: 0 0 auto; - -webkit-flex-direction: column; - display: -webkit-flex; - } - - .record-selection-dialog .labeled-option { - border-top: 5px solid white; - border-bottom: 5px solid white; - } - - .record-selection-dialog .edit-categories { - padding-left: 6px; - } - - .record-selection-dialog .edit-categories:after { - padding-left: 15px; - font-size: 125%; - } - - .record-selection-dialog .labeled-option-group:not(.categories-expanded) - .edit-categories:after { - content: '\25B8'; /* Right triangle */ - } - - .record-selection-dialog .labeled-option-group.categories-expanded - .edit-categories:after { - content: '\25BE'; /* Down triangle */ - } - - </style> - - <div class="record-selection-dialog"> - <tr-ui-b-info-bar-group></tr-ui-b-info-bar-group> - <div class="category-presets"> - </div> - <div class="category-description"></div> - <div class="categories-column-view"> - <div class="tracing-modes"></div> - <div class="categories-selection"> - <div class="default-enabled-categories"> - <div>Record Categories</div> - <div class="group-selectors"> - Select - <button class="all-btn">All</button> - <button class="none-btn">None</button> - </div> - <div class="categories"></div> - </div> - <div class="default-disabled-categories"> - <div>Disabled by Default Categories - <a class="warning-default-disabled-categories">!</a> - </div> - <div class="group-selectors"> - Select - <button class="all-btn">All</button> - <button class="none-btn">None</button> - </div> - <div class="categories"></div> - </div> - </div> - </div> - </div> -</template> - -<script> -'use strict'; - -/** - * @fileoverview RecordSelectionDialog presents the available categories - * to be enabled/disabled during tr.c. - */ -tr.exportTo('tr.ui.e.about_tracing', function() { - var THIS_DOC = document.currentScript.ownerDocument; - var RecordSelectionDialog = tr.ui.b.define('div'); - - var DEFAULT_PRESETS = [ - {title: 'Web developer', - categoryFilter: ['blink', 'cc', 'netlog', 'renderer.scheduler', - 'toplevel', 'v8']}, - {title: 'Input latency', - categoryFilter: ['benchmark', 'input', 'evdev', 'renderer.scheduler', - 'toplevel']}, - {title: 'Rendering', - categoryFilter: ['blink', 'cc', 'gpu', 'toplevel']}, - {title: 'Javascript and rendering', - categoryFilter: ['blink', 'cc', 'gpu', 'renderer.scheduler', 'v8', - 'toplevel']}, - {title: 'Frame Viewer', - categoryFilter: ['blink', 'cc', 'gpu', 'renderer.scheduler', 'v8', - 'toplevel', - 'disabled-by-default-cc.debug', - 'disabled-by-default-cc.debug.picture', - 'disabled-by-default-cc.debug.display_items']}, - {title: 'Manually select settings', - categoryFilter: []} - ]; - var RECORDING_MODES = [ - {'label': 'Record until full', - 'value': 'record-until-full'}, - {'label': 'Record continuously', - 'value': 'record-continuously'}, - {'label': 'Record as much as possible', - 'value': 'record-as-much-as-possible'}]; - var DEFAULT_RECORD_MODE = 'record-until-full'; - var DEFAULT_CONTINUOUS_TRACING = true; - var DEFAULT_SYSTEM_TRACING = true; - var DEFAULT_SAMPLING_TRACING = false; - - RecordSelectionDialog.prototype = { - __proto__: tr.ui.b.Overlay.prototype, - - decorate: function() { - tr.ui.b.Overlay.prototype.decorate.call(this); - this.title = 'Record a new trace...'; - - this.classList.add('record-dialog-overlay'); - - var node = - tr.ui.b.instantiateTemplate('#record-selection-dialog-template', - THIS_DOC); - this.appendChild(node); - - this.recordButtonEl_ = document.createElement('button'); - this.recordButtonEl_.textContent = 'Record'; - this.recordButtonEl_.addEventListener( - 'click', - this.onRecordButtonClicked_.bind(this)); - this.recordButtonEl_.style.fontSize = '110%'; - this.buttons.appendChild(this.recordButtonEl_); - - this.categoriesView_ = this.querySelector('.categories-column-view'); - this.presetsEl_ = this.querySelector('.category-presets'); - this.presetsEl_.appendChild(tr.ui.b.createOptionGroup( - this, 'currentlyChosenPreset', - 'about_tracing.record_selection_dialog_preset', - DEFAULT_PRESETS[0].categoryFilter, - DEFAULT_PRESETS.map(function(p) { - return { label: p.title, value: p.categoryFilter }; - }))); - - this.tracingRecordModeSltr_ = tr.ui.b.createSelector( - this, 'tracingRecordMode', - 'recordSelectionDialog.tracingRecordMode', - DEFAULT_RECORD_MODE, RECORDING_MODES); - - this.systemTracingBn_ = tr.ui.b.createCheckBox( - undefined, undefined, - 'recordSelectionDialog.useSystemTracing', DEFAULT_SYSTEM_TRACING, - 'System tracing'); - this.samplingTracingBn_ = tr.ui.b.createCheckBox( - undefined, undefined, - 'recordSelectionDialog.useSampling', DEFAULT_SAMPLING_TRACING, - 'State sampling'); - this.tracingModesContainerEl_ = this.querySelector('.tracing-modes'); - this.tracingModesContainerEl_.appendChild(this.tracingRecordModeSltr_); - this.tracingModesContainerEl_.appendChild(this.systemTracingBn_); - this.tracingModesContainerEl_.appendChild(this.samplingTracingBn_); - - - this.enabledCategoriesContainerEl_ = - this.querySelector('.default-enabled-categories .categories'); - - this.disabledCategoriesContainerEl_ = - this.querySelector('.default-disabled-categories .categories'); - - this.createGroupSelectButtons_( - this.querySelector('.default-enabled-categories')); - this.createGroupSelectButtons_( - this.querySelector('.default-disabled-categories')); - this.createDefaultDisabledWarningDialog_( - this.querySelector('.warning-default-disabled-categories')); - this.editCategoriesOpened_ = false; - - // TODO(chrishenry): When used with tr.ui.b.Overlay (such as in - // chrome://tracing, this does not yet look quite right due to - // the 10px overlay content padding (but it's good enough). - this.infoBarGroup_ = this.querySelector('tr-ui-b-info-bar-group'); - - this.addEventListener('visible-change', this.onVisibleChange_.bind(this)); - }, - - set supportsSystemTracing(s) { - if (s) { - this.systemTracingBn_.style.display = undefined; - } else { - this.systemTracingBn_.style.display = 'none'; - this.useSystemTracing = false; - } - }, - - get tracingRecordMode() { - return this.tracingRecordModeSltr_.selectedValue; - }, - set tracingRecordMode(value) { - this.tracingRecordMode_ = value; - }, - - get useSystemTracing() { - return this.systemTracingBn_.checked; - }, - set useSystemTracing(value) { - this.systemTracingBn_.checked = !!value; - }, - - get useSampling() { - return this.samplingTracingBn_.checked; - }, - set useSampling(value) { - this.samplingTracingBn_.checked = !!value; - }, - - set categories(c) { - if (!(c instanceof Array)) - throw new Error('categories must be an array'); - this.categories_ = c; - - for (var i = 0; i < this.categories_.length; i++) { - var split = this.categories_[i].split(','); - this.categories_[i] = split.shift(); - if (split.length > 0) - this.categories_ = this.categories_.concat(split); - } - }, - - set settings_key(k) { - this.settings_key_ = k; - }, - - set settings(s) { - throw new Error('Dont use this!'); - }, - - usingPreset_: function() { - return this.currentlyChosenPreset_.length > 0; - }, - - get currentlyChosenPreset() { - return this.currentlyChosenPreset_; - }, - - set currentlyChosenPreset(preset) { - if (!(preset instanceof Array)) - throw new Error('RecordSelectionDialog.currentlyChosenPreset:' + - ' preset must be an array.'); - this.currentlyChosenPreset_ = preset; - - if (this.usingPreset_()) { - this.changeEditCategoriesState_(false); - } else { - this.updateCategoryColumnView_(true); - this.changeEditCategoriesState_(true); - } - this.updateManualSelectionView_(); - this.updatePresetDescription_(); - }, - - updateManualSelectionView_: function() { - var classList = this.categoriesView_.classList; - if (!this.usingPreset_()) { - classList.remove('categories-column-view-hidden'); - } else { - if (this.editCategoriesOpened_) - classList.remove('categories-column-view-hidden'); - else - classList.add('categories-column-view-hidden'); - } - }, - - updateCategoryColumnView_: function(shouldReadFromSettings) { - var categorySet = this.querySelectorAll('.categories'); - for (var i = 0; i < categorySet.length; ++i) { - var categoryGroup = categorySet[i].children; - for (var j = 0; j < categoryGroup.length; ++j) { - var categoryEl = categoryGroup[j].children[0]; - categoryEl.checked = shouldReadFromSettings ? - tr.b.Settings.get(categoryEl.value, false, this.settings_key_) : - false; - } - } - }, - - onClickEditCategories: function() { - if (!this.usingPreset_()) - return; - - if (!this.editCategoriesOpened_) { - this.updateCategoryColumnView_(false); - for (var i = 0; i < this.currentlyChosenPreset_.length; ++i) { - var categoryEl = this.querySelector('#' + - this.currentlyChosenPreset_[i]); - if (!categoryEl) - continue; - categoryEl.checked = true; - } - } - - this.changeEditCategoriesState_(!this.editCategoriesOpened_); - this.updateManualSelectionView_(); - this.recordButtonEl_.focus(); - }, - - changeEditCategoriesState_: function(editCategoriesState) { - var presetOptionsGroup = this.querySelector('.labeled-option-group'); - if (!presetOptionsGroup) - return; - - this.editCategoriesOpened_ = editCategoriesState; - if (this.editCategoriesOpened_) - presetOptionsGroup.classList.add('categories-expanded'); - else - presetOptionsGroup.classList.remove('categories-expanded'); - }, - - updatePresetDescription_: function() { - var description = this.querySelector('.category-description'); - if (this.usingPreset_()) { - description.innerText = this.currentlyChosenPreset_; - description.classList.remove('category-description-hidden'); - } else { - description.innerText = ''; - if (!description.classList.contains('category-description-hidden')) - description.classList.add('category-description-hidden'); - } - }, - - categoryFilter: function() { - if (this.usingPreset_()) { - var categories = []; - var allCategories = this.allCategories_(); - for (var category in allCategories) { - var disabled = category.indexOf('disabled-by-default-') == 0; - if (this.currentlyChosenPreset_.indexOf(category) >= 0) { - if (disabled) - categories.push(category); - } else { - if (!disabled) - categories.push('-' + category); - } - } - return categories.join(','); - } - - var categories = this.unselectedCategories_(); - var categories_length = categories.length; - var negated_categories = []; - for (var i = 0; i < categories_length; ++i) { - // Skip any category with a , as it will cause issues when we negate. - // Both sides should have been added as separate categories, these can - // only come from settings. - if (categories[i].match(/,/)) - continue; - negated_categories.push('-' + categories[i]); - } - categories = negated_categories.join(','); - - var disabledCategories = this.enabledDisabledByDefaultCategories_(); - disabledCategories = disabledCategories.join(','); - - var results = []; - if (categories !== '') - results.push(categories); - if (disabledCategories !== '') - results.push(disabledCategories); - return results.join(','); - }, - - clickRecordButton: function() { - this.recordButtonEl_.click(); - }, - - onRecordButtonClicked_: function() { - this.visible = false; - tr.b.dispatchSimpleEvent(this, 'recordclick'); - return false; - }, - - collectInputs_: function(inputs, isChecked) { - var inputs_length = inputs.length; - var categories = []; - for (var i = 0; i < inputs_length; ++i) { - var input = inputs[i]; - if (input.checked === isChecked) - categories.push(input.value); - } - return categories; - }, - - unselectedCategories_: function() { - var inputs = - this.enabledCategoriesContainerEl_.querySelectorAll('input'); - return this.collectInputs_(inputs, false); - }, - - enabledDisabledByDefaultCategories_: function() { - var inputs = - this.disabledCategoriesContainerEl_.querySelectorAll('input'); - return this.collectInputs_(inputs, true); - }, - - onVisibleChange_: function() { - if (this.visible) - this.updateForm_(); - }, - - buildInputs_: function(inputs, checkedDefault, parent) { - var inputs_length = inputs.length; - for (var i = 0; i < inputs_length; i++) { - var category = inputs[i]; - - var inputEl = document.createElement('input'); - inputEl.type = 'checkbox'; - inputEl.id = category; - inputEl.value = category; - - inputEl.checked = tr.b.Settings.get( - category, checkedDefault, this.settings_key_); - inputEl.onclick = this.updateSetting_.bind(this); - - var labelEl = document.createElement('label'); - labelEl.textContent = category.replace('disabled-by-default-', ''); - labelEl.setAttribute('for', category); - - var divEl = document.createElement('div'); - divEl.appendChild(inputEl); - divEl.appendChild(labelEl); - - parent.appendChild(divEl); - } - }, - - allCategories_: function() { - // Dedup the categories. We may have things in settings that are also - // returned when we query the category list. - var categorySet = {}; - var allCategories = - this.categories_.concat(tr.b.Settings.keys(this.settings_key_)); - var allCategoriesLength = allCategories.length; - for (var i = 0; i < allCategoriesLength; ++i) - categorySet[allCategories[i]] = true; - return categorySet; - }, - - updateForm_: function() { - function ignoreCaseCompare(a, b) { - return a.toLowerCase().localeCompare(b.toLowerCase()); - } - - this.enabledCategoriesContainerEl_.innerHTML = ''; // Clear old categories - this.disabledCategoriesContainerEl_.innerHTML = ''; - - this.recordButtonEl_.focus(); - - var allCategories = this.allCategories_(); - var categories = []; - var disabledCategories = []; - for (var category in allCategories) { - if (category.indexOf('disabled-by-default-') == 0) - disabledCategories.push(category); - else - categories.push(category); - } - disabledCategories = disabledCategories.sort(ignoreCaseCompare); - categories = categories.sort(ignoreCaseCompare); - - if (this.categories_.length == 0) { - this.infoBarGroup_.addMessage( - 'No categories found; recording will use default categories.'); - } - - this.buildInputs_(categories, true, this.enabledCategoriesContainerEl_); - - if (disabledCategories.length > 0) { - this.disabledCategoriesContainerEl_.hidden = false; - this.buildInputs_(disabledCategories, false, - this.disabledCategoriesContainerEl_); - } - }, - - updateSetting_: function(e) { - var checkbox = e.target; - tr.b.Settings.set(checkbox.value, checkbox.checked, this.settings_key_); - - // Change the current record mode to 'Manually select settings' from - // preset mode if and only if currently user is in preset record mode - // and user selects/deselects any category in 'Edit Categories' mode. - if (this.usingPreset_()) { - this.currentlyChosenPreset_ = [] /* manually select settings */; - var categoryEl = this.querySelector( - '#category-preset-Manually-select-settings'); - categoryEl.checked = true; - var description = this.querySelector('.category-description'); - description.innerText = ''; - description.classList.add('category-description-hidden'); - } - }, - - createGroupSelectButtons_: function(parent) { - var flipInputs = function(dir) { - var inputs = parent.querySelectorAll('input'); - for (var i = 0; i < inputs.length; i++) { - if (inputs[i].checked === dir) - continue; - // click() is used so the settings will be correclty stored. Setting - // checked does not trigger the onclick (or onchange) callback. - inputs[i].click(); - } - }; - - var allBtn = parent.querySelector('.all-btn'); - allBtn.onclick = function(evt) { - flipInputs(true); - evt.preventDefault(); - }; - - var noneBtn = parent.querySelector('.none-btn'); - noneBtn.onclick = function(evt) { - flipInputs(false); - evt.preventDefault(); - }; - }, - - setWarningDialogOverlayText_: function(messages) { - var contentDiv = document.createElement('div'); - - for (var i = 0; i < messages.length; ++i) { - var messageDiv = document.createElement('div'); - messageDiv.textContent = messages[i]; - contentDiv.appendChild(messageDiv); - } - this.warningOverlay_.textContent = ''; - this.warningOverlay_.appendChild(contentDiv); - }, - - createDefaultDisabledWarningDialog_: function(warningLink) { - function onClickHandler(evt) { - this.warningOverlay_ = tr.ui.b.Overlay(); - this.warningOverlay_.parentEl_ = this; - this.warningOverlay_.title = 'Warning...'; - this.warningOverlay_.userCanClose = true; - this.warningOverlay_.visible = true; - - this.setWarningDialogOverlayText_([ - 'Enabling the default disabled categories may have', - 'performance and memory impact while tr.c.' - ]); - - evt.preventDefault(); - } - warningLink.onclick = onClickHandler.bind(this); - } - }; - - return { - RecordSelectionDialog: RecordSelectionDialog - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_selection_dialog_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_selection_dialog_test.html deleted file mode 100644 index 1142f6e6035..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/record_selection_dialog_test.html +++ /dev/null @@ -1,386 +0,0 @@ -<!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/settings.html"> -<link rel="import" href="/tracing/core/test_utils.html"> -<link rel="import" href="/tracing/ui/extras/about_tracing/record_selection_dialog.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantitate', function() { - var showButton = document.createElement('button'); - showButton.textContent = 'Show record selection dialog'; - this.addHTMLOutput(showButton); - - showButton.addEventListener('click', function(e) { - e.stopPropagation(); - - var categories = []; - for (var i = 0; i < 30; i++) - categories.push('cat-' + i); - for (var i = 0; i < 20; i++) - categories.push('disabled-by-default-cat-' + i); - categories.push( - 'really-really-really-really-really-really-very-loong-cat'); - categories.push('first,second,third'); - categories.push('cc,disabled-by-default-cc.debug'); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = categories; - dlg.settings_key = 'key'; - dlg.visible = true; - }); - }); - - test('recordSelectionDialog_splitCategories', function() { - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = - ['cc,disabled-by-default-one,cc.debug', 'two,three', 'three']; - dlg.settings_key = 'key'; - dlg.currentlyChosenPreset = []; - dlg.updateForm_(); - - var expected = - ['"cc"', '"cc.debug"', '"disabled-by-default-one"', '"three"', '"two"']; - - var labels = dlg.querySelectorAll('.categories input'); - var results = []; - for (var i = 0; i < labels.length; i++) { - results.push('"' + labels[i].value + '"'); - } - results = results.sort(); - - assert.deepEqual(results, expected); - }); - - test('recordSelectionDialog_UpdateForm_NoSettings', function() { - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-one', 'two', 'three']; - dlg.settings_key = 'key'; - dlg.currentlyChosenPreset = []; - dlg.updateForm_(); - - var checkboxes = dlg.querySelectorAll('.categories input'); - assert.equal(checkboxes.length, 3); - assert.equal(checkboxes[0].id, 'three'); - assert.equal(checkboxes[0].value, 'three'); - assert.isTrue(checkboxes[0].checked); - assert.equal(checkboxes[1].id, 'two'); - assert.equal(checkboxes[1].value, 'two'); - assert.isTrue(checkboxes[1].checked); - assert.equal(checkboxes[2].id, 'disabled-by-default-one'); - assert.equal(checkboxes[2].value, 'disabled-by-default-one'); - assert.isFalse(checkboxes[2].checked); - - assert.equal(dlg.categoryFilter(), ''); - - var labels = dlg.querySelectorAll('.categories label'); - assert.equal(labels.length, 3); - assert.equal(labels[0].textContent, 'three'); - assert.equal(labels[1].textContent, 'two'); - assert.equal(labels[2].textContent, 'one'); - }); - - test('recordSelectionDialog_UpdateForm_Settings', function() { - tr.b.Settings.set('two', true, 'categories'); - tr.b.Settings.set('three', false, 'categories'); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-one']; - dlg.settings_key = 'categories'; - dlg.currentlyChosenPreset = []; - dlg.updateForm_(); - - var checkboxes = dlg.querySelectorAll('.categories input'); - assert.equal(checkboxes.length, 3); - assert.equal(checkboxes[0].id, 'three'); - assert.equal(checkboxes[0].value, 'three'); - assert.isFalse(checkboxes[0].checked); - assert.equal(checkboxes[1].id, 'two'); - assert.equal(checkboxes[1].value, 'two'); - assert.isTrue(checkboxes[1].checked); - assert.equal(checkboxes[2].id, 'disabled-by-default-one'); - assert.equal(checkboxes[2].value, 'disabled-by-default-one'); - assert.isFalse(checkboxes[2].checked); - - assert.equal(dlg.categoryFilter(), '-three'); - - var labels = dlg.querySelectorAll('.categories label'); - assert.equal(labels.length, 3); - assert.equal(labels[0].textContent, 'three'); - assert.equal(labels[1].textContent, 'two'); - assert.equal(labels[2].textContent, 'one'); - }); - - test('recordSelectionDialog_UpdateForm_DisabledByDefault', function() { - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-bar', 'baz']; - dlg.settings_key = 'categories'; - dlg.currentlyChosenPreset = []; - dlg.updateForm_(); - - assert.equal(dlg.categoryFilter(), ''); - - var inputs = - dlg.querySelector('input#disabled-by-default-bar').click(); - - assert.equal(dlg.categoryFilter(), 'disabled-by-default-bar'); - - assert.isFalse( - tr.b.Settings.get('disabled-by-default-foo', false, 'categories')); - }); - - test('selectAll', function() { - tr.b.Settings.set('two', true, 'categories'); - tr.b.Settings.set('three', false, 'categories'); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-one']; - dlg.settings_key = 'categories'; - dlg.currentlyChosenPreset = []; - dlg.updateForm_(); - }); - - test('selectNone', function() { - tr.b.Settings.set('two', true, 'categories'); - tr.b.Settings.set('three', false, 'categories'); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-one']; - dlg.settings_key = 'categories'; - dlg.currentlyChosenPreset = []; - dlg.updateForm_(); - - // Enables the three option, two already enabled. - dlg.querySelector('.default-enabled-categories .all-btn').click(); - assert.equal(dlg.categoryFilter(), ''); - assert.isTrue(tr.b.Settings.get('three', false, 'categories')); - - // Disables three and two. - dlg.querySelector('.default-enabled-categories .none-btn').click(); - assert.equal(dlg.categoryFilter(), '-three,-two'); - assert.isFalse(tr.b.Settings.get('two', false, 'categories')); - assert.isFalse(tr.b.Settings.get('three', false, 'categories')); - - // Turn categories back on so they can be ignored. - dlg.querySelector('.default-enabled-categories .all-btn').click(); - - // Enables disabled category. - dlg.querySelector('.default-disabled-categories .all-btn').click(); - assert.equal(dlg.categoryFilter(), 'disabled-by-default-one'); - assert.isTrue( - tr.b.Settings.get('disabled-by-default-one', false, 'categories')); - - // Turn disabled by default back off. - dlg.querySelector('.default-disabled-categories .none-btn').click(); - assert.equal(dlg.categoryFilter(), ''); - assert.isFalse( - tr.b.Settings.get('disabled-by-default-one', false, 'categories')); - }); - - test('recordSelectionDialog_noPreset', function() { - tr.b.Settings.set('about_tracing.record_selection_dialog_preset', []); - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - assert.isFalse(dlg.usingPreset_()); - }); - - test('recordSelectionDialog_defaultPreset', function() { - tr.b.Settings.set('two', true, 'categories'); - tr.b.Settings.set('three', false, 'categories'); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-one']; - dlg.settings_key = 'categories'; - // Note: currentlyChosenPreset is not set here, so the default is used. - dlg.updateForm_(); - - // Make sure the default filter is returned. - assert.equal(dlg.categoryFilter(), '-three,-two'); - - // Make sure the default tracing types are returned. - assert.equal(dlg.tracingRecordMode, 'record-until-full'); - assert.isTrue(dlg.useSystemTracing); - assert.isFalse(dlg.useSampling); - - // Make sure the manual settings are not visible. - var classList = dlg.categoriesView_.classList; - assert.isTrue(classList.contains('categories-column-view-hidden')); - - // Verify manual settings do not modify the checkboxes. - var checkboxes = dlg.querySelectorAll('.categories input'); - assert.equal(checkboxes.length, 3); - assert.equal(checkboxes[0].id, 'three'); - assert.equal(checkboxes[0].value, 'three'); - assert.isFalse(checkboxes[0].checked); - assert.equal(checkboxes[1].id, 'two'); - assert.equal(checkboxes[1].value, 'two'); - assert.isTrue(checkboxes[1].checked); - assert.equal(checkboxes[2].id, 'disabled-by-default-one'); - assert.equal(checkboxes[2].value, 'disabled-by-default-one'); - assert.isFalse(checkboxes[2].checked); - }); - - test('recordSelectionDialog_editPreset', function() { - function createDialog() { - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['one', 'two', 'disabled-by-default-three']; - dlg.settings_key = 'categories'; - // Note: currentlyChosenPreset is not set here, so the default is used. - dlg.updateForm_(); - return dlg; - } - - // After the dialog is created, it should be using the default preset. - var dlg = createDialog(); - assert.strictEqual(dlg.categoryFilter(), '-one,-two'); - assert.isTrue(dlg.usingPreset_()); - assert.isFalse( - dlg.querySelector('#category-preset-Manually-select-settings').checked); - - // After clicking on "Edit Categories", the default preset should still be - // used. - dlg.onClickEditCategories(); - assert.strictEqual(dlg.categoryFilter(), '-one,-two'); - assert.isTrue(dlg.usingPreset_()); - assert.isFalse( - dlg.querySelector('#category-preset-Manually-select-settings').checked); - - // After clicking on category checkbox(es), the mode should be changed to - // "Manually select settings". - Array.prototype.forEach.call(dlg.querySelectorAll('.categories input'), - checkbox => checkbox.click()); - assert.strictEqual(dlg.categoryFilter(), 'disabled-by-default-three'); - assert.isFalse(dlg.usingPreset_()); - assert.isTrue( - dlg.querySelector('#category-preset-Manually-select-settings').checked); - - // After the dialog is opened again, it should be using the default preset. - // More importantly, the default preset should NOT be modified. - dlg = createDialog(); - assert.strictEqual(dlg.categoryFilter(), '-one,-two'); - assert.isTrue(dlg.usingPreset_()); - assert.isFalse( - dlg.querySelector('#category-preset-Manually-select-settings').checked); - }); - - test('recordSelectionDialog_changePresets', function() { - tr.b.Settings.set('two', true, 'categories'); - tr.b.Settings.set('three', false, 'categories'); - tr.b.Settings.set('disabled-by-default-cc.debug', true, 'categories'); - tr.b.Settings.set('recordSelectionDialog.tracingRecordMode', - 'record-as-much-as-possible'); - tr.b.Settings.set('recordSelectionDialog.useSystemTracing', true); - tr.b.Settings.set('recordSelectionDialog.useSampling', false); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-one']; - dlg.settings_key = 'categories'; - // Note: currentlyChosenPreset is not set here, so the default is used. - dlg.updateForm_(); - - // Preset mode is on. - assert.isTrue(dlg.usingPreset_()); - - // Make sure the default filter is returned. - assert.equal(dlg.categoryFilter(), - '-three,-two'); - - // Make sure the default tracing types are returned. - assert.equal(dlg.tracingRecordMode, 'record-as-much-as-possible'); - assert.isTrue(dlg.useSystemTracing); - assert.isFalse(dlg.useSampling); - - // Make sure the manual settings are not visible. - var classList = dlg.categoriesView_.classList; - assert.isTrue(classList.contains('categories-column-view-hidden')); - - // Switch to manual settings and verify the default values are not returned. - dlg.currentlyChosenPreset = []; - - // Preset mode is off. - assert.isFalse(dlg.usingPreset_()); - - // Make sure the default filter is returned. - assert.equal(dlg.categoryFilter(), '-three,disabled-by-default-cc.debug'); - - // Make sure the tracing types set by catalog are returned. - assert.equal(dlg.tracingRecordMode, 'record-as-much-as-possible'); - assert.isTrue(dlg.useSystemTracing); - assert.isFalse(dlg.useSampling); - assert.isFalse(classList.contains('categories-column-view-hidden')); - - // Switch to the graphics, rendering, and rasterization preset. - dlg.currentlyChosenPreset = ['blink', 'cc', 'renderer', - 'disabled-by-default-cc.debug']; - assert.equal(dlg.categoryFilter(), - 'disabled-by-default-cc.debug,-three,-two'); - }); - - test('recordSelectionDialog_savedPreset', function() { - tr.b.Settings.set('two', true, 'categories'); - tr.b.Settings.set('three', false, 'categories'); - tr.b.Settings.set('recordSelectionDialog.tracingRecordMode', - 'record-continuously'); - tr.b.Settings.set('recordSelectionDialog.useSystemTracing', true); - tr.b.Settings.set('recordSelectionDialog.useSampling', true); - tr.b.Settings.set('tr.ui.e.about_tracing.record_selection_dialog_preset', - ['blink', 'cc', 'renderer', 'cc.debug']); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.categories = ['disabled-by-default-one']; - dlg.settings_key = 'categories'; - dlg.updateForm_(); - - // Make sure the correct filter is returned. - assert.equal(dlg.categoryFilter(), '-three,-two'); - - // Make sure the correct tracing types are returned. - assert.equal(dlg.tracingRecordMode, 'record-continuously'); - assert.isTrue(dlg.useSystemTracing); - assert.isTrue(dlg.useSampling); - - // Make sure the manual settings are not visible. - var classList = dlg.categoriesView_.classList; - assert.isTrue(classList.contains('categories-column-view-hidden')); - - // Switch to manual settings and verify the default values are not returned. - dlg.currentlyChosenPreset = []; - assert.equal(dlg.categoryFilter(), '-three'); - assert.equal(dlg.tracingRecordMode, 'record-continuously'); - assert.isTrue(dlg.useSystemTracing); - assert.isTrue(dlg.useSampling); - assert.isFalse(classList.contains('categories-column-view-hidden')); - }); - - test('recordSelectionDialog_categoryFilters', function() { - tr.b.Settings.set('default1', true, 'categories'); - tr.b.Settings.set('disabled1', false, 'categories'); - tr.b.Settings.set('disabled-by-default-cc.disabled2', false, 'categories'); - tr.b.Settings.set('input', true, 'categories'); - tr.b.Settings.set('blink', true, 'categories'); - tr.b.Settings.set('cc', false, 'categories'); - tr.b.Settings.set('disabled-by-default-cc.debug', true, 'categories'); - - var dlg = new tr.ui.e.about_tracing.RecordSelectionDialog(); - dlg.settings_key = 'categories'; - dlg.categories = []; - dlg.currentlyChosenPreset = []; - dlg.updateForm_(); - - assert.equal(dlg.categoryFilter(), - '-cc,-disabled1,disabled-by-default-cc.debug'); - - // Switch to the graphics, rendering, and rasterization preset. - dlg.currentlyChosenPreset = ['blink', 'cc', 'renderer', - 'disabled-by-default-cc.debug']; - assert.equal(dlg.categoryFilter(), - '-default1,disabled-by-default-cc.debug,-disabled1,-input'); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/tracing_controller_client.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/tracing_controller_client.html deleted file mode 100644 index 8c34b00e859..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/tracing_controller_client.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/base.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.e.about_tracing', function() { - /** - * Communicates with content/browser/tracing_controller_impl.cc - * - * @constructor - */ - function TracingControllerClient() { } - - TracingControllerClient.prototype = { - beginMonitoring: function(monitoringOptions) { }, - endMonitoring: function() { }, - captureMonitoring: function() { }, - getMonitoringStatus: function() { }, - getCategories: function() { }, - beginRecording: function(recordingOptions) { }, - beginGetBufferPercentFull: function() { }, - endRecording: function() { }, - defaultTraceName: function() { } - }; - - return { - TracingControllerClient: TracingControllerClient - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/xhr_based_tracing_controller_client.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/xhr_based_tracing_controller_client.html deleted file mode 100644 index c7c68cc8483..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/about_tracing/xhr_based_tracing_controller_client.html +++ /dev/null @@ -1,113 +0,0 @@ -<!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/tracing_controller_client.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.about_tracing', function() { - var Base64 = tr.b.Base64; - - function beginXhr(method, path, data) { - if (data === undefined) - data = null; - return new Promise(function(resolve, reject) { - var req = new XMLHttpRequest(); - if (method != 'POST' && data !== null) - throw new Error('Non-POST should have data==null'); - req.open(method, path, true); - req.onreadystatechange = function(e) { - if (req.readyState == 4) { - window.setTimeout(function() { - if (req.status == 200 && req.responseText != '##ERROR##') { - resolve(req.responseText); - } else { - reject(new Error('Error occured at ' + path)); - } - }, 0); - } - }; - req.send(data); - }); - } - - /** - * @constructor - */ - function XhrBasedTracingControllerClient() { } - - XhrBasedTracingControllerClient.prototype = { - __proto__: tr.ui.e.about_tracing.TracingControllerClient.prototype, - - beginMonitoring: function(monitoringOptions) { - var monitoringOptionsB64 = Base64.btoa(JSON.stringify(monitoringOptions)); - return beginXhr('GET', '/json/begin_monitoring?' + monitoringOptionsB64); - }, - - endMonitoring: function() { - return beginXhr('GET', '/json/end_monitoring'); - }, - - captureMonitoring: function() { - return beginXhr('GET', '/json/capture_monitoring_compressed').then( - function(data) { - var decoded_size = Base64.getDecodedBufferLength(data); - var buffer = new ArrayBuffer(decoded_size); - Base64.DecodeToTypedArray(data, new DataView(buffer)); - return buffer; - } - ); - }, - - getMonitoringStatus: function() { - return beginXhr('GET', '/json/get_monitoring_status').then( - function(monitoringOptionsB64) { - return JSON.parse(Base64.atob(monitoringOptionsB64)); - }); - }, - - getCategories: function() { - return beginXhr('GET', '/json/categories').then( - function(json) { - return JSON.parse(json); - }); - }, - - beginRecording: function(recordingOptions) { - var recordingOptionsB64 = Base64.btoa(JSON.stringify(recordingOptions)); - return beginXhr('GET', '/json/begin_recording?' + - recordingOptionsB64); - }, - - beginGetBufferPercentFull: function() { - return beginXhr('GET', '/json/get_buffer_percent_full'); - }, - - endRecording: function() { - return beginXhr('GET', '/json/end_recording_compressed').then( - function(data) { - var decoded_size = Base64.getDecodedBufferLength(data); - var buffer = new ArrayBuffer(decoded_size); - Base64.DecodeToTypedArray(data, new DataView(buffer)); - return buffer; - } - ); - }, - - defaultTraceName: function() { - return 'trace.json.gz'; - } - }; - - return { - XhrBasedTracingControllerClient: XhrBasedTracingControllerClient - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/cc.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/cc.html deleted file mode 100644 index 79ba7e593c0..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/cc.html +++ /dev/null @@ -1,14 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/extras/chrome/cc/cc.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/display_item_list_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/raster_task_selection.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/raster_task_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/tile_view.html"> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_debugger.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_debugger.html deleted file mode 100644 index 55a028ce4c3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_debugger.html +++ /dev/null @@ -1,467 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/extras/chrome/cc/picture.html"> -<link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> -<link rel="import" href="/tracing/ui/base/drag_handle.html"> -<link rel="import" href="/tracing/ui/base/hotkey_controller.html"> -<link rel="import" href="/tracing/ui/base/info_bar.html"> -<link rel="import" href="/tracing/ui/base/list_view.html"> -<link rel="import" href="/tracing/ui/base/mouse_mode_selector.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/extras/chrome/cc/display_item_list_item.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html"> - -<template id="tr-ui-e-chrome-cc-display-item-debugger-template"> - <style> - * /deep/ tr-ui-e-chrome-cc-display-item-debugger { - -webkit-flex: 1 1 auto; - display: -webkit-flex; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel { - -webkit-flex-direction: column; - display: -webkit-flex; - min-width: 300px; - overflow-y: auto; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel > - display-item-info { - -webkit-flex: 1 1 auto; - padding-top: 2px; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel > - display-item-info .title { - font-weight: bold; - margin-left: 5px; - margin-right: 5px; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel > - display-item-info .export { - margin: 5px; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > tr-ui-b-drag-handle { - -webkit-flex: 0 0 auto; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel { - -webkit-flex: 1 1 auto; - display: -webkit-flex; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > left-panel > - display-item-info > header { - border-bottom: 1px solid #555; - } - - /*************************************************/ - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel > - tr-ui-e-chrome-cc-picture-ops-list-view.hasPictureOps { - display: block; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel > - tr-ui-b-drag-handle.hasPictureOps { - display: block; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel > - tr-ui-e-chrome-cc-picture-ops-list-view { - display: none; - overflow-y: auto; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger > right-panel > - tr-ui-b-drag-handle { - display: none; - } - - * /deep/ tr-ui-e-chrome-cc-display-item-debugger raster-area { - -webkit-flex: 1 1 auto; - background-color: #ddd; - min-height: 200px; - min-width: 200px; - overflow-y: auto; - padding-left: 5px; - } - </style> - - <left-panel> - <display-item-info> - <header> - <span class='title'>Display Item List</span> - <span class='size'></span> - <div class='export'> - <input class='dlfilename' type='text' value='displayitemlist.json' /> - <button class='dlexport'>Export display item list</button> - </div> - <div class='export'> - <input class='skpfilename' type='text' value='skpicture.skp' /> - <button class='skpexport'>Export list as SkPicture</button> - </div> - </header> - </display-item-info> - </left-panel> - <right-panel> - <raster-area><canvas></canvas></raster-area> - </right-panel> -</template> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - var THIS_DOC = document.currentScript.ownerDocument; - - /** - * DisplayItemDebugger is a view of a DisplayItemListSnapshot for inspecting - * a display item list and the pictures within it. - * - * @constructor - */ - var DisplayItemDebugger = tr.ui.b.define( - 'tr-ui-e-chrome-cc-display-item-debugger'); - - DisplayItemDebugger.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - var node = tr.ui.b.instantiateTemplate( - '#tr-ui-e-chrome-cc-display-item-debugger-template', THIS_DOC); - - this.appendChild(node); - - this.pictureAsImageData_ = undefined; - this.zoomScaleValue_ = 1; - - this.sizeInfo_ = this.querySelector('.size'); - this.rasterArea_ = this.querySelector('raster-area'); - this.rasterCanvas_ = this.rasterArea_.querySelector('canvas'); - this.rasterCtx_ = this.rasterCanvas_.getContext('2d'); - - this.trackMouse_(); - - this.displayItemInfo_ = this.querySelector('display-item-info'); - this.displayItemInfo_.addEventListener( - 'click', this.onDisplayItemInfoClick_.bind(this), false); - - this.displayItemListView_ = new tr.ui.b.ListView(); - this.displayItemListView_.addEventListener('selection-changed', - this.onDisplayItemListSelection_.bind(this)); - this.displayItemInfo_.appendChild(this.displayItemListView_); - - this.displayListFilename_ = this.querySelector('.dlfilename'); - this.displayListExportButton_ = this.querySelector('.dlexport'); - this.displayListExportButton_.addEventListener( - 'click', this.onExportDisplayListClicked_.bind(this)); - - this.skpFilename_ = this.querySelector('.skpfilename'); - this.skpExportButton_ = this.querySelector('.skpexport'); - this.skpExportButton_.addEventListener( - 'click', this.onExportSkPictureClicked_.bind(this)); - - var leftPanel = this.querySelector('left-panel'); - - var middleDragHandle = document.createElement('tr-ui-b-drag-handle'); - middleDragHandle.horizontal = false; - middleDragHandle.target = leftPanel; - - var rightPanel = this.querySelector('right-panel'); - - this.infoBar_ = document.createElement('tr-ui-b-info-bar'); - this.rasterArea_.insertBefore(this.infoBar_, this.rasterCanvas_); - - this.insertBefore(middleDragHandle, rightPanel); - - this.picture_ = undefined; - - this.pictureOpsListView_ = new tr.ui.e.chrome.cc.PictureOpsListView(); - rightPanel.insertBefore(this.pictureOpsListView_, this.rasterArea_); - - this.pictureOpsListDragHandle_ = - document.createElement('tr-ui-b-drag-handle'); - this.pictureOpsListDragHandle_.horizontal = false; - this.pictureOpsListDragHandle_.target = this.pictureOpsListView_; - rightPanel.insertBefore(this.pictureOpsListDragHandle_, this.rasterArea_); - }, - - get picture() { - return this.picture_; - }, - - set displayItemList(displayItemList) { - this.displayItemList_ = displayItemList; - this.picture = this.displayItemList_; - - this.displayItemListView_.clear(); - this.displayItemList_.items.forEach(function(item) { - var listItem = document.createElement( - 'tr-ui-e-chrome-cc-display-item-list-item'); - listItem.data = item; - this.displayItemListView_.appendChild(listItem); - }.bind(this)); - }, - - set picture(picture) { - this.picture_ = picture; - - // Hide the ops list if we are showing the "main" display item list. - var showOpsList = picture && picture !== this.displayItemList_; - this.updateDrawOpsList_(showOpsList); - - if (picture) { - var size = this.getRasterCanvasSize_(); - this.rasterCanvas_.width = size.width; - this.rasterCanvas_.height = size.height; - } - - var bounds = this.rasterArea_.getBoundingClientRect(); - var selectorBounds = this.mouseModeSelector_.getBoundingClientRect(); - this.mouseModeSelector_.pos = { - x: (bounds.right - selectorBounds.width - 10), - y: bounds.top - }; - - this.rasterize_(); - - this.scheduleUpdateContents_(); - }, - - getRasterCanvasSize_: function() { - var style = window.getComputedStyle(this.rasterArea_); - var width = parseInt(style.width); - var height = parseInt(style.height); - if (this.picture_) { - width = Math.max(width, this.picture_.layerRect.width); - height = Math.max(height, this.picture_.layerRect.height); - } - - return { - width: width, - height: height - }; - }, - - scheduleUpdateContents_: function() { - if (this.updateContentsPending_) - return; - this.updateContentsPending_ = true; - tr.b.requestAnimationFrameInThisFrameIfPossible( - this.updateContents_.bind(this) - ); - }, - - updateContents_: function() { - this.updateContentsPending_ = false; - - if (this.picture_) { - this.sizeInfo_.textContent = '(' + - this.picture_.layerRect.width + ' x ' + - this.picture_.layerRect.height + ')'; - } - - // Return if picture hasn't finished rasterizing. - if (!this.pictureAsImageData_) - return; - - this.infoBar_.visible = false; - this.infoBar_.removeAllButtons(); - if (this.pictureAsImageData_.error) { - this.infoBar_.message = 'Cannot rasterize...'; - this.infoBar_.addButton('More info...', function(e) { - var overlay = new tr.ui.b.Overlay(); - overlay.textContent = this.pictureAsImageData_.error; - overlay.visible = true; - e.stopPropagation(); - return false; - }.bind(this)); - this.infoBar_.visible = true; - } - - this.drawPicture_(); - }, - - drawPicture_: function() { - var size = this.getRasterCanvasSize_(); - if (size.width !== this.rasterCanvas_.width) - this.rasterCanvas_.width = size.width; - if (size.height !== this.rasterCanvas_.height) - this.rasterCanvas_.height = size.height; - - this.rasterCtx_.clearRect(0, 0, size.width, size.height); - - if (!this.picture_ || !this.pictureAsImageData_.imageData) - return; - - var imgCanvas = this.pictureAsImageData_.asCanvas(); - var w = imgCanvas.width; - var h = imgCanvas.height; - this.rasterCtx_.drawImage(imgCanvas, 0, 0, w, h, - 0, 0, w * this.zoomScaleValue_, - h * this.zoomScaleValue_); - }, - - rasterize_: function() { - if (this.picture_) { - this.picture_.rasterize( - { - showOverdraw: false - }, - this.onRasterComplete_.bind(this)); - } - }, - - onRasterComplete_: function(pictureAsImageData) { - this.pictureAsImageData_ = pictureAsImageData; - this.scheduleUpdateContents_(); - }, - - onDisplayItemListSelection_: function(e) { - var selected = this.displayItemListView_.selectedElement; - - if (!selected) { - this.picture = this.displayItemList_; - return; - } - - var index = Array.prototype.indexOf.call( - this.displayItemListView_.children, selected); - var displayItem = this.displayItemList_.items[index]; - if (displayItem && displayItem.skp64) - this.picture = new tr.e.cc.Picture( - displayItem.skp64, this.displayItemList_.layerRect); - else - this.picture = undefined; - }, - - onDisplayItemInfoClick_: function(e) { - if (e && e.target == this.displayItemInfo_) { - this.displayItemListView_.selectedElement = undefined; - } - }, - - updateDrawOpsList_: function(showOpsList) { - if (showOpsList) { - this.pictureOpsListView_.picture = this.picture_; - if (this.pictureOpsListView_.numOps > 0) { - this.pictureOpsListView_.classList.add('hasPictureOps'); - this.pictureOpsListDragHandle_.classList.add('hasPictureOps'); - } - } else { - this.pictureOpsListView_.classList.remove('hasPictureOps'); - this.pictureOpsListDragHandle_.classList.remove('hasPictureOps'); - } - }, - - trackMouse_: function() { - this.mouseModeSelector_ = document.createElement( - 'tr-ui-b-mouse-mode-selector'); - this.mouseModeSelector_.targetElement = this.rasterArea_; - this.rasterArea_.appendChild(this.mouseModeSelector_); - - this.mouseModeSelector_.supportedModeMask = - tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; - this.mouseModeSelector_.mode = tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; - this.mouseModeSelector_.defaultMode = tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; - this.mouseModeSelector_.settingsKey = 'pictureDebugger.mouseModeSelector'; - - this.mouseModeSelector_.addEventListener('beginzoom', - this.onBeginZoom_.bind(this)); - this.mouseModeSelector_.addEventListener('updatezoom', - this.onUpdateZoom_.bind(this)); - this.mouseModeSelector_.addEventListener('endzoom', - this.onEndZoom_.bind(this)); - }, - - onBeginZoom_: function(e) { - this.isZooming_ = true; - - this.lastMouseViewPos_ = this.extractRelativeMousePosition_(e); - - e.preventDefault(); - }, - - onUpdateZoom_: function(e) { - if (!this.isZooming_) - return; - - var currentMouseViewPos = this.extractRelativeMousePosition_(e); - - // Take the distance the mouse has moved and we want to zoom at about - // 1/1000th of that speed. 0.01 feels jumpy. This could possibly be tuned - // more if people feel it's too slow. - this.zoomScaleValue_ += - ((this.lastMouseViewPos_.y - currentMouseViewPos.y) * 0.001); - this.zoomScaleValue_ = Math.max(this.zoomScaleValue_, 0.1); - - this.drawPicture_(); - - this.lastMouseViewPos_ = currentMouseViewPos; - }, - - onEndZoom_: function(e) { - this.lastMouseViewPos_ = undefined; - this.isZooming_ = false; - e.preventDefault(); - }, - - extractRelativeMousePosition_: function(e) { - return { - x: e.clientX - this.rasterArea_.offsetLeft, - y: e.clientY - this.rasterArea_.offsetTop - }; - }, - - saveFile_: function(filename, rawData) { - if (!rawData) - return; - - // Convert this String into an Uint8Array - var length = rawData.length; - var arrayBuffer = new ArrayBuffer(length); - var uint8Array = new Uint8Array(arrayBuffer); - for (var c = 0; c < length; c++) - uint8Array[c] = rawData.charCodeAt(c); - - // Create a blob URL from the binary array. - var blob = new Blob([uint8Array], {type: 'application/octet-binary'}); - var blobUrl = window.URL.createObjectURL(blob); - - // Create a link and click on it. - var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); - link.href = blobUrl; - link.download = filename; - var event = document.createEvent('MouseEvents'); - event.initMouseEvent( - 'click', true, false, window, 0, 0, 0, 0, 0, - false, false, false, false, 0, null); - link.dispatchEvent(event); - }, - - onExportDisplayListClicked_: function() { - var rawData = JSON.stringify(this.displayItemList_.items); - this.saveFile_(this.displayListFilename_.value, rawData); - }, - - onExportSkPictureClicked_: function() { - var rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData()); - this.saveFile_(this.skpFilename_.value, rawData); - } - }; - - return { - DisplayItemDebugger: DisplayItemDebugger - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_debugger_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_debugger_test.html deleted file mode 100644 index 91ea9ea4304..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_debugger_test.html +++ /dev/null @@ -1,130 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/extras/chrome/cc/display_item_list.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/display_item_debugger.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiate', function() { - var displayItemList = new tr.e.cc.DisplayItemListSnapshot( - {id: '31415'}, - 10, - { - 'params': { - 'layer_rect': [-15, -15, 46, 833], - 'items': [ - 'BeginClipDisplayItem', - 'EndClipDisplayItem' - ] - }, - 'skp64': '[another skia picture in base64]'}); - displayItemList.preInitialize(); - displayItemList.initialize(); - - var dbg = new tr.ui.e.chrome.cc.DisplayItemDebugger(); - this.addHTMLOutput(dbg); - assert.isUndefined(dbg.displayItemList_); - assert.isUndefined(dbg.picture_); - dbg.displayItemList = displayItemList; - assert.isDefined(dbg.displayItemList_); - assert.isDefined(dbg.picture_); - assert.equal(dbg.displayItemList_.items.length, 2); - dbg.style.border = '1px solid black'; - }); - - test('selections', function() { - var displayItemList = new tr.e.cc.DisplayItemListSnapshot( - {id: '31415'}, - 10, - { - 'params': { - 'layer_rect': [-15, -15, 46, 833], - 'items': [ - 'BeginClipDisplayItem', - 'TransformDisplayItem', - {'name': 'DrawingDisplayItem', 'skp64': '[skia picture in base64]'}, - 'EndTransformDisplayItem', - 'EndClipDisplayItem' - ] - }, - 'skp64': '[another skia picture in base64]'}); - displayItemList.preInitialize(); - displayItemList.initialize(); - - var dbg = new tr.ui.e.chrome.cc.DisplayItemDebugger(); - this.addHTMLOutput(dbg); - dbg.displayItemList = displayItemList; - assert.isDefined(dbg.displayItemList_); - assert.isDefined(dbg.picture_); - assert.equal(dbg.displayItemList_.items.length, 5); - - var initialPicture = dbg.picture_; - assert.isAbove(initialPicture.guid, 0); - - // Select the drawing display item and make sure the picture updates. - var listView = dbg.displayItemListView_; - listView.selectedElement = listView.getElementByIndex(3); - var updatedPicture = dbg.picture_; - assert.isAbove(updatedPicture.guid, 0); - assert.notEqual(initialPicture.guid, updatedPicture.guid); - - // Select the TransformDisplayItem and make sure the picture is blank. - listView.selectedElement = listView.getElementByIndex(2); - assert.isUndefined(dbg.picture_); - - // Deselect a list item and make sure the picture is reset to the original. - listView.selectedElement = undefined; - updatedPicture = dbg.picture_; - assert.isAbove(updatedPicture.guid, 0); - assert.equal(initialPicture.guid, updatedPicture.guid); - - dbg.style.border = '1px solid black'; - }); - - test('export', function() { - var displayItemList = new tr.e.cc.DisplayItemListSnapshot( - {id: '31415'}, - 10, - { - 'params': { - 'layer_rect': [-15, -15, 46, 833], - 'items': [ - 'BeginClipDisplayItem', - 'EndClipDisplayItem' - ] - }, - 'skp64': 'c2twaWN0dXJl'}); - displayItemList.preInitialize(); - displayItemList.initialize(); - - var dbg = new tr.ui.e.chrome.cc.DisplayItemDebugger(); - this.addHTMLOutput(dbg); - dbg.displayItemList = displayItemList; - - var onSaveDisplayListCalled = false; - dbg.saveFile_ = function(filename, rawData) { - onSaveDisplayListCalled = true; - assert.equal(filename, 'displayitemlist.json'); - assert.equal(rawData, '["BeginClipDisplayItem","EndClipDisplayItem"]'); - }; - dbg.onExportDisplayListClicked_(); - assert(onSaveDisplayListCalled); - - var onSaveSkPictureCalled = false; - dbg.saveFile_ = function(filename, rawData) { - onSaveSkPictureCalled = true; - assert.equal(filename, 'skpicture.skp'); - assert.equal(rawData, 'skpicture'); - }; - dbg.onExportSkPictureClicked_(); - assert(onSaveSkPictureCalled); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_item.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_item.html deleted file mode 100644 index b34495a6b41..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_item.html +++ /dev/null @@ -1,124 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2016 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. ---> - -<!-- -An element displaying basic information about a display item in a list view. ---> -<polymer-element name="tr-ui-e-chrome-cc-display-item-list-item"> - <template> - <style> - :host { - border-bottom: 1px solid #555; - display: block; - font-size: 12px; - padding: 3px 5px; - } - - :host(:hover) { - background-color: #f0f0f0; - cursor: pointer; - } - - .header { - font-weight: bold; - margin: 2px 0; - } - - .header > .extra { - background-color: #777; - border-radius: 4px; - color: white; - margin: 0 6px; - text-decoration: none; - padding: 2px 4px; - } - - .raw-details { - white-space: pre-wrap; - } - - .details > dl { - margin: 0; - } - - :host(:not([selected])) .details { - display: none; - } - </style> - <div class="header"> - {{name}} - <template if="{{richDetails && richDetails.skp64}}"> - <a class="extra" - href="data:application/octet-stream;base64,{{richDetails.skp64}}" - download="drawing.skp" on-click="{{stopPropagation}}">SKP</a> - </template> - </div> - <div class="details"> - <template if="{{rawDetails}}"> - <div class="raw-details">{{rawDetails}}</div> - </template> - <template if="{{richDetails}}" bind="{{richDetails}}"> - <dl> - <template if="{{cullRect}}" bind="{{cullRect}}"> - <dt>Cull rect</dt> - <dd>{{x}},{{y}} {{width}}×{{height}}</dd> - </template> - <template if="{{visualRect}}" bind="{{visualRect}}"> - <dt>Visual rect</dt> - <dd>{{x}},{{y}} {{width}}×{{height}}</dd> - </template> - </dl> - </template> - </div> - </template> - <script> - 'use strict'; - (function() { - // Extracts the "type" and "details" parts of the unstructured (plaintext) - // display item format, even if the details span multiple lines. - // For example, given "FooDisplayItem type=hello\nworld", produces - // "FooDisplayItem" as the first capture and "type=hello\nworld" as the - // second. Either capture could be the empty string, but this regex will - // still successfully match. - var DETAILS_SPLIT_REGEX = /^(\S*)\s*([\S\s]*)$/; - - Polymer({ - created: function() { - this.name = ''; - this.rawDetails = ''; - this.richDetails = undefined; - this.data_ = undefined; - }, - - get data() { - return this.data_; - }, - - set data(data) { - this.data_ = data; - - if (!data) { - this.name = 'DATA MISSING'; - this.rawDetails = ''; - this.richDetails = undefined; - } else if (typeof data === 'string') { - var match = data.match(DETAILS_SPLIT_REGEX); - this.name = match[1]; - this.rawDetails = match[2]; - this.richDetails = undefined; - } else { - this.name = data.name; - this.rawDetails = ''; - this.richDetails = data; - } - }, - - stopPropagation: function(e) { e.stopPropagation(); } - }); - })(); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_view.css deleted file mode 100644 index 2265f4a1bfc..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_view.css +++ /dev/null @@ -1,9 +0,0 @@ -/* Copyright (c) 2015 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. - */ - -* /deep/ .tr-ui-e-chrome-cc-display-item-list-view { - -webkit-flex: 1 1 auto !important; - display: -webkit-flex; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_view.html deleted file mode 100644 index c66327afc57..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/display_item_list_view.html +++ /dev/null @@ -1,53 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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="stylesheet" href="/tracing/ui/extras/chrome/cc/display_item_list_view.css"> - -<link rel="import" href="/tracing/extras/chrome/cc/display_item_list.html"> -<link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> -<link rel="import" href="/tracing/ui/analysis/object_snapshot_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/display_item_debugger.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - /* - * Displays a display item snapshot in a human readable form. - * @constructor - */ - var DisplayItemSnapshotView = tr.ui.b.define( - 'tr-ui-e-chrome-cc-display-item-list-view', - tr.ui.analysis.ObjectSnapshotView); - - DisplayItemSnapshotView.prototype = { - __proto__: tr.ui.analysis.ObjectSnapshotView.prototype, - - decorate: function() { - this.classList.add('tr-ui-e-chrome-cc-display-item-list-view'); - this.displayItemDebugger_ = new tr.ui.e.chrome.cc.DisplayItemDebugger(); - this.appendChild(this.displayItemDebugger_); - }, - - updateContents: function() { - if (this.objectSnapshot_ && this.displayItemDebugger_) - this.displayItemDebugger_.displayItemList = this.objectSnapshot_; - } - }; - - tr.ui.analysis.ObjectSnapshotView.register( - DisplayItemSnapshotView, - { - typeNames: ['cc::DisplayItemList'], - showInstances: false - }); - - return { - DisplayItemSnapshotView: DisplayItemSnapshotView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/images/input-event.png b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/images/input-event.png Binary files differdeleted file mode 100644 index a2b7710d3c4..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/images/input-event.png +++ /dev/null diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/images/input-event.svg b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/images/input-event.svg deleted file mode 100644 index 00531ac68d7..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/images/input-event.svg +++ /dev/null @@ -1,114 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Created with Inkscape (http://www.inkscape.org/) --> - -<svg - xmlns:dc="http://purl.org/dc/elements/1.1/" - xmlns:cc="http://creativecommons.org/ns#" - xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:svg="http://www.w3.org/2000/svg" - xmlns="http://www.w3.org/2000/svg" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="744.09448819" - height="1052.3622047" - id="svg2" - version="1.1" - inkscape:version="0.48.4 r9939" - sodipodi:docname="New document 1"> - <defs - id="defs4"> - <filter - inkscape:collect="always" - id="filter3791"> - <feGaussianBlur - inkscape:collect="always" - stdDeviation="2.7246316" - id="feGaussianBlur3793" /> - </filter> - </defs> - <sodipodi:namedview - id="base" - pagecolor="#ffffff" - bordercolor="#666666" - borderopacity="1.0" - inkscape:pageopacity="0.0" - inkscape:pageshadow="2" - inkscape:zoom="2.8" - inkscape:cx="195.13782" - inkscape:cy="982.30556" - inkscape:document-units="px" - inkscape:current-layer="layer1" - showgrid="false" - inkscape:window-width="1215" - inkscape:window-height="860" - inkscape:window-x="2219" - inkscape:window-y="113" - inkscape:window-maximized="0" /> - <metadata - id="metadata7"> - <rdf:RDF> - <cc:Work - rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type - rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> - <dc:title></dc:title> - </cc:Work> - </rdf:RDF> - </metadata> - <g - inkscape:label="Layer 1" - inkscape:groupmode="layer" - id="layer1"> - <g - id="g3882" - style="opacity:0.5" - inkscape:export-filename="/tmp/input-event.png" - inkscape:export-xdpi="82.07" - inkscape:export-ydpi="82.07"> - <path - transform="matrix(1.0152631,0,0,1.0152631,-0.71357503,0.46150497)" - sodipodi:type="arc" - style="opacity:0.50934604000000006;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter3791);enable-background:accumulate" - id="path3755" - sodipodi:cx="177.78685" - sodipodi:cy="100.79848" - sodipodi:rx="42.426407" - sodipodi:ry="42.426407" - d="m 220.21326,100.79848 a 42.426407,42.426407 0 1 1 -84.85282,0 42.426407,42.426407 0 1 1 84.85282,0 z" /> - <path - transform="translate(-2,-2)" - d="m 220.21326,100.79848 a 42.426407,42.426407 0 1 1 -84.85282,0 42.426407,42.426407 0 1 1 84.85282,0 z" - sodipodi:ry="42.426407" - sodipodi:rx="42.426407" - sodipodi:cy="100.79848" - sodipodi:cx="177.78685" - id="path2985" - style="color:#000000;fill:#d4d4d4;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" - sodipodi:type="arc" /> - <path - inkscape:connector-curvature="0" - id="path3853" - d="m 175.28125,96.03125 0,8.46875 1,0 0,-8.46875 -1,0 z" - style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> - <path - inkscape:connector-curvature="0" - id="path3859" - d="m 171.53125,99.75 0,1 8.46875,0 0,-1 -8.46875,0 z" - style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> - </g> - <path - transform="matrix(1.2923213,0,0,1.2923213,-53.970887,-31.465544)" - d="m 220.21326,100.79848 a 42.426407,42.426407 0 1 1 -84.85282,0 42.426407,42.426407 0 1 1 84.85282,0 z" - sodipodi:ry="42.426407" - sodipodi:rx="42.426407" - sodipodi:cy="100.79848" - sodipodi:cx="177.78685" - id="path3867" - style="color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" - sodipodi:type="arc" - inkscape:export-filename="/tmp/input-event.png" - inkscape:export-xdpi="82.07" - inkscape:export-ydpi="82.07" /> - </g> -</svg> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_picker.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_picker.css deleted file mode 100644 index 8841b4da953..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_picker.css +++ /dev/null @@ -1,43 +0,0 @@ -/* 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. - */ - -* /deep/ tr-ui-e-chrome-cc-layer-picker { - -webkit-flex-direction: column; - display: -webkit-flex; -} - -* /deep/ tr-ui-e-chrome-cc-layer-picker > top-controls { - -webkit-flex: 0 0 auto; - background-image: -webkit-gradient(linear, - 0 0, 100% 0, - from(#E5E5E5), - to(#D1D1D1)); - border-bottom: 1px solid #8e8e8e; - border-top: 1px solid white; - display: inline; - font-size: 14px; - padding-left: 2px; -} - -* /deep/ tr-ui-e-chrome-cc-layer-picker > top-controls input[type='checkbox'] { - vertical-align: -2px; -} - -* /deep/ tr-ui-e-chrome-cc-layer-picker > .x-list-view { - -webkit-flex: 1 1 auto; - font-family: monospace; - overflow: auto; -} - -* /deep/ tr-ui-e-chrome-cc-layer-picker > tr-ui-a-generic-object-view { - -webkit-flex: 0 0 auto; - height: 200px; - overflow: auto; -} - -* /deep/ tr-ui-e-chrome-cc-layer-picker > tr-ui-a-generic-object-view * { - -webkit-user-select: text !important; - cursor: text; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_picker.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_picker.html deleted file mode 100644 index 780fe03d86c..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_picker.html +++ /dev/null @@ -1,322 +0,0 @@ -<!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="stylesheet" href="/tracing/ui/extras/chrome/cc/layer_picker.css"> - -<link rel="import" href="/tracing/extras/chrome/cc/constants.html"> -<link rel="import" href="/tracing/extras/chrome/cc/layer_tree_host_impl.html"> -<link rel="import" href="/tracing/extras/chrome/cc/util.html"> -<link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> -<link rel="import" href="/tracing/model/event.html"> -<link rel="import" href="/tracing/ui/base/drag_handle.html"> -<link rel="import" href="/tracing/ui/base/list_view.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/selection.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - var constants = tr.e.cc.constants; - var bytesToRoundedMegabytes = tr.e.cc.bytesToRoundedMegabytes; - var RENDER_PASS_QUADS = - Math.max(constants.ACTIVE_TREE, constants.PENDING_TREE) + 1; - - /** - * @constructor - */ - var LayerPicker = tr.ui.b.define('tr-ui-e-chrome-cc-layer-picker'); - - LayerPicker.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.lthi_ = undefined; - this.controls_ = document.createElement('top-controls'); - this.renderPassQuads_ = false; - - - this.itemList_ = new tr.ui.b.ListView(); - this.appendChild(this.controls_); - - this.appendChild(this.itemList_); - - this.itemList_.addEventListener( - 'selection-changed', this.onItemSelectionChanged_.bind(this)); - - this.controls_.appendChild(tr.ui.b.createSelector( - this, 'whichTree', - 'layerPicker.whichTree', constants.ACTIVE_TREE, - [{label: 'Active tree', value: constants.ACTIVE_TREE}, - {label: 'Pending tree', value: constants.PENDING_TREE}, - {label: 'Render pass quads', value: RENDER_PASS_QUADS}])); - - this.showPureTransformLayers_ = false; - var showPureTransformLayers = tr.ui.b.createCheckBox( - this, 'showPureTransformLayers', - 'layerPicker.showPureTransformLayers', false, - 'Transform layers'); - showPureTransformLayers.classList.add('show-transform-layers'); - showPureTransformLayers.title = - 'When checked, pure transform layers are shown'; - this.controls_.appendChild(showPureTransformLayers); - }, - - get lthiSnapshot() { - return this.lthiSnapshot_; - }, - - set lthiSnapshot(lthiSnapshot) { - this.lthiSnapshot_ = lthiSnapshot; - this.updateContents_(); - }, - - get whichTree() { - return this.renderPassQuads_ ? constants.ACTIVE_TREE : this.whichTree_; - }, - - set whichTree(whichTree) { - this.whichTree_ = whichTree; - this.renderPassQuads_ = (whichTree == RENDER_PASS_QUADS); - this.updateContents_(); - tr.b.dispatchSimpleEvent(this, 'selection-change', false); - }, - - get layerTreeImpl() { - if (this.lthiSnapshot === undefined) - return undefined; - return this.lthiSnapshot.getTree(this.whichTree); - }, - - get isRenderPassQuads() { - return this.renderPassQuads_; - }, - - get showPureTransformLayers() { - return this.showPureTransformLayers_; - }, - - set showPureTransformLayers(show) { - if (this.showPureTransformLayers_ === show) - return; - this.showPureTransformLayers_ = show; - this.updateContents_(); - }, - - getRenderPassInfos_: function() { - if (!this.lthiSnapshot_) - return []; - - var renderPassInfo = []; - if (!this.lthiSnapshot_.args.frame || - !this.lthiSnapshot_.args.frame.renderPasses) - return renderPassInfo; - - var renderPasses = this.lthiSnapshot_.args.frame.renderPasses; - for (var i = 0; i < renderPasses.length; ++i) { - var info = {renderPass: renderPasses[i], - depth: 0, - id: i, - name: 'cc::RenderPass'}; - renderPassInfo.push(info); - } - return renderPassInfo; - }, - - getLayerInfos_: function() { - if (!this.lthiSnapshot_) - return []; - - var tree = this.lthiSnapshot_.getTree(this.whichTree_); - if (!tree) - return []; - - var layerInfos = []; - - var showPureTransformLayers = this.showPureTransformLayers_; - - function isPureTransformLayer(layer) { - if (layer.args.compositingReasons && - layer.args.compositingReasons.length != 1 && - layer.args.compositingReasons[0] != 'No reasons given') - return false; - - if (layer.args.drawsContent) - return false; - - return true; - } - var visitedLayers = {}; - function visitLayer(layer, depth, isMask, isReplica) { - if (visitedLayers[layer.layerId]) - return; - visitedLayers[layer.layerId] = true; - var info = {layer: layer, - depth: depth}; - - if (layer.args.drawsContent) - info.name = layer.objectInstance.name; - else - info.name = 'cc::LayerImpl'; - - if (layer.usingGpuRasterization) - info.name += ' (G)'; - - info.isMaskLayer = isMask; - info.replicaLayer = isReplica; - - if (showPureTransformLayers || !isPureTransformLayer(layer)) - layerInfos.push(info); - - }; - tree.iterLayers(visitLayer); - return layerInfos; - }, - - updateContents_: function() { - if (this.renderPassQuads_) - this.updateRenderPassContents_(); - else - this.updateLayerContents_(); - }, - - updateRenderPassContents_: function() { - this.itemList_.clear(); - - var selectedRenderPassId; - if (this.selection_ && this.selection_.associatedRenderPassId) - selectedRenderPassId = this.selection_.associatedRenderPassId; - - var renderPassInfos = this.getRenderPassInfos_(); - renderPassInfos.forEach(function(renderPassInfo) { - var renderPass = renderPassInfo.renderPass; - var id = renderPassInfo.id; - - var item = this.createElementWithDepth_(renderPassInfo.depth); - var labelEl = item.appendChild(tr.ui.b.createSpan()); - - labelEl.textContent = renderPassInfo.name + ' ' + id; - item.renderPass = renderPass; - item.renderPassId = id; - this.itemList_.appendChild(item); - - if (id == selectedRenderPassId) { - renderPass.selectionState = - tr.model.SelectionState.SELECTED; - } - }, this); - }, - - updateLayerContents_: function() { - this.changingItemSelection_ = true; - try { - this.itemList_.clear(); - - var selectedLayerId; - if (this.selection_ && this.selection_.associatedLayerId) - selectedLayerId = this.selection_.associatedLayerId; - - var layerInfos = this.getLayerInfos_(); - layerInfos.forEach(function(layerInfo) { - var layer = layerInfo.layer; - var id = layer.layerId; - - var item = this.createElementWithDepth_(layerInfo.depth); - var labelEl = item.appendChild(tr.ui.b.createSpan()); - - labelEl.textContent = layerInfo.name + ' ' + id; - - var notesEl = item.appendChild(tr.ui.b.createSpan()); - if (layerInfo.isMaskLayer) - notesEl.textContent += '(mask)'; - if (layerInfo.isReplicaLayer) - notesEl.textContent += '(replica)'; - - if (layer.gpuMemoryUsageInBytes !== undefined) { - var rounded = bytesToRoundedMegabytes(layer.gpuMemoryUsageInBytes); - if (rounded !== 0) - notesEl.textContent += ' (' + rounded + ' MB)'; - } - - item.layer = layer; - this.itemList_.appendChild(item); - - if (layer.layerId == selectedLayerId) { - layer.selectionState = tr.model.SelectionState.SELECTED; - item.selected = true; - } - }, this); - } finally { - this.changingItemSelection_ = false; - } - }, - - createElementWithDepth_: function(depth) { - var item = document.createElement('div'); - - var indentEl = item.appendChild(tr.ui.b.createSpan()); - indentEl.style.whiteSpace = 'pre'; - for (var i = 0; i < depth; i++) - indentEl.textContent = indentEl.textContent + ' '; - return item; - }, - - onItemSelectionChanged_: function(e) { - if (this.changingItemSelection_) - return; - if (this.renderPassQuads_) - this.onRenderPassSelected_(e); - else - this.onLayerSelected_(e); - tr.b.dispatchSimpleEvent(this, 'selection-change', false); - }, - - onRenderPassSelected_: function(e) { - var selectedRenderPass; - var selectedRenderPassId; - if (this.itemList_.selectedElement) { - selectedRenderPass = this.itemList_.selectedElement.renderPass; - selectedRenderPassId = - this.itemList_.selectedElement.renderPassId; - } - - if (selectedRenderPass) { - this.selection_ = new tr.ui.e.chrome.cc.RenderPassSelection( - selectedRenderPass, selectedRenderPassId); - } else { - this.selection_ = undefined; - } - }, - - onLayerSelected_: function(e) { - var selectedLayer; - if (this.itemList_.selectedElement) - selectedLayer = this.itemList_.selectedElement.layer; - - if (selectedLayer) - this.selection_ = new tr.ui.e.chrome.cc.LayerSelection(selectedLayer); - else - this.selection_ = undefined; - }, - - get selection() { - return this.selection_; - }, - - set selection(selection) { - if (this.selection_ == selection) - return; - this.selection_ = selection; - this.updateContents_(); - } - }; - - return { - LayerPicker: LayerPicker - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.css deleted file mode 100644 index 3f5069a7cc8..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.css +++ /dev/null @@ -1,18 +0,0 @@ -/* 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. - */ - -* /deep/ .tr-ui-e-chrome-cc-lthi-s-view { - -webkit-flex: 1 1 auto !important; - -webkit-flex-direction: row; - display: -webkit-flex; -} - -* /deep/ .tr-ui-e-chrome-cc-lthi-s-view > tr-ui-e-chrome-cc-layer-picker { - -webkit-flex: 1 1 auto; -} - -* /deep/ .tr-ui-e-chrome-cc-lthi-s-view > tr-ui-b-drag-handle { - -webkit-flex: 0 0 auto; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.html deleted file mode 100644 index d808bc5e869..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.html +++ /dev/null @@ -1,127 +0,0 @@ -<!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="stylesheet" - href="/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.css"> - -<link rel="import" href="/tracing/extras/chrome/cc/layer_tree_host_impl.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_picker.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_view.html"> -<link rel="import" href="/tracing/extras/chrome/cc/tile.html"> -<link rel="import" href="/tracing/ui/analysis/object_snapshot_view.html"> -<link rel="import" href="/tracing/ui/base/drag_handle.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - /* - * Displays a LayerTreeHostImpl snapshot in a human readable form. - * @constructor - */ - var LayerTreeHostImplSnapshotView = tr.ui.b.define( - 'tr-ui-e-chrome-cc-layer-tree-host-impl-snapshot-view', - tr.ui.analysis.ObjectSnapshotView); - - LayerTreeHostImplSnapshotView.prototype = { - __proto__: tr.ui.analysis.ObjectSnapshotView.prototype, - - decorate: function() { - this.classList.add('tr-ui-e-chrome-cc-lthi-s-view'); - - this.selection_ = undefined; - - this.layerPicker_ = new tr.ui.e.chrome.cc.LayerPicker(); - this.layerPicker_.addEventListener( - 'selection-change', - this.onLayerPickerSelectionChanged_.bind(this)); - - this.layerView_ = new tr.ui.e.chrome.cc.LayerView(); - this.layerView_.addEventListener( - 'selection-change', - this.onLayerViewSelectionChanged_.bind(this)); - this.dragHandle_ = document.createElement('tr-ui-b-drag-handle'); - this.dragHandle_.horizontal = false; - this.dragHandle_.target = this.layerView_; - - this.appendChild(this.layerPicker_); - this.appendChild(this.dragHandle_); - this.appendChild(this.layerView_); - - // Make sure we have the current values from layerView_ and layerPicker_, - // since those might have been created before we added the listener. - this.onLayerViewSelectionChanged_(); - this.onLayerPickerSelectionChanged_(); - - }, - - get objectSnapshot() { - return this.objectSnapshot_; - }, - - set objectSnapshot(objectSnapshot) { - this.objectSnapshot_ = objectSnapshot; - - var lthi = this.objectSnapshot; - var layerTreeImpl; - if (lthi) - layerTreeImpl = lthi.getTree(this.layerPicker_.whichTree); - - this.layerPicker_.lthiSnapshot = lthi; - this.layerView_.layerTreeImpl = layerTreeImpl; - this.layerView_.regenerateContent(); - - if (!this.selection_) - return; - this.selection = this.selection_.findEquivalent(lthi); - }, - - get selection() { - return this.selection_; - }, - - set selection(selection) { - if (this.selection_ == selection) - return; - this.selection_ = selection; - this.layerPicker_.selection = selection; - this.layerView_.selection = selection; - tr.b.dispatchSimpleEvent(this, 'cc-selection-change'); - }, - - onLayerPickerSelectionChanged_: function() { - this.selection_ = this.layerPicker_.selection; - this.layerView_.selection = this.selection; - this.layerView_.layerTreeImpl = this.layerPicker_.layerTreeImpl; - this.layerView_.isRenderPassQuads = this.layerPicker_.isRenderPassQuads; - this.layerView_.regenerateContent(); - tr.b.dispatchSimpleEvent(this, 'cc-selection-change'); - }, - - onLayerViewSelectionChanged_: function() { - this.selection_ = this.layerView_.selection; - this.layerPicker_.selection = this.selection; - tr.b.dispatchSimpleEvent(this, 'cc-selection-change'); - }, - - get extraHighlightsByLayerId() { - return this.layerView_.extraHighlightsByLayerId; - }, - - set extraHighlightsByLayerId(extraHighlightsByLayerId) { - this.layerView_.extraHighlightsByLayerId = extraHighlightsByLayerId; - } - }; - - tr.ui.analysis.ObjectSnapshotView.register( - LayerTreeHostImplSnapshotView, {typeName: 'cc::LayerTreeHostImpl'}); - - return { - LayerTreeHostImplSnapshotView: LayerTreeHostImplSnapshotView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view_test.html deleted file mode 100644 index b06765aa91d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view_test.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/core/test_utils.html"> -<link rel="import" href="/tracing/extras/chrome/cc/layer_tree_host_impl.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/extras/chrome/cc/raster_task.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.html"> - -<script src="/tracing/extras/chrome/cc/layer_tree_host_impl_test_data.js"> -</script> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiate', function() { - var m = tr.c.TestUtils.newModelWithEvents([g_catLTHIEvents]); - var p = tr.b.dictionaryValues(m.processes)[0]; - - var instance = p.objects.getAllInstancesNamed('cc::LayerTreeHostImpl')[0]; - var snapshot = instance.snapshots[0]; - - var view = new tr.ui.e.chrome.cc.LayerTreeHostImplSnapshotView(); - view.style.width = '900px'; - view.style.height = '400px'; - view.objectSnapshot = snapshot; - - this.addHTMLOutput(view); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html deleted file mode 100644 index a54deecabfc..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html +++ /dev/null @@ -1,1192 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/color.html"> -<link rel="import" href="/tracing/base/quad.html"> -<link rel="import" href="/tracing/base/raf.html"> -<link rel="import" href="/tracing/base/range.html"> -<link rel="import" href="/tracing/extras/chrome/cc/debug_colors.html"> -<link rel="import" href="/tracing/extras/chrome/cc/picture.html"> -<link rel="import" href="/tracing/extras/chrome/cc/render_pass.html"> -<link rel="import" href="/tracing/extras/chrome/cc/tile.html"> -<link rel="import" href="/tracing/extras/chrome/cc/util.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/ui/base/info_bar.html"> -<link rel="import" href="/tracing/ui/base/quad_stack_view.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> - -<style> -* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view { - position: relative; -} - -* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > top-controls { - -webkit-flex: 0 0 auto; - background-image: -webkit-gradient(linear, - 0 0, 100% 0, - from(#E5E5E5), - to(#D1D1D1)); - border-bottom: 1px solid #8e8e8e; - border-top: 1px solid white; - display: flex; - flex-flow: row wrap; - flex-direction: row; - font-size: 14px; - padding-left: 2px; - overflow: hidden; -} - -* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > - top-controls input[type='checkbox'] { - vertical-align: -2px; -} - -* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > .what-rasterized { - color: -webkit-link; - cursor: pointer; - text-decoration: underline; - position: absolute; - bottom: 10px; - left: 10px; -} - -* /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > #input-event { - background-image: url('./images/input-event.png'); - display: none; -} -</style> - -<template id='tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template'> - <img id='input-event'/> -</template> - -<script> -'use strict'; - -/** - * @fileoverview Graphical view of LayerTreeImpl, with controls for - * type of layer content shown and info bar for content-loading warnings. - */ -tr.exportTo('tr.ui.e.chrome.cc', function() { - var ColorScheme = tr.b.ColorScheme; - - var THIS_DOC = document.currentScript.ownerDocument; - var TILE_HEATMAP_TYPE = {}; - TILE_HEATMAP_TYPE.NONE = 'none'; - TILE_HEATMAP_TYPE.SCHEDULED_PRIORITY = 'scheduledPriority'; - TILE_HEATMAP_TYPE.USING_GPU_MEMORY = 'usingGpuMemory'; - - var cc = tr.ui.e.chrome.cc; - - function createTileRectsSelectorBaseOptions() { - return [{label: 'None', value: 'none'}, - {label: 'Coverage Rects', value: 'coverage'}]; - } - - var bytesToRoundedMegabytes = tr.e.cc.bytesToRoundedMegabytes; - - - /** - * @constructor - */ - var LayerTreeQuadStackView = - tr.ui.b.define('tr-ui-e-chrome-cc-layer-tree-quad-stack-view'); - - LayerTreeQuadStackView.prototype = { - __proto__: HTMLDivElement.prototype, - - decorate: function() { - this.isRenderPassQuads_ = false; - this.pictureAsImageData_ = {}; // Maps picture.guid to PictureAsImageData. - this.messages_ = []; - this.controls_ = document.createElement('top-controls'); - this.infoBar_ = document.createElement('tr-ui-b-info-bar'); - this.quadStackView_ = new tr.ui.b.QuadStackView(); - this.quadStackView_.addEventListener( - 'selectionchange', this.onQuadStackViewSelectionChange_.bind(this)); - this.extraHighlightsByLayerId_ = undefined; - this.inputEventImageData_ = undefined; - - var m = tr.ui.b.MOUSE_SELECTOR_MODE; - var mms = this.quadStackView_.mouseModeSelector; - mms.settingsKey = 'tr.e.cc.layerTreeQuadStackView.mouseModeSelector'; - mms.setKeyCodeForMode(m.SELECTION, 'Z'.charCodeAt(0)); - mms.setKeyCodeForMode(m.PANSCAN, 'X'.charCodeAt(0)); - mms.setKeyCodeForMode(m.ZOOM, 'C'.charCodeAt(0)); - mms.setKeyCodeForMode(m.ROTATE, 'V'.charCodeAt(0)); - - var node = tr.ui.b.instantiateTemplate( - '#tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template', THIS_DOC); - this.appendChild(node); - this.appendChild(this.controls_); - this.appendChild(this.infoBar_); - this.appendChild(this.quadStackView_); - - this.tileRectsSelector_ = tr.ui.b.createSelector( - this, 'howToShowTiles', - 'layerView.howToShowTiles', 'none', - createTileRectsSelectorBaseOptions()); - this.controls_.appendChild(this.tileRectsSelector_); - - var tileHeatmapText = tr.ui.b.createSpan({ - textContent: 'Tile heatmap:' - }); - this.controls_.appendChild(tileHeatmapText); - - var tileHeatmapSelector = tr.ui.b.createSelector( - this, 'tileHeatmapType', - 'layerView.tileHeatmapType', TILE_HEATMAP_TYPE.NONE, - [{label: 'None', - value: TILE_HEATMAP_TYPE.NONE}, - {label: 'Scheduled Priority', - value: TILE_HEATMAP_TYPE.SCHEDULED_PRIORITY}, - {label: 'Is using GPU memory', - value: TILE_HEATMAP_TYPE.USING_GPU_MEMORY} - ]); - this.controls_.appendChild(tileHeatmapSelector); - - var showOtherLayersCheckbox = tr.ui.b.createCheckBox( - this, 'showOtherLayers', - 'layerView.showOtherLayers', true, - 'Other layers/passes'); - showOtherLayersCheckbox.title = - 'When checked, show all layers, selected or not.'; - this.controls_.appendChild(showOtherLayersCheckbox); - - var showInvalidationsCheckbox = tr.ui.b.createCheckBox( - this, 'showInvalidations', - 'layerView.showInvalidations', true, - 'Invalidations'); - showInvalidationsCheckbox.title = - 'When checked, compositing invalidations are highlighted in red'; - this.controls_.appendChild(showInvalidationsCheckbox); - - var showUnrecordedRegionCheckbox = tr.ui.b.createCheckBox( - this, 'showUnrecordedRegion', - 'layerView.showUnrecordedRegion', true, - 'Unrecorded area'); - showUnrecordedRegionCheckbox.title = - 'When checked, unrecorded areas are highlighted in yellow'; - this.controls_.appendChild(showUnrecordedRegionCheckbox); - - var showBottlenecksCheckbox = tr.ui.b.createCheckBox( - this, 'showBottlenecks', - 'layerView.showBottlenecks', true, - 'Bottlenecks'); - showBottlenecksCheckbox.title = - 'When checked, scroll bottlenecks are highlighted'; - this.controls_.appendChild(showBottlenecksCheckbox); - - var showLayoutRectsCheckbox = tr.ui.b.createCheckBox( - this, 'showLayoutRects', - 'layerView.showLayoutRects', false, - 'Layout rects'); - showLayoutRectsCheckbox.title = - 'When checked, shows rects for regions where layout happened'; - this.controls_.appendChild(showLayoutRectsCheckbox); - - var showContentsCheckbox = tr.ui.b.createCheckBox( - this, 'showContents', - 'layerView.showContents', true, - 'Contents'); - showContentsCheckbox.title = - 'When checked, show the rendered contents inside the layer outlines'; - this.controls_.appendChild(showContentsCheckbox); - - var showAnimationBoundsCheckbox = tr.ui.b.createCheckBox( - this, 'showAnimationBounds', - 'layerView.showAnimationBounds', false, - 'Animation Bounds'); - showAnimationBoundsCheckbox.title = 'When checked, show a border around' + - ' a layer showing the extent of its animation.'; - this.controls_.appendChild(showAnimationBoundsCheckbox); - - var showInputEventsCheckbox = tr.ui.b.createCheckBox( - this, 'showInputEvents', - 'layerView.showInputEvents', true, - 'Input events'); - showInputEventsCheckbox.title = 'When checked, input events are ' + - 'displayed as circles.'; - this.controls_.appendChild(showInputEventsCheckbox); - - this.whatRasterizedLink_ = document.createElement('a'); - this.whatRasterizedLink_.classList.add('what-rasterized'); - this.whatRasterizedLink_.textContent = 'What rasterized?'; - this.whatRasterizedLink_.addEventListener( - 'click', this.onWhatRasterizedLinkClicked_.bind(this)); - this.appendChild(this.whatRasterizedLink_); - }, - - get layerTreeImpl() { - return this.layerTreeImpl_; - }, - - set isRenderPassQuads(newValue) { - this.isRenderPassQuads_ = newValue; - }, - - set layerTreeImpl(layerTreeImpl) { - if (this.layerTreeImpl_ === layerTreeImpl) - return; - - // FIXME(pdr): We may want to clear pictureAsImageData_ here to save - // memory at the cost of performance. Note that - // pictureAsImageData_ will be cleared when this is - // destructed, but this view might live for several - // layerTreeImpls. - this.layerTreeImpl_ = layerTreeImpl; - this.selection = undefined; - }, - - get extraHighlightsByLayerId() { - return this.extraHighlightsByLayerId_; - }, - - set extraHighlightsByLayerId(extraHighlightsByLayerId) { - this.extraHighlightsByLayerId_ = extraHighlightsByLayerId; - this.scheduleUpdateContents_(); - }, - - get showOtherLayers() { - return this.showOtherLayers_; - }, - - set showOtherLayers(show) { - this.showOtherLayers_ = show; - this.updateContents_(); - }, - - get showAnimationBounds() { - return this.showAnimationBounds_; - }, - - set showAnimationBounds(show) { - this.showAnimationBounds_ = show; - this.updateContents_(); - }, - - get showInputEvents() { - return this.showInputEvents_; - }, - - set showInputEvents(show) { - this.showInputEvents_ = show; - this.updateContents_(); - }, - - get showContents() { - return this.showContents_; - }, - - set showContents(show) { - this.showContents_ = show; - this.updateContents_(); - }, - - get showInvalidations() { - return this.showInvalidations_; - }, - - set showInvalidations(show) { - this.showInvalidations_ = show; - this.updateContents_(); - }, - - get showUnrecordedRegion() { - return this.showUnrecordedRegion_; - }, - - set showUnrecordedRegion(show) { - this.showUnrecordedRegion_ = show; - this.updateContents_(); - }, - - get showBottlenecks() { - return this.showBottlenecks_; - }, - - set showBottlenecks(show) { - this.showBottlenecks_ = show; - this.updateContents_(); - }, - - get showLayoutRects() { - return this.showLayoutRects_; - }, - - set showLayoutRects(show) { - this.showLayoutRects_ = show; - this.updateContents_(); - }, - - get howToShowTiles() { - return this.howToShowTiles_; - }, - - set howToShowTiles(val) { - // Make sure val is something we expect. - console.assert( - (val === 'none') || - (val === 'coverage') || - !isNaN(parseFloat(val))); - - this.howToShowTiles_ = val; - this.updateContents_(); - }, - - get tileHeatmapType() { - return this.tileHeatmapType_; - }, - - set tileHeatmapType(val) { - this.tileHeatmapType_ = val; - this.updateContents_(); - }, - - get selection() { - return this.selection_; - }, - - set selection(selection) { - if (this.selection === selection) - return; - this.selection_ = selection; - tr.b.dispatchSimpleEvent(this, 'selection-change'); - this.updateContents_(); - }, - - regenerateContent: function() { - this.updateTilesSelector_(); - this.updateContents_(); - }, - - loadDataForImageElement_: function(image, callback) { - var imageContent = window.getComputedStyle(image).backgroundImage; - image.src = tr.ui.b.extractUrlString(imageContent); - image.onload = function() { - var canvas = document.createElement('canvas'); - var ctx = canvas.getContext('2d'); - canvas.width = image.width; - canvas.height = image.height; - ctx.drawImage(image, 0, 0); - var imageData = ctx.getImageData( - 0, 0, canvas.width, canvas.height); - callback(imageData); - }; - }, - - onQuadStackViewSelectionChange_: function(e) { - var selectableQuads = e.quads.filter(function(q) { - return q.selectionToSetIfClicked !== undefined; - }); - if (selectableQuads.length == 0) { - this.selection = undefined; - return; - } - - // Sort the quads low to high on stackingGroupId. - selectableQuads.sort(function(x, y) { - var z = x.stackingGroupId - y.stackingGroupId; - if (z != 0) - return z; - return x.selectionToSetIfClicked.specicifity - - y.selectionToSetIfClicked.specicifity; - }); - - // TODO(nduca): Support selecting N things at once. - var quadToSelect = selectableQuads[selectableQuads.length - 1]; - this.selection = quadToSelect.selectionToSetIfClicked; - }, - - scheduleUpdateContents_: function() { - if (this.updateContentsPending_) - return; - this.updateContentsPending_ = true; - tr.b.requestAnimationFrameInThisFrameIfPossible( - this.updateContents_, this); - }, - - updateContents_: function() { - if (!this.layerTreeImpl_) { - this.quadStackView_.headerText = 'No tree'; - this.quadStackView_.quads = []; - return; - } - - - var status = this.computePictureLoadingStatus_(); - if (!status.picturesComplete) - return; - - var lthi = this.layerTreeImpl_.layerTreeHostImpl; - var lthiInstance = lthi.objectInstance; - var worldViewportRect = tr.b.Rect.fromXYWH( - 0, 0, - lthi.deviceViewportSize.width, lthi.deviceViewportSize.height); - this.quadStackView_.deviceRect = worldViewportRect; - if (this.isRenderPassQuads_) - this.quadStackView_.quads = this.generateRenderPassQuads(); - else - this.quadStackView_.quads = this.generateLayerQuads(); - - this.updateWhatRasterizedLinkState_(); - - var message = ''; - if (lthi.tilesHaveGpuMemoryUsageInfo) { - var thisTreeUsageInBytes = this.layerTreeImpl_.gpuMemoryUsageInBytes; - var otherTreeUsageInBytes = lthi.gpuMemoryUsageInBytes - - thisTreeUsageInBytes; - message += bytesToRoundedMegabytes(thisTreeUsageInBytes) + - 'MB on this tree'; - if (otherTreeUsageInBytes) { - message += ', ' + - bytesToRoundedMegabytes(otherTreeUsageInBytes) + - 'MB on the other tree'; - } - } else { - if (this.layerTreeImpl_) { - var thisTreeUsageInBytes = this.layerTreeImpl_.gpuMemoryUsageInBytes; - message += bytesToRoundedMegabytes(thisTreeUsageInBytes) + - 'MB on this tree'; - - if (this.layerTreeImpl_.otherTree) { - // Older Chromes don't report enough data to know how much memory is - // being used across both trees. We know the memory consumed by each - // tree, but there is resource sharing *between the trees* so we - // can't simply sum up the per-tree costs. We need either the total - // plus one tree, to guess the unique on the other tree, etc. Newer - // chromes report memory per tile, which allows LTHI to compute the - // total tile memory usage, letting us figure things out properly. - message += ', ???MB on other tree. '; - } - } - } - - if (lthi.args.tileManagerBasicState) { - var tmgs = lthi.args.tileManagerBasicState.globalState; - message += ' (softMax=' + - bytesToRoundedMegabytes(tmgs.softMemoryLimitInBytes) + - 'MB, hardMax=' + - bytesToRoundedMegabytes(tmgs.hardMemoryLimitInBytes) + 'MB, ' + - tmgs.memoryLimitPolicy + ')'; - - } else { - // Old Chromes do not have a globalState on the LTHI dump. - // But they do issue a DidManage event wiht the globalstate. Find that - // event so that we show some global state. - var thread = lthi.snapshottedOnThread; - var didManageTilesSlices = thread.sliceGroup.slices.filter(function(s) { - if (s.category !== 'tr.e.cc') - return false; - if (s.title !== 'DidManage') - return false; - if (s.end > lthi.ts) - return false; - return true; - }); - didManageTilesSlices.sort(function(x, y) { - return x.end - y.end; - }); - if (didManageTilesSlices.length > 0) { - var newest = didManageTilesSlices[didManageTilesSlices.length - 1]; - var tmgs = newest.args.state.global_state; - message += ' (softMax=' + - bytesToRoundedMegabytes(tmgs.soft_memory_limit_in_bytes) + - 'MB, hardMax=' + - bytesToRoundedMegabytes(tmgs.hard_memory_limit_in_bytes) + 'MB, ' + - tmgs.memory_limit_policy + ')'; - } - } - - if (this.layerTreeImpl_.otherTree) - message += ' (Another tree exists)'; - - - if (message.length) - this.quadStackView_.headerText = message; - else - this.quadStackView_.headerText = undefined; - - this.updateInfoBar_(status.messages); - }, - - updateTilesSelector_: function() { - var data = createTileRectsSelectorBaseOptions(); - - if (this.layerTreeImpl_) { - // First get all of the scales information from LTHI. - var lthi = this.layerTreeImpl_.layerTreeHostImpl; - var scaleNames = lthi.getContentsScaleNames(); - for (var scale in scaleNames) { - data.push({ - label: 'Scale ' + scale + ' (' + scaleNames[scale] + ')', - value: scale - }); - } - } - - // Then create a new selector and replace the old one. - var new_selector = tr.ui.b.createSelector( - this, 'howToShowTiles', - 'layerView.howToShowTiles', 'none', - data); - this.controls_.replaceChild(new_selector, this.tileRectsSelector_); - this.tileRectsSelector_ = new_selector; - }, - - computePictureLoadingStatus_: function() { - // Figure out if we can draw the quads yet. While we're at it, figure out - // if we have any warnings we need to show. - var layers = this.layers; - var status = { - messages: [], - picturesComplete: true - }; - if (this.showContents) { - var hasPendingRasterizeImage = false; - var firstPictureError = undefined; - var hasMissingLayerRect = false; - var hasUnresolvedPictureRef = false; - for (var i = 0; i < layers.length; i++) { - var layer = layers[i]; - for (var ir = 0; ir < layer.pictures.length; ++ir) { - var picture = layer.pictures[ir]; - - if (picture.idRef) { - hasUnresolvedPictureRef = true; - continue; - } - if (!picture.layerRect) { - hasMissingLayerRect = true; - continue; - } - - var pictureAsImageData = this.pictureAsImageData_[picture.guid]; - if (!pictureAsImageData) { - hasPendingRasterizeImage = true; - this.pictureAsImageData_[picture.guid] = - tr.e.cc.PictureAsImageData.Pending(this); - picture.rasterize( - {stopIndex: undefined}, - function(pictureImageData) { - var picture_ = pictureImageData.picture; - this.pictureAsImageData_[picture_.guid] = pictureImageData; - this.scheduleUpdateContents_(); - }.bind(this)); - continue; - } - if (pictureAsImageData.isPending()) { - hasPendingRasterizeImage = true; - continue; - } - if (pictureAsImageData.error) { - if (!firstPictureError) - firstPictureError = pictureAsImageData.error; - break; - } - } - } - if (hasPendingRasterizeImage) { - status.picturesComplete = false; - } else { - if (hasUnresolvedPictureRef) { - status.messages.push({ - header: 'Missing picture', - details: 'Your trace didnt have pictures for every layer. ' + - 'Old chrome versions had this problem'}); - } - if (hasMissingLayerRect) { - status.messages.push({ - header: 'Missing layer rect', - details: 'Your trace may be corrupt or from a very old ' + - 'Chrome revision.'}); - } - if (firstPictureError) { - status.messages.push({ - header: 'Cannot rasterize', - details: firstPictureError}); - } - } - } - if (this.showInputEvents && this.layerTreeImpl.tracedInputLatencies && - this.inputEventImageData_ === undefined) { - var image = this.querySelector('#input-event'); - if (!image.src) { - this.loadDataForImageElement_(image, function(imageData) { - this.inputEventImageData_ = imageData; - this.updateContentsPending_ = false; - this.scheduleUpdateContents_(); - }.bind(this)); - } - status.picturesComplete = false; - } - return status; - }, - - get selectedRenderPass() { - if (this.selection) - return this.selection.renderPass_; - }, - - get selectedLayer() { - if (this.selection) { - var selectedLayerId = this.selection.associatedLayerId; - return this.layerTreeImpl_.findLayerWithId(selectedLayerId); - } - }, - - get renderPasses() { - var renderPasses = - this.layerTreeImpl.layerTreeHostImpl.args.frame.renderPasses; - if (!this.showOtherLayers) { - var selectedRenderPass = this.selectedRenderPass; - if (selectedRenderPass) - renderPasses = [selectedRenderPass]; - } - return renderPasses; - }, - - get layers() { - var layers = this.layerTreeImpl.renderSurfaceLayerList; - if (!this.showOtherLayers) { - var selectedLayer = this.selectedLayer; - if (selectedLayer) - layers = [selectedLayer]; - } - return layers; - }, - - appendImageQuads_: function(quads, layer, layerQuad) { - // Generate image quads for the layer - for (var ir = 0; ir < layer.pictures.length; ++ir) { - var picture = layer.pictures[ir]; - if (!picture.layerRect) - continue; - - var unitRect = picture.layerRect.asUVRectInside(layer.bounds); - var iq = layerQuad.projectUnitRect(unitRect); - - var pictureData = this.pictureAsImageData_[picture.guid]; - if (this.showContents && pictureData && pictureData.imageData) { - iq.imageData = pictureData.imageData; - iq.borderColor = 'rgba(0,0,0,0)'; - } else { - iq.imageData = undefined; - } - - iq.stackingGroupId = layerQuad.stackingGroupId; - quads.push(iq); - } - }, - - appendAnimationQuads_: function(quads, layer, layerQuad) { - if (!layer.animationBoundsRect) - return; - - var rect = layer.animationBoundsRect; - var abq = tr.b.Quad.fromRect(rect); - - abq.backgroundColor = 'rgba(164,191,48,0.5)'; - abq.borderColor = 'rgba(205,255,0,0.75)'; - abq.borderWidth = 3.0; - abq.stackingGroupId = layerQuad.stackingGroupId; - abq.selectionToSetIfClicked = new cc.AnimationRectSelection( - layer, rect); - quads.push(abq); - }, - - appendInvalidationQuads_: function(quads, layer, layerQuad) { - if (layer.layerTreeImpl.hasSourceFrameBeenDrawnBefore) - return; - - // Generate the invalidation rect quads. - for (var ir = 0; ir < layer.annotatedInvalidation.rects.length; ir++) { - var rect = layer.annotatedInvalidation.rects[ir]; - var unitRect = rect.asUVRectInside(layer.bounds); - var iq = layerQuad.projectUnitRect(unitRect); - iq.backgroundColor = 'rgba(0, 255, 0, 0.1)'; - if (rect.reason === 'renderer insertion') - iq.backgroundColor = 'rgba(0, 255, 128, 0.1)'; - iq.borderColor = 'rgba(0, 255, 0, 1)'; - iq.stackingGroupId = layerQuad.stackingGroupId; - iq.selectionToSetIfClicked = new cc.LayerRectSelection( - layer, 'Invalidation rect (' + rect.reason + ')', rect, rect); - quads.push(iq); - } - - // Show unannotated invalidation rect quads if no annotated rects are - // available. - if (layer.annotatedInvalidation.rects.length === 0) { - for (var ir = 0; ir < layer.invalidation.rects.length; ir++) { - var rect = layer.invalidation.rects[ir]; - var unitRect = rect.asUVRectInside(layer.bounds); - var iq = layerQuad.projectUnitRect(unitRect); - iq.backgroundColor = 'rgba(0, 255, 0, 0.1)'; - iq.borderColor = 'rgba(0, 255, 0, 1)'; - iq.stackingGroupId = layerQuad.stackingGroupId; - iq.selectionToSetIfClicked = new cc.LayerRectSelection( - layer, 'Invalidation rect', rect, rect); - quads.push(iq); - } - } - }, - - appendUnrecordedRegionQuads_: function(quads, layer, layerQuad) { - // Generate the unrecorded region quads. - for (var ir = 0; ir < layer.unrecordedRegion.rects.length; ir++) { - var rect = layer.unrecordedRegion.rects[ir]; - var unitRect = rect.asUVRectInside(layer.bounds); - var iq = layerQuad.projectUnitRect(unitRect); - iq.backgroundColor = 'rgba(240, 230, 140, 0.3)'; - iq.borderColor = 'rgba(240, 230, 140, 1)'; - iq.stackingGroupId = layerQuad.stackingGroupId; - iq.selectionToSetIfClicked = new cc.LayerRectSelection( - layer, 'Unrecorded area', rect, rect); - quads.push(iq); - } - }, - - appendBottleneckQuads_: function(quads, layer, layerQuad, stackingGroupId) { - function processRegion(region, label, borderColor) { - var backgroundColor = borderColor.clone(); - backgroundColor.a = 0.4 * (borderColor.a || 1.0); - - if (!region || !region.rects) - return; - - for (var ir = 0; ir < region.rects.length; ir++) { - var rect = region.rects[ir]; - var unitRect = rect.asUVRectInside(layer.bounds); - var iq = layerQuad.projectUnitRect(unitRect); - iq.backgroundColor = backgroundColor.toString(); - iq.borderColor = borderColor.toString(); - iq.borderWidth = 4.0; - iq.stackingGroupId = stackingGroupId; - iq.selectionToSetIfClicked = new cc.LayerRectSelection( - layer, label, rect, rect); - quads.push(iq); - } - } - - processRegion(layer.touchEventHandlerRegion, 'Touch listener', - tr.b.Color.fromString('rgb(228, 226, 27)')); - processRegion(layer.wheelEventHandlerRegion, 'Wheel listener', - tr.b.Color.fromString('rgb(176, 205, 29)')); - processRegion(layer.nonFastScrollableRegion, 'Repaints on scroll', - tr.b.Color.fromString('rgb(213, 134, 32)')); - }, - - appendTileCoverageRectQuads_: function( - quads, layer, layerQuad, heatmapType) { - if (!layer.tileCoverageRects) - return; - - var tiles = []; - for (var ct = 0; ct < layer.tileCoverageRects.length; ++ct) { - var tile = layer.tileCoverageRects[ct].tile; - if (tile !== undefined) - tiles.push(tile); - } - - var lthi = this.layerTreeImpl_.layerTreeHostImpl; - var minMax = - this.getMinMaxForHeatmap_(lthi.activeTiles, heatmapType); - var heatmapResult = - this.computeHeatmapColors_(tiles, minMax, heatmapType); - var heatIndex = 0; - - for (var ct = 0; ct < layer.tileCoverageRects.length; ++ct) { - var rect = layer.tileCoverageRects[ct].geometryRect; - rect = rect.scale(1.0 / layer.geometryContentsScale); - - var tile = layer.tileCoverageRects[ct].tile; - - var unitRect = rect.asUVRectInside(layer.bounds); - var quad = layerQuad.projectUnitRect(unitRect); - - quad.backgroundColor = 'rgba(0, 0, 0, 0)'; - quad.stackingGroupId = layerQuad.stackingGroupId; - var type = tr.e.cc.tileTypes.missing; - if (tile) { - type = tile.getTypeForLayer(layer); - quad.backgroundColor = heatmapResult[heatIndex].color; - ++heatIndex; - } - - quad.borderColor = tr.e.cc.tileBorder[type].color; - quad.borderWidth = tr.e.cc.tileBorder[type].width; - var label; - if (tile) - label = 'coverageRect'; - else - label = 'checkerboard coverageRect'; - quad.selectionToSetIfClicked = new cc.LayerRectSelection( - layer, label, rect, layer.tileCoverageRects[ct]); - - quads.push(quad); - } - }, - - appendLayoutRectQuads_: function(quads, layer, layerQuad) { - if (!layer.layoutRects) { - return; - } - - for (var ct = 0; ct < layer.layoutRects.length; ++ct) { - var rect = layer.layoutRects[ct].geometryRect; - rect = rect.scale(1.0 / layer.geometryContentsScale); - - var unitRect = rect.asUVRectInside(layer.bounds); - var quad = layerQuad.projectUnitRect(unitRect); - - quad.backgroundColor = 'rgba(0, 0, 0, 0)'; - quad.stackingGroupId = layerQuad.stackingGroupId; - - quad.borderColor = 'rgba(0, 0, 200, 0.7)'; - quad.borderWidth = 2; - var label; - label = 'Layout rect'; - quad.selectionToSetIfClicked = new cc.LayerRectSelection( - layer, label, rect); - - quads.push(quad); - } - }, - - getValueForHeatmap_: function(tile, heatmapType) { - if (heatmapType == TILE_HEATMAP_TYPE.SCHEDULED_PRIORITY) { - return tile.scheduledPriority == 0 ? - undefined : - tile.scheduledPriority; - } else if (heatmapType == TILE_HEATMAP_TYPE.USING_GPU_MEMORY) { - if (tile.isSolidColor) - return 0.5; - return tile.isUsingGpuMemory ? 0 : 1; - } - }, - - getMinMaxForHeatmap_: function(tiles, heatmapType) { - var range = new tr.b.Range(); - if (heatmapType == TILE_HEATMAP_TYPE.USING_GPU_MEMORY) { - range.addValue(0); - range.addValue(1); - return range; - } - - for (var i = 0; i < tiles.length; ++i) { - var value = this.getValueForHeatmap_(tiles[i], heatmapType); - if (value === undefined) - continue; - range.addValue(value); - } - if (range.range === 0) - range.addValue(1); - return range; - }, - - computeHeatmapColors_: function(tiles, minMax, heatmapType) { - var min = minMax.min; - var max = minMax.max; - - var color = function(value) { - var hue = 120 * (1 - (value - min) / (max - min)); - if (hue < 0) - hue = 0; - return 'hsla(' + hue + ', 100%, 50%, 0.5)'; - }; - - var values = []; - for (var i = 0; i < tiles.length; ++i) { - var tile = tiles[i]; - var value = this.getValueForHeatmap_(tile, heatmapType); - var res = { - value: value, - color: value !== undefined ? color(value) : undefined - }; - values.push(res); - } - - return values; - }, - - appendTilesWithScaleQuads_: function( - quads, layer, layerQuad, scale, heatmapType) { - var lthi = this.layerTreeImpl_.layerTreeHostImpl; - - var tiles = []; - for (var i = 0; i < lthi.activeTiles.length; ++i) { - var tile = lthi.activeTiles[i]; - - if (Math.abs(tile.contentsScale - scale) > 1e-6) - continue; - - // TODO(vmpstr): Make the stiching of tiles and layers a part of - // tile construction (issue 346) - if (layer.layerId != tile.layerId) - continue; - - tiles.push(tile); - } - - var minMax = - this.getMinMaxForHeatmap_(lthi.activeTiles, heatmapType); - var heatmapResult = - this.computeHeatmapColors_(tiles, minMax, heatmapType); - - for (var i = 0; i < tiles.length; ++i) { - var tile = tiles[i]; - var rect = tile.layerRect; - if (!tile.layerRect) - continue; - var unitRect = rect.asUVRectInside(layer.bounds); - var quad = layerQuad.projectUnitRect(unitRect); - - quad.backgroundColor = 'rgba(0, 0, 0, 0)'; - quad.stackingGroupId = layerQuad.stackingGroupId; - - var type = tile.getTypeForLayer(layer); - quad.borderColor = tr.e.cc.tileBorder[type].color; - quad.borderWidth = tr.e.cc.tileBorder[type].width; - - quad.backgroundColor = heatmapResult[i].color; - var data = { - tileType: type - }; - if (heatmapType !== TILE_HEATMAP_TYPE.NONE) - data[heatmapType] = heatmapResult[i].value; - quad.selectionToSetIfClicked = new cc.TileSelection(tile, data); - quads.push(quad); - } - }, - - appendHighlightQuadsForLayer_: function( - quads, layer, layerQuad, highlights) { - highlights.forEach(function(highlight) { - var rect = highlight.rect; - - var unitRect = rect.asUVRectInside(layer.bounds); - var quad = layerQuad.projectUnitRect(unitRect); - - var colorId = ColorScheme.getColorIdForGeneralPurposeString( - highlight.colorKey); - colorId += ColorScheme.properties.brightenedOffsets[0]; - - var color = ColorScheme.colors[colorId]; - - var quadForDrawing = quad.clone(); - quadForDrawing.backgroundColor = color.withAlpha(0.5).toString(); - quadForDrawing.borderColor = color.withAlpha(1.0).darken().toString(); - quadForDrawing.stackingGroupId = layerQuad.stackingGroupId; - quads.push(quadForDrawing); - - }, this); - }, - - generateRenderPassQuads: function() { - if (!this.layerTreeImpl.layerTreeHostImpl.args.frame) - return []; - var renderPasses = this.renderPasses; - if (!renderPasses) - return []; - - var quads = []; - for (var i = 0; i < renderPasses.length; ++i) { - var quadList = renderPasses[i].quadList; - for (var j = 0; j < quadList.length; ++j) { - var drawQuad = quadList[j]; - var quad = drawQuad.rectAsTargetSpaceQuad.clone(); - quad.borderColor = 'rgb(170, 204, 238)'; - quad.borderWidth = 2; - quad.stackingGroupId = i; - quads.push(quad); - } - } - return quads; - }, - - generateLayerQuads: function() { - this.updateContentsPending_ = false; - - // Generate the quads for the view. - var layers = this.layers; - var quads = []; - var nextStackingGroupId = 0; - var alreadyVisitedLayerIds = {}; - - - var selectionHighlightsByLayerId; - if (this.selection) - selectionHighlightsByLayerId = this.selection.highlightsByLayerId; - else - selectionHighlightsByLayerId = {}; - - var extraHighlightsByLayerId = this.extraHighlightsByLayerId || {}; - - for (var i = 1; i <= layers.length; i++) { - // Generate quads back-to-front. - var layer = layers[layers.length - i]; - alreadyVisitedLayerIds[layer.layerId] = true; - if (layer.objectInstance.name == 'cc::NinePatchLayerImpl') - continue; - - var layerQuad = layer.layerQuad.clone(); - if (layer.usingGpuRasterization) { - var pixelRatio = window.devicePixelRatio || 1; - layerQuad.borderWidth = 2.0 * pixelRatio; - layerQuad.borderColor = 'rgba(154,205,50,0.75)'; - } else { - layerQuad.borderColor = 'rgba(0,0,0,0.75)'; - } - layerQuad.stackingGroupId = nextStackingGroupId++; - layerQuad.selectionToSetIfClicked = new cc.LayerSelection(layer); - layerQuad.layer = layer; - if (this.showOtherLayers && this.selectedLayer == layer) - layerQuad.upperBorderColor = 'rgb(156,189,45)'; - - if (this.showAnimationBounds) - this.appendAnimationQuads_(quads, layer, layerQuad); - - this.appendImageQuads_(quads, layer, layerQuad); - quads.push(layerQuad); - - - if (this.showInvalidations) - this.appendInvalidationQuads_(quads, layer, layerQuad); - if (this.showUnrecordedRegion) - this.appendUnrecordedRegionQuads_(quads, layer, layerQuad); - if (this.showBottlenecks) - this.appendBottleneckQuads_(quads, layer, layerQuad, - layerQuad.stackingGroupId); - if (this.showLayoutRects) - this.appendLayoutRectQuads_(quads, layer, layerQuad); - - if (this.howToShowTiles === 'coverage') { - this.appendTileCoverageRectQuads_( - quads, layer, layerQuad, this.tileHeatmapType); - } else if (this.howToShowTiles !== 'none') { - this.appendTilesWithScaleQuads_( - quads, layer, layerQuad, - this.howToShowTiles, this.tileHeatmapType); - } - - var highlights; - highlights = extraHighlightsByLayerId[layer.layerId]; - if (highlights) { - this.appendHighlightQuadsForLayer_( - quads, layer, layerQuad, highlights); - } - - highlights = selectionHighlightsByLayerId[layer.layerId]; - if (highlights) { - this.appendHighlightQuadsForLayer_( - quads, layer, layerQuad, highlights); - } - } - - this.layerTreeImpl.iterLayers(function(layer, depth, isMask, isReplica) { - if (!this.showOtherLayers && this.selectedLayer != layer) - return; - if (alreadyVisitedLayerIds[layer.layerId]) - return; - var layerQuad = layer.layerQuad; - var stackingGroupId = nextStackingGroupId++; - if (this.showBottlenecks) - this.appendBottleneckQuads_(quads, layer, layerQuad, stackingGroupId); - }, this); - - var tracedInputLatencies = this.layerTreeImpl.tracedInputLatencies; - if (this.showInputEvents && tracedInputLatencies) { - for (var i = 0; i < tracedInputLatencies.length; i++) { - var coordinatesArray = tracedInputLatencies[i].args.data.coordinates; - for (var j = 0; j < coordinatesArray.length; j++) { - var inputQuad = tr.b.Quad.fromXYWH( - coordinatesArray[j].x - 25, - coordinatesArray[j].y - 25, - 50, - 50); - inputQuad.borderColor = 'rgba(0, 0, 0, 0)'; - inputQuad.imageData = this.inputEventImageData_; - quads.push(inputQuad); - } - } - } - - return quads; - }, - - updateInfoBar_: function(infoBarMessages) { - if (infoBarMessages.length) { - this.infoBar_.removeAllButtons(); - this.infoBar_.message = 'Some problems were encountered...'; - this.infoBar_.addButton('More info...', function(e) { - var overlay = new tr.ui.b.Overlay(); - overlay.textContent = ''; - infoBarMessages.forEach(function(message) { - var title = document.createElement('h3'); - title.textContent = message.header; - - var details = document.createElement('div'); - details.textContent = message.details; - - overlay.appendChild(title); - overlay.appendChild(details); - }); - overlay.visible = true; - - e.stopPropagation(); - return false; - }); - this.infoBar_.visible = true; - } else { - this.infoBar_.removeAllButtons(); - this.infoBar_.message = ''; - this.infoBar_.visible = false; - } - }, - - getWhatRasterized_: function() { - var lthi = this.layerTreeImpl_.layerTreeHostImpl; - var renderProcess = lthi.objectInstance.parent; - var tasks = []; - for (var event of renderProcess.getDescendantEvents()) { - if (!(event instanceof tr.model.Slice)) - continue; - - var tile = tr.e.cc.getTileFromRasterTaskSlice(event); - if (tile === undefined) - continue; - - if (tile.containingSnapshot == lthi) - tasks.push(event); - } - return tasks; - }, - - updateWhatRasterizedLinkState_: function() { - var tasks = this.getWhatRasterized_(); - if (tasks.length) { - this.whatRasterizedLink_.textContent = tasks.length + ' raster tasks'; - this.whatRasterizedLink_.style.display = ''; - } else { - this.whatRasterizedLink_.textContent = ''; - this.whatRasterizedLink_.style.display = 'none'; - } - }, - - onWhatRasterizedLinkClicked_: function() { - var tasks = this.getWhatRasterized_(); - var event = new tr.model.RequestSelectionChangeEvent(); - event.selection = new tr.model.EventSet(tasks); - this.dispatchEvent(event); - } - }; - - return { - LayerTreeQuadStackView: LayerTreeQuadStackView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view_test.html deleted file mode 100644 index 50c6477c142..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view_test.html +++ /dev/null @@ -1,49 +0,0 @@ -<!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/core/test_utils.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/cc.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html"> - -<script src="/tracing/extras/chrome/cc/layer_tree_host_impl_test_data.js"> -</script> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('tileCoverageRectCount', function() { - var m = tr.c.TestUtils.newModelWithEvents([g_catLTHIEvents]); - var p = m.processes[1]; - - var instance = p.objects.getAllInstancesNamed('cc::LayerTreeHostImpl')[0]; - var lthi = instance.snapshots[0]; - var numLayers = lthi.activeTree.renderSurfaceLayerList.length; - var layer = lthi.activeTree.renderSurfaceLayerList[numLayers - 1]; - - var view = new tr.ui.e.chrome.cc.LayerTreeQuadStackView(); - view.layerTreeImpl = lthi.activeTree; - view.selection = new tr.ui.e.chrome.cc.LayerSelection(layer); - view.howToShowTiles = 'none'; - view.showInvalidations = false; - view.showContents = false; - view.showOtherLAyers = false; - - // There should be some quads drawn with all "show" checkboxes off, - // but that number can change with new features added. - var aQuads = view.generateLayerQuads(); - view.howToShowTiles = 'coverage'; - var bQuads = view.generateLayerQuads(); - var numCoverageRects = bQuads.length - aQuads.length; - - // We know we have 5 coverage rects in lthi cats. - assert.equal(numCoverageRects, 5); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view.css deleted file mode 100644 index 612dbc2eb9a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view.css +++ /dev/null @@ -1,31 +0,0 @@ -/* 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. - */ - -* /deep/ tr-ui-e-chrome-cc-layer-view { - -webkit-flex-direction: column; - display: -webkit-flex; - left: 0; - position: relative; - top: 0; -} - -* /deep/ tr-ui-e-chrome-cc-layer-view > - tr-ui-e-chrome-cc-layer-tree-quad-stack-view { - -webkit-flex: 1 1 100%; - -webkit-flex-direction: column; - min-height: 0; - display: -webkit-flex; - width: 100%; -} - -* /deep/tr-ui-e-chrome-cc- layer-view > tr-ui-e-chrome-cc-layer-view-analysis { - height: 150px; /* fixed height given by drag control */ - overflow-y: auto; -} - -* /deep/ tr-ui-e-chrome-cc-layer-view > - tr-ui-e-chrome-cc-layer-view-analysis * { - -webkit-user-select: text; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view.html deleted file mode 100644 index ab2a403283b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view.html +++ /dev/null @@ -1,149 +0,0 @@ -<!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="stylesheet" href="/tracing/ui/extras/chrome/cc/layer_view.css"> - -<link rel="import" href="/tracing/base/raf.html"> -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/extras/chrome/cc/constants.html"> -<link rel="import" href="/tracing/extras/chrome/cc/picture.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/ui/base/drag_handle.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_tree_quad_stack_view.html"> - -<script> -'use strict'; - -/** - * @fileoverview LayerView coordinates graphical and analysis views of layers. - */ - -tr.exportTo('tr.ui.e.chrome.cc', function() { - var constants = tr.e.cc.constants; - - /** - * @constructor - */ - var LayerView = tr.ui.b.define('tr-ui-e-chrome-cc-layer-view'); - - LayerView.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.layerTreeQuadStackView_ = - new tr.ui.e.chrome.cc.LayerTreeQuadStackView(); - this.dragBar_ = document.createElement('tr-ui-b-drag-handle'); - this.analysisEl_ = - document.createElement('tr-ui-e-chrome-cc-layer-view-analysis'); - this.analysisEl_.addEventListener('requestSelectionChange', - this.onRequestSelectionChangeFromAnalysisEl_.bind(this)); - - this.dragBar_.target = this.analysisEl_; - - this.appendChild(this.layerTreeQuadStackView_); - this.appendChild(this.dragBar_); - this.appendChild(this.analysisEl_); - - this.layerTreeQuadStackView_.addEventListener('selection-change', - function() { - this.layerTreeQuadStackViewSelectionChanged_(); - }.bind(this)); - this.layerTreeQuadStackViewSelectionChanged_(); - }, - - get layerTreeImpl() { - return this.layerTreeQuadStackView_.layerTreeImpl; - }, - - set layerTreeImpl(newValue) { - return this.layerTreeQuadStackView_.layerTreeImpl = newValue; - }, - - set isRenderPassQuads(newValue) { - return this.layerTreeQuadStackView_.isRenderPassQuads = newValue; - }, - - get selection() { - return this.layerTreeQuadStackView_.selection; - }, - - set selection(newValue) { - this.layerTreeQuadStackView_.selection = newValue; - }, - - regenerateContent: function() { - this.layerTreeQuadStackView_.regenerateContent(); - }, - - layerTreeQuadStackViewSelectionChanged_: function() { - var selection = this.layerTreeQuadStackView_.selection; - if (selection) { - this.dragBar_.style.display = ''; - this.analysisEl_.style.display = ''; - this.analysisEl_.textContent = ''; - - var layer = selection.layer; - if (layer && layer.args && layer.args.pictures) { - this.analysisEl_.appendChild( - this.createPictureBtn_(layer.args.pictures)); - } - - var analysis = selection.createAnalysis(); - this.analysisEl_.appendChild(analysis); - } else { - this.dragBar_.style.display = 'none'; - this.analysisEl_.style.display = 'none'; - var analysis = this.analysisEl_.firstChild; - if (analysis) - this.analysisEl_.removeChild(analysis); - this.layerTreeQuadStackView_.style.height = - window.getComputedStyle(this).height; - } - tr.b.dispatchSimpleEvent(this, 'selection-change'); - }, - - createPictureBtn_: function(pictures) { - if (!(pictures instanceof Array)) - pictures = [pictures]; - - var link = document.createElement('tr-ui-a-analysis-link'); - link.selection = function() { - var layeredPicture = new tr.e.cc.LayeredPicture(pictures); - var snapshot = new tr.e.cc.PictureSnapshot(layeredPicture); - snapshot.picture = layeredPicture; - - var selection = new tr.model.EventSet(); - selection.push(snapshot); - return selection; - }; - link.textContent = 'View in Picture Debugger'; - return link; - }, - - onRequestSelectionChangeFromAnalysisEl_: function(e) { - if (!(e.selection instanceof tr.ui.e.chrome.cc.Selection)) - return; - - e.stopPropagation(); - this.selection = e.selection; - }, - - get extraHighlightsByLayerId() { - return this.layerTreeQuadStackView_.extraHighlightsByLayerId; - }, - - set extraHighlightsByLayerId(extraHighlightsByLayerId) { - this.layerTreeQuadStackView_.extraHighlightsByLayerId = - extraHighlightsByLayerId; - } - }; - - return { - LayerView: LayerView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view_test.html deleted file mode 100644 index a4bcab78785..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/layer_view_test.html +++ /dev/null @@ -1,55 +0,0 @@ -<!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/core/test_utils.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/cc.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_view.html"> - -<script src="/tracing/extras/chrome/cc/layer_tree_host_impl_test_data.js"> -</script> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiate', function() { - var m = tr.c.TestUtils.newModelWithEvents([g_catLTHIEvents]); - var p = m.processes[1]; - - var instance = p.objects.getAllInstancesNamed('cc::LayerTreeHostImpl')[0]; - var lthi = instance.snapshots[0]; - var numLayers = lthi.activeTree.renderSurfaceLayerList.length; - var layer = lthi.activeTree.renderSurfaceLayerList[numLayers - 1]; - - var view = new tr.ui.e.chrome.cc.LayerView(); - view.style.height = '500px'; - view.layerTreeImpl = lthi.activeTree; - view.selection = new tr.ui.e.chrome.cc.LayerSelection(layer); - - this.addHTMLOutput(view); - }); - - test('instantiate_withTileHighlight', function() { - var m = tr.c.TestUtils.newModelWithEvents([g_catLTHIEvents]); - var p = m.processes[1]; - - var instance = p.objects.getAllInstancesNamed('cc::LayerTreeHostImpl')[0]; - var lthi = instance.snapshots[0]; - var numLayers = lthi.activeTree.renderSurfaceLayerList.length; - var layer = lthi.activeTree.renderSurfaceLayerList[numLayers - 1]; - var tile = lthi.activeTiles[0]; - - var view = new tr.ui.e.chrome.cc.LayerView(); - view.style.height = '500px'; - view.layerTreeImpl = lthi.activeTree; - view.selection = new tr.ui.e.chrome.cc.TileSelection(tile); - this.addHTMLOutput(view); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_debugger.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_debugger.html deleted file mode 100644 index 28d51d16d93..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_debugger.html +++ /dev/null @@ -1,495 +0,0 @@ -<!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/extras/chrome/cc/picture.html"> -<link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> -<link rel="import" href="/tracing/ui/base/drag_handle.html"> -<link rel="import" href="/tracing/ui/base/info_bar.html"> -<link rel="import" href="/tracing/ui/base/hotkey_controller.html"> -<link rel="import" href="/tracing/ui/base/list_view.html"> -<link rel="import" href="/tracing/ui/base/mouse_mode_selector.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/extras/chrome/cc/picture_ops_chart_summary_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_chart_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html"> - -<template id="tr-ui-e-chrome-cc-picture-debugger-template"> - <style> - * /deep/ tr-ui-e-chrome-cc-picture-debugger { - -webkit-flex: 1 1 auto; - -webkit-flex-direction: row; - display: -webkit-flex; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-a-generic-object-view { - -webkit-flex-direction: column; - display: -webkit-flex; - width: 400px; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel { - -webkit-flex-direction: column; - display: -webkit-flex; - min-width: 300px; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel > picture-info { - -webkit-flex: 0 0 auto; - padding-top: 2px; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger > left-panel > - picture-info .title { - font-weight: bold; - margin-left: 5px; - margin-right: 5px; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger > tr-ui-b-drag-handle { - -webkit-flex: 0 0 auto; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger .filename { - -webkit-user-select: text; - margin-left: 5px; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel { - -webkit-flex: 1 1 auto; - -webkit-flex-direction: column; - display: -webkit-flex; - } - - * /deep/ tr-ui-e-chrome-cc-picture-debugger > right-panel > - tr-ui-e-chrome-cc-picture-ops-chart-view { - min-height: 150px; - min-width : 0; - overflow-x: auto; - overflow-y: hidden; - } - - /*************************************************/ - - * /deep/ tr-ui-e-chrome-cc-picture-debugger raster-area { - background-color: #ddd; - min-height: 200px; - min-width: 200px; - overflow-y: auto; - padding-left: 5px; - } - </style> - - <left-panel> - <picture-info> - <div> - <span class='title'>Skia Picture</span> - <span class='size'></span> - </div> - <div> - <input class='filename' type='text' value='skpicture.skp' /> - <button class='export'>Export</button> - </div> - </picture-info> - </left-panel> - <right-panel> - <tr-ui-e-chrome-cc-picture-ops-chart-view> - </tr-ui-e-chrome-cc-picture-ops-chart-view> - <raster-area><canvas></canvas></raster-area> - </right-panel> -</template> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - var THIS_DOC = document.currentScript.ownerDocument; - - /** - * PictureDebugger is a view of a PictureSnapshot for inspecting - * the picture in detail. (e.g., timing information, etc.) - * - * @constructor - */ - var PictureDebugger = tr.ui.b.define('tr-ui-e-chrome-cc-picture-debugger'); - - PictureDebugger.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - var node = tr.ui.b.instantiateTemplate( - '#tr-ui-e-chrome-cc-picture-debugger-template', THIS_DOC); - - this.appendChild(node); - - this.pictureAsImageData_ = undefined; - this.showOverdraw_ = false; - this.zoomScaleValue_ = 1; - - this.sizeInfo_ = this.querySelector('.size'); - this.rasterArea_ = this.querySelector('raster-area'); - this.rasterCanvas_ = this.rasterArea_.querySelector('canvas'); - this.rasterCtx_ = this.rasterCanvas_.getContext('2d'); - - this.filename_ = this.querySelector('.filename'); - - this.drawOpsChartSummaryView_ = - new tr.ui.e.chrome.cc.PictureOpsChartSummaryView(); - this.drawOpsChartView_ = new tr.ui.e.chrome.cc.PictureOpsChartView(); - this.drawOpsChartView_.addEventListener( - 'selection-changed', this.onChartBarClicked_.bind(this)); - - this.exportButton_ = this.querySelector('.export'); - this.exportButton_.addEventListener( - 'click', this.onSaveAsSkPictureClicked_.bind(this)); - - this.trackMouse_(); - - var overdrawCheckbox = tr.ui.b.createCheckBox( - this, 'showOverdraw', - 'pictureView.showOverdraw', false, - 'Show overdraw'); - - var chartCheckbox = tr.ui.b.createCheckBox( - this, 'showSummaryChart', - 'pictureView.showSummaryChart', false, - 'Show timing summary'); - - var pictureInfo = this.querySelector('picture-info'); - pictureInfo.appendChild(overdrawCheckbox); - pictureInfo.appendChild(chartCheckbox); - - this.drawOpsView_ = new tr.ui.e.chrome.cc.PictureOpsListView(); - this.drawOpsView_.addEventListener( - 'selection-changed', this.onChangeDrawOps_.bind(this)); - - var leftPanel = this.querySelector('left-panel'); - leftPanel.appendChild(this.drawOpsChartSummaryView_); - leftPanel.appendChild(this.drawOpsView_); - - var middleDragHandle = document.createElement('tr-ui-b-drag-handle'); - middleDragHandle.horizontal = false; - middleDragHandle.target = leftPanel; - - var rightPanel = this.querySelector('right-panel'); - rightPanel.replaceChild( - this.drawOpsChartView_, - rightPanel.querySelector('tr-ui-e-chrome-cc-picture-ops-chart-view')); - - this.infoBar_ = document.createElement('tr-ui-b-info-bar'); - this.rasterArea_.appendChild(this.infoBar_); - - this.insertBefore(middleDragHandle, rightPanel); - - this.picture_ = undefined; - - var hkc = document.createElement('tv-ui-b-hotkey-controller'); - hkc.addHotKey(new tr.ui.b.HotKey({ - eventType: 'keypress', - thisArg: this, - keyCode: 'h'.charCodeAt(0), - callback: function(e) { - this.moveSelectedOpBy(-1); - e.stopPropagation(); - } - })); - hkc.addHotKey(new tr.ui.b.HotKey({ - eventType: 'keypress', - thisArg: this, - keyCode: 'l'.charCodeAt(0), - callback: function(e) { - this.moveSelectedOpBy(1); - e.stopPropagation(); - } - })); - this.appendChild(hkc); - - // Add a mutation observer so that when the view is resized we can - // update the chart summary view. - this.mutationObserver_ = new MutationObserver( - this.onMutation_.bind(this)); - this.mutationObserver_.observe(leftPanel, { attributes: true }); - }, - - onMutation_: function(mutations) { - - for (var m = 0; m < mutations.length; m++) { - // A style change would indicate that the element has resized - // so we should re-render the chart. - if (mutations[m].attributeName === 'style') { - this.drawOpsChartSummaryView_.requiresRedraw = true; - this.drawOpsChartSummaryView_.updateChartContents(); - - this.drawOpsChartView_.dimensionsHaveChanged = true; - this.drawOpsChartView_.updateChartContents(); - break; - } - } - }, - - onSaveAsSkPictureClicked_: function() { - // Decode base64 data into a String - var rawData = tr.b.Base64.atob(this.picture_.getBase64SkpData()); - - // Convert this String into an Uint8Array - var length = rawData.length; - var arrayBuffer = new ArrayBuffer(length); - var uint8Array = new Uint8Array(arrayBuffer); - for (var c = 0; c < length; c++) - uint8Array[c] = rawData.charCodeAt(c); - - // Create a blob URL from the binary array. - var blob = new Blob([uint8Array], {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; - link.download = this.filename_.value; - var event = document.createEvent('MouseEvents'); - event.initMouseEvent( - 'click', true, false, window, 0, 0, 0, 0, 0, - false, false, false, false, 0, null); - link.dispatchEvent(event); - }, - - get picture() { - return this.picture_; - }, - - set picture(picture) { - this.drawOpsView_.picture = picture; - this.drawOpsChartView_.picture = picture; - this.drawOpsChartSummaryView_.picture = picture; - this.picture_ = picture; - - this.exportButton_.disabled = !this.picture_.canSave; - - if (picture) { - var size = this.getRasterCanvasSize_(); - this.rasterCanvas_.width = size.width; - this.rasterCanvas_.height = size.height; - } - - var bounds = this.rasterArea_.getBoundingClientRect(); - var selectorBounds = this.mouseModeSelector_.getBoundingClientRect(); - this.mouseModeSelector_.pos = { - x: (bounds.right - selectorBounds.width - 10), - y: bounds.top - }; - - this.rasterize_(); - - this.scheduleUpdateContents_(); - }, - - getRasterCanvasSize_: function() { - var style = window.getComputedStyle(this.rasterArea_); - var width = - Math.max(parseInt(style.width), this.picture_.layerRect.width); - var height = - Math.max(parseInt(style.height), this.picture_.layerRect.height); - - return { - width: width, - height: height - }; - }, - - scheduleUpdateContents_: function() { - if (this.updateContentsPending_) - return; - this.updateContentsPending_ = true; - tr.b.requestAnimationFrameInThisFrameIfPossible( - this.updateContents_.bind(this) - ); - }, - - updateContents_: function() { - this.updateContentsPending_ = false; - - if (this.picture_) { - this.sizeInfo_.textContent = '(' + - this.picture_.layerRect.width + ' x ' + - this.picture_.layerRect.height + ')'; - } - - this.drawOpsChartView_.updateChartContents(); - this.drawOpsChartView_.scrollSelectedItemIntoViewIfNecessary(); - - // Return if picture hasn't finished rasterizing. - if (!this.pictureAsImageData_) - return; - - this.infoBar_.visible = false; - this.infoBar_.removeAllButtons(); - if (this.pictureAsImageData_.error) { - this.infoBar_.message = 'Cannot rasterize...'; - this.infoBar_.addButton('More info...', function(e) { - var overlay = new tr.ui.b.Overlay(); - overlay.textContent = this.pictureAsImageData_.error; - overlay.visible = true; - e.stopPropagation(); - return false; - }.bind(this)); - this.infoBar_.visible = true; - } - - this.drawPicture_(); - }, - - drawPicture_: function() { - var size = this.getRasterCanvasSize_(); - if (size.width !== this.rasterCanvas_.width) - this.rasterCanvas_.width = size.width; - if (size.height !== this.rasterCanvas_.height) - this.rasterCanvas_.height = size.height; - - this.rasterCtx_.clearRect(0, 0, size.width, size.height); - - if (!this.pictureAsImageData_.imageData) - return; - - var imgCanvas = this.pictureAsImageData_.asCanvas(); - var w = imgCanvas.width; - var h = imgCanvas.height; - this.rasterCtx_.drawImage(imgCanvas, 0, 0, w, h, - 0, 0, w * this.zoomScaleValue_, - h * this.zoomScaleValue_); - }, - - rasterize_: function() { - if (this.picture_) { - this.picture_.rasterize( - { - stopIndex: this.drawOpsView_.selectedOpIndex, - showOverdraw: this.showOverdraw_ - }, - this.onRasterComplete_.bind(this)); - } - }, - - onRasterComplete_: function(pictureAsImageData) { - this.pictureAsImageData_ = pictureAsImageData; - this.scheduleUpdateContents_(); - }, - - moveSelectedOpBy: function(increment) { - if (this.selectedOpIndex === undefined) { - this.selectedOpIndex = 0; - return; - } - this.selectedOpIndex = tr.b.clamp( - this.selectedOpIndex + increment, - 0, this.numOps); - }, - - get numOps() { - return this.drawOpsView_.numOps; - }, - - get selectedOpIndex() { - return this.drawOpsView_.selectedOpIndex; - }, - - set selectedOpIndex(index) { - this.drawOpsView_.selectedOpIndex = index; - this.drawOpsChartView_.selectedOpIndex = index; - }, - - onChartBarClicked_: function(e) { - this.drawOpsView_.selectedOpIndex = - this.drawOpsChartView_.selectedOpIndex; - }, - - onChangeDrawOps_: function(e) { - this.rasterize_(); - this.scheduleUpdateContents_(); - - this.drawOpsChartView_.selectedOpIndex = - this.drawOpsView_.selectedOpIndex; - }, - - set showOverdraw(v) { - this.showOverdraw_ = v; - this.rasterize_(); - }, - - set showSummaryChart(chartShouldBeVisible) { - if (chartShouldBeVisible) - this.drawOpsChartSummaryView_.show(); - else - this.drawOpsChartSummaryView_.hide(); - }, - - trackMouse_: function() { - this.mouseModeSelector_ = document.createElement( - 'tr-ui-b-mouse-mode-selector'); - this.mouseModeSelector_.targetElement = this.rasterArea_; - this.rasterArea_.appendChild(this.mouseModeSelector_); - - this.mouseModeSelector_.supportedModeMask = - tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; - this.mouseModeSelector_.mode = tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; - this.mouseModeSelector_.defaultMode = tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; - this.mouseModeSelector_.settingsKey = 'pictureDebugger.mouseModeSelector'; - - this.mouseModeSelector_.addEventListener('beginzoom', - this.onBeginZoom_.bind(this)); - this.mouseModeSelector_.addEventListener('updatezoom', - this.onUpdateZoom_.bind(this)); - this.mouseModeSelector_.addEventListener('endzoom', - this.onEndZoom_.bind(this)); - }, - - onBeginZoom_: function(e) { - this.isZooming_ = true; - - this.lastMouseViewPos_ = this.extractRelativeMousePosition_(e); - - e.preventDefault(); - }, - - onUpdateZoom_: function(e) { - if (!this.isZooming_) - return; - - var currentMouseViewPos = this.extractRelativeMousePosition_(e); - - // Take the distance the mouse has moved and we want to zoom at about - // 1/1000th of that speed. 0.01 feels jumpy. This could possibly be tuned - // more if people feel it's too slow. - this.zoomScaleValue_ += - ((this.lastMouseViewPos_.y - currentMouseViewPos.y) * 0.001); - this.zoomScaleValue_ = Math.max(this.zoomScaleValue_, 0.1); - - this.drawPicture_(); - - this.lastMouseViewPos_ = currentMouseViewPos; - }, - - onEndZoom_: function(e) { - this.lastMouseViewPos_ = undefined; - this.isZooming_ = false; - e.preventDefault(); - }, - - extractRelativeMousePosition_: function(e) { - return { - x: e.clientX - this.rasterArea_.offsetLeft, - y: e.clientY - this.rasterArea_.offsetTop - }; - } - }; - - return { - PictureDebugger: PictureDebugger - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_debugger_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_debugger_test.html deleted file mode 100644 index 1237fb6a29c..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_debugger_test.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/extras/chrome/cc/picture.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_debugger.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiate', function() { - var picture = new tr.e.cc.PictureSnapshot({id: '31415'}, 10, { - 'params': { - 'opaque_rect': [-15, -15, 0, 0], - 'layer_rect': [-15, -15, 46, 833] - }, - 'skp64': 'DAAAAHYEAADzAQAABwAAAAFkYWVy8AAAAAgAAB4DAAAADAAAIAAAgD8AAIA/CAAAHgMAAAAcAAADAAAAAAAAAAAAwI5EAID5QwEAAADoAAAACAAAHgMAAAAMAAAjAAAAAAAAAAAMAAAjAAAAAAAAAAAcAAADAAAAAAAAAAAAwI5EAID5QwEAAADkAAAAGAAAFQEAAAAAAAAAAAAAAADAjkQAgPlDGAAAFQIAAAAAAAAAAAAAAADAjkQAgPlDCAAAHgMAAAAcAAADAAAAAAAAAAAAwI5EAID5QwEAAADgAAAAGAAAFQMAAAAAAKBAAACgQAAAgEIAAIBCBAAAHAQAABwEAAAcBAAAHHRjYWYBAAAADVNrU3JjWGZlcm1vZGVjZnB0AAAAAHlhcmGgAAAAIHRucAMAAAAAAEBBAACAPwAAAAAAAIA/AAAAAAAAgEAAAP//ADABAAAAAAAAAEBBAACAPwAAAAAAAIA/AAAAAAAAgED/////AjABAAAAAAAAAAAAAAAAAAEAAAAEAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEEAAIA/AAAAAAAAgD8AAAAAAACAQP8AAP8AMAEAAAAAACBmb2U=' // @suppress longLineCheck - }); - picture.preInitialize(); - picture.initialize(); - - var dbg = new tr.ui.e.chrome.cc.PictureDebugger(); - this.addHTMLOutput(dbg); - dbg.picture = picture; - dbg.style.border = '1px solid black'; - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.css deleted file mode 100644 index fdc93e54c60..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.css +++ /dev/null @@ -1,18 +0,0 @@ -/* 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. - */ - -* /deep/ tr-ui-e-chrome-cc-picture-ops-chart-summary-view { - -webkit-flex: 0 0 auto; - font-size: 0; - margin: 0; - min-height: 200px; - min-width: 200px; - overflow: hidden; - padding: 0; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-chart-summary-view.hidden { - display: none; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html deleted file mode 100644 index 5ac0efb3d71..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.html +++ /dev/null @@ -1,472 +0,0 @@ -<!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="stylesheet" - href="/tracing/ui/extras/chrome/cc/picture_ops_chart_summary_view.css"> - -<link rel="import" href="/tracing/ui/base/ui.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - var OPS_TIMING_ITERATIONS = 3; - var CHART_PADDING_LEFT = 65; - var CHART_PADDING_RIGHT = 40; - var AXIS_PADDING_LEFT = 60; - var AXIS_PADDING_RIGHT = 35; - var AXIS_PADDING_TOP = 25; - var AXIS_PADDING_BOTTOM = 45; - var AXIS_LABEL_PADDING = 5; - var AXIS_TICK_SIZE = 10; - var LABEL_PADDING = 5; - var LABEL_INTERLEAVE_OFFSET = 15; - var BAR_PADDING = 5; - var VERTICAL_TICKS = 5; - var HUE_CHAR_CODE_ADJUSTMENT = 5.7; - - /** - * Provides a chart showing the cumulative time spent in Skia operations - * during picture rasterization. - * - * @constructor - */ - var PictureOpsChartSummaryView = tr.ui.b.define( - 'tr-ui-e-chrome-cc-picture-ops-chart-summary-view'); - - PictureOpsChartSummaryView.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.picture_ = undefined; - this.pictureDataProcessed_ = false; - - this.chartScale_ = window.devicePixelRatio; - - this.chart_ = document.createElement('canvas'); - this.chartCtx_ = this.chart_.getContext('2d'); - this.appendChild(this.chart_); - - this.opsTimingData_ = []; - - this.chartWidth_ = 0; - this.chartHeight_ = 0; - this.requiresRedraw_ = true; - - this.currentBarMouseOverTarget_ = null; - - this.chart_.addEventListener('mousemove', this.onMouseMove_.bind(this)); - }, - - get requiresRedraw() { - return this.requiresRedraw_; - }, - - set requiresRedraw(requiresRedraw) { - this.requiresRedraw_ = requiresRedraw; - }, - - get picture() { - return this.picture_; - }, - - set picture(picture) { - this.picture_ = picture; - this.pictureDataProcessed_ = false; - - if (this.classList.contains('hidden')) - return; - - this.processPictureData_(); - this.requiresRedraw = true; - this.updateChartContents(); - }, - - hide: function() { - this.classList.add('hidden'); - }, - - show: function() { - - this.classList.remove('hidden'); - - if (this.pictureDataProcessed_) - return; - - this.processPictureData_(); - this.requiresRedraw = true; - this.updateChartContents(); - - }, - - onMouseMove_: function(e) { - - var lastBarMouseOverTarget = this.currentBarMouseOverTarget_; - this.currentBarMouseOverTarget_ = null; - - var x = e.offsetX; - var y = e.offsetY; - - var chartLeft = CHART_PADDING_LEFT; - var chartRight = this.chartWidth_ - CHART_PADDING_RIGHT; - var chartTop = AXIS_PADDING_TOP; - var chartBottom = this.chartHeight_ - AXIS_PADDING_BOTTOM; - var chartInnerWidth = chartRight - chartLeft; - - if (x > chartLeft && x < chartRight && y > chartTop && y < chartBottom) { - - this.currentBarMouseOverTarget_ = Math.floor( - (x - chartLeft) / chartInnerWidth * this.opsTimingData_.length); - - this.currentBarMouseOverTarget_ = tr.b.clamp( - this.currentBarMouseOverTarget_, 0, this.opsTimingData_.length - 1); - - } - - if (this.currentBarMouseOverTarget_ === lastBarMouseOverTarget) - return; - - this.drawChartContents_(); - }, - - updateChartContents: function() { - - if (this.requiresRedraw) - this.updateChartDimensions_(); - - this.drawChartContents_(); - }, - - updateChartDimensions_: function() { - this.chartWidth_ = this.offsetWidth; - this.chartHeight_ = this.offsetHeight; - - // Scale up the canvas according to the devicePixelRatio, then reduce it - // down again via CSS. Finally we apply a scale to the canvas so that - // things are drawn at the correct size. - this.chart_.width = this.chartWidth_ * this.chartScale_; - this.chart_.height = this.chartHeight_ * this.chartScale_; - - this.chart_.style.width = this.chartWidth_ + 'px'; - this.chart_.style.height = this.chartHeight_ + 'px'; - - this.chartCtx_.scale(this.chartScale_, this.chartScale_); - }, - - processPictureData_: function() { - - this.resetOpsTimingData_(); - this.pictureDataProcessed_ = true; - - if (!this.picture_) - return; - - var ops = this.picture_.getOps(); - if (!ops) - return; - - ops = this.picture_.tagOpsWithTimings(ops); - - // Check that there are valid times. - if (ops[0].cmd_time === undefined) - return; - - this.collapseOpsToTimingBuckets_(ops); - }, - - drawChartContents_: function() { - - this.clearChartContents_(); - - if (this.opsTimingData_.length === 0) { - this.showNoTimingDataMessage_(); - return; - } - - this.drawChartAxes_(); - this.drawBars_(); - this.drawLineAtBottomOfChart_(); - - if (this.currentBarMouseOverTarget_ === null) - return; - - this.drawTooltip_(); - }, - - drawLineAtBottomOfChart_: function() { - this.chartCtx_.strokeStyle = '#AAA'; - this.chartCtx_.moveTo(0, this.chartHeight_ - 0.5); - this.chartCtx_.lineTo(this.chartWidth_, this.chartHeight_ - 0.5); - this.chartCtx_.stroke(); - }, - - drawTooltip_: function() { - - var tooltipData = this.opsTimingData_[this.currentBarMouseOverTarget_]; - var tooltipTitle = tooltipData.cmd_string; - var tooltipTime = tooltipData.cmd_time.toFixed(4); - - var tooltipWidth = 110; - var tooltipHeight = 40; - var chartInnerWidth = this.chartWidth_ - CHART_PADDING_RIGHT - - CHART_PADDING_LEFT; - var barWidth = chartInnerWidth / this.opsTimingData_.length; - var tooltipOffset = Math.round((tooltipWidth - barWidth) * 0.5); - - var left = CHART_PADDING_LEFT + this.currentBarMouseOverTarget_ * - barWidth - tooltipOffset; - var top = Math.round((this.chartHeight_ - tooltipHeight) * 0.5); - - this.chartCtx_.save(); - - this.chartCtx_.shadowOffsetX = 0; - this.chartCtx_.shadowOffsetY = 5; - this.chartCtx_.shadowBlur = 4; - this.chartCtx_.shadowColor = 'rgba(0,0,0,0.4)'; - - this.chartCtx_.strokeStyle = '#888'; - this.chartCtx_.fillStyle = '#EEE'; - this.chartCtx_.fillRect(left, top, tooltipWidth, tooltipHeight); - - this.chartCtx_.shadowColor = 'transparent'; - this.chartCtx_.translate(0.5, 0.5); - this.chartCtx_.strokeRect(left, top, tooltipWidth, tooltipHeight); - - this.chartCtx_.restore(); - - this.chartCtx_.fillStyle = '#222'; - this.chartCtx_.textBaseline = 'top'; - this.chartCtx_.font = '800 12px Arial'; - this.chartCtx_.fillText(tooltipTitle, left + 8, top + 8); - - this.chartCtx_.fillStyle = '#555'; - this.chartCtx_.textBaseline = 'top'; - this.chartCtx_.font = '400 italic 10px Arial'; - this.chartCtx_.fillText('Total: ' + tooltipTime + 'ms', - left + 8, top + 22); - }, - - drawBars_: function() { - - var len = this.opsTimingData_.length; - var max = this.opsTimingData_[0].cmd_time; - var min = this.opsTimingData_[len - 1].cmd_time; - - var width = this.chartWidth_ - CHART_PADDING_LEFT - CHART_PADDING_RIGHT; - var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM; - var barWidth = Math.floor(width / len); - - var opData; - var opTiming; - var opHeight; - var opLabel; - var barLeft; - - for (var b = 0; b < len; b++) { - - opData = this.opsTimingData_[b]; - opTiming = opData.cmd_time / max; - - opHeight = Math.round(Math.max(1, opTiming * height)); - opLabel = opData.cmd_string; - barLeft = CHART_PADDING_LEFT + b * barWidth; - - this.chartCtx_.fillStyle = this.getOpColor_(opLabel); - - this.chartCtx_.fillRect(barLeft + BAR_PADDING, AXIS_PADDING_TOP + - height - opHeight, barWidth - 2 * BAR_PADDING, opHeight); - } - - }, - - getOpColor_: function(opName) { - - var characters = opName.split(''); - var hue = characters.reduce(this.reduceNameToHue, 0) % 360; - - return 'hsl(' + hue + ', 30%, 50%)'; - }, - - reduceNameToHue: function(previousValue, currentValue, index, array) { - // Get the char code and apply a magic adjustment value so we get - // pretty colors from around the rainbow. - return Math.round(previousValue + currentValue.charCodeAt(0) * - HUE_CHAR_CODE_ADJUSTMENT); - }, - - drawChartAxes_: function() { - - var len = this.opsTimingData_.length; - var max = this.opsTimingData_[0].cmd_time; - var min = this.opsTimingData_[len - 1].cmd_time; - - var width = this.chartWidth_ - AXIS_PADDING_LEFT - AXIS_PADDING_RIGHT; - var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM; - - var totalBarWidth = this.chartWidth_ - CHART_PADDING_LEFT - - CHART_PADDING_RIGHT; - var barWidth = Math.floor(totalBarWidth / len); - var tickYInterval = height / (VERTICAL_TICKS - 1); - var tickYPosition = 0; - var tickValInterval = (max - min) / (VERTICAL_TICKS - 1); - var tickVal = 0; - - this.chartCtx_.fillStyle = '#333'; - this.chartCtx_.strokeStyle = '#777'; - this.chartCtx_.save(); - - // Translate half a pixel to avoid blurry lines. - this.chartCtx_.translate(0.5, 0.5); - - // Sides. - - this.chartCtx_.save(); - - this.chartCtx_.translate(AXIS_PADDING_LEFT, AXIS_PADDING_TOP); - this.chartCtx_.moveTo(0, 0); - this.chartCtx_.lineTo(0, height); - this.chartCtx_.lineTo(width, height); - - // Y-axis ticks. - this.chartCtx_.font = '10px Arial'; - this.chartCtx_.textAlign = 'right'; - this.chartCtx_.textBaseline = 'middle'; - - for (var t = 0; t < VERTICAL_TICKS; t++) { - - tickYPosition = Math.round(t * tickYInterval); - tickVal = (max - t * tickValInterval).toFixed(4); - - this.chartCtx_.moveTo(0, tickYPosition); - this.chartCtx_.lineTo(-AXIS_TICK_SIZE, tickYPosition); - this.chartCtx_.fillText(tickVal, - -AXIS_TICK_SIZE - AXIS_LABEL_PADDING, tickYPosition); - - } - - this.chartCtx_.stroke(); - - this.chartCtx_.restore(); - - - // Labels. - - this.chartCtx_.save(); - - this.chartCtx_.translate(CHART_PADDING_LEFT + Math.round(barWidth * 0.5), - AXIS_PADDING_TOP + height + LABEL_PADDING); - - this.chartCtx_.font = '10px Arial'; - this.chartCtx_.textAlign = 'center'; - this.chartCtx_.textBaseline = 'top'; - - var labelTickLeft; - var labelTickBottom; - for (var l = 0; l < len; l++) { - - labelTickLeft = Math.round(l * barWidth); - labelTickBottom = l % 2 * LABEL_INTERLEAVE_OFFSET; - - this.chartCtx_.save(); - this.chartCtx_.moveTo(labelTickLeft, -LABEL_PADDING); - this.chartCtx_.lineTo(labelTickLeft, labelTickBottom); - this.chartCtx_.stroke(); - this.chartCtx_.restore(); - - this.chartCtx_.fillText(this.opsTimingData_[l].cmd_string, - labelTickLeft, labelTickBottom); - } - - this.chartCtx_.restore(); - - this.chartCtx_.restore(); - }, - - clearChartContents_: function() { - this.chartCtx_.clearRect(0, 0, this.chartWidth_, this.chartHeight_); - }, - - showNoTimingDataMessage_: function() { - this.chartCtx_.font = '800 italic 14px Arial'; - this.chartCtx_.fillStyle = '#333'; - this.chartCtx_.textAlign = 'center'; - this.chartCtx_.textBaseline = 'middle'; - this.chartCtx_.fillText('No timing data available.', - this.chartWidth_ * 0.5, this.chartHeight_ * 0.5); - }, - - collapseOpsToTimingBuckets_: function(ops) { - - var opsTimingDataIndexHash_ = {}; - var timingData = this.opsTimingData_; - var op; - var opIndex; - - for (var i = 0; i < ops.length; i++) { - - op = ops[i]; - - if (op.cmd_time === undefined) - continue; - - // Try to locate the entry for the current operation - // based on its name. If that fails, then create one for it. - opIndex = opsTimingDataIndexHash_[op.cmd_string] || null; - - if (opIndex === null) { - timingData.push({ - cmd_time: 0, - cmd_string: op.cmd_string - }); - - opIndex = timingData.length - 1; - opsTimingDataIndexHash_[op.cmd_string] = opIndex; - } - - timingData[opIndex].cmd_time += op.cmd_time; - - } - - timingData.sort(this.sortTimingBucketsByOpTimeDescending_); - - this.collapseTimingBucketsToOther_(4); - }, - - collapseTimingBucketsToOther_: function(count) { - - var timingData = this.opsTimingData_; - var otherSource = timingData.splice(count, timingData.length - count); - var otherDestination = null; - - if (!otherSource.length) - return; - - timingData.push({ - cmd_time: 0, - cmd_string: 'Other' - }); - - otherDestination = timingData[timingData.length - 1]; - for (var i = 0; i < otherSource.length; i++) { - otherDestination.cmd_time += otherSource[i].cmd_time; - } - }, - - sortTimingBucketsByOpTimeDescending_: function(a, b) { - return b.cmd_time - a.cmd_time; - }, - - resetOpsTimingData_: function() { - this.opsTimingData_.length = 0; - } - }; - - return { - PictureOpsChartSummaryView: PictureOpsChartSummaryView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_view.css deleted file mode 100644 index 5f1943e5c79..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_view.css +++ /dev/null @@ -1,18 +0,0 @@ -/* 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. - */ - -* /deep/ tr-ui-e-chrome-cc-picture-ops-chart-view { - display: block; - height: 180px; - margin: 0; - padding: 0; - position: relative; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-chart-view > .use-percentile-scale { - left: 0; - position: absolute; - top: 0; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_view.html deleted file mode 100644 index a62f128e6b9..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_chart_view.html +++ /dev/null @@ -1,500 +0,0 @@ -<!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="stylesheet" href="/tracing/ui/extras/chrome/cc/picture_ops_chart_view.css"> - -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - var BAR_PADDING = 1; - var BAR_WIDTH = 5; - var CHART_PADDING_LEFT = 65; - var CHART_PADDING_RIGHT = 30; - var CHART_PADDING_BOTTOM = 35; - var CHART_PADDING_TOP = 20; - var AXIS_PADDING_LEFT = 55; - var AXIS_PADDING_RIGHT = 30; - var AXIS_PADDING_BOTTOM = 35; - var AXIS_PADDING_TOP = 20; - var AXIS_TICK_SIZE = 5; - var AXIS_LABEL_PADDING = 5; - var VERTICAL_TICKS = 5; - var HUE_CHAR_CODE_ADJUSTMENT = 5.7; - - /** - * Provides a chart showing the cumulative time spent in Skia operations - * during picture rasterization. - * - * @constructor - */ - var PictureOpsChartView = - tr.ui.b.define('tr-ui-e-chrome-cc-picture-ops-chart-view'); - - PictureOpsChartView.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.picture_ = undefined; - this.pictureOps_ = undefined; - this.opCosts_ = undefined; - - this.chartScale_ = window.devicePixelRatio; - - this.chart_ = document.createElement('canvas'); - this.chartCtx_ = this.chart_.getContext('2d'); - this.appendChild(this.chart_); - - this.selectedOpIndex_ = undefined; - this.chartWidth_ = 0; - this.chartHeight_ = 0; - this.dimensionsHaveChanged_ = true; - - this.currentBarMouseOverTarget_ = undefined; - - this.ninetyFifthPercentileCost_ = 0; - this.totalOpCost_ = 0; - - this.chart_.addEventListener('click', this.onClick_.bind(this)); - this.chart_.addEventListener('mousemove', this.onMouseMove_.bind(this)); - - this.usePercentileScale_ = false; - this.usePercentileScaleCheckbox_ = tr.ui.b.createCheckBox( - this, 'usePercentileScale', - 'PictureOpsChartView.usePercentileScale', false, - 'Limit to 95%-ile'); - this.usePercentileScaleCheckbox_.classList.add('use-percentile-scale'); - this.appendChild(this.usePercentileScaleCheckbox_); - }, - - get dimensionsHaveChanged() { - return this.dimensionsHaveChanged_; - }, - - set dimensionsHaveChanged(dimensionsHaveChanged) { - this.dimensionsHaveChanged_ = dimensionsHaveChanged; - }, - - get usePercentileScale() { - return this.usePercentileScale_; - }, - - set usePercentileScale(usePercentileScale) { - this.usePercentileScale_ = usePercentileScale; - this.drawChartContents_(); - }, - - get numOps() { - return this.opCosts_.length; - }, - - get selectedOpIndex() { - return this.selectedOpIndex_; - }, - - set selectedOpIndex(selectedOpIndex) { - if (selectedOpIndex < 0) throw new Error('Invalid index'); - if (selectedOpIndex >= this.numOps) throw new Error('Invalid index'); - - this.selectedOpIndex_ = selectedOpIndex; - }, - - get picture() { - return this.picture_; - }, - - set picture(picture) { - this.picture_ = picture; - this.pictureOps_ = picture.tagOpsWithTimings(picture.getOps()); - this.currentBarMouseOverTarget_ = undefined; - this.processPictureData_(); - this.dimensionsHaveChanged = true; - }, - - processPictureData_: function() { - if (this.pictureOps_ === undefined) - return; - - var totalOpCost = 0; - - // Take a copy of the picture ops data for sorting. - this.opCosts_ = this.pictureOps_.map(function(op) { - totalOpCost += op.cmd_time; - return op.cmd_time; - }); - this.opCosts_.sort(); - - var ninetyFifthPercentileCostIndex = Math.floor( - this.opCosts_.length * 0.95); - this.ninetyFifthPercentileCost_ = - this.opCosts_[ninetyFifthPercentileCostIndex]; - this.maxCost_ = this.opCosts_[this.opCosts_.length - 1]; - - this.totalOpCost_ = totalOpCost; - }, - - extractBarIndex_: function(e) { - - var index = undefined; - - if (this.pictureOps_ === undefined || - this.pictureOps_.length === 0) - return index; - - var x = e.offsetX; - var y = e.offsetY; - - var totalBarWidth = (BAR_WIDTH + BAR_PADDING) * this.pictureOps_.length; - - var chartLeft = CHART_PADDING_LEFT; - var chartTop = 0; - var chartBottom = this.chartHeight_ - CHART_PADDING_BOTTOM; - var chartRight = chartLeft + totalBarWidth; - - if (x < chartLeft || x > chartRight || y < chartTop || y > chartBottom) - return index; - - index = Math.floor((x - chartLeft) / totalBarWidth * - this.pictureOps_.length); - - index = tr.b.clamp(index, 0, this.pictureOps_.length - 1); - - return index; - }, - - onClick_: function(e) { - - var barClicked = this.extractBarIndex_(e); - - if (barClicked === undefined) - return; - - // If we click on the already selected item we should deselect. - if (barClicked === this.selectedOpIndex) - this.selectedOpIndex = undefined; - else - this.selectedOpIndex = barClicked; - - e.preventDefault(); - - tr.b.dispatchSimpleEvent(this, 'selection-changed', false); - }, - - onMouseMove_: function(e) { - - var lastBarMouseOverTarget = this.currentBarMouseOverTarget_; - this.currentBarMouseOverTarget_ = this.extractBarIndex_(e); - - if (this.currentBarMouseOverTarget_ === lastBarMouseOverTarget) - return; - - this.drawChartContents_(); - }, - - scrollSelectedItemIntoViewIfNecessary: function() { - - if (this.selectedOpIndex === undefined) - return; - - var width = this.offsetWidth; - var left = this.scrollLeft; - var right = left + width; - var targetLeft = CHART_PADDING_LEFT + - (BAR_WIDTH + BAR_PADDING) * this.selectedOpIndex; - - if (targetLeft > left && targetLeft < right) - return; - - this.scrollLeft = (targetLeft - width * 0.5); - }, - - updateChartContents: function() { - - if (this.dimensionsHaveChanged) - this.updateChartDimensions_(); - - this.drawChartContents_(); - }, - - updateChartDimensions_: function() { - - if (!this.pictureOps_) - return; - - var width = CHART_PADDING_LEFT + CHART_PADDING_RIGHT + - ((BAR_WIDTH + BAR_PADDING) * this.pictureOps_.length); - - if (width < this.offsetWidth) - width = this.offsetWidth; - - // Allow the element to be its natural size as set by flexbox, then lock - // the width in before we set the width of the canvas. - this.chartWidth_ = width; - this.chartHeight_ = this.getBoundingClientRect().height; - - // Scale up the canvas according to the devicePixelRatio, then reduce it - // down again via CSS. Finally we apply a scale to the canvas so that - // things are drawn at the correct size. - this.chart_.width = this.chartWidth_ * this.chartScale_; - this.chart_.height = this.chartHeight_ * this.chartScale_; - - this.chart_.style.width = this.chartWidth_ + 'px'; - this.chart_.style.height = this.chartHeight_ + 'px'; - - this.chartCtx_.scale(this.chartScale_, this.chartScale_); - - this.dimensionsHaveChanged = false; - }, - - drawChartContents_: function() { - - this.clearChartContents_(); - - if (this.pictureOps_ === undefined || - this.pictureOps_.length === 0 || - this.pictureOps_[0].cmd_time === undefined) { - - this.showNoTimingDataMessage_(); - return; - } - - this.drawSelection_(); - this.drawBars_(); - this.drawChartAxes_(); - this.drawLinesAtTickMarks_(); - this.drawLineAtBottomOfChart_(); - - if (this.currentBarMouseOverTarget_ === undefined) - return; - - this.drawTooltip_(); - }, - - drawSelection_: function() { - - if (this.selectedOpIndex === undefined) - return; - - var width = (BAR_WIDTH + BAR_PADDING) * this.selectedOpIndex; - this.chartCtx_.fillStyle = 'rgb(223, 235, 230)'; - this.chartCtx_.fillRect(CHART_PADDING_LEFT, CHART_PADDING_TOP, - width, this.chartHeight_ - CHART_PADDING_TOP - CHART_PADDING_BOTTOM); - }, - - drawChartAxes_: function() { - - var min = this.opCosts_[0]; - var max = this.opCosts_[this.opCosts_.length - 1]; - var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM; - - var tickYInterval = height / (VERTICAL_TICKS - 1); - var tickYPosition = 0; - var tickValInterval = (max - min) / (VERTICAL_TICKS - 1); - var tickVal = 0; - - this.chartCtx_.fillStyle = '#333'; - this.chartCtx_.strokeStyle = '#777'; - this.chartCtx_.save(); - - // Translate half a pixel to avoid blurry lines. - this.chartCtx_.translate(0.5, 0.5); - - // Sides. - this.chartCtx_.beginPath(); - this.chartCtx_.moveTo(AXIS_PADDING_LEFT, AXIS_PADDING_TOP); - this.chartCtx_.lineTo(AXIS_PADDING_LEFT, this.chartHeight_ - - AXIS_PADDING_BOTTOM); - this.chartCtx_.lineTo(this.chartWidth_ - AXIS_PADDING_RIGHT, - this.chartHeight_ - AXIS_PADDING_BOTTOM); - this.chartCtx_.stroke(); - this.chartCtx_.closePath(); - - // Y-axis ticks. - this.chartCtx_.translate(AXIS_PADDING_LEFT, AXIS_PADDING_TOP); - - this.chartCtx_.font = '10px Arial'; - this.chartCtx_.textAlign = 'right'; - this.chartCtx_.textBaseline = 'middle'; - - this.chartCtx_.beginPath(); - for (var t = 0; t < VERTICAL_TICKS; t++) { - - tickYPosition = Math.round(t * tickYInterval); - tickVal = (max - t * tickValInterval).toFixed(4); - - this.chartCtx_.moveTo(0, tickYPosition); - this.chartCtx_.lineTo(-AXIS_TICK_SIZE, tickYPosition); - this.chartCtx_.fillText(tickVal, - -AXIS_TICK_SIZE - AXIS_LABEL_PADDING, tickYPosition); - - } - - this.chartCtx_.stroke(); - this.chartCtx_.closePath(); - - this.chartCtx_.restore(); - }, - - drawLinesAtTickMarks_: function() { - - var height = this.chartHeight_ - AXIS_PADDING_TOP - AXIS_PADDING_BOTTOM; - var width = this.chartWidth_ - AXIS_PADDING_LEFT - AXIS_PADDING_RIGHT; - var tickYInterval = height / (VERTICAL_TICKS - 1); - var tickYPosition = 0; - - this.chartCtx_.save(); - - this.chartCtx_.translate(AXIS_PADDING_LEFT + 0.5, AXIS_PADDING_TOP + 0.5); - this.chartCtx_.beginPath(); - this.chartCtx_.strokeStyle = 'rgba(0,0,0,0.05)'; - - for (var t = 0; t < VERTICAL_TICKS; t++) { - tickYPosition = Math.round(t * tickYInterval); - - this.chartCtx_.moveTo(0, tickYPosition); - this.chartCtx_.lineTo(width, tickYPosition); - this.chartCtx_.stroke(); - } - - this.chartCtx_.restore(); - this.chartCtx_.closePath(); - }, - - drawLineAtBottomOfChart_: function() { - this.chartCtx_.strokeStyle = '#AAA'; - this.chartCtx_.beginPath(); - this.chartCtx_.moveTo(0, this.chartHeight_ - 0.5); - this.chartCtx_.lineTo(this.chartWidth_, this.chartHeight_ - 0.5); - this.chartCtx_.stroke(); - this.chartCtx_.closePath(); - }, - - drawTooltip_: function() { - - var tooltipData = this.pictureOps_[this.currentBarMouseOverTarget_]; - var tooltipTitle = tooltipData.cmd_string; - var tooltipTime = tooltipData.cmd_time.toFixed(4); - var toolTipTimePercentage = - ((tooltipData.cmd_time / this.totalOpCost_) * 100).toFixed(2); - - var tooltipWidth = 120; - var tooltipHeight = 40; - var chartInnerWidth = this.chartWidth_ - CHART_PADDING_RIGHT - - CHART_PADDING_LEFT; - var barWidth = BAR_WIDTH + BAR_PADDING; - var tooltipOffset = Math.round((tooltipWidth - barWidth) * 0.5); - - var left = CHART_PADDING_LEFT + this.currentBarMouseOverTarget_ * - barWidth - tooltipOffset; - var top = Math.round((this.chartHeight_ - tooltipHeight) * 0.5); - - this.chartCtx_.save(); - - this.chartCtx_.shadowOffsetX = 0; - this.chartCtx_.shadowOffsetY = 5; - this.chartCtx_.shadowBlur = 4; - this.chartCtx_.shadowColor = 'rgba(0,0,0,0.4)'; - - this.chartCtx_.strokeStyle = '#888'; - this.chartCtx_.fillStyle = '#EEE'; - this.chartCtx_.fillRect(left, top, tooltipWidth, tooltipHeight); - - this.chartCtx_.shadowColor = 'transparent'; - this.chartCtx_.translate(0.5, 0.5); - this.chartCtx_.strokeRect(left, top, tooltipWidth, tooltipHeight); - - this.chartCtx_.restore(); - - this.chartCtx_.fillStyle = '#222'; - this.chartCtx_.textAlign = 'left'; - this.chartCtx_.textBaseline = 'top'; - this.chartCtx_.font = '800 12px Arial'; - this.chartCtx_.fillText(tooltipTitle, left + 8, top + 8); - - this.chartCtx_.fillStyle = '#555'; - this.chartCtx_.font = '400 italic 10px Arial'; - this.chartCtx_.fillText(tooltipTime + 'ms (' + - toolTipTimePercentage + '%)', left + 8, top + 22); - }, - - drawBars_: function() { - - var op; - var opColor = 0; - var opHeight = 0; - var opWidth = BAR_WIDTH + BAR_PADDING; - var opHover = false; - - var bottom = this.chartHeight_ - CHART_PADDING_BOTTOM; - var maxHeight = this.chartHeight_ - CHART_PADDING_BOTTOM - - CHART_PADDING_TOP; - - var maxValue; - if (this.usePercentileScale) - maxValue = this.ninetyFifthPercentileCost_; - else - maxValue = this.maxCost_; - - for (var b = 0; b < this.pictureOps_.length; b++) { - - op = this.pictureOps_[b]; - opHeight = Math.round( - (op.cmd_time / maxValue) * maxHeight); - opHeight = Math.max(opHeight, 1); - opHover = (b === this.currentBarMouseOverTarget_); - opColor = this.getOpColor_(op.cmd_string, opHover); - - if (b === this.selectedOpIndex) - this.chartCtx_.fillStyle = '#FFFF00'; - else - this.chartCtx_.fillStyle = opColor; - - this.chartCtx_.fillRect(CHART_PADDING_LEFT + b * opWidth, - bottom - opHeight, BAR_WIDTH, opHeight); - } - - }, - - getOpColor_: function(opName, hover) { - - var characters = opName.split(''); - - var hue = characters.reduce(this.reduceNameToHue, 0) % 360; - var saturation = 30; - var lightness = hover ? '75%' : '50%'; - - return 'hsl(' + hue + ', ' + saturation + '%, ' + lightness + '%)'; - }, - - reduceNameToHue: function(previousValue, currentValue, index, array) { - // Get the char code and apply a magic adjustment value so we get - // pretty colors from around the rainbow. - return Math.round(previousValue + currentValue.charCodeAt(0) * - HUE_CHAR_CODE_ADJUSTMENT); - }, - - clearChartContents_: function() { - this.chartCtx_.clearRect(0, 0, this.chartWidth_, this.chartHeight_); - }, - - showNoTimingDataMessage_: function() { - this.chartCtx_.font = '800 italic 14px Arial'; - this.chartCtx_.fillStyle = '#333'; - this.chartCtx_.textAlign = 'center'; - this.chartCtx_.textBaseline = 'middle'; - this.chartCtx_.fillText('No timing data available.', - this.chartWidth_ * 0.5, this.chartHeight_ * 0.5); - } - }; - - return { - PictureOpsChartView: PictureOpsChartView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.css deleted file mode 100644 index bdd77fcd099..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.css +++ /dev/null @@ -1,62 +0,0 @@ -/* 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. - */ - -* * /deep/ tr-ui-e-chrome-cc-picture-ops-list-view { - -webkit-flex-direction: column; - border-top: 1px solid grey; - display: -webkit-flex; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view > .x-list-view { - -webkit-flex: 1 1 auto; - overflow: auto; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view > .x-list-view .list-item { - border-bottom: 1px solid #555; - font-size: small; - font-weight: bold; - padding-bottom: 5px; - padding-left: 5px; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view > - .x-list-view .list-item:hover { - background-color: #f0f0f0; - cursor: pointer; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view > - .x-list-view .list-item > * { - color: #777; - font-size: x-small; - font-weight: normal; - margin-left: 1em; - max-width: 300px; /* force long strings to wrap */ -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view > - .x-list-view .list-item > .elementInfo { - color: purple; - font-size: small; - font-weight: bold; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view > - .x-list-view .list-item > .time { - color: rgb(136, 0, 0); -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view .x-list-view:focus > - .list-item[beforeSelection] { - background-color: rgb(171, 217, 202); - outline: 1px dotted rgba(0, 0, 0, 0.1); - outline-offset: 0; -} - -* /deep/ tr-ui-e-chrome-cc-picture-ops-list-view .x-list-view > - .list-item[beforeSelection] { - background-color: rgb(103, 199, 165); -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html deleted file mode 100644 index 1bae14a635f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view.html +++ /dev/null @@ -1,238 +0,0 @@ -<!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="stylesheet" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.css"> - -<link rel="import" href="/tracing/extras/chrome/cc/constants.html"> -<link rel="import" href="/tracing/ui/base/list_view.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/selection.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - var OPS_TIMING_ITERATIONS = 3; // Iterations to average op timing info over. - var ANNOTATION = 'Comment'; - var BEGIN_ANNOTATION = 'BeginCommentGroup'; - var END_ANNOTATION = 'EndCommentGroup'; - var ANNOTATION_ID = 'ID: '; - var ANNOTATION_CLASS = 'CLASS: '; - var ANNOTATION_TAG = 'TAG: '; - - var constants = tr.e.cc.constants; - - /** - * @constructor - */ - var PictureOpsListView = - tr.ui.b.define('tr-ui-e-chrome-cc-picture-ops-list-view'); - - PictureOpsListView.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.opsList_ = new tr.ui.b.ListView(); - this.appendChild(this.opsList_); - - this.selectedOp_ = undefined; - this.selectedOpIndex_ = undefined; - this.opsList_.addEventListener( - 'selection-changed', this.onSelectionChanged_.bind(this)); - - this.picture_ = undefined; - }, - - get picture() { - return this.picture_; - }, - - set picture(picture) { - this.picture_ = picture; - this.updateContents_(); - }, - - updateContents_: function() { - this.opsList_.clear(); - - if (!this.picture_) - return; - - var ops = this.picture_.getOps(); - if (!ops) - return; - - ops = this.picture_.tagOpsWithTimings(ops); - - ops = this.opsTaggedWithAnnotations_(ops); - - for (var i = 0; i < ops.length; i++) { - var op = ops[i]; - var item = document.createElement('div'); - item.opIndex = op.opIndex; - item.textContent = i + ') ' + op.cmd_string; - - // Display the element info associated with the op, if available. - if (op.elementInfo.tag || op.elementInfo.id || op.elementInfo.class) { - var elementInfo = document.createElement('span'); - elementInfo.classList.add('elementInfo'); - var tag = op.elementInfo.tag ? op.elementInfo.tag : 'unknown'; - var id = op.elementInfo.id ? 'id=' + op.elementInfo.id : undefined; - var className = op.elementInfo.class ? 'class=' + - op.elementInfo.class : undefined; - elementInfo.textContent = - '<' + tag + (id ? ' ' : '') + - (id ? id : '') + (className ? ' ' : '') + - (className ? className : '') + '>'; - item.appendChild(elementInfo); - } - - // Display the Skia params. - // FIXME: now that we have structured data, we should format it. - // (https://github.com/google/trace-viewer/issues/782) - if (op.info.length > 0) { - var infoItem = document.createElement('div'); - infoItem.textContent = JSON.stringify(op.info); - item.appendChild(infoItem); - } - - // Display the op timing, if available. - if (op.cmd_time && op.cmd_time >= 0.0001) { - var time = document.createElement('span'); - time.classList.add('time'); - var rounded = op.cmd_time.toFixed(4); - time.textContent = '(' + rounded + 'ms)'; - item.appendChild(time); - } - - this.opsList_.appendChild(item); - } - }, - - onSelectionChanged_: function(e) { - var beforeSelectedOp = true; - - // Deselect on re-selection. - if (this.opsList_.selectedElement === this.selectedOp_) { - this.opsList_.selectedElement = undefined; - beforeSelectedOp = false; - this.selectedOpIndex_ = undefined; - } - - this.selectedOp_ = this.opsList_.selectedElement; - - // Set selection on all previous ops. - var ops = this.opsList_.children; - for (var i = 0; i < ops.length; i++) { - var op = ops[i]; - if (op === this.selectedOp_) { - beforeSelectedOp = false; - this.selectedOpIndex_ = op.opIndex; - } else if (beforeSelectedOp) { - op.setAttribute('beforeSelection', 'beforeSelection'); - } else { - op.removeAttribute('beforeSelection'); - } - } - - tr.b.dispatchSimpleEvent(this, 'selection-changed', false); - }, - - get numOps() { - return this.opsList_.children.length; - }, - - get selectedOpIndex() { - return this.selectedOpIndex_; - }, - - set selectedOpIndex(s) { - this.selectedOpIndex_ = s; - - if (s === undefined) { - this.opsList_.selectedElement = this.selectedOp_; - this.onSelectionChanged_(); - } else { - if (s < 0) throw new Error('Invalid index'); - if (s >= this.numOps) throw new Error('Invalid index'); - this.opsList_.selectedElement = this.opsList_.getElementByIndex(s + 1); - tr.ui.b.scrollIntoViewIfNeeded(this.opsList_.selectedElement); - } - }, - - /** - * Return Skia operations tagged by annotation. - * - * The ops returned from Picture.getOps() contain both Skia ops and - * annotations threaded together. This function removes all annotations - * from the list and tags each op with the associated annotations. - * Additionally, the last {tag, id, class} is stored as elementInfo on - * each op. - * - * @param {Array} ops Array of Skia operations and annotations. - * @return {Array} Skia ops where op.annotations contains the associated - * annotations for a given op. - */ - opsTaggedWithAnnotations_: function(ops) { - // This algorithm works by walking all the ops and pushing any - // annotations onto a stack. When a non-annotation op is found, the - // annotations stack is traversed and stored with the op. - var annotationGroups = new Array(); - var opsWithoutAnnotations = new Array(); - for (var opIndex = 0; opIndex < ops.length; opIndex++) { - var op = ops[opIndex]; - op.opIndex = opIndex; - switch (op.cmd_string) { - case BEGIN_ANNOTATION: - annotationGroups.push(new Array()); - break; - case END_ANNOTATION: - annotationGroups.pop(); - break; - case ANNOTATION: - annotationGroups[annotationGroups.length - 1].push(op); - break; - default: - var annotations = new Array(); - var elementInfo = {}; - annotationGroups.forEach(function(annotationGroup) { - elementInfo = {}; - annotationGroup.forEach(function(annotation) { - annotation.info.forEach(function(info) { - if (info.indexOf(ANNOTATION_TAG) != -1) - elementInfo.tag = info.substring( - info.indexOf(ANNOTATION_TAG) + - ANNOTATION_TAG.length).toLowerCase(); - else if (info.indexOf(ANNOTATION_ID) != -1) - elementInfo.id = info.substring( - info.indexOf(ANNOTATION_ID) + - ANNOTATION_ID.length); - else if (info.indexOf(ANNOTATION_CLASS) != -1) - elementInfo.class = info.substring( - info.indexOf(ANNOTATION_CLASS) + - ANNOTATION_CLASS.length); - - annotations.push(info); - }); - }); - }); - op.annotations = annotations; - op.elementInfo = elementInfo; - opsWithoutAnnotations.push(op); - } - } - - return opsWithoutAnnotations; - } - }; - - return { - PictureOpsListView: PictureOpsListView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view_test.html deleted file mode 100644 index cd6679f8449..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_ops_list_view_test.html +++ /dev/null @@ -1,57 +0,0 @@ -<!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/extras/chrome/cc/picture.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_ops_list_view.html"> - -<script src="/tracing/extras/chrome/cc/layer_tree_host_impl_test_data.js"> -</script> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var PictureOpsListView = tr.ui.e.chrome.cc.PictureOpsListView; - - test('instantiate', function() { - if (!tr.e.cc.PictureSnapshot.CanRasterize()) - return; - var m = new tr.Model(g_catLTHIEvents); - var p = tr.b.dictionaryValues(m.processes)[0]; - - var instance = p.objects.getAllInstancesNamed('cc::Picture')[0]; - var snapshot = instance.snapshots[0]; - - var view = new PictureOpsListView(); - view.picture = snapshot; - assert.equal(view.opsList_.children.length, 142); - }); - - test('selection', function() { - if (!tr.e.cc.PictureSnapshot.CanRasterize()) - return; - var m = new tr.Model(g_catLTHIEvents); - var p = tr.b.dictionaryValues(m.processes)[0]; - - var instance = p.objects.getAllInstancesNamed('cc::Picture')[0]; - var snapshot = instance.snapshots[0]; - - var view = new PictureOpsListView(); - view.picture = snapshot; - var didSelectionChange = 0; - view.addEventListener('selection-changed', function() { - didSelectionChange = true; - }); - assert.isFalse(didSelectionChange); - view.opsList_.selectedElement = view.opsList_.children[3]; - assert.isTrue(didSelectionChange); - }); - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_view.css deleted file mode 100644 index 26893f2c6c9..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_view.css +++ /dev/null @@ -1,9 +0,0 @@ -/* 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. - */ - -* /deep/ .tr-ui-e-chrome-cc-picture-snapshot-view { - -webkit-flex: 0 1 auto !important; - display: -webkit-flex; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_view.html deleted file mode 100644 index 74acef3e37b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/picture_view.html +++ /dev/null @@ -1,53 +0,0 @@ -<!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="stylesheet" href="/tracing/ui/extras/chrome/cc/picture_view.css"> - -<link rel="import" href="/tracing/extras/chrome/cc/picture.html"> -<link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> -<link rel="import" href="/tracing/ui/analysis/object_snapshot_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_debugger.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - /* - * Displays a picture snapshot in a human readable form. - * @constructor - */ - var PictureSnapshotView = tr.ui.b.define( - 'tr-ui-e-chrome-cc-picture-snapshot-view', - tr.ui.analysis.ObjectSnapshotView); - - PictureSnapshotView.prototype = { - __proto__: tr.ui.analysis.ObjectSnapshotView.prototype, - - decorate: function() { - this.classList.add('tr-ui-e-chrome-cc-picture-snapshot-view'); - this.pictureDebugger_ = new tr.ui.e.chrome.cc.PictureDebugger(); - this.appendChild(this.pictureDebugger_); - }, - - updateContents: function() { - if (this.objectSnapshot_ && this.pictureDebugger_) - this.pictureDebugger_.picture = this.objectSnapshot_; - } - }; - - tr.ui.analysis.ObjectSnapshotView.register( - PictureSnapshotView, - { - typeNames: ['cc::Picture', 'cc::LayeredPicture'], - showInstances: false - }); - - return { - PictureSnapshotView: PictureSnapshotView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_selection.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_selection.html deleted file mode 100644 index 2838c5b63ed..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_selection.html +++ /dev/null @@ -1,131 +0,0 @@ -<!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/base.html"> -<link rel="import" href="/tracing/extras/chrome/cc/raster_task.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/ui/analysis/single_event_sub_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/raster_task_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/selection.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - /** - * @constructor - */ - function RasterTaskSelection(selection) { - tr.ui.e.chrome.cc.Selection.call(this); - var whySupported = RasterTaskSelection.whySuported(selection); - if (!whySupported.ok) - throw new Error('Fail: ' + whySupported.why); - this.slices_ = tr.b.asArray(selection); - this.tiles_ = this.slices_.map(function(slice) { - var tile = tr.e.cc.getTileFromRasterTaskSlice(slice); - if (tile === undefined) - throw new Error('This should never happen due to .supports check.'); - return tile; - }); - } - - RasterTaskSelection.whySuported = function(selection) { - if (!(selection instanceof tr.model.EventSet)) - return {ok: false, why: 'Must be selection'}; - - if (selection.length === 0) - return {ok: false, why: 'Selection must be non empty'}; - - var referenceSnapshot = undefined; - for (var event of selection) { - if (!(event instanceof tr.model.Slice)) - return {ok: false, why: 'Not a slice'}; - - var tile = tr.e.cc.getTileFromRasterTaskSlice(event); - if (tile === undefined) - return {ok: false, why: 'No tile found'}; - - if (!referenceSnapshot) { - referenceSnapshot = tile.containingSnapshot; - } else { - if (tile.containingSnapshot != referenceSnapshot) { - return { - ok: false, - why: 'Raster tasks are from different compositor instances' - }; - } - } - } - return {ok: true}; - }; - - RasterTaskSelection.supports = function(selection) { - return RasterTaskSelection.whySuported(selection).ok; - }; - - RasterTaskSelection.prototype = { - __proto__: tr.ui.e.chrome.cc.Selection.prototype, - - get specicifity() { - return 3; - }, - - get associatedLayerId() { - var tile0 = this.tiles_[0]; - var allSameLayer = this.tiles_.every(function(tile) { - tile.layerId == tile0.layerId; - }); - if (allSameLayer) - return tile0.layerId; - return undefined; - }, - - get extraHighlightsByLayerId() { - var highlights = {}; - this.tiles_.forEach(function(tile, i) { - if (highlights[tile.layerId] === undefined) - highlights[tile.layerId] = []; - var slice = this.slices_[i]; - highlights[tile.layerId].push({ - colorKey: slice.title, - rect: tile.layerRect - }); - }, this); - return highlights; - }, - - createAnalysis: function() { - var sel = new tr.model.EventSet(); - this.slices_.forEach(function(slice) { - sel.push(slice); - }); - - var analysis; - if (sel.length == 1) - analysis = document.createElement('tr-ui-a-single-event-sub-view'); - else - analysis = document.createElement('tr-ui-e-chrome-cc-raster-task-view'); - analysis.selection = sel; - return analysis; - }, - - findEquivalent: function(lthi) { - // Raster tasks are only valid in one LTHI. - return undefined; - }, - - // RasterTaskSelection specific stuff follows. - get containingSnapshot() { - return this.tiles_[0].containingSnapshot; - } - }; - - return { - RasterTaskSelection: RasterTaskSelection - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_selection_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_selection_test.html deleted file mode 100644 index ee8e91c3c77..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_selection_test.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/utils.html"> -<link rel="import" href="/tracing/core/test_utils.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/raster_task_selection.html"> - -<script src="/tracing/extras/chrome/cc/layer_tree_host_impl_test_data.js"> -</script> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('basic', function() { - var m = tr.c.TestUtils.newModelWithEvents([g_catLTHIEvents]); - var p = m.processes[1]; - var rasterTasks = p.threads[1].sliceGroup.slices.filter(function(slice) { - return slice.title == 'RasterTask'; - }); - - var selection = new tr.model.EventSet(); - selection.push(rasterTasks[0]); - selection.push(rasterTasks[1]); - - assert.isTrue(tr.ui.e.chrome.cc.RasterTaskSelection.supports(selection)); - var selection = new tr.ui.e.chrome.cc.RasterTaskSelection(selection); - var highlights = selection.extraHighlightsByLayerId; - assert.equal(tr.b.dictionaryLength(highlights), 1); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_view.html deleted file mode 100644 index b4020840303..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_view.html +++ /dev/null @@ -1,216 +0,0 @@ -<!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/extras/chrome/cc/raster_task.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html"> -<link rel="import" href="/tracing/ui/base/table.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/selection.html"> -<link rel="import" href="/tracing/value/ui/scalar_span.html"> -<link rel="import" href="/tracing/value/unit.html"> - -<polymer-element name="tr-ui-e-chrome-cc-raster-task-view"> - <template> - <style> - :host { - display: flex; - flex-direction: column; - } - #heading { - flex: 0 0 auto; - } - </style> - - <div id="heading"> - Rasterization costs in - <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link> - </div> - <tr-ui-b-table id="content"></tr-ui-b-table> - </template> - - <script> - 'use strict'; - Polymer({ - created: function() { - this.selection_ = undefined; - }, - - set selection(selection) { - this.selection_ = selection; - - this.updateContents_(); - }, - - updateColumns_: function(hadCpuDurations) { - var timeSpanConfig = { - unit: tr.v.Unit.byName.timeDurationInMs, - ownerDocument: this.ownerDocument - }; - - var columns = [ - { - title: 'Layer', - value: function(row) { - if (row.isTotals) - return 'Totals'; - if (row.layer) { - var linkEl = document.createElement('tr-ui-a-analysis-link'); - linkEl.setSelectionAndContent( - function() { - return new tr.ui.e.chrome.cc.LayerSelection(costs.layer); - }, - 'Layer ' + row.layerId); - return linkEl; - } else { - return 'Layer ' + row.layerId; - } - }, - width: '250px' - }, - { - title: 'Num Tiles', - value: function(row) { return row.numTiles; }, - cmp: function(a, b) { return a.numTiles - b.numTiles; } - }, - { - title: 'Num Analysis Tasks', - value: function(row) { return row.numAnalysisTasks; }, - cmp: function(a, b) { - return a.numAnalysisTasks - b.numAnalysisTasks; - } - }, - { - title: 'Num Raster Tasks', - value: function(row) { return row.numRasterTasks; }, - cmp: function(a, b) { return a.numRasterTasks - b.numRasterTasks; } - }, - { - title: 'Wall Duration (ms)', - value: function(row) { - return tr.v.ui.createScalarSpan(row.duration, timeSpanConfig); - }, - cmp: function(a, b) { return a.duration - b.duration; } - } - ]; - - if (hadCpuDurations) { - columns.push({ - title: 'CPU Duration (ms)', - value: function(row) { - return tr.v.ui.createScalarSpan(row.cpuDuration, timeSpanConfig); - }, - cmp: function(a, b) { return a.cpuDuration - b.cpuDuration; } - }); - } - - var colWidthPercentage; - if (columns.length == 1) - colWidthPercentage = '100%'; - else - colWidthPercentage = (100 / (columns.length - 1)).toFixed(3) + '%'; - - for (var i = 1; i < columns.length; i++) - columns[i].width = colWidthPercentage; - - this.$.content.tableColumns = columns; - this.$.content.sortColumnIndex = columns.length - 1; - }, - - updateContents_: function() { - var table = this.$.content; - - if (this.selection_.length === 0) { - this.$.link.setSelectionAndContent(undefined, ''); - table.tableRows = []; - table.footerRows = []; - table.rebuild(); - return; - } - - // LTHI link. - var lthi = tr.e.cc.getTileFromRasterTaskSlice( - this.selection_[0]).containingSnapshot; - this.$.link.setSelectionAndContent(function() { - return new tr.model.EventSet(lthi); - }, lthi.userFriendlyName); - - // Get costs by layer. - var costsByLayerId = {}; - function getCurrentCostsForLayerId(tile) { - var layerId = tile.layerId; - var lthi = tile.containingSnapshot; - var layer; - if (lthi.activeTree) - layer = lthi.activeTree.findLayerWithId(layerId); - if (layer === undefined && lthi.pendingTree) - layer = lthi.pendingTree.findLayerWithId(layerId); - if (costsByLayerId[layerId] === undefined) { - costsByLayerId[layerId] = { - layerId: layerId, - layer: layer, - numTiles: 0, - numAnalysisTasks: 0, - numRasterTasks: 0, - duration: 0, - cpuDuration: 0 - }; - } - return costsByLayerId[layerId]; - } - - var totalDuration = 0; - var totalCpuDuration = 0; - var totalNumAnalyzeTasks = 0; - var totalNumRasterizeTasks = 0; - var hadCpuDurations = false; - - var tilesThatWeHaveSeen = {}; - - this.selection_.forEach(function(slice) { - var tile = tr.e.cc.getTileFromRasterTaskSlice(slice); - var curCosts = getCurrentCostsForLayerId(tile); - - if (!tilesThatWeHaveSeen[tile.objectInstance.id]) { - tilesThatWeHaveSeen[tile.objectInstance.id] = true; - curCosts.numTiles += 1; - } - - if (tr.e.cc.isSliceDoingAnalysis(slice)) { - curCosts.numAnalysisTasks += 1; - totalNumAnalyzeTasks += 1; - } else { - curCosts.numRasterTasks += 1; - totalNumRasterizeTasks += 1; - } - curCosts.duration += slice.duration; - totalDuration += slice.duration; - if (slice.cpuDuration !== undefined) { - curCosts.cpuDuration += slice.cpuDuration; - totalCpuDuration += slice.cpuDuration; - hadCpuDurations = true; - } - }); - - // Apply to the table. - this.updateColumns_(hadCpuDurations); - table.tableRows = tr.b.dictionaryValues(costsByLayerId); - table.rebuild(); - - // Footer. - table.footerRows = [ - { - isTotals: true, - numTiles: tr.b.dictionaryLength(tilesThatWeHaveSeen), - numAnalysisTasks: totalNumAnalyzeTasks, - numRasterTasks: totalNumRasterizeTasks, - duration: totalDuration, - cpuDuration: totalCpuDuration - } - ]; - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_view_test.html deleted file mode 100644 index be771775cb7..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/raster_task_view_test.html +++ /dev/null @@ -1,70 +0,0 @@ -<!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/event_target.html"> -<link rel="import" href="/tracing/base/utils.html"> -<link rel="import" href="/tracing/core/test_utils.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/analysis/analysis_view.html"> -<link rel="import" href="/tracing/ui/base/deep_utils.html"> -<link rel="import" href="/tracing/ui/brushing_state_controller.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/layer_tree_host_impl_view.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/raster_task_selection.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/raster_task_view.html"> - -<script src="/tracing/extras/chrome/cc/layer_tree_host_impl_test_data.js"> -</script> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function createSelection() { - var m = tr.c.TestUtils.newModelWithEvents([g_catLTHIEvents]); - var p = m.processes[1]; - var rasterTasks = p.threads[1].sliceGroup.slices.filter(function(slice) { - return slice.title == 'RasterTask' || slice.title == 'AnalyzeTask'; - }); - - var selection = new tr.model.EventSet(); - selection.model = m; - - selection.push(rasterTasks[0]); - selection.push(rasterTasks[1]); - return selection; - } - - test('basic', function() { - var selection = createSelection(); - var view = document.createElement('tr-ui-e-chrome-cc-raster-task-view'); - view.selection = selection; - this.addHTMLOutput(view); - }); - - test('analysisViewIntegration', function() { - var selection = createSelection(); - - var timelineView = {model: selection.model}; - var brushingStateController = - new tr.c.BrushingStateController(timelineView); - - var analysisEl = document.createElement('tr-ui-a-analysis-view'); - analysisEl.brushingStateController = brushingStateController; - brushingStateController.changeSelectionFromTimeline(selection); - - assert.isDefined(analysisEl.querySelector( - 'tr-ui-e-chrome-cc-raster-task-view')); - - var sv = tr.b.findDeepElementMatching( - analysisEl, 'tr-ui-a-multi-thread-slice-sub-view'); - assert.isTrue(sv.requiresTallView); - this.addHTMLOutput(analysisEl); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/selection.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/selection.html deleted file mode 100644 index a2f1e2521f4..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/selection.html +++ /dev/null @@ -1,302 +0,0 @@ -<!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/ui/analysis/generic_object_view.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - function Selection() { - this.selectionToSetIfClicked = undefined; - }; - Selection.prototype = { - /** - * When two things are picked in the UI, one must occasionally tie-break - * between them to decide what was really clicked. Things with higher - * specicifity will win. - */ - get specicifity() { - throw new Error('Not implemented'); - }, - - /** - * If a selection is related to a specific layer, then this returns the - * layerId of that layer. If the selection is not related to a layer, for - * example if the device viewport is selected, then this returns undefined. - */ - get associatedLayerId() { - throw new Error('Not implemented'); - }, - - /** - * If a selection is related to a specific render pass, then this returns - * the layerId of that layer. If the selection is not related to a layer, - * for example if the device viewport is selected, then this returns - * undefined. - */ - get associatedRenderPassId() { - throw new Error('Not implemented'); - }, - - - get highlightsByLayerId() { - return {}; - }, - - /** - * Called when the selection is made active in the layer view. Must return - * an HTMLElement that explains this selection in detail. - */ - createAnalysis: function() { - throw new Error('Not implemented'); - }, - - /** - * Should try to create the equivalent selection in the provided LTHI, - * or undefined if it can't be done. - */ - findEquivalent: function(lthi) { - throw new Error('Not implemented'); - } - }; - - /** - * @constructor - */ - function RenderPassSelection(renderPass, renderPassId) { - if (!renderPass || (renderPassId === undefined)) - throw new Error('Render pass (with id) is required'); - this.renderPass_ = renderPass; - this.renderPassId_ = renderPassId; - } - - RenderPassSelection.prototype = { - __proto__: Selection.prototype, - - get specicifity() { - return 1; - }, - - get associatedLayerId() { - return undefined; - }, - - get associatedRenderPassId() { - return this.renderPassId_; - }, - - get renderPass() { - return this.renderPass_; - }, - - createAnalysis: function() { - var dataView = document.createElement( - 'tr-ui-a-generic-object-view-with-label'); - dataView.label = 'RenderPass ' + this.renderPassId_; - dataView.object = this.renderPass_.args; - return dataView; - }, - - get title() { - return this.renderPass_.objectInstance.typeName; - } - }; - - /** - * @constructor - */ - function LayerSelection(layer) { - if (!layer) - throw new Error('Layer is required'); - this.layer_ = layer; - } - - LayerSelection.prototype = { - __proto__: Selection.prototype, - - get specicifity() { - return 1; - }, - - get associatedLayerId() { - return this.layer_.layerId; - }, - - get associatedRenderPassId() { - return undefined; - }, - - get layer() { - return this.layer_; - }, - - createAnalysis: function() { - var dataView = document.createElement( - 'tr-ui-a-generic-object-view-with-label'); - dataView.label = 'Layer ' + this.layer_.layerId; - if (this.layer_.usingGpuRasterization) - dataView.label += ' (GPU-rasterized)'; - dataView.object = this.layer_.args; - return dataView; - }, - - get title() { - return this.layer_.objectInstance.typeName; - }, - - findEquivalent: function(lthi) { - var layer = lthi.activeTree.findLayerWithId(this.layer_.layerId) || - lthi.pendingTree.findLayerWithId(this.layer_.layerId); - if (!layer) - return undefined; - return new LayerSelection(layer); - } - }; - - /** - * @constructor - */ - function TileSelection(tile, opt_data) { - this.tile_ = tile; - this.data_ = opt_data || {}; - } - - TileSelection.prototype = { - __proto__: Selection.prototype, - - get specicifity() { - return 2; - }, - - get associatedLayerId() { - return this.tile_.layerId; - }, - - get highlightsByLayerId() { - var highlights = {}; - highlights[this.tile_.layerId] = [ - { - colorKey: this.tile_.objectInstance.typeName, - rect: this.tile_.layerRect - } - ]; - return highlights; - }, - - createAnalysis: function() { - var analysis = document.createElement( - 'tr-ui-a-generic-object-view-with-label'); - analysis.label = 'Tile ' + this.tile_.objectInstance.id + ' on layer ' + - this.tile_.layerId; - if (this.data_) { - analysis.object = { - moreInfo: this.data_, - tileArgs: this.tile_.args - }; - } else { - analysis.object = this.tile_.args; - } - return analysis; - }, - - findEquivalent: function(lthi) { - var tileInstance = this.tile_.tileInstance; - if (lthi.ts < tileInstance.creationTs || - lthi.ts >= tileInstance.deletionTs) - return undefined; - var tileSnapshot = tileInstance.getSnapshotAt(lthi.ts); - if (!tileSnapshot) - return undefined; - return new TileSelection(tileSnapshot); - } - }; - - /** - * @constructor - */ - function LayerRectSelection(layer, rectType, rect, opt_data) { - this.layer_ = layer; - this.rectType_ = rectType; - this.rect_ = rect; - this.data_ = opt_data !== undefined ? opt_data : rect; - } - - LayerRectSelection.prototype = { - __proto__: Selection.prototype, - - get specicifity() { - return 2; - }, - - get associatedLayerId() { - return this.layer_.layerId; - }, - - - get highlightsByLayerId() { - var highlights = {}; - highlights[this.layer_.layerId] = [ - { - colorKey: this.rectType_, - rect: this.rect_ - } - ]; - return highlights; - }, - - createAnalysis: function() { - var analysis = document.createElement( - 'tr-ui-a-generic-object-view-with-label'); - analysis.label = this.rectType_ + ' on layer ' + this.layer_.layerId; - analysis.object = this.data_; - return analysis; - }, - - findEquivalent: function(lthi) { - return undefined; - } - }; - - /** - * @constructor - */ - function AnimationRectSelection(layer, rect) { - this.layer_ = layer; - this.rect_ = rect; - } - - AnimationRectSelection.prototype = { - __proto__: Selection.prototype, - - get specicifity() { - return 0; - }, - - get associatedLayerId() { - return this.layer_.layerId; - }, - - createAnalysis: function() { - var analysis = document.createElement( - 'tr-ui-a-generic-object-view-with-label'); - analysis.label = 'Animation Bounds of layer ' + this.layer_.layerId; - analysis.object = this.rect_; - return analysis; - } - }; - - return { - Selection: Selection, - RenderPassSelection: RenderPassSelection, - LayerSelection: LayerSelection, - TileSelection: TileSelection, - LayerRectSelection: LayerRectSelection, - AnimationRectSelection: AnimationRectSelection - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/tile_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/tile_view.html deleted file mode 100644 index 2c556c67a7b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/cc/tile_view.html +++ /dev/null @@ -1,57 +0,0 @@ -<!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/extras/chrome/cc/tile.html"> -<link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> -<link rel="import" href="/tracing/ui/analysis/object_snapshot_view.html"> - -<script> - -'use strict'; - -tr.exportTo('tr.ui.e.chrome.cc', function() { - /* - * Displays a tile in a human readable form. - * @constructor - */ - var TileSnapshotView = tr.ui.b.define( - 'tr-ui-e-chrome-cc-tile-snapshot-view', - tr.ui.analysis.ObjectSnapshotView); - - TileSnapshotView.prototype = { - __proto__: tr.ui.analysis.ObjectSnapshotView.prototype, - - decorate: function() { - this.classList.add('tr-ui-e-chrome-cc-tile-snapshot-view'); - this.layerTreeView_ = - new tr.ui.e.chrome.cc.LayerTreeHostImplSnapshotView(); - this.appendChild(this.layerTreeView_); - }, - - updateContents: function() { - var tile = this.objectSnapshot_; - var layerTreeHostImpl = tile.containingSnapshot; - if (!layerTreeHostImpl) - return; - - this.layerTreeView_.objectSnapshot = layerTreeHostImpl; - this.layerTreeView_.selection = new tr.ui.e.chrome.cc.TileSelection(tile); - } - }; - - tr.ui.analysis.ObjectSnapshotView.register( - TileSnapshotView, - { - typeName: 'cc::Tile', - showInTrackView: false - }); - - return { - TileSnapshotView: TileSnapshotView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/gpu.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/gpu.html deleted file mode 100644 index 93811e10bff..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/gpu.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/extras/chrome/gpu/state.html"> -<link rel="import" href="/tracing/extras/chrome/gpu/gpu_async_slice.html"> -<link rel="import" href="/tracing/ui/extras/chrome/gpu/state_view.html"> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/images/checkerboard.png b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/images/checkerboard.png Binary files differdeleted file mode 100644 index 8ea9bc726bb..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/images/checkerboard.png +++ /dev/null diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/state_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/state_view.css deleted file mode 100644 index 466dbb56585..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/state_view.css +++ /dev/null @@ -1,15 +0,0 @@ -/* 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. - */ - -.tr-ui-e-chrome-gpu-state-snapshot-view { - background: url('./images/checkerboard.png'); - display: -webkit-flex; - overflow: auto; -} - -.tr-ui-e-chrome-gpu-state-snapshot-view img { - display: block; - margin: 16px auto 16px auto; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/state_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/state_view.html deleted file mode 100644 index 77bb005fcf3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome/gpu/state_view.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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="stylesheet" href="/tracing/ui/extras/chrome/gpu/state_view.css"> - -<link rel="import" href="/tracing/ui/analysis/object_snapshot_view.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.chrome.gpu', function() { - /* - * Displays a GPU state snapshot in a human readable form. - * @constructor - */ - var StateSnapshotView = tr.ui.b.define( - 'tr-ui-e-chrome-gpu-state-snapshot-view', - tr.ui.analysis.ObjectSnapshotView); - - StateSnapshotView.prototype = { - __proto__: tr.ui.analysis.ObjectSnapshotView.prototype, - - decorate: function() { - this.classList.add('tr-ui-e-chrome-gpu-state-snapshot-view'); - this.screenshotImage_ = document.createElement('img'); - this.appendChild(this.screenshotImage_); - }, - - updateContents: function() { - if (this.objectSnapshot_ && this.objectSnapshot_.screenshot) { - this.screenshotImage_.src = 'data:image/png;base64,' + - this.objectSnapshot_.screenshot; - } - } - }; - tr.ui.analysis.ObjectSnapshotView.register( - StateSnapshotView, - {typeName: 'gpu::State'}); - - return { - StateSnapshotView: StateSnapshotView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome_config.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome_config.html deleted file mode 100644 index cd9fb3f91c4..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/chrome_config.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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. ---> - -<!-- -The chrome config is heavily used: - - chrome://tracing, - - trace2html, which in turn implies - - adb_profile_chrome - - telemetry ---> - -<link rel="import" href="/tracing/extras/chrome_config.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> -<link rel="import" href="/tracing/ui/extras/chrome/cc/cc.html"> -<link rel="import" href="/tracing/ui/extras/chrome/gpu/gpu.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/frame_data_side_panel.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/input_latency_side_panel.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/time_summary_side_panel.html"> -<link rel="import" href="/tracing/ui/extras/system_stats/system_stats.html"> -<link rel="import" href="/tracing/ui/timeline_view.html"> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/html_results.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/html_results.html deleted file mode 100644 index a515ac4123f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/html_results.html +++ /dev/null @@ -1,117 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/ui/base/table.html"> - -<!-- -This class tries to (simply) copy the telemetry Results object, but outputs -directly to an HTML table. It takes things that look like Telemetry values, -and updates the table internally. ---> -<polymer-element name="tr-ui-e-deep-reports-html-results"> - <template> - <style> - :host { - display: flex; - } - </style> - <tr-ui-b-table id="table"></tr-ui-b-table> - </template> - <script> - 'use strict'; - - Polymer({ - created: function() { - this.hasColumnNamed_ = {}; - this.pageToRowMap_ = new WeakMap(); - }, - - ready: function() { - var table = this.$.table; - table.tableColumns = [ - { - title: 'Label', - value: function(row) { return row.label; }, - width: '350px' - } - ]; - this.clear(); - }, - - clear: function() { - this.$.table.tableRows = []; - }, - - addColumnIfNeeded_: function(columnName) { - if (this.hasColumnNamed_[columnName]) - return; - this.hasColumnNamed_[columnName] = true; - - var column = { - title: columnName, - value: function(row) { - if (row[columnName] === undefined) - return ''; - return row[columnName]; - } - }; - - var columns = this.$.table.tableColumns; - columns.push(column); - - // Update widths. - var colWidthPercentage; - if (columns.length == 1) - colWidthPercentage = '100%'; - else - colWidthPercentage = (100 / (columns.length - 1)).toFixed(3) + '%'; - - for (var i = 1; i < columns.length; i++) - columns[i].width = colWidthPercentage; - - this.$.table.tableColumns = columns; - }, - - getRowForPage_: function(page) { - if (!this.pageToRowMap_.has(page)) { - var i = page.url.lastIndexOf('/'); - var baseName = page.url.substring(i + 1); - - var link = document.createElement('a'); - link.href = 'trace_viewer.html#' + page.url; - link.textContent = baseName; - - var row = { - label: link, - value: '', - subRows: [], - isExpanded: true - }; - this.$.table.tableRows.push(row); - this.pageToRowMap_.set(page, row); - - // Kick table rebuild. - this.$.table.tableRows = this.$.table.tableRows; - } - return this.pageToRowMap_.get(page); - }, - - addValue: function(value) { - /* Value is expected to be a scalar telemetry-style Value. */ - if (value.type !== 'scalar') - throw new Error('wat'); - - this.addColumnIfNeeded_(value.name); - var rowForPage = this.getRowForPage_(value.page); - rowForPage[value.name] = value.value; - - // Kick table rebuild. - this.$.table.tableRows = this.$.table.tableRows; - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/main.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/main.html deleted file mode 100644 index 88af3f292d3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/main.html +++ /dev/null @@ -1,65 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/base.html"> -<link rel="import" href="/tracing/base/iteration_helpers.html"> -<link rel="import" href="/tracing/base/xhr.html"> -<link rel="import" href="/tracing/ui/extras/deep_reports/scalar_value.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.deep_reports', function() { - /** - * Runs deep reports on the provided files, and pushes telemetry-style - * values to the results object. - */ - function main(results, filesInDir) { - var lastP = new Promise(function(resolve) { resolve(); }); - - filesInDir.forEach(function(filename) { - // TODO(nduca): Make this like telemetry page. - var page = { - url: filename - }; - lastP = lastP.then(function() { - return loadModelFromFileAsync(filename); - }); - lastP = lastP.then(function(model) { - processModel(results, page, model); - }); - }); - return lastP; - } - - function loadModelFromFileAsync(filename) { - return tr.b.getAsync(filename).then(function(trace) { - var io = new tr.ImportOptions(); - io.shiftWorldToZero = true; - io.pruneEmptyContainers = false; - - var m = new tr.Model(); - try { - m.importTraces([trace], io); - } catch (e) { - throw new Error('While loading ' + filename + ' got: ' + e.toString()); - } - return m; - }); - } - - function processModel(results, page, model) { - results.addValue( - new tr.ui.e.deep_reports.ScalarValue( - page, 'numRailIRs', 'ms', model.userModel.expectations.length)); - } - - return { - main: main - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/scalar_value.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/scalar_value.html deleted file mode 100644 index 7dcd2bc36c9..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/scalar_value.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/base.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.deep_reports', function() { - function ScalarValue(page, name, units, value, - opt_important, opt_description) { - this.type = 'scalar'; - this.page = page; - this.name = name; - this.units = units; - this.value = value; - this.important = opt_important !== undefined ? opt_important : false; - this.description = opt_description || ''; - } - ScalarValue.fromDict = function(page, dict) { - if (dict.type !== 'scalar') - throw new Error('wat'); - var v = new ScalarValue(page, dict.name, dict.units, dict.value); - v.important = dict.important; - v.description = dict.description; - v.value = dict.value; - return v; - } - - ScalarValue.prototype = { - - }; - - return { - ScalarValue: ScalarValue - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comment_element.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comment_element.html deleted file mode 100644 index 180f2ce97b4..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comment_element.html +++ /dev/null @@ -1,71 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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. ---> - -<polymer-element name="tr-ui-e-drive-comment-element" attributes="comment"> - <template> - <style> - :host { - display: block; - } - #comment-area { - display: flex; - flex-direction: column; - border-top: 1px solid #e8e8e8; - background-color: white; - padding: 6px; - margin-bottom: 4px; - box-shadow: 0 1px 3px rgba(0,0,0,0.3); - border-radius: 2px; - font-size: small; - } - #comment-header { - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: 8px; - } - #comment-header-text { - display: flex; - flex-direction: column; - padding-left: 10px; - } - #comment-img { - width: 32px; - height: 32px; - } - #comment-text-author { - padding-bottom: 2px; - } - #comment-date { - color: #777; - font-size: 11px; - } - #comment-content { - word-wrap: break-word; - } - </style> - <div id="comment-area"> - <div id="comment-header"> - <img id="comment-img" src="{{ comment.author.picture.url }}" /> - <div id="comment-header-text"> - <div id="comment-text-author">{{ comment.author.displayName }}</div> - <div id="comment-date">{{ createdDate }}</div> - </div> - </div> - <div id="comment-content">{{ comment.anchor ? '⚓ ' : '' }} - {{ comment.content }}</div> - </div> - </template> - <script> - 'use strict'; - Polymer({ - commentChanged: function() { - this.createdDate = new Date(this.comment.createdDate).toLocaleString(); - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel.html deleted file mode 100644 index 3728481be17..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel.html +++ /dev/null @@ -1,180 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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/ui/extras/drive/comment_element.html"> - -<polymer-element name='tr-ui-e-drive-comments-side-panel' - extends='tr-ui-side-panel'> - <template> - <style> - :host { - flex-direction: column; - display: flex; - width: 290px; - overflow-y: scroll; - overflow-x: hidden; - background-color: #eee; - } - toolbar { - flex: 0 0 auto; - border-bottom: 1px solid black; - display: flex; - } - result-area { - flex: 1 1 auto; - display: block; - min-height: 0; - padding: 4px; - } - #comments-textarea-container { - display: flex; - } - #commentinput { - width: 100%; - } - </style> - - <toolbar id='toolbar'></toolbar> - <result-area id='result_area'> - <template repeat="{{ comment in comments_ }}"> - <tr-ui-e-drive-comment-element comment="{{comment}}" - on-click="{{commentClick}}"> - </tr-ui-e-drive-comment-element> - </template> - <div id="comments-textarea-container"> - <textarea id="commentinput" on-focus='{{textAreaFocus}}' - on-blur='{{textAreaBlur}}' - on-keypress="{{textareaKeypress}}"></textarea> - </div> - </result-area> - </template> - - <script> - 'use strict'; - - Polymer({ - ready: function() { - this.rangeOfInterest_ = new tr.b.Range(); - this.selection_ = undefined; - this.comments_ = []; - this.annotationFromComment_ = undefined; - this.textAreaFocused = false; - }, - - setCommentProvider: function(commentProvider) { - this.commentProvider_ = commentProvider; - }, - - attached: function() { - if (this.commentProvider_ === undefined) { - this.commentProvider_ = - new tr.ui.e.drive.analysis.DefaultCommentProvider(); - } - this.commentProvider_.attachToElement(this); - }, - - detached: function() { - this.commentProvider_.detachFromElement(); - }, - - commentClick: function(event, detail, sender) { - var anchor = sender.comment.anchor; - if (anchor === undefined) - return; - - var uiState = - JSON.parse(anchor).a[0][tr.ui.e.drive.constants.ANCHOR_NAME]; - - var myEvent = new CustomEvent('navigateToUIState', { detail: - new tr.ui.b.UIState(new tr.model.Location(uiState.location.xWorld, - uiState.location.yComponents), - uiState.scaleX) - }); - document.dispatchEvent(myEvent); - - if (this.annotationFromComment_) - this.model.removeAnnotation(this.annotationFromComment_); - var loc = new tr.model.Location(uiState.location.xWorld, - uiState.location.yComponents); - - var text = sender.comment.author.displayName + ': ' + - sender.comment.content; - this.annotationFromComment_ = - new tr.model.CommentBoxAnnotation(loc, text); - this.model.addAnnotation(this.annotationFromComment_); - }, - - textareaKeypress: function(event, detail, sender) { - // Check for return key. - if (event.keyCode === 13 && !event.ctrlKey) { - this.commentProvider_.addComment(this.$.commentinput.value); - this.$.commentinput.value = ''; - } - event.stopPropagation(); - return true; - }, - - textAreaFocus: function(event) { - this.textAreaFocused = true; - }, - - textAreaBlur: function(event) { - this.textAreaFocused = false; - }, - - get rangeOfInterest() { - return this.rangeOfInterest_; - }, - - set rangeOfInterest(rangeOfInterest) { - this.rangeOfInterest_ = rangeOfInterest; - this.updateContents_(); - }, - - get currentRangeOfInterest() { - if (this.rangeOfInterest_.isEmpty) - return this.model_.bounds; - else - return this.rangeOfInterest_; - }, - - get model() { - return this.model_; - }, - - set model(model) { - this.model_ = model; - this.updateContents_(); - }, - - set selection(selection) { - this.selection_ = selection; - }, - - updateContents_: function() { - this.commentProvider_.updateComments(); - }, - - supportsModel: function(m) { - if (m === undefined) { - return { - supported: false, - reason: 'Unknown tracing model' - }; - } - return { - supported: true - }; - }, - - get textLabel() { - return 'Comments'; - } - }); - - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel_test.html deleted file mode 100644 index bca061a876d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel_test.html +++ /dev/null @@ -1,71 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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/ui/extras/drive/comments_side_panel.html"> -<link rel="import" href="/tracing/core/test_utils.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function StubCommentProvider() { - this.addDummyComment('Lorem ipsum dolor sit amet'); - this.addDummyComment('consectetur adipiscing elit'); - this.addDummyComment('sed do eiusmod tempor incididunt ut labore et ' + - 'dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ' + - 'exercitation ullamco laboris nisi ut aliquip ex ea commodo ' + - 'consequat. Duis aute irure dolor in reprehenderit in voluptate ' + - 'velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ' + - 'occaecat cupidatat non proident, sunt in culpa qui officia deserunt ' + - 'mollit anim id est laborum.'); - } - - StubCommentProvider.prototype = { - comments_: [], - - attachToElement: function(attachedElement) { - this.attachedElement_ = attachedElement; - this.updateComments(); - }, - - detachFromElement: function() { - }, - - updateComments: function() { - this.attachedElement_.comments_ = this.comments_; - }, - - addDummyComment: function(content) { - var newComment = { - author: { - displayName: 'Casper the Friendly Ghost', - picture: { - url: 'https://lh3.googleusercontent.com/-XdUIqdMkCWA/' + - 'AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/s128/photo.jpg' - } - }, - createdDate: Date.now(), - anchor: (this.comments_.length) % 2 ? 1 : 0, - content: content - }; - - this.comments_.push(newComment); - }, - - addComment: function(body) { - this.addDummyComment(body); - this.updateComments(); - } - }; - - test('instantiate', function() { - var panel = document.createElement('tr-ui-e-drive-comments-side-panel'); - panel.setCommentProvider(new StubCommentProvider); - this.addHTMLOutput(panel); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/drive_comment_provider.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/drive_comment_provider.html deleted file mode 100644 index c55f98a727f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/drive_comment_provider.html +++ /dev/null @@ -1,101 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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/ui/side_panel/side_panel.html"> -<link rel="import" href="/tracing/model/comment_box_annotation.html"> - -<link rel="import" href="/tracing/ui/extras/drive/comments_side_panel.html"> - -<script> -'use strict'; - -(function() { - function addDriveCommentWithUIState_(text, uiState) { - gapi.client.load('drive', 'v2', function() { - var request = gapi.client.drive.revisions.get({ - 'fileId': tr.ui.e.drive.getDriveFileId(), - 'revisionId': 'head' - }); - request.execute(function(resp) { - var anchorObject = {}; - anchorObject[tr.ui.e.drive.constants.ANCHOR_NAME] = uiState; - var anchor = { - 'r': resp.id, - 'a': [anchorObject] - }; - anchor = JSON.stringify(anchor); - gapi.client.load('drive', 'v2', function() { - var request = gapi.client.drive.comments.insert({ - 'fileId': tr.ui.e.drive.getDriveFileId(), - 'resource': {'content': text, 'anchor': anchor} - }); - request.execute(); - }); - }); - }); - }; - - function onCommentWithUIState(e) { - addDriveCommentWithUIState_(e.detail.name, e.detail.location); - }; - - document.addEventListener('commentWithUIState', - onCommentWithUIState.bind(this)); -}()); - -tr.exportTo('tr.ui.e.drive.analysis', function() { - function DefaultCommentProvider() { } - - DefaultCommentProvider.prototype = { - attachToElement: function(attachedElement) { - this.attachedElement_ = attachedElement; - this.commentsCheckTimer_ = setTimeout(this.checkForComments_.bind(this), - 5000); - }, - - detachFromElement: function() { - clearTimeout(this.commentsCheckTimer_); - }, - - checkForComments_: function() { - this.updateComments(); - this.commentsCheckTimer_ = setTimeout(this.checkForComments_.bind(this), - 5000); - }, - - updateComments: function() { - var self = this; - gapi.client.load('drive', 'v2', function() { - var request = gapi.client.drive.comments.list({ - 'fileId': tr.ui.e.drive.getDriveFileId() - }); - request.execute(function(results) { - self.attachedElement_.comments_ = results.items; - }); - }); - }, - - addComment: function(body) { - var self = this; - gapi.client.load('drive', 'v2', function() { - var request = gapi.client.drive.comments.insert({ - 'fileId': tr.ui.e.drive.getDriveFileId(), - 'resource': {'content': body} - }); - request.execute(function(resp) { - self.updateComments(); - }); - }); - } - }; - - return { - DefaultCommentProvider: DefaultCommentProvider - }; -}); - -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/index.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/index.html deleted file mode 100644 index 2c44cea24ff..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/index.html +++ /dev/null @@ -1,462 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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. ---> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - - <script type="text/javascript" src="https://apis.google.com/js/api.js"></script> - - <link rel="import" href="/components/polymer/polymer.html"> - <link rel="import" href="/tracing/ui/extras/full_config.html"> - <link rel="import" href="/tracing/ui/timeline_view.html"> - <link rel="import" href="/tracing/ui/extras/drive/drive_comment_provider.html"> - - <style> - body { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - display: -webkit-flex; - -webkit-flex-direction: column; - } - body > x-timeline-view { - -webkit-flex: 1 1 auto; - overflow: hidden; - position: absolute; - top: 0px; - bottom: 0; - left: 0; - right: 0; - } - body > x-timeline-view:focus { - outline: none; - } - nav { - display: flex; - flex-direction: row; - justify-content: flex-end; - } - #navbar button { - height: 24px; - padding-bottom: 3px; - vertical-align: middle; - box-shadow: none; - background-color: #4d90fe; - background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed); - border: 1px solid #3079ed; - color: #fff; - border-radius: 2px; - cursor: default; - font-size: 11px; - font-weight: bold; - text-align: center; - white-space: nowrap; - line-height: 27px; - min-width: 54px; - outline: 0px; - padding: 0 8px; - font: normal 13px arial,sans-serif; - margin: 5px; - } - #collabs { - display: flex; - flex-direction: row; - } - .collaborator-div { - display: inline-block; - vertical-align: middle; - min-height: 0; - width: 100px; - font-size: 11px; - font-weight: bold; - font: normal 13px arial,sans-serif; - margin: 10px; - } - .collaborator-img { - margin: 2px; - } - .collaborator-tooltip { - z-index: 10000; - transition: visibility 0,opacity .13s ease-in; - background-color: #2a2a2a; - border: 1px solid #fff; - color: #fff; - cursor: default; - display: block; - font-family: arial, sans-serif; - font-size: 11px; - font-weight: bold; - margin-left: -1px; - opacity: 1; - padding: 7px 9px; - word-break: break-word; - position: absolute; - } - .collaborator-tooltip-content { - color: #fff; - } - .collaborator-tooltip-arrow { - position: absolute; - top: -6px; - } - .collaborator-tooltip-arrow-before { - border-color: #fff transparent !important; - left: -6px; - border: 6px solid; - border-top-width: 0; - content: ''; - display: block; - height: 0; - position: absolute; - width: 0; - } - .collaborator-tooltip-arrow-after { - top: 1px; - border-color: #2a2a2a transparent !important; - left: -5px; - border: 5px solid; - border-top-width: 0; - content: ''; - display: block; - height: 0; - position: absolute; - width: 0; - } - - </style> - <title>Trace Viewer</title> -</head> -<body> - <nav id="navbar"> - <div id="collabs"></div> - <button id="x-drive-save-to-disk">Save to disk</button> - <button id="x-drive-save-to-drive">Save to Drive</button> - <button id="x-drive-load-from-drive">Load from Drive</button> - <button id="x-drive-share">Share</button> - </nav> - <x-timeline-view> - </x-timeline-view> - - <script> - 'use strict'; - - // Needs to be global as it's passed through the Google API as a - // GET parameter. - var onAPIClientLoaded_ = null; - - (function() { - - tr.exportTo('tr.ui.e.drive', function() { - var appId = '239864068844'; - var constants = { - APP_ID: appId, - ANCHOR_NAME: appId + '.trace_viewer', - DEVELOPER_KEY: 'AIzaSyDR-6_wL9vHg1_oz4JHk8IQAkv2_Y0Y8-M', - CLIENT_ID: '239864068844-c7gefbfdcp0j6grltulh2r88tsvl18c1.apps.' + - 'googleusercontent.com', - SCOPE: [ - 'https://www.googleapis.com/auth/drive', - 'https://www.googleapis.com/auth/drive.install', - 'https://www.googleapis.com/auth/drive.file', - 'profile' - ] - }; - - return { - getDriveFileId: function() { return driveFileId_; }, - constants: constants - }; - }); - - - var pickerApiLoaded_ = false; - var oauthToken_ = null; - - var timelineViewEl_ = null; - var driveDocument_ = null; - var shareClient_ = null; - var fileIdToLoad_ = null; - var driveFileId_ = null; - - function parseGETParameter(val) { - var result = null; - var tmp = []; - location.search.substr(1).split('&').forEach(function(item) { - tmp = item.split('='); - if (tmp[0] === val) - result = decodeURIComponent(tmp[1]); - }); - return result; - } - - // Use the Google API Loader script to load the google.picker script. - onAPIClientLoaded_ = function() { - var driveState = parseGETParameter('state'); - if (driveState != null) { - var driveStateJson = JSON.parse(driveState); - fileIdToLoad_ = String(driveStateJson.ids); - } - - gapi.load('picker', {'callback': onPickerApiLoad}); - gapi.load('auth', {'callback': function() { - onAuthApiLoad(true, onAuthResultSuccess); - setTimeout(function onRepeatAuthApiLoad() { - onAuthApiLoad(true, function() {}); - setTimeout(onRepeatAuthApiLoad, 30000); - }, 30000); - }}); - } - - function onAuthApiLoad(tryImmediate, resultCallback) { - window.gapi.auth.authorize( - {'client_id': tr.ui.e.drive.constants.CLIENT_ID, - 'scope': tr.ui.e.drive.constants.SCOPE, 'immediate': tryImmediate}, - function(authResult) { - handleAuthResult(authResult, tryImmediate, resultCallback); - }); - } - - function onPickerApiLoad() { - pickerApiLoaded_ = true; - if (fileIdToLoad_ == null) - createPicker(); - } - - function onAuthResultSuccess() { - if (fileIdToLoad_ == null) - createPicker(); - else - loadFileFromDrive(fileIdToLoad_); - } - - function handleAuthResult(authResult, wasImmediate, resultCallback) { - if (authResult && !authResult.error) { - oauthToken_ = authResult.access_token; - resultCallback(); - } else if (wasImmediate) { - onAuthApiLoad(false); - } - } - - function createPicker() { - if (pickerApiLoaded_ && oauthToken_) { - var view = new google.picker.View(google.picker.ViewId.DOCS); - view.setMimeTypes('application/json,application/octet-stream'); - var picker = new google.picker.PickerBuilder() - .enableFeature(google.picker.Feature.NAV_HIDDEN) - .enableFeature(google.picker.Feature.MULTISELECT_ENABLED) - .setAppId(tr.ui.e.drive.constants.APP_ID) - .setOAuthToken(oauthToken_) - .addView(view) - .addView(new google.picker.DocsUploadView()) - .setDeveloperKey(tr.ui.e.drive.constants.DEVELOPER_KEY) - .setCallback(pickerCallback) - .build(); - picker.setVisible(true); - } - } - - function pickerCallback(data) { - if (data.action == google.picker.Action.PICKED) { - loadFileFromDrive(data.docs[0].id); - } - } - - function initShareButton() { - shareClient_ = new gapi.drive.share.ShareClient( - tr.ui.e.drive.constants.APP_ID); - shareClient_.setItemIds([driveFileId_]); - } - - function loadFileFromDrive(fileId) { - gapi.client.load('drive', 'v2', function() { - var request = gapi.client.drive.files.get({'fileId': fileId}); - request.execute(function(resp) { downloadFile(resp); }); - driveFileId_ = fileId; - gapi.load('drive-share', initShareButton); - }); - } - - function downloadFile(file) { - if (file.downloadUrl) { - var downloadingOverlay = tr.ui.b.Overlay(); - downloadingOverlay.title = 'Downloading...'; - downloadingOverlay.userCanClose = false; - downloadingOverlay.msgEl = document.createElement('div'); - downloadingOverlay.appendChild(downloadingOverlay.msgEl); - downloadingOverlay.msgEl.style.margin = '20px'; - downloadingOverlay.update = function(msg) { - this.msgEl.textContent = msg; - } - downloadingOverlay.visible = true; - - var accessToken = gapi.auth.getToken().access_token; - var xhr = new XMLHttpRequest(); - xhr.open('GET', file.downloadUrl); - xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken); - xhr.onload = function() { - downloadingOverlay.visible = false; - onDownloaded(file.title, xhr.responseText); - }; - xhr.onprogress = function(evt) { - downloadingOverlay.update( - Math.floor(evt.position * 100 / file.fileSize) + '% complete'); - }; - xhr.onerror = function() { alert('Failed downloading!'); }; - xhr.send(); - } else { - alert('No URL!'); - } - } - - function displayAllCollaborators() { - var allCollaborators = driveDocument_.getCollaborators(); - var collaboratorCount = allCollaborators.length; - var collabspan = document.getElementById('collabs'); - collabspan.innerHTML = ''; - var imageList = []; - for (var i = 0; i < collaboratorCount; i++) { - var user = allCollaborators[i]; - - var img = document.createElement('img'); - img.src = user.photoUrl; - img.alt = user.displayName; - img.height = 30; - img.width = 30; - img.className = 'collaborator-img'; - collabspan.appendChild(img); - imageList.push({'image': img, 'name': user.displayName}); - } - for (i = 0; i < imageList.length; i++) { - var collabTooltip = tr.ui.b.createDiv({ - className: 'collaborator-tooltip' - }); - var collabTooltipContent = tr.ui.b.createDiv({ - className: 'collaborator-tooltip-content' - }); - collabTooltipContent.textContent = imageList[i].name; - collabTooltip.appendChild(collabTooltipContent); - collabspan.appendChild(collabTooltip); - var collabTooltipArrow = tr.ui.b.createDiv({ - className: 'collaborator-tooltip-arrow'}); - collabTooltip.appendChild(collabTooltipArrow); - var collabTooltipArrowBefore = tr.ui.b.createDiv({ - className: 'collaborator-tooltip-arrow-before'}); - collabTooltipArrow.appendChild(collabTooltipArrowBefore); - var collabTooltipArrowAfter = tr.ui.b.createDiv({ - className: 'collaborator-tooltip-arrow-after'}); - collabTooltipArrow.appendChild(collabTooltipArrowAfter); - - var rect = imageList[i].image.getBoundingClientRect(); - collabTooltip.style.top = (rect.bottom - 6) + 'px'; - collabTooltip.style.left = - (rect.left + 16 - (collabTooltip.offsetWidth / 2)) + 'px'; - collabTooltipArrow.style.left = (collabTooltip.offsetWidth / 2) + 'px'; - collabTooltip.style.visibility = 'hidden'; - function visibilityDelegate(element, visibility) { - return function() { - element.style.visibility = visibility; - } - } - imageList[i].image.addEventListener( - 'mouseover', visibilityDelegate(collabTooltip, 'visible')); - imageList[i].image.addEventListener( - 'mouseout', visibilityDelegate(collabTooltip, 'hidden')); - } - } - - function onRealtimeFileLoaded(doc) { - if (driveDocument_) - driveDocument_.close(); - driveDocument_ = doc; - doc.addEventListener(gapi.drive.realtime.EventType.COLLABORATOR_JOINED, - displayAllCollaborators); - doc.addEventListener(gapi.drive.realtime.EventType.COLLABORATOR_LEFT, - displayAllCollaborators); - - displayAllCollaborators(doc); - } - - function onRealtimeError(e) { - alert('Error loading realtime: ' + e); - } - - function onDownloaded(filename, content) { - gapi.load('auth:client,drive-realtime,drive-share', function() { - gapi.drive.realtime.load(driveFileId_, - onRealtimeFileLoaded, - null, - onRealtimeError); - - }); - - var traces = []; - var filenames = []; - filenames.push(filename); - traces.push(content); - createViewFromTraces(filenames, traces); - } - - function createViewFromTraces(filenames, traces) { - var m = new tr.Model(); - var i = new tr.importer.Import(m); - var p = i.importTracesWithProgressDialog(traces); - p.then( - function() { - timelineViewEl_.model = m; - timelineViewEl_.updateDocumentFavicon(); - timelineViewEl_.globalMode = true; - timelineViewEl_.viewTitle = ''; - }, - function(err) { - var downloadingOverlay = new tr.ui.b.Overlay(); - downloadingOverlay.textContent = - tr.b.normalizeException(err).message; - downloadingOverlay.title = 'Import error'; - downloadingOverlay.visible = true; - }); - } - - function onSaveToDiskClicked() { - throw new Error('Not implemented'); - } - - function onSaveToDriveClicked() { - throw new Error('Not implemented'); - } - - function onLoadFromDriveClicked() { - createPicker(); - } - - function onLoad() { - timelineViewEl_ = document.querySelector('x-timeline-view'); - timelineViewEl_.globalMode = true; - var navbar = document.getElementById('navbar'); - timelineViewEl_.style.top = navbar.offsetHeight + 'px'; - tr.ui.b.decorate(timelineViewEl_, tr.ui.TimelineView); - } - - window.addEventListener('load', onLoad); - - document.getElementById('x-drive-save-to-disk').onclick = - onSaveToDiskClicked; - document.getElementById('x-drive-save-to-drive').onclick = - onSaveToDriveClicked; - document.getElementById('x-drive-load-from-drive').onclick = - onLoadFromDriveClicked; - document.getElementById('x-drive-share').onclick = function() { - shareClient_.showSettingsDialog(); - }; - - }()); - - </script> - <script type="text/javascript" - src="https://apis.google.com/js/client.js?onload=onAPIClientLoaded_"> - </script> -</body> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/full_config.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/full_config.html deleted file mode 100644 index f27fbafd1ce..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/full_config.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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. ---> - -<!-- The full config is all the configs slammed together. --> -<link rel="import" href="/tracing/extras/importer/gcloud_trace/gcloud_trace_importer.html"> -<link rel="import" href="/tracing/ui/extras/chrome_config.html"> -<link rel="import" href="/tracing/ui/extras/lean_config.html"> -<link rel="import" href="/tracing/ui/extras/systrace_config.html"> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/highlighter/vsync_highlighter.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/highlighter/vsync_highlighter.html deleted file mode 100644 index b804717a76a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/highlighter/vsync_highlighter.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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/ui/tracks/highlighter.html"> -<link rel="import" href="/tracing/ui/timeline_track_view.html"> -<link rel="import" href="/tracing/ui/timeline_viewport.html"> -<link rel="import" href="/tracing/ui/tracks/model_track.html"> - -<script> -'use strict'; - -/** - * @fileoverview Provides the VSyncHighlighter class. - */ -tr.exportTo('tr.ui.e.highlighter', function() { - - var Highlighter = tr.ui.tracks.Highlighter; - - /** - * Highlights VSync events on the model track (using "zebra" striping). - * @constructor - */ - function VSyncHighlighter(viewport) { - Highlighter.call(this, viewport); - this.times_ = []; - } - - VSyncHighlighter.VSYNC_HIGHLIGHT_COLOR = new tr.b.Color(0, 0, 255); - VSyncHighlighter.VSYNC_HIGHLIGHT_ALPHA = 0.1; - - VSyncHighlighter.VSYNC_DENSITY_TRANSPARENT = 0.20; - VSyncHighlighter.VSYNC_DENSITY_OPAQUE = 0.10; - VSyncHighlighter.VSYNC_DENSITY_RANGE = - VSyncHighlighter.VSYNC_DENSITY_TRANSPARENT - - VSyncHighlighter.VSYNC_DENSITY_OPAQUE; - - /** - * Generate a zebra striping from a list of times. - */ - VSyncHighlighter.generateStripes = function(times, minTime, maxTime) { - if (times.length === 0) - return []; - - var stripes = []; - - // Find the lowest and highest index within the viewport. - var lowIndex = tr.b.findLowIndexInSortedArray( - times, - function(time) { return time; }, - minTime); - var highIndex = lowIndex - 1; - while (times[highIndex + 1] <= maxTime) { - highIndex++; - } - - // Must start at an even index and end at an odd index. - for (var i = lowIndex - (lowIndex % 2); i <= highIndex; i += 2) { - var left = i < lowIndex ? minTime : times[i]; - var right = i + 1 > highIndex ? maxTime : times[i + 1]; - stripes.push([left, right]); - } - - return stripes; - } - - VSyncHighlighter.prototype = { - __proto__: Highlighter.prototype, - - processModel: function(model) { - this.times_ = model.device.vSyncTimestamps; - }, - - drawHighlight: function(ctx, dt, viewLWorld, viewRWorld, viewHeight) { - if (!this.viewport_.highlightVSync) { - return; - } - - var stripes = VSyncHighlighter.generateStripes( - this.times_, viewLWorld, viewRWorld); - if (stripes.length == 0) { - return; - } - - var stripeRange = stripes[stripes.length - 1][1] - stripes[0][0]; - var stripeDensity = stripes.length / (dt.scaleX * stripeRange); - var clampedStripeDensity = tr.b.clamp(stripeDensity, - VSyncHighlighter.VSYNC_DENSITY_OPAQUE, - VSyncHighlighter.VSYNC_DENSITY_TRANSPARENT); - var opacity = - (VSyncHighlighter.VSYNC_DENSITY_TRANSPARENT - clampedStripeDensity) / - VSyncHighlighter.VSYNC_DENSITY_RANGE; - if (opacity == 0) { - return; - } - - var pixelRatio = window.devicePixelRatio || 1; - var height = viewHeight * pixelRatio; - - var c = VSyncHighlighter.VSYNC_HIGHLIGHT_COLOR; - ctx.fillStyle = c.toStringWithAlphaOverride( - VSyncHighlighter.VSYNC_HIGHLIGHT_ALPHA * opacity); - - for (var i = 0; i < stripes.length; i++) { - var xLeftView = dt.xWorldToView(stripes[i][0]); - var xRightView = dt.xWorldToView(stripes[i][1]); - ctx.fillRect(xLeftView, 0, xRightView - xLeftView, height); - } - } - }; - - // Register the highlighter. - tr.ui.tracks.Highlighter.register(VSyncHighlighter); - - return { - VSyncHighlighter: VSyncHighlighter - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/highlighter/vsync_highlighter_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/highlighter/vsync_highlighter_test.html deleted file mode 100644 index 9e8f1779cbf..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/highlighter/vsync_highlighter_test.html +++ /dev/null @@ -1,151 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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/model/thread.html"> -<link rel="import" href="/tracing/ui/extras/highlighter/vsync_highlighter.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - - var VSyncHighlighter = tr.ui.e.highlighter.VSyncHighlighter; - - var VIEW_L_WORLD = 100; - var VIEW_R_WORLD = 1000; - - function testGenerateStripes(times, expectedRanges) { - var ranges = VSyncHighlighter.generateStripes( - times, VIEW_L_WORLD, VIEW_R_WORLD); - - assert.sameDeepMembers(ranges, expectedRanges); - } - - test('generateInside', function() { - testGenerateStripes([], []); - testGenerateStripes([200, 500], [[200, 500]]); - testGenerateStripes([200, 500, 800, 900], [[200, 500], [800, 900]]); - testGenerateStripes( - [200, 500, 800, 900, 998, 999], - [[200, 500], [800, 900], [998, 999]]); - }); - - test('generateOutside', function() { - // Far left. - testGenerateStripes([0, 99], []); - testGenerateStripes([0, 10, 50, 99], []); - testGenerateStripes([0, 99, 101, 999], [[101, 999]]); - testGenerateStripes([0, 10, 50, 99, 101, 999], [[101, 999]]); - - // Far right. - testGenerateStripes([1001, 2000], []); - testGenerateStripes([1001, 2000, 3000, 4000], []); - testGenerateStripes([101, 999, 1001, 2000], [[101, 999]]); - testGenerateStripes([101, 999, 1001, 2000, 3000, 4000], [[101, 999]]); - - // Far both. - testGenerateStripes([0, 99, 1001, 2000], []); - testGenerateStripes([0, 10, 50, 99, 1001, 2000], []); - testGenerateStripes([0, 10, 50, 99, 1001, 2000, 3000, 4000], []); - testGenerateStripes([0, 99, 101, 999, 1001, 2000], [[101, 999]]); - }); - - test('generateOverlap', function() { - // Left overlap. - testGenerateStripes([0, 101], [[VIEW_L_WORLD, 101]]); - testGenerateStripes([0, 1, 2, 101], [[VIEW_L_WORLD, 101]]); - testGenerateStripes( - [2, 101, 102, 103], - [[VIEW_L_WORLD, 101], [102, 103]]); - testGenerateStripes( - [0, 1, 2, 101, 102, 103], - [[VIEW_L_WORLD, 101], [102, 103]]); - testGenerateStripes( - [0, 1, 2, 101, 102, 103, 1001, 3000], - [[VIEW_L_WORLD, 101], [102, 103]]); - - // Right overlap. - testGenerateStripes([999, 2000], [[999, VIEW_R_WORLD]]); - testGenerateStripes([999, 2000, 3000, 4000], [[999, VIEW_R_WORLD]]); - testGenerateStripes( - [997, 998, 999, 2000], - [[997, 998], [999, VIEW_R_WORLD]]); - testGenerateStripes( - [997, 998, 999, 2000, 3000, 4000], - [[997, 998], [999, VIEW_R_WORLD]]); - testGenerateStripes( - [0, 10, 997, 998, 999, 2000, 3000, 4000], - [[997, 998], [999, VIEW_R_WORLD]]); - - // Both overlap. - testGenerateStripes([0, 2000], [[VIEW_L_WORLD, VIEW_R_WORLD]]); - testGenerateStripes( - [0, 101, 999, 2000], - [[VIEW_L_WORLD, 101], [999, VIEW_R_WORLD]]); - testGenerateStripes( - [0, 101, 200, 900, 999, 2000], - [[VIEW_L_WORLD, 101], [200, 900], [999, VIEW_R_WORLD]]); - testGenerateStripes( - [0, 10, 90, 101, 999, 2000, 3000, 4000], - [[VIEW_L_WORLD, 101], [999, VIEW_R_WORLD]]); - testGenerateStripes( - [0, 10, 90, 101, 200, 900, 999, 2000, 3000, 4000], - [[VIEW_L_WORLD, 101], [200, 900], [999, VIEW_R_WORLD]]); - }); - - test('generateOdd', function() { - // One VSync. - testGenerateStripes([0], [[VIEW_L_WORLD, VIEW_R_WORLD]]); - testGenerateStripes([500], [[500, VIEW_R_WORLD]]); - testGenerateStripes([1500], []); - - // Multiple VSyncs. - testGenerateStripes([0, 10, 20], [[VIEW_L_WORLD, VIEW_R_WORLD]]); - testGenerateStripes([0, 500, 2000], [[VIEW_L_WORLD, 500]]); - testGenerateStripes([0, 10, 500], [[500, VIEW_R_WORLD]]); - testGenerateStripes([0, 10, 2000], []); - testGenerateStripes( - [0, 200, 500], - [[VIEW_L_WORLD, 200], [500, VIEW_R_WORLD]]); - testGenerateStripes( - [0, 200, 500, 900], - [[VIEW_L_WORLD, 200], [500, 900]]); - }); - - test('generateBorder', function() { - testGenerateStripes([0, VIEW_L_WORLD], [[VIEW_L_WORLD, VIEW_L_WORLD]]); - testGenerateStripes( - [VIEW_L_WORLD, VIEW_L_WORLD], - [[VIEW_L_WORLD, VIEW_L_WORLD]]); - testGenerateStripes( - [VIEW_R_WORLD, 2000], - [[VIEW_R_WORLD, VIEW_R_WORLD]]); - testGenerateStripes( - [VIEW_R_WORLD, VIEW_R_WORLD], - [[VIEW_R_WORLD, VIEW_R_WORLD]]); - testGenerateStripes( - [VIEW_L_WORLD, VIEW_R_WORLD], - [[VIEW_L_WORLD, VIEW_R_WORLD]]); - testGenerateStripes( - [VIEW_L_WORLD, 200, 500, VIEW_R_WORLD], - [[VIEW_L_WORLD, 200], [500, VIEW_R_WORLD]]); - testGenerateStripes( - [0, VIEW_L_WORLD, VIEW_R_WORLD, 2000], - [[VIEW_L_WORLD, VIEW_L_WORLD], [VIEW_R_WORLD, VIEW_R_WORLD]]); - testGenerateStripes( - [0, VIEW_L_WORLD, VIEW_R_WORLD, 2000], - [[VIEW_L_WORLD, VIEW_L_WORLD], [VIEW_R_WORLD, VIEW_R_WORLD]]); - testGenerateStripes( - [0, VIEW_L_WORLD, 200, 500, VIEW_R_WORLD, 2000], - [[VIEW_L_WORLD, VIEW_L_WORLD], [200, 500], - [VIEW_R_WORLD, VIEW_R_WORLD]]); - testGenerateStripes( - [0, 10, VIEW_L_WORLD, VIEW_R_WORLD, 2000, 3000], - [[VIEW_L_WORLD, VIEW_R_WORLD]]); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/lean_config.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/lean_config.html deleted file mode 100644 index 0197474ce45..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/lean_config.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/extras/lean_config.html"> - -<!-- -The lean config is just enough to import uncompressed, trace-event-formatted -json blobs. ---> -<link rel="import" href="/tracing/ui/extras/highlighter/vsync_highlighter.html"> -<link rel="import" href="/tracing/ui/side_panel/file_size_stats_side_panel.html"> -<link rel="import" href="/tracing/ui/side_panel/metrics_side_panel.html"> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/alerts_side_panel.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/alerts_side_panel.html deleted file mode 100644 index 5cc5b6dc241..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/alerts_side_panel.html +++ /dev/null @@ -1,161 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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/statistics.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/ui/base/table.html"> -<link rel="import" href="/tracing/ui/side_panel/side_panel.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/line_chart.html"> - -<polymer-element name='tr-ui-e-s-alerts-side-panel' - extends='tr-ui-side-panel'> - <template> - <style> - :host { - display: block; - width: 250px; - } - #content { - flex-direction: column; - display: flex; - } - </style> - - <div id='content'> - <toolbar id='toolbar'></toolbar> - <result-area id='result_area'></result-area> - </div> - </template> - - <script> - 'use strict'; - - Polymer({ - ready: function() { - this.rangeOfInterest_ = new tr.b.Range(); - this.selection_ = undefined; - }, - - get model() { - return this.model_; - }, - - set model(model) { - this.model_ = model; - this.updateContents_(); - }, - - set selection(selection) { - }, - - set rangeOfInterest(rangeOfInterest) { - }, - - /** - * Fires a selection event selecting all alerts of the specified - * type. - */ - selectAlertsOfType: function(alertTypeString) { - var alertsOfType = this.model_.alerts.filter(function(alert) { - return alert.title === alertTypeString; - }); - - var event = new tr.model.RequestSelectionChangeEvent(); - event.selection = new tr.model.EventSet(alertsOfType); - this.dispatchEvent(event); - }, - - /** - * Returns a map for the specified alerts where each key is the - * alert type string and each value is a list of alerts with that - * type. - */ - alertsByType_: function(alerts) { - var alertsByType = {}; - alerts.forEach(function(alert) { - if (!alertsByType[alert.title]) - alertsByType[alert.title] = []; - - alertsByType[alert.title].push(alert); - }); - return alertsByType; - }, - - alertsTableRows_: function(alertsByType) { - return Object.keys(alertsByType).map(function(key) { - return { - alertType: key, - count: alertsByType[key].length - }; - }); - }, - - alertsTableColumns_: function() { - return [ - { - title: 'Alert type', - value: function(row) { return row.alertType; }, - width: '180px' - }, - { - title: 'Count', - width: '100%', - value: function(row) { return row.count; } - } - ]; - }, - - createAlertsTable_: function(alerts) { - var alertsByType = this.alertsByType_(alerts); - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = this.alertsTableColumns_(); - table.tableRows = this.alertsTableRows_(alertsByType); - table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW; - table.addEventListener('selection-changed', function(e) { - var row = table.selectedTableRow; - if (row) - this.selectAlertsOfType(row.alertType); - }.bind(this)); - - return table; - }, - - updateContents_: function() { - this.$.result_area.textContent = ''; - if (this.model_ === undefined) - return; - - var panel = this.createAlertsTable_(this.model_.alerts); - this.$.result_area.appendChild(panel); - }, - - supportsModel: function(m) { - if (m == undefined) { - return { - supported: false, - reason: 'Unknown tracing model' - }; - } else if (m.alerts.length === 0) { - return { - supported: false, - reason: 'No alerts in tracing model' - }; - } - - return { - supported: true - }; - }, - - get textLabel() { - return 'Alerts'; - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/alerts_side_panel_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/alerts_side_panel_test.html deleted file mode 100644 index 2ca6250b69e..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/alerts_side_panel_test.html +++ /dev/null @@ -1,61 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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/core/test_utils.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/alerts_side_panel.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var ALERT_INFO_1 = new tr.model.EventInfo( - 'Alert 1', 'Critical alert'); - var ALERT_INFO_2 = new tr.model.EventInfo( - 'Alert 2', 'Warning alert'); - - test('instantiate', function() { - var panel = document.createElement('tr-ui-e-s-alerts-side-panel'); - panel.model = createModelWithAlerts([ - new tr.model.Alert(ALERT_INFO_1, 5), - new tr.model.Alert(ALERT_INFO_2, 35) - ]); - panel.style.height = '100px'; - - this.addHTMLOutput(panel); - }); - - test('selectAlertsOfType', function() { - var panel = document.createElement('tr-ui-e-s-alerts-side-panel'); - var alerts = [ - new tr.model.Alert(ALERT_INFO_1, 1), - new tr.model.Alert(ALERT_INFO_1, 2), - new tr.model.Alert(ALERT_INFO_2, 3) - ]; - - var predicted_alerts = new tr.model.EventSet([alerts[0], alerts[1]]); - panel.model = createModelWithAlerts(alerts); - panel.style.height = '100px'; - this.addHTMLOutput(panel); - - var selectionChanged = false; - panel.addEventListener('requestSelectionChange', function(e) { - selectionChanged = true; - assert.isTrue(e.selection.equals(predicted_alerts)); - }); - panel.selectAlertsOfType(ALERT_INFO_1.title); - - assert.isTrue(selectionChanged); - }); - - function createModelWithAlerts(alerts) { - var m = new tr.Model(); - m.alerts = alerts; - return m; - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/frame_data_side_panel.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/frame_data_side_panel.html deleted file mode 100644 index ebaff275896..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/frame_data_side_panel.html +++ /dev/null @@ -1,243 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2016 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/extras/chrome/blame_context/frame_tree_node.html"> -<link rel="import" href="/tracing/extras/chrome/blame_context/render_frame.html"> -<link rel="import" href="/tracing/extras/chrome/blame_context/top_level.html"> -<link rel="import" href="/tracing/model/helpers/chrome_model_helper.html"> -<link rel="import" href="/tracing/ui/base/table.html"> -<link rel="import" href="/tracing/ui/side_panel/side_panel.html"> -<link rel="import" href="/tracing/value/ui/scalar_span.html"> -<link rel="import" href="/tracing/value/unit.html"> - -<polymer-element name='tr-ui-e-s-frame-data-side-panel' - extends='tr-ui-side-panel'> - <template> - <style> - :host { - display: flex; - width: 600px; - flex-direction: column; - } - table-container { - display: flex; - overflow: auto; - } - </style> - <table-container> - <tr-ui-b-table id="table"></tr-ui-b-table> - </table-container> - </template> -</polymer-element> - -<script> -'use strict'; -tr.exportTo('tr.ui.e.s', function() { - var BlameContextSnapshot = tr.e.chrome.BlameContextSnapshot; - var FrameTreeNodeSnapshot = tr.e.chrome.FrameTreeNodeSnapshot; - var RenderFrameSnapshot = tr.e.chrome.RenderFrameSnapshot; - var TopLevelSnapshot = tr.e.chrome.TopLevelSnapshot; - - var BlameContextInstance = tr.e.chrome.BlameContextInstance; - var FrameTreeNodeInstance = tr.e.chrome.FrameTreeNodeInstance; - var RenderFrameInstance = tr.e.chrome.RenderFrameInstance; - var TopLevelInstance = tr.e.chrome.TopLevelInstance; - - /** - * @constructor - */ - function Row(context) { - this.type = context.objectInstance.blameContextType; - - this.contexts = [context]; - this.renderer = undefined; - if (context instanceof FrameTreeNodeSnapshot) { - if (context.renderFrame) { - this.contexts.push(context.renderFrame); - this.renderer = context.renderFrame.objectInstance.parent.pid; - } - } else if (context instanceof RenderFrameSnapshot) { - if (context.frameTreeNode) - this.contexts.push(context.frameTreeNode); - this.renderer = context.objectInstance.parent.pid; - } else if (context instanceof TopLevelSnapshot) { - this.renderer = context.objectInstance.parent.pid; - } else { - throw new Error('Unknown context type'); - } - - // TODO(xiaochengh): Handle the case where a subframe has a trivial url - // (e.g., about:blank), but inherits the origin of its parent. This is not - // needed now, but will be required if we want to group rows by origin. - this.url = context.url; - - // To be computed in batch later for efficiency. - this.eventsOfInterest = new tr.model.EventSet(this.contexts); - this.time = 0; - } - - Polymer('tr-ui-e-s-frame-data-side-panel', { - ready: function() { - this.model_ = undefined; - this.rangeOfInterest_ = new tr.b.Range(); - - // TODO(xiaochengh): Design proper grouping of the rows (by renderer - // pid, frame tree topology, site, ...) in a follow-up patch. - this.$.table.showHeader = true; - this.$.table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW; - this.$.table.tableColumns = this.createFrameDataTableColumns_(); - - this.$.table.addEventListener('selection-changed', function(e) { - this.selectEventSet_(this.$.table.selectedTableRow.eventsOfInterest); - }.bind(this)); - }, - - selectEventSet_: function(eventSet) { - var event = new tr.model.RequestSelectionChangeEvent(); - event.selection = eventSet; - this.dispatchEvent(event); - }, - - createFrameDataTableColumns_: function() { - return [ - { - title: 'Renderer', - value: row => row.renderer, - cmp: (a, b) => a.renderer - b.renderer - }, - { - title: 'Type', - value: row => row.type - }, - // TODO(xiaochengh): Decide what details to show in the table: - // - URL seems necessary, but we may also want origin instead/both. - // - Distinguish between browser time and renderer time? - // - Distinguish between CPU time and wall clock time? - // - Memory? Network? ... - { - title: 'Time', - value: row => tr.v.ui.createScalarSpan(row.time, { - unit: tr.v.Unit.byName.timeStampInMs, - ownerDocument: this.ownerDocument - }), - cmp: (a, b) => a.time - b.time - }, - { - title: 'URL', - value: row => row.url, - cmp: (a, b) => (a.url || '').localeCompare(b.url || '') - } - ]; - }, - - createFrameDataTableRows_: function() { - if (!this.model_) - return []; - - // Gather contexts into skeletons of rows. - var rows = []; - var rowMap = {}; - tr.b.iterItems(this.model_.processes, function(pid, process) { - process.objects.iterObjectInstances(function(objectInstance) { - if (!(objectInstance instanceof BlameContextInstance)) - return; - objectInstance.snapshots.forEach(function(snapshot) { - if (rowMap[snapshot.guid]) - return; - var row = new Row(snapshot); - row.contexts.forEach(context => rowMap[context.guid] = row); - rows.push(row); - }, this); - }, this); - }, this); - - // Find slices attributed to each row. - // TODO(xiaochengh): We should implement a getter - // BlameContextSnapshot.attributedEvents, instead of process the model in - // a UI component. - tr.b.iterItems(this.model_.processes, function(pid, process) { - tr.b.iterItems(process.threads, function(tid, thread) { - thread.sliceGroup.iterSlicesInTimeRange(function(topLevelSlice) { - topLevelSlice.contexts.forEach(function(context) { - if (!context.snapshot.guid || !rowMap[context.snapshot.guid]) - return; - var row = rowMap[context.snapshot.guid]; - row.eventsOfInterest.push(topLevelSlice); - row.time += topLevelSlice.selfTime || 0; - }); - }, this.currentRangeOfInterest.min, this.currentRangeOfInterest.max); - }, this); - }, this); - - return rows; - }, - - updateContents_: function() { - this.$.table.tableRows = this.createFrameDataTableRows_(); - this.$.table.rebuild(); - }, - - supportsModel: function(m) { - if (!m) { - return { - supported: false, - reason: 'No model available.' - }; - } - - var ans = {supported: false}; - tr.b.iterItems(m.processes, function(pid, process) { - process.objects.iterObjectInstances(function(instance) { - if (instance instanceof BlameContextInstance) - ans.supported = true; - }); - }, this); - - if (!ans.supported) - ans.reason = 'No frame data available'; - return ans; - }, - - get currentRangeOfInterest() { - if (this.rangeOfInterest_.isEmpty) - return this.model_.bounds; - else - return this.rangeOfInterest_; - }, - - get rangeOfInterest() { - return this.rangeOfInterest_; - }, - - set rangeOfInterest(rangeOfInterest) { - this.rangeOfInterest_ = rangeOfInterest; - this.updateContents_(); - }, - - get selection() { - // Not applicable. - }, - - set selection(_) { - // Not applicable. - }, - - get textLabel() { - return 'Frame Data'; - }, - - get model() { - return this.model_; - }, - - set model(model) { - this.model_ = model; - this.updateContents_(); - } - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/frame_data_side_panel_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/frame_data_side_panel_test.html deleted file mode 100644 index c9ec9ff025b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/frame_data_side_panel_test.html +++ /dev/null @@ -1,165 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2016 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/core/test_utils.html"> -<link rel="import" href="/tracing/extras/chrome/blame_context/frame_tree_node.html"> -<link rel="import" href="/tracing/extras/chrome/blame_context/render_frame.html"> -<link rel="import" href="/tracing/extras/chrome/blame_context/top_level.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/frame_data_side_panel.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var TestUtils = tr.c.TestUtils; - - function topLevelOptions(pid, id) { - return { - pid: pid, - id: id, - cat: 'blink', - scope: 'PlatformThread', - name: 'TopLevel' - }; - } - - function renderFrameOptions(pid, id, parent) { - return { - pid: pid, - id: id, - cat: 'blink', - scope: 'RenderFrame', - name: 'RenderFrame', - args: {parent: { - id_ref: parent.id, - scope: parent.scope - }} - }; - } - - function frameTreeNodeOptions(pid, id, opt_renderFrame, opt_parentId) { - var ans = { - pid: pid, - id: id, - cat: 'navigation', - scope: 'FrameTreeNode', - name: 'FrameTreeNode', - args: {} - }; - if (opt_renderFrame) { - ans.args.renderFrame = { - id_ref: opt_renderFrame.id, - pid_ref: opt_renderFrame.pid, - scope: 'RenderFrame' - }; - } - if (opt_parentId) { - ans.args.parent = { - id_ref: opt_parentId, - scope: 'FrameTreeNode' - }; - } - return ans; - } - - /** - * Creates some independent contexts. Checks if all are present in the panel. - */ - test('basic', function() { - var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); - panel.model = TestUtils.newModel(function(model) { - TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); - TestUtils.newSnapshot(model, renderFrameOptions( - 1, '0x2', {id: '0x1', scope: 'PlatformThread'})); - TestUtils.newSnapshot(model, frameTreeNodeOptions( - 2, '0x3')); - }); - assert.lengthOf(panel.$.table.tableRows, 3); - - this.addHTMLOutput(panel); - }); - - /** - * Creates a FrameTreeNode in the browser process and a RenderFrame in a - * renderer process that are the same frame. Checks if they are merged into - * one row in the panel. - */ - test('mergeCrossProcessFrameBlameContexts', function() { - var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); - panel.model = TestUtils.newModel(function(model) { - TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); - TestUtils.newSnapshot(model, renderFrameOptions( - 1, '0x2', {id: '0x1', scope: 'PlatformThread'})); - TestUtils.newSnapshot(model, frameTreeNodeOptions( - 2, '0x3', {id: '0x2', pid: 1})); - }); - assert.lengthOf(panel.$.table.tableRows, 2); - - this.addHTMLOutput(panel); - }); - - function newAttributedSlice(model, pid, start, duration, context) { - var slice = TestUtils.newSliceEx({start: start, duration: duration}); - slice.contexts = [{type: 'FrameBlameContext', snapshot: context}]; - model.getOrCreateProcess(pid).getOrCreateThread(1).sliceGroup.pushSlice( - slice); - return slice; - } - - /** - * Changes the range of interest. Checks if the panel updates correspondingly. - */ - test('respondToRangeOfInterest', function() { - var topLevel; - var slice1; - var slice2; - var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); - panel.model = TestUtils.newModel(function(model) { - topLevel = TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); - slice1 = newAttributedSlice(model, 1, 1500, 500, topLevel); - slice2 = newAttributedSlice(model, 1, 2500, 500, topLevel); - }); - - // The default range of interest contains both slices. - assert.isTrue(panel.$.table.tableRows[0].eventsOfInterest.equals( - new tr.model.EventSet([topLevel, slice1, slice2]))); - - // The new range of interest contains only slice2. - panel.rangeOfInterest = tr.b.Range.fromExplicitRange(slice2.start, - slice2.end); - assert.isTrue(panel.$.table.tableRows[0].eventsOfInterest.equals( - new tr.model.EventSet([topLevel, slice2]))); - - this.addHTMLOutput(panel); - }); - - /** - * Selects a row in the panel. Checks if the context(s) of the row and the - * slices attributed to the row are selected. - */ - test('selectAttributedEvents', function() { - var topLevel; - var slice; - var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); - panel.model = TestUtils.newModel(function(model) { - topLevel = TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); - slice = newAttributedSlice(model, 1, 1500, 500, topLevel); - }); - - var selectionChanged = false; - panel.addEventListener('requestSelectionChange', function(e) { - selectionChanged = true; - assert.isTrue( - e.selection.equals(new tr.model.EventSet([topLevel, slice]))); - }); - panel.$.table.selectedTableRow = panel.$.table.tableRows[0]; - assert.isTrue(selectionChanged); - - this.addHTMLOutput(panel); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/input_latency_side_panel.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/input_latency_side_panel.html deleted file mode 100644 index 4b3a9a5917b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/input_latency_side_panel.html +++ /dev/null @@ -1,326 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2014 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/statistics.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/model/helpers/chrome_model_helper.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/line_chart.html"> -<link rel="import" href="/tracing/ui/side_panel/side_panel.html"> - -<polymer-element name='tr-ui-e-s-input-latency-side-panel' - extends='tr-ui-side-panel'> - <template> - <style> - :host { - flex-direction: column; - display: flex; - } - toolbar { - flex: 0 0 auto; - border-bottom: 1px solid black; - display: flex; - } - result-area { - flex: 1 1 auto; - display: block; - min-height: 0; - overflow-y: auto; - } - </style> - - <toolbar id='toolbar'></toolbar> - <result-area id='result_area'></result-area> - </template> - - <script> - 'use strict'; - - Polymer({ - ready: function() { - this.rangeOfInterest_ = new tr.b.Range(); - this.frametimeType_ = tr.model.helpers.IMPL_FRAMETIME_TYPE; - this.latencyChart_ = undefined; - this.frametimeChart_ = undefined; - this.selectedProcessId_ = undefined; - this.mouseDownIndex_ = undefined; - this.curMouseIndex_ = undefined; - }, - - get model() { - return this.model_; - }, - - set model(model) { - this.model_ = model; - if (this.model_) { - this.modelHelper_ = this.model_.getOrCreateHelper( - tr.model.helpers.ChromeModelHelper); - } else { - this.modelHelper_ = undefined; - } - - this.updateToolbar_(); - this.updateContents_(); - }, - - get frametimeType() { - return this.frametimeType_; - }, - - set frametimeType(type) { - if (this.frametimeType_ === type) - return; - this.frametimeType_ = type; - this.updateContents_(); - }, - - get selectedProcessId() { - return this.selectedProcessId_; - }, - - set selectedProcessId(process) { - if (this.selectedProcessId_ === process) - return; - this.selectedProcessId_ = process; - this.updateContents_(); - }, - - set selection(selection) { - if (this.latencyChart_ === undefined) - return; - this.latencyChart_.brushedRange = selection.bounds; - }, - - // This function is for testing purpose. - setBrushedIndices: function(mouseDownIndex, curIndex) { - this.mouseDownIndex_ = mouseDownIndex; - this.curMouseIndex_ = curIndex; - this.updateBrushedRange_(); - }, - - updateBrushedRange_: function() { - if (this.latencyChart_ === undefined) - return; - - var r = new tr.b.Range(); - if (this.mouseDownIndex_ === undefined) { - this.latencyChart_.brushedRange = r; - return; - } - r = this.latencyChart_.computeBrushRangeFromIndices( - this.mouseDownIndex_, this.curMouseIndex_); - this.latencyChart_.brushedRange = r; - - // Based on the brushed range, update the selection of LatencyInfo in - // the timeline view by sending a selectionChange event. - var latencySlices = []; - for (var thread of this.model_.getAllThreads()) - for (var event of thread.getDescendantEvents()) - if (event.title.indexOf('InputLatency:') === 0) - latencySlices.push(event); - latencySlices = tr.model.helpers.getSlicesIntersectingRange( - r, latencySlices); - - var event = new tr.model.RequestSelectionChangeEvent(); - event.selection = new tr.model.EventSet(latencySlices); - this.latencyChart_.dispatchEvent(event); - }, - - registerMouseEventForLatencyChart_: function() { - this.latencyChart_.addEventListener('item-mousedown', function(e) { - this.mouseDownIndex_ = e.index; - this.curMouseIndex_ = e.index; - this.updateBrushedRange_(); - }.bind(this)); - - this.latencyChart_.addEventListener('item-mousemove', function(e) { - if (e.button == undefined) - return; - this.curMouseIndex_ = e.index; - this.updateBrushedRange_(); - }.bind(this)); - - this.latencyChart_.addEventListener('item-mouseup', function(e) { - this.curMouseIndex = e.index; - this.updateBrushedRange_(); - }.bind(this)); - }, - - updateToolbar_: function() { - var browserProcess = this.modelHelper_.browserProcess; - var labels = []; - - if (browserProcess !== undefined) { - var label_str = 'Browser: ' + browserProcess.pid; - labels.push({label: label_str, value: browserProcess.pid}); - } - - tr.b.iterItems(this.modelHelper_.rendererHelpers, - function(pid, rendererHelper) { - var rendererProcess = rendererHelper.process; - var label_str = 'Renderer: ' + rendererProcess.userFriendlyName; - labels.push({label: label_str, value: rendererProcess.userFriendlyName - }); - }, this); - - if (labels.length === 0) - return; - - this.selectedProcessId_ = labels[0].value; - var toolbarEl = this.$.toolbar; - toolbarEl.appendChild(tr.ui.b.createSelector( - this, 'frametimeType', - 'inputLatencySidePanel.frametimeType', this.frametimeType_, - [{label: 'Main Thread Frame Times', - value: tr.model.helpers.MAIN_FRAMETIME_TYPE}, - {label: 'Impl Thread Frame Times', - value: tr.model.helpers.IMPL_FRAMETIME_TYPE} - ])); - toolbarEl.appendChild(tr.ui.b.createSelector( - this, 'selectedProcessId', - 'inputLatencySidePanel.selectedProcessId', - this.selectedProcessId_, - labels)); - }, - - get currentRangeOfInterest() { - if (this.rangeOfInterest_.isEmpty) - return this.model_.bounds; - else - return this.rangeOfInterest_; - }, - - createLatencyLineChart: function(data, title) { - var chart = new tr.ui.b.LineChart(); - var width = 600; - if (document.body.clientWidth != undefined) - width = document.body.clientWidth * 0.5; - chart.setSize({width: width, height: chart.height}); - chart.chartTitle = title; - chart.data = data; - return chart; - }, - - updateContents_: function() { - var resultArea = this.$.result_area; - this.latencyChart_ = undefined; - this.frametimeChart_ = undefined; - resultArea.textContent = ''; - - if (this.modelHelper_ === undefined) - return; - - var rangeOfInterest = this.currentRangeOfInterest; - - var chromeProcess; - if (this.modelHelper_.rendererHelpers[this.selectedProcessId_]) - chromeProcess = this.modelHelper_.rendererHelpers[ - this.selectedProcessId_ - ]; - else - chromeProcess = this.modelHelper_.browserHelper; - - var frameEvents = chromeProcess.getFrameEventsInRange( - this.frametimeType, rangeOfInterest); - - var frametimeData = tr.model.helpers.getFrametimeDataFromEvents( - frameEvents); - var averageFrametime = tr.b.Statistics.mean(frametimeData, function(d) { - return d.frametime; - }); - - var latencyEvents = this.modelHelper_.browserHelper. - getLatencyEventsInRange( - rangeOfInterest); - - var latencyData = []; - latencyEvents.forEach(function(event) { - if (event.inputLatency === undefined) - return; - latencyData.push({ - x: event.start, - latency: event.inputLatency / 1000 - }); - }); - - var averageLatency = tr.b.Statistics.mean(latencyData, function(d) { - return d.latency; - }); - - // Create summary. - var latencySummaryText = document.createElement('div'); - latencySummaryText.appendChild(tr.ui.b.createSpan({ - textContent: 'Average Latency ' + averageLatency + ' ms', - bold: true})); - resultArea.appendChild(latencySummaryText); - - var frametimeSummaryText = document.createElement('div'); - frametimeSummaryText.appendChild(tr.ui.b.createSpan({ - textContent: 'Average Frame Time ' + averageFrametime + ' ms', - bold: true})); - resultArea.appendChild(frametimeSummaryText); - - if (latencyData.length !== 0) { - this.latencyChart_ = this.createLatencyLineChart( - latencyData, 'Latency Over Time'); - this.registerMouseEventForLatencyChart_(); - resultArea.appendChild(this.latencyChart_); - } - - if (frametimeData.length != 0) { - this.frametimeChart_ = this.createLatencyLineChart( - frametimeData, 'Frame Times'); - resultArea.appendChild(this.frametimeChart_); - } - }, - - get rangeOfInterest() { - return this.rangeOfInterest_; - }, - - set rangeOfInterest(rangeOfInterest) { - this.rangeOfInterest_ = rangeOfInterest; - this.updateContents_(); - }, - - supportsModel: function(m) { - if (m == undefined) { - return { - supported: false, - reason: 'Unknown tracing model' - }; - } - - if (!tr.model.helpers.ChromeModelHelper.supportsModel(m)) { - return { - supported: false, - reason: 'No Chrome browser or renderer process found' - }; - } - - var modelHelper = m.getOrCreateHelper(tr.model.helpers.ChromeModelHelper); - if (modelHelper.browserHelper && - modelHelper.browserHelper.hasLatencyEvents) { - return { - supported: true - }; - } - - return { - supported: false, - reason: 'No InputLatency events trace. Consider enabling ' + - 'benchmark" and "input" category when recording the trace' - }; - }, - - get textLabel() { - return 'Input Latency'; - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/input_latency_side_panel_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/input_latency_side_panel_test.html deleted file mode 100644 index 51021bd4aa3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/input_latency_side_panel_test.html +++ /dev/null @@ -1,143 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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/core/test_utils.html"> -<link rel="import" href="/tracing/extras/chrome/cc/input_latency_async_slice.html"> -<link rel="import" href="/tracing/extras/importer/trace_event_importer.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/input_latency_side_panel.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('basic', function() { - var latencyData = [ - { - x: 1000, - latency: 16 - }, - { - x: 2000, - latency: 17 - }, - { - x: 3000, - latency: 14 - }, - { - x: 4000, - latency: 23 - } - ]; - var lc = document.createElement('tr-ui-e-s-input-latency-side-panel'); - var latencyChart = lc.createLatencyLineChart(latencyData, 'latency'); - this.addHTMLOutput(latencyChart); - - var frametimeData = [ - { - x: 1000, - frametime: 16 - }, - { - x: 2000, - frametime: 17 - }, - { - x: 3000, - frametime: 14 - }, - { - x: 4000, - frametime: 23 - } - ]; - var lc = document.createElement('tr-ui-e-s-input-latency-side-panel'); - var frametimeChart = lc.createLatencyLineChart(frametimeData, 'frametime'); - this.addHTMLOutput(frametimeChart); - }); - - test('brushedRangeChange', function() { - var events = []; - for (var i = 0; i < 10; i++) { - var start_ts = i * 10000; - var end_ts = start_ts + 1000 * (i % 2); - events.push( - { - 'cat': 'benchmark', - 'pid': 3507, - 'tid': 3507, - 'ts': start_ts, - 'ph': 'S', - 'name': 'InputLatency', - 'id': i - }); - events.push( - { - 'cat': 'benchmark', - 'pid': 3507, - 'tid': 3507, - 'ts': end_ts, - 'ph': 'T', - 'name': 'InputLatency', - 'args': {'step': 'GestureScrollUpdate'}, - 'id': i - }); - events.push( - { - 'cat': 'benchmark', - 'pid': 3507, - 'tid': 3507, - 'ts': end_ts, - 'ph': 'F', - 'name': 'InputLatency', - 'args': { - 'data': { - 'INPUT_EVENT_LATENCY_ORIGINAL_COMPONENT': { - 'time': start_ts - }, - 'INPUT_EVENT_LATENCY_TERMINATED_FRAME_SWAP_COMPONENT': { - 'time': end_ts - } - } - }, - 'id': i - }); - } - events.push({'cat': '__metadata', - 'pid': 3507, - 'tid': 3507, - 'ts': 0, - 'ph': 'M', - 'name': 'thread_name', - 'args': {'name': 'CrBrowserMain'}}); - - var panel = document.createElement('tr-ui-e-s-input-latency-side-panel'); - this.addHTMLOutput(panel); - - var selectionChanged = false; - - panel.model = tr.c.TestUtils.newModelWithEvents([events]); - function listener(e) { - selectionChanged = true; - assert.equal(e.selection.length, 3); - var predictedStarts = [20, 31, 40]; - var i = 0; - for (var event of e.selection) - assert.equal(event.start, predictedStarts[i++]); - } - panel.ownerDocument.addEventListener('requestSelectionChange', listener); - try { - panel.setBrushedIndices(2, 4); - } finally { - panel.ownerDocument.removeEventListener( - 'requestSelectionChange', listener); - } - assert.isTrue(selectionChanged); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/time_summary_side_panel.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/time_summary_side_panel.html deleted file mode 100644 index a0b6d9df6b6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/time_summary_side_panel.html +++ /dev/null @@ -1,438 +0,0 @@ -<!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/iteration_helpers.html"> -<link rel="import" href="/tracing/base/statistics.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/pie_chart.html"> -<link rel="import" href="/tracing/ui/side_panel/side_panel.html"> -<link rel="import" href="/tracing/value/ui/scalar_span.html"> -<link rel="import" href="/tracing/value/unit.html"> - -<polymer-element name="tr-ui-e-s-time-summary-side-panel" - extends="tr-ui-side-panel"> - <template> - <style> - :host { - flex-direction: column; - display: flex; - } - toolbar { - flex: 0 0 auto; - border-bottom: 1px solid black; - display: flex; - } - result-area { - flex: 1 1 auto; - display: block; - min-height: 0; - overflow-y: auto; - } - </style> - - <toolbar id='toolbar'></toolbar> - <result-area id='result_area'></result-area> - </template> - - <script> - 'use strict'; - (function() { - var GROUP_BY_PROCESS_NAME = 'process'; - var GROUP_BY_THREAD_NAME = 'thread'; - - var WALL_TIME_GROUPING_UNIT = 'Wall time'; - var CPU_TIME_GROUPING_UNIT = 'CPU time'; - - /** - * @constructor - */ - function ResultsForGroup(model, name) { - this.model = model; - this.name = name; - this.topLevelSlices = []; - this.allSlices = []; - } - - ResultsForGroup.prototype = { - get wallTime() { - var wallSum = tr.b.Statistics.sum( - this.topLevelSlices, function(x) { return x.duration; }); - return wallSum; - }, - - get cpuTime() { - var cpuDuration = 0; - for (var i = 0; i < this.topLevelSlices.length; i++) { - var x = this.topLevelSlices[i]; - // Only report thread-duration if we have it for all events. - // - // A thread_duration of 0 is valid, so this only returns 0 if it is - // None. - if (x.cpuDuration === undefined) { - if (x.duration === undefined) - continue; - return 0; - } - cpuDuration += x.cpuDuration; - } - return cpuDuration; - }, - - appendGroupContents: function(group) { - if (group.model != this.model) - throw new Error('Models must be the same'); - - group.allSlices.forEach(function(slice) { - this.allSlices.push(slice); - }, this); - group.topLevelSlices.forEach(function(slice) { - this.topLevelSlices.push(slice); - }, this); - }, - - appendThreadSlices: function(rangeOfInterest, thread) { - var tmp = this.getSlicesIntersectingRange( - rangeOfInterest, thread.sliceGroup.slices); - tmp.forEach(function(slice) { - this.allSlices.push(slice); - }, this); - tmp = this.getSlicesIntersectingRange( - rangeOfInterest, thread.sliceGroup.topLevelSlices); - tmp.forEach(function(slice) { - this.topLevelSlices.push(slice); - }, this); - }, - - getSlicesIntersectingRange: function(rangeOfInterest, slices) { - var slicesInFilterRange = []; - for (var i = 0; i < slices.length; i++) { - var slice = slices[i]; - if (rangeOfInterest.intersectsExplicitRangeInclusive( - slice.start, slice.end)) - slicesInFilterRange.push(slice); - } - return slicesInFilterRange; - } - }; - - Polymer({ - ready: function() { - this.rangeOfInterest_ = new tr.b.Range(); - this.selection_ = undefined; - this.groupBy_ = GROUP_BY_PROCESS_NAME; - this.groupingUnit_ = CPU_TIME_GROUPING_UNIT; - this.showCpuIdleTime_ = true; - this.chart_ = undefined; - - var toolbarEl = this.$.toolbar; - this.groupBySelector_ = tr.ui.b.createSelector( - this, 'groupBy', - 'timeSummarySidePanel.groupBy', this.groupBy_, - [{label: 'Group by process', value: GROUP_BY_PROCESS_NAME}, - {label: 'Group by thread', value: GROUP_BY_THREAD_NAME} - ]); - toolbarEl.appendChild(this.groupBySelector_); - - this.groupingUnitSelector_ = tr.ui.b.createSelector( - this, 'groupingUnit', - 'timeSummarySidePanel.groupingUnit', this.groupingUnit_, - [{label: 'Wall time', value: WALL_TIME_GROUPING_UNIT}, - {label: 'CPU time', value: CPU_TIME_GROUPING_UNIT} - ]); - toolbarEl.appendChild(this.groupingUnitSelector_); - - this.showCpuIdleTimeCheckbox_ = tr.ui.b.createCheckBox( - this, 'showCpuIdleTime', - 'timeSummarySidePanel.showCpuIdleTime', this.showCpuIdleTime_, - 'Show CPU idle time'); - toolbarEl.appendChild(this.showCpuIdleTimeCheckbox_); - this.updateShowCpuIdleTimeCheckboxVisibility_(); - }, - - /** - * This function takes an array of groups and merges smaller groups into - * the provided 'Other' group item such that the remaining items are ready - * for pie-chart consumption. Otherwise, the pie chart gets overwhelmed - * with tons of little slices. - */ - trimPieChartData: function(groups, otherGroup, getValue, opt_extraValue) { - // Copy the array so it can be mutated. - groups = groups.filter(function(d) { - return getValue(d) != 0; - }); - - // Figure out total array range. - var sum = tr.b.Statistics.sum(groups, getValue); - if (opt_extraValue !== undefined) - sum += opt_extraValue; - - // Sort by value. - function compareByValue(a, b) { - return getValue(a) - getValue(b); - } - groups.sort(compareByValue); - - // Now start fusing elements until none are less than threshold in size. - var thresshold = 0.1 * sum; - while (groups.length > 1) { - var group = groups[0]; - if (getValue(group) >= thresshold) - break; - - var v = getValue(group); - if (v + getValue(otherGroup) > thresshold) - break; - - // Remove the group from the list and add it to the 'Other' group. - groups.splice(0, 1); - otherGroup.appendGroupContents(group); - } - - // Final return. - if (getValue(otherGroup) > 0) - groups.push(otherGroup); - - groups.sort(compareByValue); - - return groups; - }, - - generateResultsForGroup: function(model, name) { - return new ResultsForGroup(model, name); - }, - - createPieChartFromResultGroups: function( - groups, title, getValue, opt_extraData) { - var chart = new tr.ui.b.PieChart(); - - function pushDataForGroup(data, resultsForGroup, value) { - data.push({ - label: resultsForGroup.name, - value: value, - valueText: tr.v.Unit.byName.timeDurationInMs.format(value), - resultsForGroup: resultsForGroup - }); - } - chart.addEventListener('item-click', function(clickEvent) { - var resultsForGroup = clickEvent.data.resultsForGroup; - if (resultsForGroup === undefined) - return; - - var event = new tr.model.RequestSelectionChangeEvent(); - event.selection = new tr.model.EventSet(resultsForGroup.allSlices); - event.selection.timeSummaryGroupName = resultsForGroup.name; - chart.dispatchEvent(event); - }); - - - // Build chart data. - var data = []; - groups.forEach(function(resultsForGroup) { - var value = getValue(resultsForGroup); - if (value === 0) - return; - pushDataForGroup(data, resultsForGroup, value); - }); - if (opt_extraData) - data.push.apply(data, opt_extraData); - - chart.chartTitle = title; - chart.data = data; - return chart; - }, - - get model() { - return this.model_; - }, - - set model(model) { - this.model_ = model; - this.updateContents_(); - }, - - get groupBy() { - return groupBy_; - }, - - set groupBy(groupBy) { - this.groupBy_ = groupBy; - if (this.groupBySelector_) - this.groupBySelector_.selectedValue = groupBy; - this.updateContents_(); - }, - - get groupingUnit() { - return groupingUnit_; - }, - - set groupingUnit(groupingUnit) { - this.groupingUnit_ = groupingUnit; - if (this.groupingUnitSelector_) - this.groupingUnitSelector_.selectedValue = groupingUnit; - this.updateShowCpuIdleTimeCheckboxVisibility_(); - this.updateContents_(); - }, - - get showCpuIdleTime() { - return this.showCpuIdleTime_; - }, - - set showCpuIdleTime(showCpuIdleTime) { - this.showCpuIdleTime_ = showCpuIdleTime; - if (this.showCpuIdleTimeCheckbox_) - this.showCpuIdleTimeCheckbox_.checked = showCpuIdleTime; - this.updateContents_(); - }, - - updateShowCpuIdleTimeCheckboxVisibility_: function() { - if (!this.showCpuIdleTimeCheckbox_) - return; - var visible = this.groupingUnit_ == CPU_TIME_GROUPING_UNIT; - if (visible) - this.showCpuIdleTimeCheckbox_.style.display = ''; - else - this.showCpuIdleTimeCheckbox_.style.display = 'none'; - }, - - getGroupNameForThread_: function(thread) { - if (this.groupBy_ == GROUP_BY_THREAD_NAME) - return thread.name ? thread.name : thread.userFriendlyName; - - if (this.groupBy_ == GROUP_BY_PROCESS_NAME) - return thread.parent.userFriendlyName; - }, - - updateContents_: function() { - var resultArea = this.$.result_area; - this.chart_ = undefined; - resultArea.textContent = ''; - - if (this.model_ === undefined) - return; - - var rangeOfInterest; - if (this.rangeOfInterest_.isEmpty) - rangeOfInterest = this.model_.bounds; - else - rangeOfInterest = this.rangeOfInterest_; - - var allGroup = this.generateResultsForGroup(this.model_, 'all'); - var resultsByGroupName = {}; - this.model_.getAllThreads().forEach(function(thread) { - var groupName = this.getGroupNameForThread_(thread); - if (resultsByGroupName[groupName] === undefined) { - resultsByGroupName[groupName] = this.generateResultsForGroup( - this.model_, groupName); - } - resultsByGroupName[groupName].appendThreadSlices( - rangeOfInterest, thread); - - allGroup.appendThreadSlices(rangeOfInterest, thread); - }, this); - - // Helper function for working with the produced group. - var getValueFromGroup = function(group) { - if (this.groupingUnit_ == WALL_TIME_GROUPING_UNIT) - return group.wallTime; - return group.cpuTime; - }.bind(this); - - // Create summary. - var summaryText = document.createElement('div'); - summaryText.appendChild(tr.ui.b.createSpan({ - textContent: 'Total ' + this.groupingUnit_ + ': ', - bold: true})); - summaryText.appendChild(tr.v.ui.createScalarSpan( - getValueFromGroup(allGroup), { - unit: tr.v.Unit.byName.timeDurationInMs, - ownerDocument: this.ownerDocument - })); - resultArea.appendChild(summaryText); - - // If needed, add in the idle time. - var extraValue = 0; - var extraData = []; - if (this.showCpuIdleTime_ && - this.groupingUnit_ === CPU_TIME_GROUPING_UNIT && - this.model.kernel.bestGuessAtCpuCount !== undefined) { - var maxCpuTime = rangeOfInterest.range * - this.model.kernel.bestGuessAtCpuCount; - var idleTime = Math.max(0, maxCpuTime - allGroup.cpuTime); - extraData.push({ - label: 'CPU Idle', - value: idleTime, - valueText: tr.v.Unit.byName.timeDurationInMs.format(idleTime) - }); - extraValue += idleTime; - } - - // Create the actual chart. - var otherGroup = this.generateResultsForGroup(this.model_, 'Other'); - var groups = this.trimPieChartData( - tr.b.dictionaryValues(resultsByGroupName), - otherGroup, - getValueFromGroup, - extraValue); - - if (groups.length == 0) { - resultArea.appendChild(tr.ui.b.createSpan({textContent: 'No data'})); - return undefined; - } - - this.chart_ = this.createPieChartFromResultGroups( - groups, - this.groupingUnit_ + ' breakdown by ' + this.groupBy_, - getValueFromGroup, extraData); - resultArea.appendChild(this.chart_); - - this.chart_.addEventListener('click', function() { - var event = new tr.model.RequestSelectionChangeEvent(); - event.selection = new tr.c.EventSet([]); - this.dispatchEvent(event); - }); - this.chart_.setSize(this.chart_.getMinSize()); - }, - - get selection() { - return selection_; - }, - - set selection(selection) { - this.selection_ = selection; - - if (this.chart_ === undefined) - return; - - if (selection.timeSummaryGroupName) - this.chart_.highlightedLegendKey = selection.timeSummaryGroupName; - else - this.chart_.highlightedLegendKey = undefined; - }, - - get rangeOfInterest() { - return this.rangeOfInterest_; - }, - - set rangeOfInterest(rangeOfInterest) { - this.rangeOfInterest_ = rangeOfInterest; - this.updateContents_(); - }, - - supportsModel: function(model) { - return { - supported: false - }; - }, - - get textLabel() { - return 'Time Summary'; - } - }); - }()); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/time_summary_side_panel_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/time_summary_side_panel_test.html deleted file mode 100644 index 789093fd9b1..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/side_panel/time_summary_side_panel_test.html +++ /dev/null @@ -1,206 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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/core/test_utils.html"> -<link rel="import" href="/tracing/model/model.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/time_summary_side_panel.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function createModel(opt_options) { - var options = opt_options || {}; - var m = tr.c.TestUtils.newModelWithEvents([], { - shiftWorldToZero: false, - pruneContainers: false, - customizeModelCallback: function(m) { - if (options.provideSoftwareMeasuredCpuCount) - m.kernel.softwareMeasuredCpuCount = 2; - - var browserProcess = m.getOrCreateProcess(1); - var browserMain = browserProcess.getOrCreateThread(2); - browserMain.name = 'CrBrowserMain'; - browserMain.sliceGroup.beginSlice('cat', 'Task', 0, undefined, 0); - browserMain.sliceGroup.endSlice(10, 9); - browserMain.sliceGroup.beginSlice('cat', 'Task', 20, undefined, 10); - browserMain.sliceGroup.endSlice(30, 20); - - var rendererProcess = m.getOrCreateProcess(4); - var rendererMain = rendererProcess.getOrCreateThread(5); - rendererMain.name = 'CrRendererMain'; - rendererMain.sliceGroup.beginSlice('cat', 'Task', 0, undefined, 0); - rendererMain.sliceGroup.endSlice(30, 25); - rendererMain.sliceGroup.beginSlice('cat', 'Task', 40, undefined, 40); - rendererMain.sliceGroup.endSlice(60, 50); - } - }); - return m; - } - - test('group', function() { - var ts = document.createElement('tr-ui-e-s-time-summary-side-panel'); - var m = createModel(); - var group = ts.generateResultsForGroup(m, 'foo'); - group.appendThreadSlices(m.bounds, m.processes[1].threads[2]); - assert.equal(group.wallTime, 20); - assert.equal(group.cpuTime, 19); - }); - - test('trim', function() { - var groupData = [ - { - value: 2.854999999999997, - label: '156959' - }, - { - value: 9.948999999999998, - label: '16131' - }, - { - value: 42.314000000000725, - label: '51511' - }, - { - value: 31.06900000000028, - label: 'AudioOutputDevice' - }, - { - value: 1.418, - label: 'BrowserBlockingWorker2/50951' - }, - { - value: 0.044, - label: 'BrowserBlockingWorker3/50695' - }, - { - value: 18.52599999999993, - label: 'Chrome_ChildIOThread' - }, - { - value: 2.888, - label: 'Chrome_FileThread' - }, - { - value: 0.067, - label: 'Chrome_HistoryThread' - }, - { - value: 25.421000000000046, - label: 'Chrome_IOThread' - }, - { - value: 0.019, - label: 'Chrome_ProcessLauncherThread' - }, - { - value: 643.087999999995, - label: 'Compositor' - }, - { - value: 4.049999999999973, - label: 'CompositorRasterWorker1/22031' - }, - { - value: 50.040000000000106, - label: 'CrBrowserMain' - }, - { - value: 1256.5130000000042, - label: 'CrGpuMain' - }, - { - value: 5502.19499999999, - label: 'CrRendererMain' - }, - { - value: 15.552999999999862, - label: 'FFmpegDemuxer' - }, - { - value: 63.706000000001524, - label: 'Media' - }, - { - value: 2.7419999999999987, - label: 'PowerSaveBlocker' - }, - { - value: 0.11500000000000005, - label: 'Watchdog' - } - ]; - - var ts = document.createElement('tr-ui-e-s-time-summary-side-panel'); - - var groups = []; - var m = tr.c.TestUtils.newModelWithEvents([], { - shiftWorldToZero: false, - pruneContainers: false, - customizeModelCallback: function(m) { - var start = 0; - groupData.forEach(function(groupData) { - var group = ts.generateResultsForGroup(m, groupData.label); - - var slice = tr.c.TestUtils.newSliceEx( - {title: groupData.label, - start: start, duration: groupData.value}); - start += groupData.value; - group.allSlices.push(slice); - group.topLevelSlices.push(slice); - - groups.push(group); - }); - } - }); - - function getValueFromGroup(d) { return d.wallTime; } - - var otherGroup = ts.generateResultsForGroup(m, 'Other'); - var newGroups = ts.trimPieChartData(groups, otherGroup, getValueFromGroup); - - // Visualize the data once its trimmed. - var ce = document.createElement('tr-ui-e-s-time-summary-side-panel'); - var chart = ce.createPieChartFromResultGroups( - newGroups, 'Trimmed', getValueFromGroup); - this.addHTMLOutput(chart); - chart.setSize(chart.getMinSize()); - }); - - test('basicInWallTimeMode', function() { - var m = createModel(); - - var panel = document.createElement('tr-ui-e-s-time-summary-side-panel'); - this.addHTMLOutput(panel); - panel.model = m; - panel.groupingUnit = 'Wall time'; - panel.style.border = '1px solid black'; - }); - - test('basicInCpuTimeModeButNoCpuData', function() { - var m = createModel(); - - var panel = document.createElement('tr-ui-e-s-time-summary-side-panel'); - this.addHTMLOutput(panel); - panel.model = m; - panel.groupingUnit = 'CPU time'; - panel.style.border = '1px solid black'; - }); - - test('basicInCpuTimeModeAndCpuData', function() { - var m = createModel({ - provideSoftwareMeasuredCpuCount: true - }); - - var panel = document.createElement('tr-ui-e-s-time-summary-side-panel'); - this.addHTMLOutput(panel); - panel.model = m; - panel.groupingUnit = 'CPU time'; - panel.style.border = '1px solid black'; - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats.html deleted file mode 100644 index 97562f96419..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/extras/system_stats/system_stats_snapshot.html"> -<link rel="import" - href="/tracing/ui/extras/system_stats/system_stats_snapshot_view.html"> -<link rel="import" - href="/tracing/ui/extras/system_stats/system_stats_instance_track.html"> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track.css deleted file mode 100644 index 40096f5497c..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track.css +++ /dev/null @@ -1,15 +0,0 @@ -/* 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. - */ - -.tr-ui-e-system-stats-instance-track { - height: 500px; -} - -.tr-ui-e-system-stats-instance-track ul { - list-style: none; - list-style-position: outside; - margin: 0; - overflow: hidden; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track.html deleted file mode 100644 index 9aa10212de6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track.html +++ /dev/null @@ -1,355 +0,0 @@ -<!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="stylesheet" - href="/tracing/ui/extras/system_stats/system_stats_instance_track.css"> - -<link rel="import" href="/tracing/base/sorted_array_utils.html"> -<link rel="import" href="/tracing/ui/tracks/stacked_bars_track.html"> -<link rel="import" href="/tracing/ui/tracks/object_instance_track.html"> -<link rel="import" href="/tracing/ui/base/event_presenter.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.system_stats', function() { - var EventPresenter = tr.ui.b.EventPresenter; - - var statCount; - - var excludedStats = {'meminfo': { - 'pswpin': 0, - 'pswpout': 0, - 'pgmajfault': 0}, - 'diskinfo': { - 'io': 0, - 'io_time': 0, - 'read_time': 0, - 'reads': 0, - 'reads_merged': 0, - 'sectors_read': 0, - 'sectors_written': 0, - 'weighted_io_time': 0, - 'write_time': 0, - 'writes': 0, - 'writes_merged': 0}, - 'swapinfo': {} - }; - - /** - * Tracks that display system stats data. - * - * @constructor - * @extends {StackedBarsTrack} - */ - - var SystemStatsInstanceTrack = tr.ui.b.define( - 'tr-ui-e-system-stats-instance-track', tr.ui.tracks.StackedBarsTrack); - - SystemStatsInstanceTrack.prototype = { - - __proto__: tr.ui.tracks.StackedBarsTrack.prototype, - - decorate: function(viewport) { - tr.ui.tracks.StackedBarsTrack.prototype.decorate.call(this, viewport); - this.classList.add('tr-ui-e-system-stats-instance-track'); - this.objectInstance_ = null; - }, - - set objectInstances(objectInstances) { - if (!objectInstances) { - this.objectInstance_ = []; - return; - } - if (objectInstances.length != 1) - throw new Error('Bad object instance count.'); - this.objectInstance_ = objectInstances[0]; - if (this.objectInstance_ !== null) { - this.computeRates_(this.objectInstance_.snapshots); - this.maxStats_ = this.computeMaxStats_( - this.objectInstance_.snapshots); - } - }, - - computeRates_: function(snapshots) { - for (var i = 0; i < snapshots.length; i++) { - var snapshot = snapshots[i]; - var stats = snapshot.getStats(); - var prevSnapshot; - var prevStats; - - if (i == 0) { - // Deltas will be zero. - prevSnapshot = snapshots[0]; - } else { - prevSnapshot = snapshots[i - 1]; - } - prevStats = prevSnapshot.getStats(); - var timeIntervalSeconds = (snapshot.ts - prevSnapshot.ts) / 1000; - // Prevent divide by zero. - if (timeIntervalSeconds == 0) - timeIntervalSeconds = 1; - - this.computeRatesRecursive_(prevStats, stats, - timeIntervalSeconds); - } - }, - - computeRatesRecursive_: function(prevStats, stats, - timeIntervalSeconds) { - for (var statName in stats) { - if (stats[statName] instanceof Object) { - this.computeRatesRecursive_(prevStats[statName], - stats[statName], - timeIntervalSeconds); - } else { - if (statName == 'sectors_read') { - stats['bytes_read_per_sec'] = (stats['sectors_read'] - - prevStats['sectors_read']) * - 512 / timeIntervalSeconds; - } - if (statName == 'sectors_written') { - stats['bytes_written_per_sec'] = - (stats['sectors_written'] - - prevStats['sectors_written']) * - 512 / timeIntervalSeconds; - } - if (statName == 'pgmajfault') { - stats['pgmajfault_per_sec'] = (stats['pgmajfault'] - - prevStats['pgmajfault']) / - timeIntervalSeconds; - } - if (statName == 'pswpin') { - stats['bytes_swpin_per_sec'] = (stats['pswpin'] - - prevStats['pswpin']) * - 1000 / timeIntervalSeconds; - } - if (statName == 'pswpout') { - stats['bytes_swpout_per_sec'] = (stats['pswpout'] - - prevStats['pswpout']) * - 1000 / timeIntervalSeconds; - } - } - } - }, - - computeMaxStats_: function(snapshots) { - var maxStats = new Object(); - statCount = 0; - - for (var i = 0; i < snapshots.length; i++) { - var snapshot = snapshots[i]; - var stats = snapshot.getStats(); - - this.computeMaxStatsRecursive_(stats, maxStats, - excludedStats); - } - - return maxStats; - }, - - computeMaxStatsRecursive_: function(stats, maxStats, excludedStats) { - for (var statName in stats) { - if (stats[statName] instanceof Object) { - if (!(statName in maxStats)) - maxStats[statName] = new Object(); - - var excludedNested; - if (excludedStats && statName in excludedStats) - excludedNested = excludedStats[statName]; - else - excludedNested = null; - - this.computeMaxStatsRecursive_(stats[statName], - maxStats[statName], - excludedNested); - } else { - if (excludedStats && statName in excludedStats) - continue; - if (!(statName in maxStats)) { - maxStats[statName] = 0; - statCount++; - } - if (stats[statName] > maxStats[statName]) - maxStats[statName] = stats[statName]; - } - } - }, - - get height() { - return window.getComputedStyle(this).height; - }, - - set height(height) { - this.style.height = height; - }, - - draw: function(type, viewLWorld, viewRWorld) { - switch (type) { - case tr.ui.tracks.DrawType.GENERAL_EVENT: - this.drawStatBars_(viewLWorld, viewRWorld); - break; - } - }, - - drawStatBars_: function(viewLWorld, viewRWorld) { - var ctx = this.context(); - var pixelRatio = window.devicePixelRatio || 1; - - var bounds = this.getBoundingClientRect(); - var width = bounds.width * pixelRatio; - var height = (bounds.height * pixelRatio) / statCount; - - // Culling parameters. - var vp = this.viewport.currentDisplayTransform; - - // Scale by the size of the largest snapshot. - var maxStats = this.maxStats_; - - var objectSnapshots = this.objectInstance_.snapshots; - var lowIndex = tr.b.findLowIndexInSortedArray( - objectSnapshots, - function(snapshot) { - return snapshot.ts; - }, - viewLWorld); - - // Assure that the stack with the left edge off screen still gets drawn - if (lowIndex > 0) - lowIndex -= 1; - - for (var i = lowIndex; i < objectSnapshots.length; ++i) { - var snapshot = objectSnapshots[i]; - var trace = snapshot.getStats(); - var currentY = height; - - var left = snapshot.ts; - if (left > viewRWorld) - break; - var leftView = vp.xWorldToView(left); - if (leftView < 0) - leftView = 0; - - // Compute the edges for the column graph bar. - var right; - if (i != objectSnapshots.length - 1) { - right = objectSnapshots[i + 1].ts; - } else { - // If this is the last snaphot of multiple snapshots, use the width of - // the previous snapshot for the width. - if (objectSnapshots.length > 1) - right = objectSnapshots[i].ts + (objectSnapshots[i].ts - - objectSnapshots[i - 1].ts); - else - // If there's only one snapshot, use max bounds as the width. - right = this.objectInstance_.parent.model.bounds.max; - } - - var rightView = vp.xWorldToView(right); - if (rightView > width) - rightView = width; - - // Floor the bounds to avoid a small gap between stacks. - leftView = Math.floor(leftView); - rightView = Math.floor(rightView); - - // Descend into nested stats. - this.drawStatBarsRecursive_(snapshot, - leftView, - rightView, - height, - trace, - maxStats, - currentY); - - if (i == lowIndex) - this.drawStatNames_(leftView, height, currentY, '', maxStats); - } - ctx.lineWidth = 1; - }, - - drawStatBarsRecursive_: function(snapshot, - leftView, - rightView, - height, - stats, - maxStats, - currentY) { - var ctx = this.context(); - - for (var statName in maxStats) { - if (stats[statName] instanceof Object) { - // Use the y-position returned from the recursive call. - currentY = this.drawStatBarsRecursive_(snapshot, - leftView, - rightView, - height, - stats[statName], - maxStats[statName], - currentY); - } else { - var maxStat = maxStats[statName]; - - // Draw a bar for the stat. The height of the bar is scaled - // against the largest value of the stat across all snapshots. - ctx.fillStyle = EventPresenter.getBarSnapshotColor( - snapshot, Math.round(currentY / height)); - - var barHeight; - - if (maxStat > 0) { - barHeight = height * Math.max(stats[statName], 0) / maxStat; - } else { - barHeight = 0; - } - - ctx.fillRect(leftView, currentY - barHeight, - Math.max(rightView - leftView, 1), barHeight); - - currentY += height; - } - } - - // Return the updated y-position. - return currentY; - }, - - drawStatNames_: function(leftView, height, currentY, prefix, maxStats) { - var ctx = this.context(); - - ctx.textAlign = 'end'; - ctx.font = '12px Arial'; - ctx.fillStyle = '#000000'; - for (var statName in maxStats) { - if (maxStats[statName] instanceof Object) { - currentY = this.drawStatNames_(leftView, height, currentY, - statName, maxStats[statName]); - } else { - var fullname = statName; - - if (prefix != '') - fullname = prefix + ' :: ' + statName; - - ctx.fillText(fullname, leftView - 10, currentY - height / 4); - currentY += height; - } - } - - return currentY; - } - }; - - tr.ui.tracks.ObjectInstanceTrack.register( - SystemStatsInstanceTrack, - {typeName: 'base::TraceEventSystemStatsMonitor::SystemStats'}); - - return { - SystemStatsInstanceTrack: SystemStatsInstanceTrack - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track_test.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track_test.html deleted file mode 100644 index 684887c2f0d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_instance_track_test.html +++ /dev/null @@ -1,67 +0,0 @@ -<!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/core/test_utils.html"> -<link rel="import" href="/tracing/ui/extras/system_stats/system_stats.html"> -<link rel="import" href="/tracing/ui/timeline_viewport.html"> -<link rel="import" href="/tracing/ui/tracks/drawing_container.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var SystemStatsInstanceTrack = tr.ui.e.system_stats.SystemStatsInstanceTrack; - var Viewport = tr.ui.TimelineViewport; - - var createObjects = function() { - var objectInstance = new tr.model.ObjectInstance({}); - var snapshots = []; - - var stats1 = new Object(); - var stats2 = new Object(); - - stats1['committed_memory'] = 2000000; - stats2['committed_memory'] = 3000000; - - stats1['meminfo'] = new Object(); - stats1.meminfo['free'] = 10000; - stats2['meminfo'] = new Object(); - stats2.meminfo['free'] = 20000; - - snapshots.push(new tr.e.system_stats.SystemStatsSnapshot(objectInstance, - 10, stats1)); - snapshots.push(new tr.e.system_stats.SystemStatsSnapshot(objectInstance, - 20, stats2)); - - objectInstance.snapshots = snapshots; - - return objectInstance; - }; - - test('instantiate', function() { - var objectInstances = []; - objectInstances.push(createObjects()); - - var div = document.createElement('div'); - var viewport = new Viewport(div); - var drawingContainer = new tr.ui.tracks.DrawingContainer(viewport); - div.appendChild(drawingContainer); - - var track = new SystemStatsInstanceTrack(viewport); - track.objectInstances = objectInstances; - drawingContainer.appendChild(track); - - this.addHTMLOutput(div); - drawingContainer.invalidate(); - - track.heading = 'testBasic'; - var dt = new tr.ui.TimelineDisplayTransform(); - dt.xSetWorldBounds(0, 50, track.clientWidth); - track.viewport.setDisplayTransformImmediately(dt); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_snapshot_view.css b/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_snapshot_view.css deleted file mode 100644 index e698b15aa70..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_snapshot_view.css +++ /dev/null @@ -1,28 +0,0 @@ -/* 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. - */ - -.tr-ui-e-system-stats-snapshot-view .subhead { - font-size: small; - padding-bottom: 10px; -} - -.tr-ui-e-system-stats-snapshot-view ul { - background-position: 0 5px; - background-repeat: no-repeat; - cursor: pointer; - font-family: monospace; - list-style: none; - margin: 0; - padding-left: 15px; -} - -.tr-ui-e-system-stats-snapshot-view li { - background-position: 0 5px; - background-repeat: no-repeat; - cursor: pointer; - list-style: none; - margin: 0; - padding-left: 15px; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_snapshot_view.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_snapshot_view.html deleted file mode 100644 index 11421e91453..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/system_stats/system_stats_snapshot_view.html +++ /dev/null @@ -1,84 +0,0 @@ -<!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="stylesheet" - href="/tracing/ui/extras/system_stats/system_stats_snapshot_view.css"> - -<link rel="import" href="/tracing/ui/analysis/object_snapshot_view.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.e.system_stats', function() { - /* - * Displays a system stats snapshot in a human readable form. @constructor - */ - var SystemStatsSnapshotView = tr.ui.b.define( - 'tr-ui-e-system-stats-snapshot-view', tr.ui.analysis.ObjectSnapshotView); - - SystemStatsSnapshotView.prototype = { - __proto__: tr.ui.analysis.ObjectSnapshotView.prototype, - - decorate: function() { - this.classList.add('tr-ui-e-system-stats-snapshot-view'); - }, - - updateContents: function() { - var snapshot = this.objectSnapshot_; - if (!snapshot || !snapshot.getStats()) { - this.textContent = 'No system stats snapshot found.'; - return; - } - // Clear old snapshot view. - this.textContent = ''; - - var stats = snapshot.getStats(); - this.appendChild(this.buildList_(stats)); - }, - - isFloat: function(n) { - return typeof n === 'number' && n % 1 !== 0; - }, - - /** - * Creates nested lists. - * - * @param {Object} stats The current trace system stats entry. - * @return {Element} A ul list element. - */ - buildList_: function(stats) { - var statList = document.createElement('ul'); - - for (var statName in stats) { - var statText = document.createElement('li'); - statText.textContent = '' + statName + ': '; - statList.appendChild(statText); - - if (stats[statName] instanceof Object) { - statList.appendChild(this.buildList_(stats[statName])); - } else { - if (this.isFloat(stats[statName])) - statText.textContent += stats[statName].toFixed(2); - else - statText.textContent += stats[statName]; - } - } - - return statList; - } - }; - - tr.ui.analysis.ObjectSnapshotView.register( - SystemStatsSnapshotView, - {typeName: 'base::TraceEventSystemStatsMonitor::SystemStats'}); - - return { - SystemStatsSnapshotView: SystemStatsSnapshotView - }; - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/systrace_config.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/systrace_config.html deleted file mode 100644 index 3ba4626e1c3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/extras/systrace_config.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/extras/systrace_config.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> -<link rel="import" href="/tracing/ui/extras/highlighter/vsync_highlighter.html"> -<link rel="import" href="/tracing/ui/extras/side_panel/alerts_side_panel.html"> -<link rel="import" href="/tracing/ui/timeline_view.html"> |
