Revamp polydev around the devtools timeline APIs

Adds:
  * easy visualization of performance impact of custom elements
    inline with other performance information in browser timeline
    devtools

  * support for Custom Elements v0

Removes:
  * 'Polymer' panel in devtools.
    * The data model changed significantly so that code will need
      to be rewritten significantly.
    * ... and I kind don't believe in the feature that much.
      Being able to visualize the impact in the timeline seems
      superior to aggregate statistics.
  * Async tracking with zones.
    * I'd like to add this back. The zones API has changed completely,
      and it uses a decent amount of idiosyncratic terminology without
      defining any of it. Yay. Just needs some sweat, and this is useful
      as is.

Author: rictic

.clang-format

@@ -0,0 +1,6 @@
+BasedOnStyle: Google
+AllowShortBlocksOnASingleLine: false
+AllowShortCaseLabelsOnASingleLine: false
+AllowShortFunctionsOnASingleLine: None
+AllowShortIfStatementsOnASingleLine: false
+AllowShortLoopsOnASingleLine: false

.gitignore

@@ -1,3 +1,4 @@
 /bower_components/
 /node_modules/
 /build/
+/src/document-context/*.js*

.vscode/settings.json

@@ -0,0 +1,5 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "clang-format.style": "file",
+  "clang-format.formatOnSave": true
+}

README.md

@@ -39,12 +39,3 @@ When changing files in src/ the dev workflow should work cover most use cases.
 Depending on the change you can either then close and reopen the devtools, or if
 you've made a change to the content-script or to element-zones, you must reload
 both the extension and any page you're testing it on.
-
-### Working on element-zones
-
-polydev uses the element-zones library to capture custom element stats. If you
-want to work on element-zones and see the results in polydev, then:
-
- 1. Run `bower link` in the element-zones directory
- 2. Run `bower link element-zones` in the polydev directory
- 3. Run `gulp` as normal

bower.json

@@ -11,14 +11,12 @@
     "bower_components"
   ],
   "dependencies": {
-    "element-zones": "PolymerLabs/element-zones#^0.2.0",
-    "imd": "PolymerLabs/imd#export",
     "iron-icon": "PolymerElements/iron-icon#~1.0.4",
     "iron-icons": "PolymerElements/iron-icons#~1.0.3",
     "paper-button": "PolymerElements/paper-button#~1.0.4",
     "paper-material": "PolymerElements/paper-material#~1.0.2"
   },
   "devDependencies": {
-    "polymer": "Polymer/polymer#~1.1.1"
+    "web-component-tester": "^4.3.5"
   }
 }

gulpfile.js

@@ -1,53 +1,46 @@
 'use strict';
 
-var crisper = require('gulp-crisper');
-var es = require('event-stream');
-var gulp = require('gulp');
-var eslint = require('gulp-eslint');
+const crisper = require('gulp-crisper');
+const es = require('event-stream');
+const gulp = require('gulp');
+const eslint = require('gulp-eslint');
+const child_process = require('child_process');
 
-gulp.task('default', ['manifest', 'lint', 'src', 'bower', 'element-zones', 'zone.js']);
+gulp.task('default', ['manifest', 'lint', 'src', 'bower']);
 
 gulp.task('lint', function() {
-  return gulp.src('src/**/*.js')
-    .pipe(eslint())
-    .pipe(eslint.format());
+  return gulp.src('src/*.js').pipe(eslint()).pipe(eslint.format());
 });
 
 gulp.task('dev', function() {
-  return gulp.watch(['src/**/*', 'bower_components/element-zones/**/*.js'], ['src']);
+  return gulp.watch(['src/**/*'], ['src']);
 });
 
-gulp.task('manifest', function () {
+gulp.task('manifest', function() {
   return gulp.src('manifest.json').pipe(gulp.dest('build/polydev/'));
 });
 
-gulp.task('zone.js', function() {
-  return gulp.src('node_modules/zone.js/dist/zone-microtask.js')
-    .pipe(gulp.dest('build/polydev/vendor/'));
+gulp.task('compile', function(cb) {
+  child_process.exec('tsc', function(err, stdout, stderr) {
+    if (err) {
+      console.log(stderr);
+    }
+    cb(err);
+  });
 });
 
-gulp.task('element-zones', function() {
-  return gulp.src('bower_components/element-zones/lib/element-zones.js')
-    .pipe(gulp.dest('build/polydev/vendor/'));
+gulp.task('src', ['compile'], function() {
+  return es
+      .merge(
+          gulp.src('src/**/*.html').pipe(crisper()),
+          gulp.src(['src/**/*', '!src/**/*.html']))
+      .pipe(gulp.dest('build/polydev/src'));
 });
 
-gulp.task('src', function() {
-  return es.merge(
-      gulp.src('src/**/*.html')
-        .pipe(crisper()),
-      gulp.src(['src/**/*', '!src/**/*.html']))
-    .pipe(gulp.dest('build/polydev/src'));
-});
-
-gulp.task('bower', function () {
-  return es.merge(
-      gulp.src([
-          '!bower_components/{element-zones,element-zones/**}',
-          'bower_components/**/*.html'])
-        .pipe(crisper()),
-      gulp.src([
-          '!bower_components/{element-zones,element-zones/**}',
-          '!bower_components/**/*.html',
-          'bower_components/**/*']))
-    .pipe(gulp.dest('build/polydev/bower_components'));
+gulp.task('bower', function() {
+  return es
+      .merge(
+          gulp.src(['bower_components/**/*.html']).pipe(crisper()),
+          gulp.src(['!bower_components/**/*.html', 'bower_components/**/*']))
+      .pipe(gulp.dest('build/polydev/bower_components'));
 });

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Polymer DevTools Extension",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Shows information about Polymer elements",
   "permissions": [
     "tabs",
@@ -19,8 +19,9 @@
   ],
   "devtools_page": "src/devtools.html",
   "web_accessible_resources": [
-    "vendor/zone-microtask.js",
-    "vendor/element-zones.js"
+    "src/document-context/measure-custom-elements.js",
+    "src/document-context/measure-custom-elements.js.map",
+    "src/document-context/measure-custom-elements.ts"
   ],
   "manifest_version": 2
 }

package.json

@@ -15,6 +15,7 @@
     "gulp": "^3.9.0",
     "gulp-babel": "^5.2.0",
     "gulp-crisper": "0.0.5",
-    "gulp-eslint": "^1.0.0"
+    "gulp-eslint": "^1.0.0",
+    "typescript": "^2.0.0"
   }
 }

src/background.js

@@ -1,26 +1,32 @@
 /**
  * @license
  * Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
  * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
  */
 
-var pagePorts = new Map();
-var polymerPanelPorts = new Map();
+const pagePorts = new Map();
+const polymerPanelPorts = new Map();
 
 // listen for polymer devtools panel, and element-zones content
 // script connections
-chrome.extension.onConnect.addListener(function(port) {
+chrome.extension.onConnect.addListener((port) => {
   if (port.name == 'polymer-panel') {
     console.log('polymer-panel connected', port);
 
-    port.onMessage.addListener(function(message, port) {
+    port.onMessage.addListener((message, port) => {
       console.log('from polymer-panel', message, port);
-      if (!message.messageType) return;
-      var messageType = message.messageType;
+      if (!message.messageType) {
+        return;
+      }
+      const messageType = message.messageType;
       if (messageType === 'tab-id') {
         console.log('polymer-page tab-id', message.tabId);
         // save the port to the polymer devtools panel
@@ -30,28 +36,29 @@ chrome.extension.onConnect.addListener(function(port) {
           messageType: 'handshake',
         });
 
-      } else if (messageType === 'get-element-stats' ||
-            messageType === 'clear-element-stats') {
+      } else if (
+          messageType === 'get-element-stats' ||
+          messageType === 'clear-element-stats') {
         console.log('messageType', messageType);
         // relay to content script
-        var tabId = message.tabId;
-        var pagePort = pagePorts.get(tabId);
+        const tabId = message.tabId;
+        const pagePort = pagePorts.get(tabId);
         pagePort.postMessage({
           messageType: messageType,
         });
       }
     });
 
-  } else if (port.name =='element-zones') {
+  } else if (port.name == 'element-zones') {
     console.log('element-zones.onConnect', port, port.sender.tab.id);
     // save the port to the element-zones content script
     pagePorts.set(port.sender.tab.id, port);
-    port.onMessage.addListener(function(message, port) {
+    port.onMessage.addListener((message, port) => {
       if (message.messageType == 'element-stats') {
         console.log('element-stats', message.data);
         // post to devtools panel
-        var tabId = port.sender.tab.id;
-        var polymerPanelPort = polymerPanelPorts.get(port.sender.tab.id);
+        const tabId = port.sender.tab.id;
+        const polymerPanelPort = polymerPanelPorts.get(port.sender.tab.id);
         console.log('polymer panel port', tabId, polymerPanelPort);
         console.assert(polymerPanelPort != null);
         polymerPanelPort.postMessage({
@@ -63,14 +70,14 @@ chrome.extension.onConnect.addListener(function(port) {
   }
 });
 
-// chrome.extension.onDisconnect.addListener(function(port) {
+// chrome.extension.onDisconnect.addListener((port) => {
 //   if (port.name == 'element-zones') {
 //     console.log('element-zones.onDisconnect', port);
 //     pagePorts.remove(port.sender.tab.id);
 //   }
 // });
 
-chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   console.log('background chrome.runtime.onMessage', request, sender);
   if (request.messageType == 'get_times') {
     console.log('background get_times');

src/content-script.js

@@ -1,38 +1,38 @@
 /**
  * @license
  * Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
  * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
  */
 
 (function() {
   'use strict';
 
-  let zoneJsScript = getFile('/vendor/zone-microtask.js');
-  let elementZonesScript = getFile('/vendor/element-zones.js');
-  let script = document.createElement('script');
-  let root = document.body || document.head || document.documentElement;
+  const measurementsScript =
+      getFile('/src/document-context/measure-custom-elements.js');
 
-  script.appendChild(document.createTextNode(zoneJsScript));
-  root.appendChild(script);
+  const root = document.body || document.head || document.documentElement;
 
-  script = document.createElement('script');
-  script.appendChild(document.createTextNode(elementZonesScript));
+  const script = document.createElement('script');
+  script.appendChild(document.createTextNode(measurementsScript));
   root.appendChild(script);
 
-  let backgroundPageConnection = chrome.runtime.connect({
+  const backgroundPageConnection = chrome.runtime.connect({
     name: 'element-zones',
   });
 
   // Forward requests for element stats to the target page.
-  backgroundPageConnection.onMessage.addListener(function(request, sender, sendResponse) {
-    window.postMessage({
-      messageType: request.messageType,
-    }, '*');
-  });
+  backgroundPageConnection.onMessage.addListener(
+      (request, sender, sendResponse) => {
+        window.postMessage({messageType: request.messageType}, '*');
+      });
 
   // Forward element-stats responses from the target page to the background page
   // to be further forwarded to the polymer-panel
@@ -50,7 +50,7 @@
     let response = null;
 
     xhr.open('GET', extensionUrl, false);
-    xhr.onload = function (e) {
+    xhr.onload = function() {
       if (xhr.readyState === 4) {
         if (xhr.status === 200) {
           response = xhr.responseText;
@@ -59,11 +59,11 @@
         }
       }
     };
-    xhr.onerror = function (e) {
+    xhr.onerror = function() {
       console.error(xhr.statusText);
     };
     xhr.send(null);
     return response + '\n\n//# sourceURL=polydev' + localUrl;
   }
 
-})();
+})();

src/devtools.html

@@ -15,13 +15,15 @@
   </head>
   <body>
     <script>
-      chrome.devtools.panels.create("Polymer",
-        "icon.png",
-        "src/polymer-panel.html",
-        function(panel) {
-          console.log("polymer-panel.html loaded");
-        }
-      );
+      // Commented out temporarily.
+
+      // chrome.devtools.panels.create("Polymer",
+      //   "icon.png",
+      //   "src/polymer-panel.html",
+      //   function(panel) {
+      //     console.log("polymer-panel.html loaded");
+      //   }
+      // );
     </script>
   </body>
 </html>