DevTools: Headless inspection targets can screencast by default.

headless/lib/resources/devtools_discovery_page.html

Index: headless/lib/resources/devtools_discovery_page.html
diff --git a/headless/lib/resources/devtools_discovery_page.html b/headless/lib/resources/devtools_discovery_page.html
index 47534f7c462648ce54feb35d1eb318226be07b68..4788e77614551facca6eb2819ee1b2d476069ee4 100644
--- a/headless/lib/resources/devtools_discovery_page.html
+++ b/headless/lib/resources/devtools_discovery_page.html
@@ -5,49 +5,53 @@
 </style>
 
 <script>
-function onLoad() {
-  var tabs_list_request = new XMLHttpRequest();
-  tabs_list_request.open("GET", "/json/list?t=" + new Date().getTime(), true);
-  tabs_list_request.onreadystatechange = onReady;
-  tabs_list_request.send();
-}
+const fetchjson = (url) => fetch(url).then(r => r.json());
 
-function onReady() {
-  if(this.readyState == 4 && this.status == 200) {
-    if(this.response != null)
-      var responseJSON = JSON.parse(this.response);
-      for (var i = 0; i < responseJSON.length; ++i)
-        appendItem(responseJSON[i]);
-  }
+function loadData() {
+  const listPromise = fetchjson("/json/list?t=" + Date.now());

[pfeldman, 2016/07/20 18:13:14]

/json/list does not cache.

[paulirish, 2016/07/20 19:38:47]

confirmed. done.

+  const versionPromise = fetchjson('/json/version');
+
+  Promise.all([listPromise, versionPromise]).then(_ => {

[paulirish, 2016/07/20 17:37:06]

In essence:

Wait for both fetch's to finish. Then we need to use both assets.
So we then() them (again), one inside the other (only to preserve scope, though
the order doesn't matter).

Lastly, we pass in the hash in our `this` object for forEach. A hack, and
probably should be replaced with
responseJSON.forEach(item => appendItem(item, hash));

[pfeldman, 2016/07/20 18:13:14]

nit: _ => ()

+    versionPromise.then(versionData => {

[pfeldman, 2016/07/20 18:13:14]

No need for then, var versionData = result[1];

[paulirish, 2016/07/20 19:38:47]

redid this mess to use the array of results via destructuring.

+      const version = versionData['WebKit-Version'];
+      const hash = version.match(/\s\(@(\b[0-9a-f]{5,40}\b)/)[1];
+      listPromise.then(responseJSON => {

[pfeldman, 2016/07/20 18:13:14]

var responseJSON = result[0];

+        responseJSON.forEach(appendItem, {hash})

[pfeldman, 2016/07/20 18:13:14]

Is {hash} intentional? Hate this feature :)

+      });
+    });
+  }); 
 }
 
-function appendItem(item_object) {
-  var frontend_ref;
-  if (item_object.devtoolsFrontendUrl) {
-    frontend_ref = document.createElement("a");
-    frontend_ref.href = item_object.devtoolsFrontendUrl;
-    frontend_ref.title = item_object.title;
+function appendItem(item) {
+  let link;
+  if (item.devtoolsFrontendUrl) {
+    link = document.createElement("a");
+    var devtoolsFrontendUrl = item.devtoolsFrontendUrl.replace(/^\/devtools\//,'');
+    link.href = `http://frontend.chrome-dev.tools/serve_file/@${this.hash}/${devtoolsFrontendUrl}&remoteFrontend=true`;

[pfeldman, 2016/07/20 18:13:14]

We should use canonical url for those front-ends.

[paulirish, 2016/07/20 19:38:47]

changed to https://chrome-devtools-frontend.appspot.com ...

+    link.title = item.title;
   } else {
-    frontend_ref = document.createElement("div");
-    frontend_ref.title = "The tab already has active debugging session";
+    link = document.createElement("div");
+    link.title = "The tab already has active debugging session";
   }
 
   var text = document.createElement("div");
-  if (item_object.title)
-    text.innerText = item_object.title;
+  if (item.title)
+    text.textContent = item.title;
   else
-    text.innerText = "(untitled tab)";
-  text.style.cssText = "background-image:url(" + item_object.faviconUrl + ")";
-  frontend_ref.appendChild(text);
+    text.textContent = "(untitled tab)";
+  if (item.faviconUrl)
+    text.style.cssText = "background-image:url(" + item.faviconUrl + ")";
+  link.appendChild(text);
 
-  var item = document.createElement("p");
-  item.appendChild(frontend_ref);
+  var p = document.createElement("p");
+  p.appendChild(link);
 
-  document.getElementById("items").appendChild(item);
+  document.getElementById("items").appendChild(p);
 }
+
 </script>
 </head>
-<body onload='onLoad()'>
+<body onload='loadData()'>
   <div id='caption'>Inspectable WebContents</div>
   <div id='items'></div>
 </body>