--- a/devtools/client/moz.build
+++ b/devtools/client/moz.build
@@ -18,16 +18,17 @@ DIRS += [
     'jsonview',
     'locales',
     'memory',
     'netmonitor',
     'performance',
     'preferences',
     'projecteditor',
     'promisedebugger',
+    'responsive.html',
     'responsivedesign',
     'scratchpad',
     'shadereditor',
     'shared',
     'shims',
     'sourceeditor',
     'storage',
     'styleeditor',

--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -320,8 +320,12 @@ pref("devtools.fontinspector.enabled", t
 pref("devtools.telemetry.tools.opened.version", "{}");
 
 // Enable the JSON View tool (an inspector for application/json documents)
 #ifdef MOZ_DEV_EDITION
   pref("devtools.jsonview.enabled", true);
 #else
   pref("devtools.jsonview.enabled", false);
 #endif
+
+// Disable the HTML responsive design tool by default.  Currently disabled until
+// ready to replace the legacy XUL version.
+pref("devtools.responsive.html.enabled", false);

new file mode 100644
--- /dev/null
+++ b/devtools/client/responsive.html/manager.js
@@ -0,0 +1,115 @@
+/* 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 promise = require("promise");
+const EventEmitter = require("devtools/shared/event-emitter");
+
+/**
+ * ResponsiveUIManager is the external API for the browser UI, etc. to use when
+ * opening and closing the responsive UI.
+ *
+ * While the HTML UI is in an experimental stage, the older ResponsiveUIManager
+ * from devtools/client/responsivedesign/responsivedesign.jsm delegates to this
+ * object when the pref "devtools.responsive.html.enabled" is true.
+ */
+exports.ResponsiveUIManager = {
+  activeTabs: new Map(),
+
+  /**
+   * Toggle the responsive UI for a tab.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @param tab
+   *        The browser tab.
+   * @return Promise
+   *         Resolved when the toggling has completed.
+   */
+  toggle(window, tab) {
+    if (this.isActiveForTab(tab)) {
+      this.activeTabs.get(tab).close();
+    } else {
+      this.runIfNeeded(window, tab);
+    }
+    // TODO: Becomes a more interesting value in a later patch
+    return promise.resolve();
+  },
+
+  /**
+   * Launches the responsive UI.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @param tab
+   *        The browser tab.
+   */
+  runIfNeeded(window, tab) {
+    if (!this.isActiveForTab(tab)) {
+      // TODO: Unimplemented
+    }
+  },
+
+  /**
+   * Returns true if responsive UI is active for a given tab.
+   *
+   * @param tab
+   *        The browser tab.
+   * @return boolean
+   */
+  isActiveForTab(tab) {
+    return this.activeTabs.has(tab);
+  },
+
+  /**
+   * Return the responsive UI controller for a tab.
+   *
+   * @param tab
+   *        The browser tab.
+   * @return TODO: Some object!
+   */
+  getResponsiveUIForTab(tab) {
+    return this.activeTabs.get(tab);
+  },
+
+  /**
+   * Handle GCLI commands.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @param tab
+   *        The browser tab.
+   * @param command
+   *        The GCLI command name.
+   * @param args
+   *        The GCLI command arguments.
+   */
+  handleGcliCommand: function(window, tab, command, args) {
+    switch (command) {
+      case "resize to":
+        this.runIfNeeded(window, tab);
+        // TODO: Probably the wrong API
+        this.activeTabs.get(tab).setSize(args.width, args.height);
+        break;
+      case "resize on":
+        this.runIfNeeded(window, tab);
+        break;
+      case "resize off":
+        if (this.isActiveForTab(tab)) {
+          // TODO: Probably the wrong API
+          this.activeTabs.get(tab).close();
+        }
+        break;
+      case "resize toggle":
+        this.toggle(window, tab);
+        break;
+      default:
+    }
+  }
+};
+
+// GCLI commands in ../responsivedesign/resize-commands.js listen for events
+// from this object to know when the UI for a tab has opened or closed.
+EventEmitter.decorate(exports.ResponsiveUIManager);

new file mode 100644
--- /dev/null
+++ b/devtools/client/responsive.html/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'manager.js',
+)

--- a/devtools/client/responsivedesign/responsivedesign.jsm
+++ b/devtools/client/responsivedesign/responsivedesign.jsm
@@ -34,17 +34,17 @@ const SLOW_RATIO = 6;
 const ROUND_RATIO = 10;
 
 const INPUT_PARSER = /(\d+)[^\d]+(\d+)/;
 
 const SHARED_L10N = new ViewHelpers.L10N("chrome://devtools/locale/shared.properties");
 
 var ActiveTabs = new Map();
 
-this.ResponsiveUIManager = {
+var Manager = {
   /**
    * Check if the a tab is in a responsive mode.
    * Leave the responsive mode if active,
    * active the responsive mode if not active.
    *
    * @param aWindow the main window.
    * @param aTab the tab targeted.
    */
@@ -108,17 +108,28 @@ this.ResponsiveUIManager = {
         break;
       case "resize toggle":
           this.toggle(aWindow, aTab);
       default:
     }
   }
 }
 
-EventEmitter.decorate(ResponsiveUIManager);
+EventEmitter.decorate(Manager);
+
+// If the experimental HTML UI is enabled, delegate the ResponsiveUIManager API
+// over to that tool instead.  Performing this delegation here allows us to
+// contain the pref check to a single place.
+if (Services.prefs.getBoolPref("devtools.responsive.html.enabled")) {
+  let { ResponsiveUIManager } =
+    require("devtools/client/responsive.html/manager");
+  this.ResponsiveUIManager = ResponsiveUIManager;
+} else {
+  this.ResponsiveUIManager = Manager;
+}
 
 var presets = [
   // Phones
   {key: "320x480", width: 320, height: 480},    // iPhone, B2G, with <meta viewport>
   {key: "360x640", width: 360, height: 640},    // Android 4, phones, with <meta viewport>
 
   // Tablets
   {key: "768x1024", width: 768, height: 1024},   // iPad, with <meta viewport>