michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: 'use strict';
michael@0: 
michael@0: const DEVELOPER_HUD_LOG_PREFIX = 'DeveloperHUD';
michael@0: 
michael@0: XPCOMUtils.defineLazyGetter(this, 'devtools', function() {
michael@0:   const {devtools} = Cu.import('resource://gre/modules/devtools/Loader.jsm', {});
michael@0:   return devtools;
michael@0: });
michael@0: 
michael@0: XPCOMUtils.defineLazyGetter(this, 'DebuggerClient', function() {
michael@0:   return Cu.import('resource://gre/modules/devtools/dbg-client.jsm', {}).DebuggerClient;
michael@0: });
michael@0: 
michael@0: XPCOMUtils.defineLazyGetter(this, 'WebConsoleUtils', function() {
michael@0:   return devtools.require('devtools/toolkit/webconsole/utils').Utils;
michael@0: });
michael@0: 
michael@0: XPCOMUtils.defineLazyGetter(this, 'EventLoopLagFront', function() {
michael@0:   return devtools.require('devtools/server/actors/eventlooplag').EventLoopLagFront;
michael@0: });
michael@0: 
michael@0: XPCOMUtils.defineLazyGetter(this, 'MemoryFront', function() {
michael@0:   return devtools.require('devtools/server/actors/memory').MemoryFront;
michael@0: });
michael@0: 
michael@0: 
michael@0: /**
michael@0:  * The Developer HUD is an on-device developer tool that displays widgets,
michael@0:  * showing visual debug information about apps. Each widget corresponds to a
michael@0:  * metric as tracked by a metric watcher (e.g. consoleWatcher).
michael@0:  */
michael@0: let developerHUD = {
michael@0: 
michael@0:   _targets: new Map(),
michael@0:   _frames: new Map(),
michael@0:   _client: null,
michael@0:   _conn: null,
michael@0:   _watchers: [],
michael@0:   _logging: true,
michael@0: 
michael@0:   /**
michael@0:    * This method registers a metric watcher that will watch one or more metrics
michael@0:    * on app frames that are being tracked. A watcher must implement the
michael@0:    * `trackTarget(target)` and `untrackTarget(target)` methods, register
michael@0:    * observed metrics with `target.register(metric)`, and keep them up-to-date
michael@0:    * with `target.update(metric, message)` when necessary.
michael@0:    */
michael@0:   registerWatcher: function dwp_registerWatcher(watcher) {
michael@0:     this._watchers.unshift(watcher);
michael@0:   },
michael@0: 
michael@0:   init: function dwp_init() {
michael@0:     if (this._client)
michael@0:       return;
michael@0: 
michael@0:     if (!DebuggerServer.initialized) {
michael@0:       RemoteDebugger.start();
michael@0:     }
michael@0: 
michael@0:     // We instantiate a local debugger connection so that watchers can use our
michael@0:     // DebuggerClient to send requests to tab actors (e.g. the consoleActor).
michael@0:     // Note the special usage of the private _serverConnection, which we need
michael@0:     // to call connectToChild and set up child process actors on a frame we
michael@0:     // intend to track. These actors will use the connection to communicate with
michael@0:     // our DebuggerServer in the parent process.
michael@0:     let transport = DebuggerServer.connectPipe();
michael@0:     this._conn = transport._serverConnection;
michael@0:     this._client = new DebuggerClient(transport);
michael@0: 
michael@0:     for (let w of this._watchers) {
michael@0:       if (w.init) {
michael@0:         w.init(this._client);
michael@0:       }
michael@0:     }
michael@0: 
michael@0:     Services.obs.addObserver(this, 'remote-browser-shown', false);
michael@0:     Services.obs.addObserver(this, 'inprocess-browser-shown', false);
michael@0:     Services.obs.addObserver(this, 'message-manager-disconnect', false);
michael@0: 
michael@0:     let systemapp = document.querySelector('#systemapp');
michael@0:     this.trackFrame(systemapp);
michael@0: 
michael@0:     let frames = systemapp.contentWindow.document.querySelectorAll('iframe[mozapp]');
michael@0:     for (let frame of frames) {
michael@0:       this.trackFrame(frame);
michael@0:     }
michael@0: 
michael@0:     SettingsListener.observe('hud.logging', this._logging, enabled => {
michael@0:       this._logging = enabled;
michael@0:     });
michael@0:   },
michael@0: 
michael@0:   uninit: function dwp_uninit() {
michael@0:     if (!this._client)
michael@0:       return;
michael@0: 
michael@0:     for (let frame of this._targets.keys()) {
michael@0:       this.untrackFrame(frame);
michael@0:     }
michael@0: 
michael@0:     Services.obs.removeObserver(this, 'remote-browser-shown');
michael@0:     Services.obs.removeObserver(this, 'inprocess-browser-shown');
michael@0:     Services.obs.removeObserver(this, 'message-manager-disconnect');
michael@0: 
michael@0:     this._client.close();
michael@0:     delete this._client;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * This method will ask all registered watchers to track and update metrics
michael@0:    * on an app frame.
michael@0:    */
michael@0:   trackFrame: function dwp_trackFrame(frame) {
michael@0:     if (this._targets.has(frame))
michael@0:       return;
michael@0: 
michael@0:     DebuggerServer.connectToChild(this._conn, frame).then(actor => {
michael@0:       let target = new Target(frame, actor);
michael@0:       this._targets.set(frame, target);
michael@0: 
michael@0:       for (let w of this._watchers) {
michael@0:         w.trackTarget(target);
michael@0:       }
michael@0:     });
michael@0:   },
michael@0: 
michael@0:   untrackFrame: function dwp_untrackFrame(frame) {
michael@0:     let target = this._targets.get(frame);
michael@0:     if (target) {
michael@0:       for (let w of this._watchers) {
michael@0:         w.untrackTarget(target);
michael@0:       }
michael@0: 
michael@0:       target.destroy();
michael@0:       this._targets.delete(frame);
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   observe: function dwp_observe(subject, topic, data) {
michael@0:     if (!this._client)
michael@0:       return;
michael@0: 
michael@0:     let frame;
michael@0: 
michael@0:     switch(topic) {
michael@0: 
michael@0:       // listen for frame creation in OOP (device) as well as in parent process (b2g desktop)
michael@0:       case 'remote-browser-shown':
michael@0:       case 'inprocess-browser-shown':
michael@0:         let frameLoader = subject;
michael@0:         // get a ref to the app <iframe>
michael@0:         frameLoader.QueryInterface(Ci.nsIFrameLoader);
michael@0:         // Ignore notifications that aren't from a BrowserOrApp
michael@0:         if (!frameLoader.ownerIsBrowserOrAppFrame) {
michael@0:           return;
michael@0:         }
michael@0:         frame = frameLoader.ownerElement;
michael@0:         if (!frame.appManifestURL) // Ignore all frames but app frames
michael@0:           return;
michael@0:         this.trackFrame(frame);
michael@0:         this._frames.set(frameLoader.messageManager, frame);
michael@0:         break;
michael@0: 
michael@0:       // Every time an iframe is destroyed, its message manager also is
michael@0:       case 'message-manager-disconnect':
michael@0:         let mm = subject;
michael@0:         frame = this._frames.get(mm);
michael@0:         if (!frame)
michael@0:           return;
michael@0:         this.untrackFrame(frame);
michael@0:         this._frames.delete(mm);
michael@0:         break;
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   log: function dwp_log(message) {
michael@0:     if (this._logging) {
michael@0:       dump(DEVELOPER_HUD_LOG_PREFIX + ': ' + message + '\n');
michael@0:     }
michael@0:   }
michael@0: 
michael@0: };
michael@0: 
michael@0: 
michael@0: /**
michael@0:  * A Target object represents all there is to know about a Firefox OS app frame
michael@0:  * that is being tracked, e.g. a pointer to the frame, current values of watched
michael@0:  * metrics, and how to notify the front-end when metrics have changed.
michael@0:  */
michael@0: function Target(frame, actor) {
michael@0:   this.frame = frame;
michael@0:   this.actor = actor;
michael@0:   this.metrics = new Map();
michael@0: }
michael@0: 
michael@0: Target.prototype = {
michael@0: 
michael@0:   /**
michael@0:    * Register a metric that can later be updated. Does not update the front-end.
michael@0:    */
michael@0:   register: function target_register(metric) {
michael@0:     this.metrics.set(metric, 0);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Modify one of a target's metrics, and send out an event to notify relevant
michael@0:    * parties (e.g. the developer HUD, automated tests, etc).
michael@0:    */
michael@0:   update: function target_update(metric, message) {
michael@0:     if (!metric.name) {
michael@0:       throw new Error('Missing metric.name');
michael@0:     }
michael@0: 
michael@0:     if (!metric.value) {
michael@0:       metric.value = 0;
michael@0:     }
michael@0: 
michael@0:     let metrics = this.metrics;
michael@0:     if (metrics) {
michael@0:       metrics.set(metric.name, metric.value);
michael@0:     }
michael@0: 
michael@0:     let data = {
michael@0:       metrics: [], // FIXME(Bug 982066) Remove this field.
michael@0:       manifest: this.frame.appManifestURL,
michael@0:       metric: metric,
michael@0:       message: message
michael@0:     };
michael@0: 
michael@0:     // FIXME(Bug 982066) Remove this loop.
michael@0:     if (metrics && metrics.size > 0) {
michael@0:       for (let name of metrics.keys()) {
michael@0:         data.metrics.push({name: name, value: metrics.get(name)});
michael@0:       }
michael@0:     }
michael@0: 
michael@0:     if (message) {
michael@0:       developerHUD.log('[' + data.manifest + '] ' + data.message);
michael@0:     }
michael@0:     this._send(data);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Nicer way to call update() when the metric value is a number that needs
michael@0:    * to be incremented.
michael@0:    */
michael@0:   bump: function target_bump(metric, message) {
michael@0:     metric.value = (this.metrics.get(metric.name) || 0) + 1;
michael@0:     this.update(metric, message);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Void a metric value and make sure it isn't displayed on the front-end
michael@0:    * anymore.
michael@0:    */
michael@0:   clear: function target_clear(metric) {
michael@0:     metric.value = 0;
michael@0:     this.update(metric);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Tear everything down, including the front-end by sending a message without
michael@0:    * widgets.
michael@0:    */
michael@0:   destroy: function target_destroy() {
michael@0:     delete this.metrics;
michael@0:     this._send({});
michael@0:   },
michael@0: 
michael@0:   _send: function target_send(data) {
michael@0:     shell.sendEvent(this.frame, 'developer-hud-update', Cu.cloneInto(data, this.frame));
michael@0:   }
michael@0: 
michael@0: };
michael@0: 
michael@0: 
michael@0: /**
michael@0:  * The Console Watcher tracks the following metrics in apps: reflows, warnings,
michael@0:  * and errors, with security errors reported separately.
michael@0:  */
michael@0: let consoleWatcher = {
michael@0: 
michael@0:   _client: null,
michael@0:   _targets: new Map(),
michael@0:   _watching: {
michael@0:     reflows: false,
michael@0:     warnings: false,
michael@0:     errors: false,
michael@0:     security: false
michael@0:   },
michael@0:   _security: [
michael@0:     'Mixed Content Blocker',
michael@0:     'Mixed Content Message',
michael@0:     'CSP',
michael@0:     'Invalid HSTS Headers',
michael@0:     'Insecure Password Field',
michael@0:     'SSL',
michael@0:     'CORS'
michael@0:   ],
michael@0: 
michael@0:   init: function cw_init(client) {
michael@0:     this._client = client;
michael@0:     this.consoleListener = this.consoleListener.bind(this);
michael@0: 
michael@0:     let watching = this._watching;
michael@0: 
michael@0:     for (let key in watching) {
michael@0:       let metric = key;
michael@0:       SettingsListener.observe('hud.' + metric, watching[metric], watch => {
michael@0:         // Watch or unwatch the metric.
michael@0:         if (watching[metric] = watch) {
michael@0:           return;
michael@0:         }
michael@0: 
michael@0:         // If unwatched, remove any existing widgets for that metric.
michael@0:         for (let target of this._targets.values()) {
michael@0:           target.clear({name: metric});
michael@0:         }
michael@0:       });
michael@0:     }
michael@0: 
michael@0:     client.addListener('logMessage', this.consoleListener);
michael@0:     client.addListener('pageError', this.consoleListener);
michael@0:     client.addListener('consoleAPICall', this.consoleListener);
michael@0:     client.addListener('reflowActivity', this.consoleListener);
michael@0:   },
michael@0: 
michael@0:   trackTarget: function cw_trackTarget(target) {
michael@0:     target.register('reflows');
michael@0:     target.register('warnings');
michael@0:     target.register('errors');
michael@0:     target.register('security');
michael@0: 
michael@0:     this._client.request({
michael@0:       to: target.actor.consoleActor,
michael@0:       type: 'startListeners',
michael@0:       listeners: ['LogMessage', 'PageError', 'ConsoleAPI', 'ReflowActivity']
michael@0:     }, (res) => {
michael@0:       this._targets.set(target.actor.consoleActor, target);
michael@0:     });
michael@0:   },
michael@0: 
michael@0:   untrackTarget: function cw_untrackTarget(target) {
michael@0:     this._client.request({
michael@0:       to: target.actor.consoleActor,
michael@0:       type: 'stopListeners',
michael@0:       listeners: ['LogMessage', 'PageError', 'ConsoleAPI', 'ReflowActivity']
michael@0:     }, (res) => { });
michael@0: 
michael@0:     this._targets.delete(target.actor.consoleActor);
michael@0:   },
michael@0: 
michael@0:   consoleListener: function cw_consoleListener(type, packet) {
michael@0:     let target = this._targets.get(packet.from);
michael@0:     let metric = {};
michael@0:     let output = '';
michael@0: 
michael@0:     switch (packet.type) {
michael@0: 
michael@0:       case 'pageError':
michael@0:         let pageError = packet.pageError;
michael@0: 
michael@0:         if (pageError.warning || pageError.strict) {
michael@0:           metric.name = 'warnings';
michael@0:           output += 'warning (';
michael@0:         } else {
michael@0:           metric.name = 'errors';
michael@0:           output += 'error (';
michael@0:         }
michael@0: 
michael@0:         if (this._security.indexOf(pageError.category) > -1) {
michael@0:           metric.name = 'security';
michael@0:         }
michael@0: 
michael@0:         let {errorMessage, sourceName, category, lineNumber, columnNumber} = pageError;
michael@0:         output += category + '): "' + (errorMessage.initial || errorMessage) +
michael@0:           '" in ' + sourceName + ':' + lineNumber + ':' + columnNumber;
michael@0:         break;
michael@0: 
michael@0:       case 'consoleAPICall':
michael@0:         switch (packet.message.level) {
michael@0: 
michael@0:           case 'error':
michael@0:             metric.name = 'errors';
michael@0:             output += 'error (console)';
michael@0:             break;
michael@0: 
michael@0:           case 'warn':
michael@0:             metric.name = 'warnings';
michael@0:             output += 'warning (console)';
michael@0:             break;
michael@0: 
michael@0:           default:
michael@0:             return;
michael@0:         }
michael@0:         break;
michael@0: 
michael@0:       case 'reflowActivity':
michael@0:         metric.name = 'reflows';
michael@0: 
michael@0:         let {start, end, sourceURL, interruptible} = packet;
michael@0:         metric.interruptible = interruptible;
michael@0:         let duration = Math.round((end - start) * 100) / 100;
michael@0:         output += 'reflow: ' + duration + 'ms';
michael@0:         if (sourceURL) {
michael@0:           output += ' ' + this.formatSourceURL(packet);
michael@0:         }
michael@0:         break;
michael@0: 
michael@0:       default:
michael@0:         return;
michael@0:     }
michael@0: 
michael@0:     if (!this._watching[metric.name]) {
michael@0:       return;
michael@0:     }
michael@0: 
michael@0:     target.bump(metric, output);
michael@0:   },
michael@0: 
michael@0:   formatSourceURL: function cw_formatSourceURL(packet) {
michael@0:     // Abbreviate source URL
michael@0:     let source = WebConsoleUtils.abbreviateSourceURL(packet.sourceURL);
michael@0: 
michael@0:     // Add function name and line number
michael@0:     let {functionName, sourceLine} = packet;
michael@0:     source = 'in ' + (functionName || '<anonymousFunction>') +
michael@0:       ', ' + source + ':' + sourceLine;
michael@0: 
michael@0:     return source;
michael@0:   }
michael@0: };
michael@0: developerHUD.registerWatcher(consoleWatcher);
michael@0: 
michael@0: 
michael@0: let eventLoopLagWatcher = {
michael@0:   _client: null,
michael@0:   _fronts: new Map(),
michael@0:   _active: false,
michael@0: 
michael@0:   init: function(client) {
michael@0:     this._client = client;
michael@0: 
michael@0:     SettingsListener.observe('hud.jank', false, this.settingsListener.bind(this));
michael@0:   },
michael@0: 
michael@0:   settingsListener: function(value) {
michael@0:     if (this._active == value) {
michael@0:       return;
michael@0:     }
michael@0:     this._active = value;
michael@0: 
michael@0:     // Toggle the state of existing fronts.
michael@0:     let fronts = this._fronts;
michael@0:     for (let target of fronts.keys()) {
michael@0:       if (value) {
michael@0:         fronts.get(target).start();
michael@0:       } else {
michael@0:         fronts.get(target).stop();
michael@0:         target.clear({name: 'jank'});
michael@0:       }
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   trackTarget: function(target) {
michael@0:     target.register('jank');
michael@0: 
michael@0:     let front = new EventLoopLagFront(this._client, target.actor);
michael@0:     this._fronts.set(target, front);
michael@0: 
michael@0:     front.on('event-loop-lag', time => {
michael@0:       target.update({name: 'jank', value: time}, 'jank: ' + time + 'ms');
michael@0:     });
michael@0: 
michael@0:     if (this._active) {
michael@0:       front.start();
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   untrackTarget: function(target) {
michael@0:     let fronts = this._fronts;
michael@0:     if (fronts.has(target)) {
michael@0:       fronts.get(target).destroy();
michael@0:       fronts.delete(target);
michael@0:     }
michael@0:   }
michael@0: };
michael@0: developerHUD.registerWatcher(eventLoopLagWatcher);
michael@0: 
michael@0: 
michael@0: /**
michael@0:  * The Memory Watcher uses devtools actors to track memory usage.
michael@0:  */
michael@0: let memoryWatcher = {
michael@0: 
michael@0:   _client: null,
michael@0:   _fronts: new Map(),
michael@0:   _timers: new Map(),
michael@0:   _watching: {
michael@0:     jsobjects: false,
michael@0:     jsstrings: false,
michael@0:     jsother: false,
michael@0:     dom: false,
michael@0:     style: false,
michael@0:     other: false
michael@0:   },
michael@0:   _active: false,
michael@0: 
michael@0:   init: function mw_init(client) {
michael@0:     this._client = client;
michael@0:     let watching = this._watching;
michael@0: 
michael@0:     for (let key in watching) {
michael@0:       let category = key;
michael@0:       SettingsListener.observe('hud.' + category, false, watch => {
michael@0:         watching[category] = watch;
michael@0:       });
michael@0:     }
michael@0: 
michael@0:     SettingsListener.observe('hud.appmemory', false, enabled => {
michael@0:       if (this._active = enabled) {
michael@0:         for (let target of this._fronts.keys()) {
michael@0:           this.measure(target);
michael@0:         }
michael@0:       } else {
michael@0:         for (let target of this._fronts.keys()) {
michael@0:           clearTimeout(this._timers.get(target));
michael@0:           target.clear({name: 'memory'});
michael@0:         }
michael@0:       }
michael@0:     });
michael@0:   },
michael@0: 
michael@0:   measure: function mw_measure(target) {
michael@0: 
michael@0:     // TODO Also track USS (bug #976024).
michael@0: 
michael@0:     let watch = this._watching;
michael@0:     let front = this._fronts.get(target);
michael@0: 
michael@0:     front.measure().then((data) => {
michael@0: 
michael@0:       let total = 0;
michael@0:       if (watch.jsobjects) {
michael@0:         total += parseInt(data.jsObjectsSize);
michael@0:       }
michael@0:       if (watch.jsstrings) {
michael@0:         total += parseInt(data.jsStringsSize);
michael@0:       }
michael@0:       if (watch.jsother) {
michael@0:         total += parseInt(data.jsOtherSize);
michael@0:       }
michael@0:       if (watch.dom) {
michael@0:         total += parseInt(data.domSize);
michael@0:       }
michael@0:       if (watch.style) {
michael@0:         total += parseInt(data.styleSize);
michael@0:       }
michael@0:       if (watch.other) {
michael@0:         total += parseInt(data.otherSize);
michael@0:       }
michael@0:       // TODO Also count images size (bug #976007).
michael@0: 
michael@0:       target.update({name: 'memory', value: total});
michael@0:       let duration = parseInt(data.jsMilliseconds) + parseInt(data.nonJSMilliseconds);
michael@0:       let timer = setTimeout(() => this.measure(target), 100 * duration);
michael@0:       this._timers.set(target, timer);
michael@0:     }, (err) => {
michael@0:       console.error(err);
michael@0:     });
michael@0:   },
michael@0: 
michael@0:   trackTarget: function mw_trackTarget(target) {
michael@0:     target.register('uss');
michael@0:     target.register('memory');
michael@0:     this._fronts.set(target, MemoryFront(this._client, target.actor));
michael@0:     if (this._active) {
michael@0:       this.measure(target);
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   untrackTarget: function mw_untrackTarget(target) {
michael@0:     let front = this._fronts.get(target);
michael@0:     if (front) {
michael@0:       front.destroy();
michael@0:       clearTimeout(this._timers.get(target));
michael@0:       this._fronts.delete(target);
michael@0:       this._timers.delete(target);
michael@0:     }
michael@0:   }
michael@0: };
michael@0: developerHUD.registerWatcher(memoryWatcher);