Bug 1267278 - remove the usage of some add-on SDK modules, and refactoring the unit tests; r=jryans

- removed responsive.html/events.js
 - added `isActiveForWindow` method to `ResponsiveUIManager`
 - simplified how the check for RDM menu is done
 - re-enabled tests for OS X debug in e10s
 - refactored tests using `BrowserTestUtils`

MozReview-Commit-ID: 1TADh1dRVcU

devtools/client/responsive.html/events.js

@@ -1,38 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const { filter, map, merge } = require("sdk/event/utils");
-const { events: browserEvents } = require("sdk/browser/events");
-const { events: tabEvents } = require("sdk/tab/events");
-const { getTabs, getActiveTab, getOwnerWindow } = require("sdk/tabs/utils");
-
-const tabSelect = filter(tabEvents, e => e.type === "TabSelect");
-const tabClose = filter(tabEvents, e => e.type === "TabClose");
-const windowOpen = filter(browserEvents, e => e.type === "load");
-const windowClose = filter(browserEvents, e => e.type === "close");
-
-// The `activate` event stream, observes when any tab is activated.
-// It has the activated `tab` as argument.
-const activate = merge([
-  map(tabSelect, ({target}) => target),
-  map(windowOpen, ({target}) => getActiveTab(target))
-]);
-exports.activate = activate;
-
-// The `close` event stream, observes when any tab or any window is closed.
-// The event has an object as argument, with the `tabs` involved in the closing
-// process and their owner window.
-const close = merge([
-  map(tabClose, ({target}) => ({
-    window: getOwnerWindow(target),
-    tabs: [target]
-  })),
-  map(windowClose, ({target}) => ({
-    window: target,
-    tabs: getTabs(target)
-  }))
-]);
-exports.close = close;

devtools/client/responsive.html/manager.js

@@ -9,9 +9,7 @@ const { Task } = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
 const { TouchEventSimulator } = require("devtools/shared/touch/simulator");
 const { getOwnerWindow } = require("sdk/tabs/utils");
-const { on, off } = require("sdk/event/core");
 const { startup } = require("sdk/window/helpers");
-const events = require("./events");
 const message = require("./utils/message");
 const { swapToInnerBrowser } = require("./browser/swap");
 
@@ -63,16 +61,15 @@ const ResponsiveUIManager = exports.ResponsiveUIManager = {
       return promise.reject(new Error("RDM only available for remote tabs."));
     }
     if (!this.isActiveForTab(tab)) {
-      if (!this.activeTabs.size) {
-        on(events.activate, "data", onActivate);
-        on(events.close, "data", onClose);
-      }
+      this.initMenuCheckListenerFor(window);
+
       let ui = new ResponsiveUI(window, tab);
       this.activeTabs.set(tab, ui);
-      yield setMenuCheckFor(tab, window);
+      yield this.setMenuCheckFor(tab, window);
       yield ui.inited;
       this.emit("on", { tab });
     }
+
     return this.getResponsiveUIForTab(tab);
   }),
 
@@ -97,12 +94,12 @@ const ResponsiveUIManager = exports.ResponsiveUIManager = {
         return;
       }
       this.activeTabs.delete(tab);
-      if (!this.activeTabs.size) {
-        off(events.activate, "data", onActivate);
-        off(events.close, "data", onClose);
+
+      if (!this.isActiveForWindow(window)) {
+        this.removeMenuCheckListenerFor(window);
       }
       this.emit("off", { tab });
-      yield setMenuCheckFor(tab, window);
+      yield this.setMenuCheckFor(tab, window);
     }
   }),
 
@@ -117,6 +114,17 @@ const ResponsiveUIManager = exports.ResponsiveUIManager = {
     return this.activeTabs.has(tab);
   },
 
+  /**
+   * Returns true if responsive UI is active in any tab in the given window.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @return boolean
+   */
+  isActiveForWindow(window) {
+    return [...this.activeTabs.keys()].some(t => getOwnerWindow(t) === window);
+  },
+
   /**
    * Return the responsive UI controller for a tab.
    *
@@ -141,7 +149,7 @@ const ResponsiveUIManager = exports.ResponsiveUIManager = {
    * @param args
    *        The GCLI command arguments.
    */
-  handleGcliCommand: function (window, tab, command, args) {
+  handleGcliCommand(window, tab, command, args) {
     let completed;
     switch (command) {
       case "resize to":
@@ -160,7 +168,32 @@ const ResponsiveUIManager = exports.ResponsiveUIManager = {
       default:
     }
     completed.catch(e => console.error(e));
-  }
+  },
+
+  handleMenuCheck({target}) {
+    ResponsiveUIManager.setMenuCheckFor(target);
+  },
+
+  initMenuCheckListenerFor(window) {
+    let { tabContainer } = window.gBrowser;
+    tabContainer.addEventListener("TabSelect", this.handleMenuCheck);
+  },
+
+  removeMenuCheckListenerFor(window) {
+    if (window && window.gBrowser && window.gBrowser.tabContainer) {
+      let { tabContainer } = window.gBrowser;
+      tabContainer.removeEventListener("TabSelect", this.handleMenuCheck);
+    }
+  },
+
+  setMenuCheckFor: Task.async(function* (tab, window = getOwnerWindow(tab)) {
+    yield startup(window);
+
+    let menu = window.document.getElementById("menu_responsiveUI");
+    if (menu) {
+      menu.setAttribute("checked", this.isActiveForTab(tab));
+    }
+  })
 };
 
 // GCLI commands in ../responsivedesign/resize-commands.js listen for events
@@ -398,22 +431,3 @@ ResponsiveUI.prototype = {
 };
 
 EventEmitter.decorate(ResponsiveUI.prototype);
-
-const onActivate = (tab) => setMenuCheckFor(tab);
-
-const onClose = ({ window, tabs }) => {
-  for (let tab of tabs) {
-    ResponsiveUIManager.closeIfNeeded(window, tab);
-  }
-};
-
-const setMenuCheckFor = Task.async(
-  function* (tab, window = getOwnerWindow(tab)) {
-    yield startup(window);
-
-    let menu = window.document.getElementById("menu_responsiveUI");
-    if (menu) {
-      menu.setAttribute("checked", ResponsiveUIManager.isActiveForTab(tab));
-    }
-  }
-);

devtools/client/responsive.html/moz.build

@@ -18,7 +18,6 @@ DevToolsModules(
     'app.js',
     'constants.js',
     'devices.js',
-    'events.js',
     'index.css',
     'manager.js',
     'reducers.js',

devtools/client/responsive.html/test/browser/browser.ini

@@ -2,8 +2,7 @@
 tags = devtools
 subsuite = devtools
 # !e10s: RDM only works for remote tabs
-# OSX debug e10s: Bug 1268319 - Leaking the world
-skip-if = !e10s || (os == 'mac' && e10s && debug)
+skip-if = !e10s
 support-files =
   devices.json
   doc_page_state.html
@@ -19,7 +18,6 @@ support-files =
 [browser_frame_script_active.js]
 [browser_menu_item_01.js]
 [browser_menu_item_02.js]
-skip-if = (e10s && debug) # Bug 1267278: browser.xul leaks
 [browser_mouse_resize.js]
 [browser_page_state.js]
 [browser_resize_cmd.js]

devtools/client/responsive.html/test/browser/browser_menu_item_01.js

@@ -9,11 +9,15 @@ const TEST_URL = "data:text/html;charset=utf-8,";
 
 const tabUtils = require("sdk/tabs/utils");
 const { startup } = require("sdk/window/helpers");
-const { activate } = require("devtools/client/responsive.html/events");
-const events = require("sdk/event/core");
 
 const activateTab = (tab) => new Promise(resolve => {
-  events.once(activate, "data", resolve);
+  let { tabContainer } = tabUtils.getOwnerWindow(tab).gBrowser;
+
+  tabContainer.addEventListener("TabSelect", function listener({type}) {
+    tabContainer.removeEventListener(type, listener);
+    resolve();
+  });
+
   tabUtils.activateTab(tab);
 });
 

devtools/client/responsive.html/test/browser/browser_menu_item_02.js

@@ -7,12 +7,7 @@
 
 const TEST_URL = "data:text/html;charset=utf-8,";
 
-const { getActiveTab } = require("sdk/tabs/utils");
 const { getMostRecentBrowserWindow } = require("sdk/window/utils");
-const { open, close, startup } = require("sdk/window/helpers");
-const { partial } = require("sdk/lang/functional");
-
-const openBrowserWindow = partial(open, null, { features: { toolbar: true } });
 
 const isMenuCheckedFor = ({document}) => {
   let menu = document.getElementById("menu_responsiveUI");
@@ -20,26 +15,31 @@ const isMenuCheckedFor = ({document}) => {
 };
 
 add_task(function* () {
-  const window1 = yield openBrowserWindow();
+  const window1 = yield BrowserTestUtils.openNewBrowserWindow();
+  let { gBrowser } = window1;
 
-  yield startup(window1);
+  yield BrowserTestUtils.withNewTab({ gBrowser, url: TEST_URL },
+    function* (browser) {
+      let tab = gBrowser.getTabForBrowser(browser);
 
-  yield BrowserTestUtils.openNewForegroundTab(window1.gBrowser, TEST_URL);
+      is(window1, getMostRecentBrowserWindow(),
+        "The new window is the active one");
 
-  const tab1 = getActiveTab(window1);
+      ok(!isMenuCheckedFor(window1),
+        "RDM menu item is unchecked by default");
 
-  is(window1, getMostRecentBrowserWindow(),
-    "The new window is the active one");
+      yield openRDM(tab);
 
-  ok(!isMenuCheckedFor(window1),
-    "RDM menu item is unchecked by default");
+      ok(isMenuCheckedFor(window1),
+        "RDM menu item is checked with RDM open");
 
-  yield openRDM(tab1);
+      yield closeRDM(tab);
 
-  ok(isMenuCheckedFor(window1),
-    "RDM menu item is checked with RDM open");
+      ok(!isMenuCheckedFor(window1),
+        "RDM menu item is unchecked with RDM closed");
+    });
 
-  yield close(window1);
+  yield BrowserTestUtils.closeWindow(window1);
 
   is(window, getMostRecentBrowserWindow(),
     "The original window is the active one");

devtools/client/responsive.html/test/browser/head.js

@@ -60,7 +60,7 @@ var openRDM = Task.async(function* (tab) {
 var closeRDM = Task.async(function* (tab, options) {
   info("Closing responsive design mode");
   let manager = ResponsiveUIManager;
-  yield manager.closeIfNeeded(window, tab, options);
+  yield manager.closeIfNeeded(getOwnerWindow(tab), tab, options);
   info("Responsive design mode closed");
 });