Bug 912900 - Show open tabs in connected device's Firefox in AppManager. r=jryans

browser/devtools/app-manager/content/device.js

@@ -4,7 +4,8 @@
 
 const Cu = Components.utils;
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
+Cu.import("resource://gre/modules/devtools/dbg-client.jsm");
+const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 
 const {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 const {require} = devtools;
@@ -17,6 +18,7 @@ const {getTargetForApp, launchApp, closeApp}
 const DeviceStore = require("devtools/app-manager/device-store");
 const WebappsStore = require("devtools/app-manager/webapps-store");
 const promise = require("sdk/core/promise");
+const DEFAULT_APP_ICON = "chrome://browser/skin/devtools/app-manager/default-app-icon.png";
 
 window.addEventListener("message", function(event) {
   try {
@@ -141,7 +143,7 @@ let UI = {
     if (panel) panel.classList.add("selected");
   },
 
-  openToolbox: function(manifest) {
+  openToolboxForApp: function(manifest) {
     if (!this.connected) {
       return;
     }
@@ -155,6 +157,31 @@ let UI = {
     }, console.error);
   },
 
+  _getTargetForTab: function (form) {
+      let options = {
+        form: form,
+        client: this.connection.client,
+        chrome: false
+      };
+      let deferred = promise.defer();
+      return devtools.TargetFactory.forRemoteTab(options);
+  },
+
+  openToolboxForTab: function (aNode) {
+    let index = Array.prototype.indexOf.apply(
+      aNode.parentNode.parentNode.parentNode.children,
+      [aNode.parentNode.parentNode]);
+    this.connection.client.listTabs(
+      response => {
+        let tab = response.tabs[index];
+        this._getTargetForTab(tab).then(target => {
+          top.UI.openAndShowToolboxForTarget(
+            target, tab.title, DEFAULT_APP_ICON);
+        }, console.error);
+      }
+    );
+  },
+
   startApp: function(manifest) {
     if (!this.connected) {
       return promise.reject();

browser/devtools/app-manager/content/device.xhtml

@@ -44,6 +44,7 @@
                 <button class="help">&device.help;</button>
               </a>
             </div>
+            <div onclick="UI.setTab('browser-tabs')" class="tab sidebar-item browser-tabs" title="&device.browserTabsTooltip;">&device.browserTabs;</div>
           </div>
         </div>
       </aside>
@@ -68,6 +69,9 @@
               <div class="deny-label" title="&device.denyTooltip;">&device.deny;</div>
             </div>
           </div>
+          <div class="tabpanel browser-tabs">
+            <section template-loop='{"arrayPath":"device.tabs","childSelector":"#browser-tab-template"}'></section>
+          </div>
         </div>
       </section>
     </section>
@@ -83,12 +87,24 @@
   </div>
   </template>
 
+  <template id="browser-tab-template">
+  <div class="browser-tab">
+    <div class="browser-tab-details">
+      <p template='{"type":"textContent","path":"title"}'></p>
+      <p class="browser-tab-url-subheading" template='{"type":"textContent","path":"url"}'></p>
+    </div>
+    <div class="browser-tab-buttons">
+      <button class="button-debug" template='{"type":"attribute","path":"actor","name":"data-actor"}' onclick="UI.openToolboxForTab(this)" style="display: inline-block;" title="&device.debugBrowserTabTooltip;">&device.debugBrowserTab;</button>
+    </div>
+  </div>
+  </template>
+
   <template id="app-template">
   <div class="app" template='{"type":"attribute","path":"running","name":"running"}'>
     <img class="app-icon" template='{"type":"attribute","path":"iconURL","name":"src"}'></img>
     <span class="app-name" template='{"type":"textContent","path":"name"}'></span>
     <div class="app-buttons">
-      <button class="button-debug" template='{"type":"attribute","path":"manifestURL","name":"data-manifest"}' onclick="UI.openToolbox(this.dataset.manifest)" title="&device.debugAppTooltip;">&device.debugApp;</button>
+      <button class="button-debug" template='{"type":"attribute","path":"manifestURL","name":"data-manifest"}' onclick="UI.openToolboxForApp(this.dataset.manifest)" title="&device.debugAppTooltip;">&device.debugApp;</button>
       <button class="button-start" template='{"type":"attribute","path":"manifestURL","name":"data-manifest"}' onclick="UI.startApp(this.dataset.manifest)" title="&device.startAppTooltip;">&device.startApp;</button>
       <button class="button-stop" template='{"type":"attribute","path":"manifestURL","name":"data-manifest"}' onclick="UI.stopApp(this.dataset.manifest)" title="&device.stopAppTooltip;">&device.stopApp;</button>
     </div>

browser/devtools/app-manager/device-store.js

@@ -31,6 +31,7 @@ module.exports = DeviceStore = function(connection) {
   this._connection = connection;
   this._connection.once(Connection.Events.DESTROYED, this.destroy);
   this._connection.on(Connection.Events.STATUS_CHANGED, this._onStatusChanged);
+  this._onTabListChanged = this._onTabListChanged.bind(this);
   this._onStatusChanged();
   return this;
 }
@@ -51,6 +52,7 @@ DeviceStore.prototype = {
   _resetStore: function() {
     this.object.description = {};
     this.object.permissions = [];
+    this.object.tabs = [];
   },
 
   _onStatusChanged: function() {
@@ -61,9 +63,23 @@ DeviceStore.prototype = {
     }
   },
 
+  _onTabListChanged: function() {
+    this._listTabs();
+  },
+
   _listTabs: function() {
     this._connection.client.listTabs((resp) => {
+      if (resp.error) {
+        this._connection.disconnect();
+        return;
+      }
       this._deviceFront = getDeviceFront(this._connection.client, resp);
+      // Save remote browser's tabs
+      this.object.tabs = resp.tabs;
+      // Add listener to update remote browser's tabs list in app-manager
+      // when it changes
+      this._connection.client.addListener(
+        'tabListChanged', this._onTabListChanged);
       this._feedStore();
     });
   },
@@ -96,5 +112,5 @@ DeviceStore.prototype = {
       }
       this.object.permissions = permissionsArray;
     });
-  },
+  }
 }

browser/devtools/app-manager/test/test_device_store.html

@@ -67,13 +67,13 @@ Bug 901520 - [app manager] data store for device
         });
 
         connection.once("disconnected", function() {
-          compare(store.object, {description:{},permissions:[]}, "empty store after disconnect")
+          compare(store.object, {description:{},permissions:[],tabs:[]}, "empty store after disconnect")
           connection.destroy();
           DebuggerServer.destroy();
           SimpleTest.finish();
         });
 
-        compare(store.object, {description:{},permissions:[]}, "empty store before disconnect")
+        compare(store.object, {description:{},permissions:[],tabs:[]}, "empty store before disconnect")
 
         connection.connect();
 

browser/locales/en-US/chrome/browser/devtools/app-manager.dtd

@@ -32,6 +32,10 @@
 <!ENTITY device.permissions "Permissions">
 <!ENTITY device.permissionsTooltip "View a table of the permissions accessible to the different types of apps">
 <!ENTITY device.permissionsHelpLink "https://developer.mozilla.org/docs/Web/Apps/App_permissions">
+<!ENTITY device.browserTabs "Browser Tabs">
+<!ENTITY device.browserTabsTooltip "View a list of tabs in the browser of the connected device">
+<!ENTITY device.debugBrowserTab "Debug">
+<!ENTITY device.debugBrowserTabTooltip "Open the Developer Tools connected to this browser tab on the device">
 <!ENTITY device.help "Help">
 
 <!ENTITY connection.connectTooltip "Connect to the device">

browser/themes/shared/devtools/app-manager/device.css

@@ -308,34 +308,34 @@ header {
 
 
 
-/*****************      APPS       *****************/
+/*****************      APPS & BROWSER TABS      *****************/
 
 
 
 
-.apps {
+.apps, .browser-tabs {
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.app {
+.app, .browser-tab {
   display: flex;
   align-items: center;
   order: 1;
 }
 
-.app-name {
+.app-name, .browser-tab-details {
   flex-grow: 1;
   font-weight: bold;
 }
 
-.app {
+.app, .browser-tab {
   padding: 10px 20px;
   border-bottom: 1px solid #CCC;
 }
 
-.app:hover {
+.app:hover, .browser-tab:hover {
   background-color: #EFEFEF;
 }
 
@@ -345,6 +345,10 @@ header {
   margin-right: 10px;
 }
 
+.browser-tab-url-subheading {
+  font-size: 10px;
+}
+
 
 
 /*****************      NOT CONNECTED      *****************/