Merge pull request #16220 from KevinGrandon/bug_971483_devtools_layer_v2

Bug 971483 - [System2] Instantiable DevToolsLayer r=alive

apps/system/index.html

@@ -314,8 +314,8 @@
     <script defer src="js/layout_manager.js"></script>
 
     <!-- Devtools -->
-    <link rel="stylesheet" type="text/css" href="style/devtools_layers.css">
-    <script defer src="js/devtools_layers.js"></script>
+    <link rel="stylesheet" type="text/css" href="style/devtools_view.css">
+    <script defer src="js/devtools_view.js"></script>
 
     <!-- Edge Gestures -->
     <script defer src="js/stack_manager.js"></script>

apps/system/js/bootstrap.js

@@ -57,6 +57,7 @@ window.addEventListener('load', function startup() {
   Shortcuts.init();
   ScreenManager.turnScreenOn();
   Places.init();
+  window.devtoolsView = new DevtoolsView();
   window.ttlView = new TTLView();
 
   // We need to be sure to get the focus in order to wake up the screen

apps/system/js/devtools_view.js

@@ -0,0 +1,105 @@
+'use strict';
+
+(function(exports) {
+
+  /**
+   * DevtoolsView displays metrics as an overlay on top of mozapps.
+   * @param {Object} data The data to update the devtools view with.
+   * @class DevtoolsView
+   */
+  function DevtoolsView() {
+    window.addEventListener('widget-panel-update', function updateHandler(e){
+      this.display(e.detail);
+      e.preventDefault();
+    }.bind(this));
+  }
+
+  DevtoolsView.prototype = {
+
+    /**
+     * Displays the devtools view if it does not exist and updates with data.
+     * Currently we measure errors, warnings, and reflows.
+     * @memberof DevtoolsView.prototype
+     * @param {Object} data The data to update the devtools view with.
+     */
+    display: function(data) {
+      var target = 'iframe[mozapp="' + data.manifestURL + '"]';
+      var iframe = document.querySelector(target);
+      if (!iframe) {
+        return;
+      }
+
+      var appwindow = iframe.parentElement;
+      var overlay = appwindow.querySelector('.devtools-view');
+
+      if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.classList.add('devtools-view');
+        appwindow.appendChild(overlay);
+      }
+
+      if (!data.metrics || data.metrics.length < 1) {
+        overlay.remove();
+        return;
+      }
+
+      var html = '';
+
+      data.metrics.forEach(function(metric) {
+        html += this.widget(metric);
+      }, this);
+
+      overlay.innerHTML = html;
+    },
+
+    /**
+     * Updates a single metric to be displayed.
+     * @memberof DevtoolsView.prototype
+     * @param {Object} metric The metric to be updated.
+     */
+    widget: function(metric) {
+      var value = metric.value;
+      if (!value) {
+        return '';
+      }
+
+      var color;
+      switch(metric.name) {
+        case 'errors':
+          color = 'red';
+          break;
+
+        case 'warnings':
+          color = 'orange';
+          break;
+
+        case 'reflows':
+          color = 'purple';
+          break;
+
+        default:
+          color = this.colorHash(metric.name);
+          break;
+      }
+
+      return '<div class=widget style="background-color: ' + color + '">' +
+             value + '</div>';
+    },
+
+    /**
+     * Given a color name, returns a styled CSS background value.
+     * @memberof DevtoolsView.prototype
+     * @param {String} name The name of the color.
+     */
+    colorHash: function(name) {
+      var hue = 0;
+      for (var i = 0; i < name.length; i++) {
+        hue += name.charCodeAt(i);
+      }
+      return 'hsl(' + (hue % 360) + ', 75%, 50%)';
+    }
+  };
+
+  exports.DevtoolsView = DevtoolsView;
+
+}(window));

apps/system/style/devtools_layers.css → apps/system/style/devtools_view.css

@@ -1,4 +1,4 @@
-.devtools-layer {
+.devtools-view {
   z-index: 2;
   position: absolute;
   top: 0;
@@ -13,7 +13,7 @@
   justify-content: flex-end;
 }
 
-.devtools-layer > .widget {
+.devtools-view > .widget {
   font-size: 1.8rem;
   padding: 0 5px;
   line-height: 30px;

apps/system/test/unit/bootstrap_test.js

@@ -10,6 +10,7 @@ requireApp('system/shared/test/unit/mocks/mock_navigator_moz_settings.js');
 requireApp('system/shared/test/unit/mocks/mock_settings_listener.js');
 requireApp('system/shared/test/unit/mocks/mock_settings_url.js');
 requireApp('system/test/unit/mock_applications.js');
+requireApp('system/test/unit/mock_devtools_view.js');
 requireApp('system/test/unit/mock_ftu_launcher.js');
 requireApp('system/test/unit/mock_homescreen_launcher.js');
 requireApp('system/test/unit/mock_places.js');
@@ -24,11 +25,13 @@ mocha.globals([
   'cancelHomeTouchend',
   'secureWindowManager',
   'secureWindowFactory',
+  'devtoolsView',
   'ttlView',
 ]);
 
 var mocksForBootstrap = new MocksHelper([
   'Applications',
+  'DevtoolsView',
   'FtuLauncher',
   'HomescreenLauncher',
   'Places',

apps/system/test/unit/devtools_layers_test.js → apps/system/test/unit/devtools_view_test.js

@@ -1,10 +1,16 @@
 'use strict';
+/* global DevtoolsView */
 
-require('/js/devtools_layers.js');
+require('/js/devtools_view.js');
 
 suite('devtoolsWidgetPanel', function() {
 
   var manifest = 'app://fakeapp.gaiamobile.org/fake.html';
+  var subject;
+
+  setup(function() {
+    subject = new DevtoolsView();
+  });
 
   function updateMetrics(metrics) {
     var data = {
@@ -14,10 +20,10 @@ suite('devtoolsWidgetPanel', function() {
     window.dispatchEvent(evt);
   }
 
-  function getWidgetLayer() {
+  function getWidgetView() {
     var iframe = document.querySelector('iframe[mozapp="' + manifest + '"]');
     var appwindow = iframe.parentElement;
-    return appwindow.querySelector('.devtools-layer');
+    return appwindow.querySelector('.devtools-view');
   }
 
   suite('display()', function() {
@@ -35,9 +41,9 @@ suite('devtoolsWidgetPanel', function() {
       updateMetrics([
         {name: 'bugs', value: 42}
       ]);
-      var layer = getWidgetLayer();
-      assert.isDefined(layer);
-      var widget = layer.querySelector('.widget');
+      var view = getWidgetView();
+      assert.isDefined(view);
+      var widget = view.querySelector('.widget');
       assert.isDefined(widget);
       assert.equal(widget.textContent, '42');
     });
@@ -47,9 +53,9 @@ suite('devtoolsWidgetPanel', function() {
         {name: 'errors', value: 23},
         {name: 'warnings', value: 16}
       ]);
-      var layer = getWidgetLayer();
-      assert.isDefined(layer);
-      var widgets = layer.querySelectorAll('.widget');
+      var view = getWidgetView();
+      assert.isDefined(view);
+      var widgets = view.querySelectorAll('.widget');
       assert.equal(widgets.length, 2);
     });
 
@@ -60,7 +66,7 @@ suite('devtoolsWidgetPanel', function() {
         {name: 'chaos', value: 4}
       ]);
       updateMetrics();
-      assert.isNull(getWidgetLayer());
+      assert.isNull(getWidgetView());
     });
 
   });

apps/system/test/unit/mock_devtools_view.js

@@ -0,0 +1,6 @@
+/* exported MockDevtoolsView */
+
+'use strict';
+
+function MockDevtoolsView() {
+}