Merge pull request #15802 from jankeromnes/layers

Bug 960933 - Show app debug information in a devtools overlay. r=vingtetun

apps/settings/elements/developer.html

@@ -59,6 +59,12 @@ <h2 data-l10n-id="debug">Debug</h2>
             <span data-l10n-id="ttl-monitor">Show time to load</span>
           </label>
         </li>
+        <li>
+          <label class="pack-checkbox">
+            <input type="checkbox" name="devtools.overlay">
+            <span data-l10n-id="devtools-overlay">Show devtools overlay</span>
+          </label>
+        </li>
         <li>
           <p data-l10n-id="remote-debugging">Remote Debugging</p>
           <span class="button icon icon-dialog">

apps/settings/locales/settings.en-US.properties

@@ -886,6 +886,7 @@ remote-debugging=Remote debugging
 debugger-disabled=Disabled
 debugger-adb-only=ADB only
 debugger-adb-and-devtools=ADB and Devtools
+devtools-overlay=Show devtools overlay
 wifi-debugging=Wi-Fi output in adb
 bluetooth-debugging=Bluetooth output in adb
 contacts-debugging=Contacts debugging output in adb

apps/system/index.html

@@ -314,6 +314,10 @@
     <script defer src="js/visibility_manager.js"></script>
     <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>
+
     <!-- Edge Gestures -->
     <script defer src="js/stack_manager.js"></script>
     <script defer src="js/sheets_transition.js"></script>

apps/system/js/devtools_layers.js

@@ -0,0 +1,77 @@
+(function(window) {
+
+  'use strict';
+
+  window.addEventListener('widget-panel-update', function updateHandler(e){
+    display(e.detail);
+    e.preventDefault();
+  });
+
+  function display(data) {
+    var target = 'iframe[mozapp="' + data.manifestURL + '"]';
+    var iframe = document.querySelector(target);
+    if (!iframe) {
+      return;
+    }
+
+    var appwindow = iframe.parentElement;
+    var overlay = appwindow.querySelector('.devtools-layer');
+
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.classList.add('devtools-layer');
+      appwindow.appendChild(overlay);
+    }
+
+    if (!data.metrics || data.metrics.length < 1) {
+      overlay.remove();
+      return;
+    }
+
+    var html = '';
+
+    data.metrics.forEach(function(metric) {
+      html += widget(metric);
+    });
+
+    overlay.innerHTML = html;
+  }
+
+  function widget(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 = colorHash(metric.name);
+        break;
+    }
+
+    return '<div class=widget style="background-color: ' + color + '">' +
+           value + '</div>';
+  }
+
+  function colorHash(name) {
+    var hue = 0;
+    for (var i = 0; i < name.length; i++) {
+      hue += name.charCodeAt(i);
+    }
+    return 'hsl(' + (hue % 360) + ', 75%, 50%)';
+  }
+
+})(this);

apps/system/style/devtools_layers.css

@@ -0,0 +1,24 @@
+.appWindow > .devtools-layer {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: flex;
+
+  flex-wrap: wrap-reverse;
+  align-content: flex-start;
+  justify-content: flex-end;
+}
+
+.appWindow > .devtools-layer > .widget {
+  font-size: 1.8rem;
+  padding: 0 5px;
+  line-height: 30px;
+  height: 30px;
+  min-width: 30px;
+  text-align: center;
+  opacity: 0.8;
+}

apps/system/test/unit/devtools_layers_test.js

@@ -0,0 +1,68 @@
+'use strict';
+
+require('/js/devtools_layers.js');
+
+suite('devtoolsWidgetPanel', function() {
+
+  var manifest = 'app://fakeapp.gaiamobile.org/fake.html';
+
+  function updateMetrics(metrics) {
+    var data = {
+      detail: {manifestURL: manifest, metrics: metrics}
+    };
+    var evt = new CustomEvent('widget-panel-update', data);
+    window.dispatchEvent(evt);
+  }
+
+  function getWidgetLayer() {
+    var iframe = document.querySelector('iframe[mozapp="' + manifest + '"]');
+    var appwindow = iframe.parentElement;
+    return appwindow.querySelector('.devtools-layer');
+  }
+
+  suite('display()', function() {
+
+    setup(function() {
+      document.body.innerHTML = '<div><iframe mozapp="' + manifest +
+        '"></iframe></div>';
+    });
+
+    teardown(function() {
+      document.body.innerHTML = '';
+    });
+
+    test('show one widget', function() {
+      updateMetrics([
+        {name: 'bugs', value: 42}
+      ]);
+      var layer = getWidgetLayer();
+      assert.isDefined(layer);
+      var widget = layer.querySelector('.widget');
+      assert.isDefined(widget);
+      assert.equal(widget.textContent, '42');
+    });
+
+    test('show two widgets', function() {
+      updateMetrics([
+        {name: 'errors', value: 23},
+        {name: 'warnings', value: 16}
+      ]);
+      var layer = getWidgetLayer();
+      assert.isDefined(layer);
+      var widgets = layer.querySelectorAll('.widget');
+      assert.equal(widgets.length, 2);
+    });
+
+    test('show widgets and tear down', function() {
+      updateMetrics([
+        {name: 'explosions', value: 15},
+        {name: 'armageddon', value: 8},
+        {name: 'chaos', value: 4}
+      ]);
+      updateMetrics();
+      assert.isNull(getWidgetLayer());
+    });
+
+  });
+
+});

build/config/common-settings.json

@@ -43,6 +43,7 @@
    "deviceinfo.software": "",
    "deviceinfo.update_channel": "",
    "device.storage.writable.name": "sdcard",
+   "devtools.overlay": false,
    "dom.mozContacts.debugging.enabled": false,
    "feedback.url": "https://input.allizom.org/api/v1/feedback/",
    "gaia.system.checkForUpdates": false,