Introduce gpu_trace_event for gpu performance analysis.

chrome/browser/resources/gpu_internals/tracing_controller.js

 // Copyright (c) 2010 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.
 
 
 /**
  * @fileoverview State and UI for trace data collection.
  */
 cr.define('gpu', function() {
+
   function TracingController() {
-    this.overlay_ = $('gpu-tracing-overlay-template').cloneNode(true);
-    this.overlay_.removeAttribute('id');
+    this.startButton_ = document.createElement('div');
+    this.startButton_.className = 'gpu-tracing-start-button';
+    this.startButton_.textContent = 'Start tracing';
+    this.startButton_.onclick = this.beginTracing.bind(this);
+    document.body.appendChild(this.startButton_);
+
+    this.overlay_ = document.createElement('div');
+    this.overlay_.className = 'gpu-tracing-overlay';
+
     cr.ui.decorate(this.overlay_, gpu.Overlay);
 
+    var statusDiv = document.createElement('div');
+    statusDiv.textContent = 'Tracing active.';
+    this.overlay_.appendChild(statusDiv);
+
+    var stopButton = document.createElement('button');
+    stopButton.onclick = this.endTracing.bind(this);
+    stopButton.innerText = 'Stop tracing';
+    this.overlay_.appendChild(stopButton);
+
     this.traceEvents_ = [];
-
-    var startButton = $('gpu-tracing-start-button-template').cloneNode(true);
-    startButton.removeAttribute('id');
-    document.body.appendChild(startButton);
-    startButton.onclick = this.beginTracing.bind(this);
-
-    var stopButton = this.overlay_.querySelector('.gpu-tracing-stop-button');
-    stopButton.onclick = this.endTracing.bind(this);
   }
 
   TracingController.prototype = {
     __proto__: cr.EventTarget.prototype,
 
     tracingEnabled_: false,
 
     /**
      * Called by info_view to empty the trace buffer
      */
@@ skipping 52 matching lines @@
     },
 
     /**
      * Called by info_view to finish tracing and update all views.
      */
     endTracing: function() {
       if (!this.tracingEnabled_) throw new Error('Tracing not begun.');
 
       console.log('Finishing trace');
       if (!browserBridge.debugMode) {
-        chrome.send('beginToEndTracing');
+        chrome.send('endTracingAsync');
       } else {
-        var events = getTimelineTestData1();
+        var events = window.getTimelineTestData1 ?
+          getTimelineTestData1() : [];
         this.onTraceDataCollected(events);
         window.setTimeout(this.onEndTracingComplete.bind(this), 250);
       }
     },
 
+
     /**
-     * Called by the browser when all processes ack tracing
-     * having completed.
+     * Called by the browser when all processes complete tracing.
      */
     onEndTracingComplete: function() {
       this.overlay_.visible = false;
       this.tracingEnabled_ = false;
       console.log('onEndTracingComplete p1 with ' +
                   this.traceEvents_.length + ' events.');
       var e = new cr.Event('traceEnded');
       e.events = this.traceEvents_;
       this.dispatchEvent(e);
     },
 
     selfTest: function() {
       this.beginTracing();
       window.setTimeout(this.endTracing.bind(This), 500);
     }
   };
   return {
     TracingController: TracingController
   };
 });