From 9caeb5664c73a3a8e4c87ba7c81d1cccb15dcac3 Mon Sep 17 00:00:00 2001
From: Paul Rouget <paul@mozilla.com>
Date: Fri, 1 Jun 2012 14:53:58 +0200
Subject: [PATCH] Bug 749628 - Implement a Responsive Design tool. r=dcamp
 r=gavin

---
 browser/app/profile/firefox.js                |   3 +
 browser/base/content/browser-appmenu.inc      |   6 +
 browser/base/content/browser-menubar.inc      |   7 +
 browser/base/content/browser-sets.inc         |   8 +
 browser/base/content/browser.css              |  25 +
 browser/base/content/browser.js               |  23 +
 browser/base/content/browser.xul              |   5 +
 browser/base/content/tabbrowser.xml           |  36 +-
 .../base/content/test/browser_bug462673.js    |   2 +-
 browser/devtools/Makefile.in                  |   1 +
 browser/devtools/responsivedesign/Makefile.in |  15 +
 .../responsivedesign/responsivedesign.jsm     | 441 ++++++++++++++++++
 .../responsivedesign/test/Makefile.in         |  53 +++
 .../test/browser_responsiveui.js              | 143 ++++++
 .../locales/en-US/chrome/browser/browser.dtd  |   4 +
 .../browser/devtools/responsiveUI.properties  |  17 +
 browser/locales/jar.mn                        |   1 +
 browser/themes/gnomestripe/browser.css        |  46 ++
 .../devtools/responsive-background.png        | Bin 0 -> 3127 bytes
 .../devtools/responsive-se-resizer.png        | Bin 0 -> 269 bytes
 .../devtools/responsive-vertical-resizer.png  | Bin 0 -> 174 bytes
 browser/themes/gnomestripe/jar.mn             |   3 +
 browser/themes/pinstripe/browser.css          |  46 ++
 .../devtools/responsive-background.png        | Bin 0 -> 3127 bytes
 .../devtools/responsive-se-resizer.png        | Bin 0 -> 269 bytes
 .../devtools/responsive-vertical-resizer.png  | Bin 0 -> 174 bytes
 browser/themes/pinstripe/jar.mn               |   5 +-
 browser/themes/winstripe/browser.css          |  47 ++
 .../devtools/responsive-background.png        | Bin 0 -> 3127 bytes
 .../devtools/responsive-se-resizer.png        | Bin 0 -> 269 bytes
 .../devtools/responsive-vertical-resizer.png  | Bin 0 -> 174 bytes
 browser/themes/winstripe/jar.mn               |   8 +-
 32 files changed, 934 insertions(+), 11 deletions(-)
 create mode 100644 browser/devtools/responsivedesign/Makefile.in
 create mode 100644 browser/devtools/responsivedesign/responsivedesign.jsm
 create mode 100644 browser/devtools/responsivedesign/test/Makefile.in
 create mode 100644 browser/devtools/responsivedesign/test/browser_responsiveui.js
 create mode 100644 browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties
 create mode 100644 browser/themes/gnomestripe/devtools/responsive-background.png
 create mode 100644 browser/themes/gnomestripe/devtools/responsive-se-resizer.png
 create mode 100644 browser/themes/gnomestripe/devtools/responsive-vertical-resizer.png
 create mode 100644 browser/themes/pinstripe/devtools/responsive-background.png
 create mode 100644 browser/themes/pinstripe/devtools/responsive-se-resizer.png
 create mode 100644 browser/themes/pinstripe/devtools/responsive-vertical-resizer.png
 create mode 100644 browser/themes/winstripe/devtools/responsive-background.png
 create mode 100644 browser/themes/winstripe/devtools/responsive-se-resizer.png
 create mode 100644 browser/themes/winstripe/devtools/responsive-vertical-resizer.png

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index dae45b01d872..6ae76de3b881 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1039,6 +1039,9 @@ pref("devtools.inspector.highlighterShowInfobar", true);
 pref("devtools.layoutview.enabled", true);
 pref("devtools.layoutview.open", false);
 
+// Enable the Responsive UI tool
+pref("devtools.responsiveUI.enabled", true);
+
 // Enable the Debugger
 pref("devtools.debugger.enabled", true);
 pref("devtools.debugger.remote-enabled", false);
diff --git a/browser/base/content/browser-appmenu.inc b/browser/base/content/browser-appmenu.inc
index d47043872aea..06d2abb3dc4f 100644
--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -160,6 +160,12 @@
                     type="checkbox"
                     command="Tools:Inspect"
                     key="key_inspect"/>
+          <menuitem id="appmenu_responsiveUI"
+                    hidden="true"
+                    label="&responsiveUI.label;"
+                    type="checkbox"
+                    command="Tools:ResponsiveUI"
+                    key="key_responsiveUI"/>
           <menuitem id="appmenu_debugger"
                     hidden="true"
                     type="checkbox"
diff --git a/browser/base/content/browser-menubar.inc b/browser/base/content/browser-menubar.inc
index 0c8c9be87607..169ef64bdbeb 100644
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -535,6 +535,13 @@
                             accesskey="&inspectMenu.accesskey;"
                             key="key_inspect"
                             command="Tools:Inspect"/>
+                  <menuitem id="menu_responsiveUI"
+                            type="checkbox"
+                            hidden="true"
+                            label="&responsiveUI.label;"
+                            accesskey="&responsiveUI.accesskey;"
+                            key="key_responsiveUI"
+                            command="Tools:ResponsiveUI"/>
                   <menuitem id="menu_debugger"
                             hidden="true"
                             type="checkbox"
diff --git a/browser/base/content/browser-sets.inc b/browser/base/content/browser-sets.inc
index cd45fb91885b..0bd546b84a21 100644
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -96,6 +96,7 @@
     <command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();" disabled="true"/>
     <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true"/>
     <command id="Tools:StyleEditor" oncommand="StyleEditor.openChrome();" disabled="true"/>
+    <command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();" disabled="true"/>
     <command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
     <command id="Tools:Sanitize"
      oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
@@ -250,6 +251,13 @@
         modifiers="accel,alt"
 #else
         modifiers="accel,shift"
+#endif
+    />
+    <key id="key_responsiveUI" key="&responsiveUI.commandkey;" command="Tools:ResponsiveUI"
+#ifdef XP_MACOSX
+        modifiers="accel,alt"
+#else
+        modifiers="accel,shift"
 #endif
     />
     <key id="key_scratchpad" keycode="&scratchpad.keycode;" modifiers="shift"
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index c35e4f20a9c9..a6d952b28515 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -553,6 +553,8 @@ statuspanel[inactive][previoustype=overLink] {
 /* highlighter */
 %include highlighter.css
 
+/* gcli */
+
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame,
 #gcli-output,
@@ -565,3 +567,26 @@ html|*#gcli-output-frame,
 .gclitoolbar-prompt {
   direction: ltr;
 }
+
+/* Responsive Mode */
+
+vbox[anonid=browserContainer][responsivemode] {
+  overflow: auto;
+}
+
+.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
+  -moz-box-pack: end;
+}
+
+stack[anonid=browserStack][responsivemode] {
+  -moz-transition-duration: 200ms;
+  -moz-transition-timing-function: linear;
+}
+
+stack[anonid=browserStack][responsivemode] {
+  -moz-transition-properties: min-width, max-width, min-height, max-height;
+}
+
+stack[anonid=browserStack][responsivemode][notransition] {
+  -moz-transition: none;
+}
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 037f85d37a64..2919d4818255 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1724,6 +1724,17 @@ function delayedStartup(isLoadingBlank, mustLoadSidebar) {
     document.getElementById("appmenu_charsetMenu").hidden = true;
 #endif
 
+  // Enable Responsive UI?
+  let responsiveUIEnabled = gPrefService.getBoolPref("devtools.responsiveUI.enabled");
+  if (responsiveUIEnabled) {
+    document.getElementById("menu_responsiveUI").hidden = false;
+    document.getElementById("Tools:ResponsiveUI").removeAttribute("disabled");
+#ifdef MENUBAR_CAN_AUTOHIDE
+    document.getElementById("appmenu_responsiveUI").hidden = false;
+#endif
+    document.getElementById("developer-toolbar-responsiveui").hidden = false;
+  }
+
   let appMenuButton = document.getElementById("appmenu-button");
   let appMenuPopup = document.getElementById("appmenu-popup");
   if (appMenuButton && appMenuPopup) {
@@ -9302,6 +9313,18 @@ XPCOMUtils.defineLazyGetter(Scratchpad, "ScratchpadManager", function() {
   return tmp.ScratchpadManager;
 });
 
+var ResponsiveUI = {
+  toggle: function RUI_toggle() {
+    this.ResponsiveUIManager.toggle(window, gBrowser.selectedTab);
+  }
+};
+
+XPCOMUtils.defineLazyGetter(ResponsiveUI, "ResponsiveUIManager", function() {
+  let tmp = {};
+  Cu.import("resource:///modules/devtools/responsivedesign.jsm", tmp);
+  return tmp.ResponsiveUIManager;
+});
+
 var StyleEditor = {
   prefEnabledName: "devtools.styleeditor.enabled",
   /**
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 3675aad933e9..4308c176fea2 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1049,6 +1049,11 @@
                          class="devtools-toolbarbutton"
                          hidden="true"
                          command="Tools:Inspect"/>
+          <toolbarbutton id="developer-toolbar-responsiveui"
+                         label="&responsiveUI.label;"
+                         class="devtools-toolbarbutton"
+                         hidden="true"
+                         command="Tools:ResponsiveUI"/>
           <toolbarbutton id="developer-toolbar-debugger"
                          label="&scriptsButton.label;"
                          class="devtools-toolbarbutton"
diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml
index 03af2c8b58ad..e7686b1821ef 100644
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -26,10 +26,12 @@
                   onselect="if (event.target.localName == 'tabpanels') this.parentNode.updateCurrentBrowser();">
         <xul:tabpanels flex="1" class="plain" selectedIndex="0" anonid="panelcontainer">
           <xul:notificationbox flex="1">
-            <xul:stack flex="1" anonid="browserStack">
-              <xul:browser type="content-primary" message="true" disablehistory="true"
-                           xbl:inherits="tooltip=contenttooltip,contextmenu=contentcontextmenu,autocompletepopup"/>
-            </xul:stack>
+            <xul:vbox flex="1" anonid="browserContainer">
+              <xul:stack flex="1" anonid="browserStack">
+                <xul:browser type="content-primary" message="true" disablehistory="true"
+                             xbl:inherits="tooltip=contenttooltip,contextmenu=contentcontextmenu,autocompletepopup"/>
+              </xul:stack>
+            </xul:vbox>
           </xul:notificationbox>
         </xul:tabpanels>
       </xul:tabbox>
@@ -290,6 +292,15 @@
       </method>
 
       <method name="getNotificationBox">
+        <parameter name="aBrowser"/>
+        <body>
+          <![CDATA[
+            return this.getBrowserContainer(aBrowser).parentNode;
+          ]]>
+        </body>
+      </method>
+
+      <method name="getBrowserContainer">
         <parameter name="aBrowser"/>
         <body>
           <![CDATA[
@@ -1284,12 +1295,20 @@
             stack.appendChild(b);
             stack.setAttribute("flex", "1");
 
+            // Create the browserContainer
+            var box = document.createElementNS(
+                                    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
+                                    "vbox");
+            box.setAttribute("anonid", "browserContainer");
+            box.appendChild(stack);
+            box.setAttribute("flex", "1");
+
             // Add the Message and the Browser to the box
             var notificationbox = document.createElementNS(
                                     "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
                                     "notificationbox");
             notificationbox.setAttribute("flex", "1");
-            notificationbox.appendChild(stack);
+            notificationbox.appendChild(box);
 
             var position = this.tabs.length - 1;
             var uniqueId = "panel" + Date.now() + position;
@@ -1714,12 +1733,13 @@
             // (see below), which would be hindered by the potentially expensive
             // browser removal. So we remove the browser and the panel in two
             // steps.
-            var panel = browser.parentNode.parentNode;
+
+            var panel = this.getNotificationBox(browser);
 
             // This will unload the document. An unload handler could remove
             // dependant tabs, so it's important that the tabbrowser is now in
             // a consistent state (tab removed, tab positions updated, etc.).
-            panel.removeChild(browser.parentNode);
+            panel.removeChild(this.getBrowserContainer(browser));
 
             // Release the browser in case something is erroneously holding a
             // reference to the tab after its removal.
@@ -2490,7 +2510,7 @@
 
       <constructor>
         <![CDATA[
-          this.mCurrentBrowser = this.mPanelContainer.childNodes[0].firstChild.firstChild;
+          this.mCurrentBrowser = this.mPanelContainer.firstChild.firstChild.firstChild.firstChild;
           this.mCurrentTab = this.tabContainer.firstChild;
           document.addEventListener("keypress", this, false);
           window.addEventListener("sizemodechange", this, false);
diff --git a/browser/base/content/test/browser_bug462673.js b/browser/base/content/test/browser_bug462673.js
index e8ce80406d1f..3272f1bcc293 100644
--- a/browser/base/content/test/browser_bug462673.js
+++ b/browser/base/content/test/browser_bug462673.js
@@ -15,7 +15,7 @@ var runs = [
       is(tabbrowser.browsers.length, 1, "Window has one browser");
       is(tabbrowser.selectedTab, newTab, "Remaining tab is selected");
       is(tabbrowser.selectedBrowser, newBrowser, "Browser for remaining tab is selected");
-      is(tabbrowser.mTabBox.selectedPanel, newBrowser.parentNode.parentNode, "Panel for remaining tab is selected");
+      is(tabbrowser.mTabBox.selectedPanel, newBrowser.parentNode.parentNode.parentNode, "Panel for remaining tab is selected");
     }
   }
 ];
diff --git a/browser/devtools/Makefile.in b/browser/devtools/Makefile.in
index b14a0b5d8c26..c290fc1a341f 100644
--- a/browser/devtools/Makefile.in
+++ b/browser/devtools/Makefile.in
@@ -24,6 +24,7 @@ DIRS = \
   debugger \
   layoutview \
   shared \
+  responsivedesign \
   $(NULL)
 
 include $(topsrcdir)/config/rules.mk
diff --git a/browser/devtools/responsivedesign/Makefile.in b/browser/devtools/responsivedesign/Makefile.in
new file mode 100644
index 000000000000..414f0f9a74ad
--- /dev/null
+++ b/browser/devtools/responsivedesign/Makefile.in
@@ -0,0 +1,15 @@
+DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+ifdef ENABLE_TESTS
+	DIRS += test
+endif
+
+include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/responsivedesign/responsivedesign.jsm b/browser/devtools/responsivedesign/responsivedesign.jsm
new file mode 100644
index 000000000000..9b7bc0f3906a
--- /dev/null
+++ b/browser/devtools/responsivedesign/responsivedesign.jsm
@@ -0,0 +1,441 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is the Mozilla Responsive UI Module.
+ *
+ * The Initial Developer of the Original Code is
+ * The Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2012
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+const Ci = Components.interfaces;
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+var EXPORTED_SYMBOLS = ["ResponsiveUIManager"];
+
+const MIN_WIDTH = 50;
+const MIN_HEIGHT = 50;
+
+let ResponsiveUIManager = {
+  /**
+   * 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.
+   */
+  toggle: function(aWindow, aTab) {
+    if (aTab.responsiveUI) {
+      aTab.responsiveUI.close();
+    } else {
+      aTab.responsiveUI = new ResponsiveUI(aWindow, aTab);
+    }
+  },
+}
+
+let presets =  [
+  // Phones
+  {width: 320, height: 480},    // iPhone, B2G, with <meta viewport>
+  {width: 360, height: 640},    // Android 4, phones, with <meta viewport>
+
+  // Tablets
+  {width: 768, height: 1024},   // iPad, with <meta viewport>
+  {width: 800, height: 1280},   // Android 4, Tablet, with <meta viewport>
+
+  // Default width for mobile browsers, no <meta viewport>
+  {width: 980, height: 1280},
+
+  // Computer
+  {width: 1280, height: 600},
+  {width: 1920, height: 900},
+];
+
+function ResponsiveUI(aWindow, aTab)
+{
+  this.mainWindow = aWindow;
+  this.tab = aTab;
+  this.browser = aTab.linkedBrowser;
+  this.chromeDoc = aWindow.document;
+  this.container = aWindow.gBrowser.getBrowserContainer(this.browser);
+  this.stack = this.container.querySelector("[anonid=browserStack]");
+
+  // Try to load presets from prefs
+  if (Services.prefs.prefHasUserValue("devtools.responsiveUI.presets")) {
+    try {
+      presets = JSON.parse(Services.prefs.getCharPref("devtools.responsiveUI.presets"));
+    } catch(e) {
+      // User pref is malformated.
+      Cu.reportError("Could not parse pref `devtools.responsiveUI.presets`: " + e);
+    }
+  }
+
+  if (Array.isArray(presets)) {
+    this.presets = [{custom: true}].concat(presets)
+  } else {
+    Cu.reportError("Presets value (devtools.responsiveUI.presets) is malformated.");
+    this.presets = [{custom: true}];
+  }
+
+  // Default size. The first preset (custom) is the one that will be used.
+  let bbox = this.stack.getBoundingClientRect();
+  this.presets[0].width = bbox.width - 40; // horizontal padding of the container
+  this.presets[0].height = bbox.height - 80; // vertical padding + toolbar height
+  this.currentPreset = 0; // Custom
+
+  this.container.setAttribute("responsivemode", "true");
+  this.stack.setAttribute("responsivemode", "true");
+
+  // Let's bind some callbacks.
+  this.bound_presetSelected = this.presetSelected.bind(this);
+  this.bound_rotate = this.rotate.bind(this);
+  this.bound_startResizing = this.startResizing.bind(this);
+  this.bound_stopResizing = this.stopResizing.bind(this);
+  this.bound_onDrag = this.onDrag.bind(this);
+  this.bound_onKeypress = this.onKeypress.bind(this);
+
+  // Events
+  this.tab.addEventListener("TabClose", this);
+  this.tab.addEventListener("TabAttrModified", this);
+  this.mainWindow.addEventListener("keypress", this.bound_onKeypress, true);
+
+  this.buildUI();
+  this.checkMenus();
+}
+
+ResponsiveUI.prototype = {
+  /**
+   * Destroy the nodes. Remove listeners. Reset the style.
+   */
+  close: function RUI_unload() {
+    this.unCheckMenus();
+    // Reset style of the stack.
+    let style = "max-width: none;" +
+                "min-width: 0;" +
+                "max-height: none;" +
+                "min-height: 0;";
+    this.stack.setAttribute("style", style);
+
+    this.stopResizing();
+
+    // Remove listeners.
+    this.mainWindow.removeEventListener("keypress", this.bound_onKeypress, true);
+    this.menulist.removeEventListener("select", this.bound_presetSelected, true);
+    this.tab.removeEventListener("TabClose", this);
+    this.tab.removeEventListener("TabAttrModified", this);
+    this.rotatebutton.removeEventListener("command", this.bound_rotate, true);
+
+    // Removed elements.
+    this.container.removeChild(this.toolbar);
+    this.stack.removeChild(this.resizer);
+    this.stack.removeChild(this.resizeBar);
+
+    // Unset the responsive mode.
+    this.container.removeAttribute("responsivemode");
+    this.stack.removeAttribute("responsivemode");
+
+    delete this.tab.responsiveUI;
+  },
+
+  /**
+   * Handle keypressed.
+   *
+   * @param aEvent
+   */
+  onKeypress: function RUI_onKeypress(aEvent) {
+    if (aEvent.keyCode == this.mainWindow.KeyEvent.DOM_VK_ESCAPE &&
+        this.mainWindow.gBrowser.selectedBrowser == this.browser) {
+      aEvent.preventDefault();
+      aEvent.stopPropagation();
+      this.close();
+    }
+  },
+
+  /**
+   * Handle events
+   */
+  handleEvent: function (aEvent) {
+    switch (aEvent.type) {
+      case "TabClose":
+        this.close();
+        break;
+      case "TabAttrModified":
+        if (this.mainWindow.gBrowser.selectedBrowser == this.browser) {
+          this.checkMenus();
+        } else {
+          this.unCheckMenus();
+        }
+        break;
+    }
+  },
+
+  /**
+   * Check the menu items.
+   */
+   checkMenus: function RUI_checkMenus() {
+     this.chromeDoc.getElementById("Tools:ResponsiveUI").setAttribute("checked", "true");
+   },
+
+  /**
+   * Uncheck the menu items.
+   */
+   unCheckMenus: function RUI_unCheckMenus() {
+     this.chromeDoc.getElementById("Tools:ResponsiveUI").setAttribute("checked", "false");
+   },
+
+  /**
+   * Build the toolbar and the resizers.
+   *
+   * <vbox anonid="browserContainer"> From tabbrowser.xml
+   *  <toolbar class="devtools-toolbar devtools-responsiveui-toolbar">
+   *    <menulist class="devtools-menulist"/> // presets
+   *    <toolbarbutton tabindex="0" class="devtools-toolbarbutton" label="rotate"/> // rotate
+   *  </toolbar>
+   *  <stack anonid="browserStack"> From tabbrowser.xml
+   *    <browser/>
+   *    <box class="devtools-responsiveui-resizehandle" bottom="0" right="0"/>
+   *    <box class="devtools-responsiveui-resizebar" top="0" right="0"/>
+   *  </stack>
+   * </vbox>
+   */
+  buildUI: function RUI_buildUI() {
+    // Toolbar
+    this.toolbar = this.chromeDoc.createElement("toolbar");
+    this.toolbar.className = "devtools-toolbar devtools-responsiveui-toolbar";
+
+    this.menulist = this.chromeDoc.createElement("menulist");
+    this.menulist.className = "devtools-menulist";
+
+    this.menulist.addEventListener("select", this.bound_presetSelected, true);
+
+    let menupopup = this.chromeDoc.createElement("menupopup");
+    this.registerPresets(menupopup);
+    this.menulist.appendChild(menupopup);
+
+    this.rotatebutton = this.chromeDoc.createElement("toolbarbutton");
+    this.rotatebutton.setAttribute("tabindex", "0");
+    this.rotatebutton.setAttribute("label", this.strings.GetStringFromName("responsiveUI.rotate"));
+    this.rotatebutton.className = "devtools-toolbarbutton";
+    this.rotatebutton.addEventListener("command", this.bound_rotate, true);
+
+    this.toolbar.appendChild(this.menulist);
+    this.toolbar.appendChild(this.rotatebutton);
+
+    // Resizers
+    this.resizer = this.chromeDoc.createElement("box");
+    this.resizer.className = "devtools-responsiveui-resizehandle";
+    this.resizer.setAttribute("right", "0");
+    this.resizer.setAttribute("bottom", "0");
+    this.resizer.onmousedown = this.bound_startResizing;
+
+    this.resizeBar =  this.chromeDoc.createElement("box");
+    this.resizeBar.className = "devtools-responsiveui-resizebar";
+    this.resizeBar.setAttribute("top", "0");
+    this.resizeBar.setAttribute("right", "0");
+    this.resizeBar.onmousedown = this.bound_startResizing;
+
+    this.container.insertBefore(this.toolbar, this.stack);
+    this.stack.appendChild(this.resizer);
+    this.stack.appendChild(this.resizeBar);
+  },
+
+  /**
+   * Build the presets list and append it to the menupopup.
+   *
+   * @param aParent menupopup.
+   */
+  registerPresets: function RUI_registerPresets(aParent) {
+    let fragment = this.chromeDoc.createDocumentFragment();
+    let doc = this.chromeDoc;
+    let self = this;
+    this.presets.forEach(function(preset) {
+        let menuitem = doc.createElement("menuitem");
+        self.setMenuLabel(menuitem, preset);
+        fragment.appendChild(menuitem);
+    });
+    aParent.appendChild(fragment);
+  },
+
+  /**
+   * Set the menuitem label of a preset.
+   *
+   * @param aMenuitem menuitem to edit.
+   * @param aPreset associated preset.
+   */
+  setMenuLabel: function RUI_setMenuLabel(aMenuitem, aPreset) {
+    let size = Math.round(aPreset.width) + "x" + Math.round(aPreset.height);
+    if (aPreset.custom) {
+      let str = this.strings.formatStringFromName("responsiveUI.customResolution", [size], 1);
+      aMenuitem.setAttribute("label", str);
+    } else {
+      aMenuitem.setAttribute("label", size);
+    }
+  },
+
+  /**
+   * When a preset is selected, apply it.
+   */
+  presetSelected: function RUI_presetSelected() {
+    this.currentPreset = this.menulist.selectedIndex;
+    let preset = this.presets[this.currentPreset];
+    this.loadPreset(preset);
+  },
+
+  /**
+   * Apply a preset.
+   *
+   * @param aPreset preset to apply.
+   */
+  loadPreset: function RUI_loadPreset(aPreset) {
+    this.setSize(aPreset.width, aPreset.height);
+  },
+
+  /**
+   * Swap width and height.
+   */
+  rotate: function RUI_rotate() {
+    this.setSize(this.currentHeight, this.currentWidth);
+  },
+
+  /**
+   * Change the size of the browser.
+   *
+   * @param aWidth width of the browser.
+   * @param aHeight height of the browser.
+   */
+  setSize: function RUI_setSize(aWidth, aHeight) {
+    this.currentWidth = aWidth;
+    this.currentHeight = aHeight;
+
+    // We resize the containing stack.
+    let style = "max-width: %width;" +
+                "min-width: %width;" +
+                "max-height: %height;" +
+                "min-height: %height;";
+
+    style = style.replace(/%width/g, this.currentWidth + "px");
+    style = style.replace(/%height/g, this.currentHeight + "px");
+
+    this.stack.setAttribute("style", style);
+
+    if (!this.ignoreY)
+      this.resizeBar.setAttribute("top", Math.round(this.currentHeight / 2));
+
+    // We uptate the Custom menuitem if we are not using a preset.
+    if (this.presets[this.currentPreset].custom) {
+      let preset = this.presets[this.currentPreset];
+      preset.width = this.currentWidth;
+      preset.height = this.currentHeight;
+
+      let menuitem = this.menulist.firstChild.childNodes[this.currentPreset];
+      this.setMenuLabel(menuitem, preset);
+    }
+  },
+
+  /**
+   * Start the process of resizing the browser.
+   *
+   * @param aEvent
+   */
+  startResizing: function RUI_startResizing(aEvent) {
+    let preset = this.presets[this.currentPreset];
+    if (!preset.custom) {
+      this.currentPreset = 0;
+      preset = this.presets[0];
+      preset.width = this.currentWidth;
+      preset.height = this.currentHeight;
+      let menuitem = this.menulist.firstChild.childNodes[0];
+      this.setMenuLabel(menuitem, preset);
+      this.menulist.selectedIndex = 0;
+    }
+    this.mainWindow.addEventListener("mouseup", this.bound_stopResizing, true);
+    this.mainWindow.addEventListener("mousemove", this.bound_onDrag, true);
+    this.container.style.pointerEvents = "none";
+
+    this.stack.setAttribute("notransition", "true");
+
+    this.lastClientX = aEvent.clientX;
+    this.lastClientY = aEvent.clientY;
+
+    this.ignoreY = (aEvent.target === this.resizeBar);
+  },
+
+  /**
+   * Resizing on mouse move.
+   *
+   * @param aEvent
+   */
+  onDrag: function RUI_onDrag(aEvent) {
+    let deltaX = aEvent.clientX - this.lastClientX;
+    let deltaY = aEvent.clientY - this.lastClientY;
+
+    if (this.ignoreY)
+      deltaY = 0;
+
+    let width = this.currentWidth + deltaX;
+    let height = this.currentHeight + deltaY;
+
+    if (width < MIN_WIDTH) {
+        width = MIN_WIDTH;
+    } else {
+        this.lastClientX = aEvent.clientX;
+    }
+
+    if (height < MIN_HEIGHT) {
+        height = MIN_HEIGHT;
+    } else {
+        this.lastClientY = aEvent.clientY;
+    }
+
+    this.setSize(width, height);
+  },
+
+  /**
+   * Stop End resizing
+   */
+  stopResizing: function RUI_stopResizing() {
+    this.container.style.pointerEvents = "auto";
+
+    this.mainWindow.removeEventListener("mouseup", this.bound_stopResizing, true);
+    this.mainWindow.removeEventListener("mousemove", this.bound_onDrag, true);
+
+    this.stack.removeAttribute("notransition");
+    this.ignoreY = false;
+  },
+}
+
+XPCOMUtils.defineLazyGetter(ResponsiveUI.prototype, "strings", function () {
+  return Services.strings.createBundle("chrome://browser/locale/devtools/responsiveUI.properties");
+});
diff --git a/browser/devtools/responsivedesign/test/Makefile.in b/browser/devtools/responsivedesign/test/Makefile.in
new file mode 100644
index 000000000000..cbfe66c83836
--- /dev/null
+++ b/browser/devtools/responsivedesign/test/Makefile.in
@@ -0,0 +1,53 @@
+# ***** BEGIN LICENSE BLOCK *****
+# Version: MPL 1.1/GPL 2.0/LGPL 2.1
+#
+# The contents of this file are subject to the Mozilla Public License Version
+# 1.1 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+# http://www.mozilla.org/MPL/
+#
+# Software distributed under the License is distributed on an "AS IS" basis,
+# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+# for the specific language governing rights and limitations under the
+# License.
+#
+# The Original Code is mozilla.org code.
+#
+# The Initial Developer of the Original Code is
+# Mozilla Foundation.
+# Portions created by the Initial Developer are Copyright (C) 2012
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#   Paul Rouget <paul@mozilla.com>
+#
+# Alternatively, the contents of this file may be used under the terms of
+# either of the GNU General Public License Version 2 or later (the "GPL"),
+# or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+# in which case the provisions of the GPL or the LGPL are applicable instead
+# of those above. If you wish to allow use of your version of this file only
+# under the terms of either the GPL or the LGPL, and not to allow others to
+# use your version of this file under the terms of the MPL, indicate your
+# decision by deleting the provisions above and replace them with the notice
+# and other provisions required by the GPL or the LGPL. If you do not delete
+# the provisions above, a recipient may use your version of this file under
+# the terms of any one of the MPL, the GPL or the LGPL.
+#
+# ***** END LICENSE BLOCK *****
+
+DEPTH     = ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+relativesrcdir  = browser/devtools/responsivedesign/test
+
+include $(DEPTH)/config/autoconf.mk
+include $(topsrcdir)/config/rules.mk
+
+_BROWSER_FILES = \
+		browser_responsiveui.js \
+		$(NULL)
+
+
+libs::	$(_BROWSER_FILES)
+	$(INSTALL) $(foreach f,$^,"$f") $(DEPTH)/_tests/testing/mochitest/browser/$(relativesrcdir)
diff --git a/browser/devtools/responsivedesign/test/browser_responsiveui.js b/browser/devtools/responsivedesign/test/browser_responsiveui.js
new file mode 100644
index 000000000000..690f584e3285
--- /dev/null
+++ b/browser/devtools/responsivedesign/test/browser_responsiveui.js
@@ -0,0 +1,143 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function test() {
+  let instance;
+
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    waitForFocus(startTest, content);
+  }, true);
+
+  content.location = "data:text/html,mop";
+
+  function startTest() {
+    document.getElementById("Tools:ResponsiveUI").removeAttribute("disabled");
+    synthesizeKeyFromKeyTag("key_responsiveUI");
+    executeSoon(onUIOpen);
+  }
+
+  function onUIOpen() {
+    // Is it open?
+    let container = gBrowser.getBrowserContainer();
+    is(container.getAttribute("responsivemode"), "true", "In responsive mode.");
+
+    // Menus are correctly updated?
+    is(document.getElementById("Tools:ResponsiveUI").getAttribute("checked"), "true", "menus checked");
+
+    instance = gBrowser.selectedTab.responsiveUI;
+    ok(instance, "instance of the module is attached to the tab.");
+
+    testPresets();
+  }
+
+  function testPresets() {
+    function testOnePreset(c) {
+      if (c == 0) {
+        executeSoon(testCustom);
+        return;
+      }
+      instance.menulist.selectedIndex = c;
+      window.setTimeout(function() {
+        let item = instance.menulist.firstChild.childNodes[c];
+        let [width, height] = extractSizeFromString(item.getAttribute("label"));
+        is(content.innerWidth, width, "preset " + c + ": dimension valid (width)");
+        is(content.innerHeight, height, "preset " + c + ": dimension valid (height)");
+        testOnePreset(c - 1);
+      }, 500);
+    }
+    testOnePreset(instance.menulist.firstChild.childNodes.length - 1);
+  }
+
+  function extractSizeFromString(str) {
+    let numbers = str.match(/(\d+)[^\d]*(\d+)/);
+    if (numbers) {
+      return [numbers[1], numbers[2]];
+    } else {
+      return [null, null];
+    }
+  }
+
+  function testCustom() {
+    let initialWidth = content.innerWidth;
+    let initialHeight = content.innerHeight;
+
+    let x = 2, y = 2;
+    EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mousedown"}, window);
+    x += 20; y += 10;
+    EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mousemove"}, window);
+    EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mouseup"}, window);
+
+    window.setTimeout(function() {
+      let expectedWidth = initialWidth + 20;
+      let expectedHeight = initialHeight + 10;
+      info("initial width: " + initialWidth);
+      info("initial height: " + initialHeight);
+      is(content.innerWidth, expectedWidth, "Size correcty updated (width).");
+      is(content.innerHeight, expectedHeight, "Size correcty updated (height).");
+      is(instance.menulist.selectedIndex, 0, "Custom menuitem selected");
+      let [width, height] = extractSizeFromString(instance.menulist.firstChild.firstChild.getAttribute("label"));
+      is(width, expectedWidth, "Label updated (width).");
+      is(height, expectedHeight, "Label updated (height).");
+      rotate();
+    }, 500);
+  }
+
+  function rotate() {
+    let initialWidth = content.innerWidth;
+    let initialHeight = content.innerHeight;
+
+    info("rotate");
+    instance.rotate();
+
+    window.setTimeout(function() {
+      is(content.innerWidth, initialHeight, "The width is now the height.");
+      is(content.innerHeight, initialWidth, "The height is now the width.");
+      let [width, height] = extractSizeFromString(instance.menulist.firstChild.firstChild.getAttribute("label"));
+      is(width, initialHeight, "Label updated (width).");
+      is(height, initialWidth, "Label updated (height).");
+
+       EventUtils.synthesizeKey("VK_ESCAPE", {});
+      executeSoon(finishUp);
+    }, 500);
+  }
+
+  function finishUp() {
+
+    // Menus are correctly updated?
+    is(document.getElementById("Tools:ResponsiveUI").getAttribute("checked"), "false", "menu unchecked");
+
+    delete instance;
+    gBrowser.removeCurrentTab();
+    finish();
+  }
+
+  function synthesizeKeyFromKeyTag(aKeyId) {
+    let key = document.getElementById(aKeyId);
+    isnot(key, null, "Successfully retrieved the <key> node");
+
+    let modifiersAttr = key.getAttribute("modifiers");
+
+    let name = null;
+
+    if (key.getAttribute("keycode"))
+      name = key.getAttribute("keycode");
+    else if (key.getAttribute("key"))
+      name = key.getAttribute("key");
+
+    isnot(name, null, "Successfully retrieved keycode/key");
+
+    let modifiers = {
+      shiftKey: modifiersAttr.match("shift"),
+      ctrlKey: modifiersAttr.match("ctrl"),
+      altKey: modifiersAttr.match("alt"),
+      metaKey: modifiersAttr.match("meta"),
+      accelKey: modifiersAttr.match("accel")
+    }
+
+    EventUtils.synthesizeKey(name, modifiers);
+  }
+}
diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index 7ad22fb12182..1311f4b70b4d 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -214,6 +214,10 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY inspectContextMenu.label     "Inspect Element">
 <!ENTITY inspectContextMenu.accesskey "Q">
 
+<!ENTITY responsiveUI.label            "Responsive Mode">
+<!ENTITY responsiveUI.accesskey        "R">
+<!ENTITY responsiveUI.commandkey       "M">
+
 <!-- LOCALIZATION NOTE (scratchpad.label): This menu item label appears
   -  in the Tools menu. See bug 653093.
   -  The Scratchpad is intended to provide a simple text editor for creating
diff --git a/browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties b/browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties
new file mode 100644
index 000000000000..4871747408ac
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties
@@ -0,0 +1,17 @@
+# LOCALIZATION NOTE These strings are used inside the Responsive Mode
+# which is available from the Web Developer sub-menu -> 'Responsive Mode'.
+#
+# The correct localization of this file might be to keep it in
+# English, or another language commonly spoken among web developers.
+# You want to make that choice consistent across the developer tools.
+# A good criteria is the language in which you'd find the best
+# documentation on web development on the web.
+
+
+# LOCALIZATION NOTE  (responsiveUI.rotate): label of the rotate button.
+responsiveUI.rotate=rotate
+
+# LOCALIZATION NOTE  (responsiveUI.customResolution): label of the first item
+# in the menulist at the beginning of the toolbar. For %S is replace with the
+# current size of the page. For example: "400x600".
+responsiveUI.customResolution=%S (custom)
diff --git a/browser/locales/jar.mn b/browser/locales/jar.mn
index 714484b5d9f9..2555cb1e2093 100644
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -36,6 +36,7 @@
     locale/browser/devtools/sourceeditor.properties   (%chrome/browser/devtools/sourceeditor.properties)
     locale/browser/devtools/sourceeditor.dtd          (%chrome/browser/devtools/sourceeditor.dtd)
     locale/browser/devtools/layoutview.dtd            (%chrome/browser/devtools/layoutview.dtd)
+    locale/browser/devtools/responsiveUI.properties   (%chrome/browser/devtools/responsiveUI.properties)
     locale/browser/newTab.dtd                      (%chrome/browser/newTab.dtd)
     locale/browser/newTab.properties               (%chrome/browser/newTab.properties)
     locale/browser/openLocation.dtd                (%chrome/browser/openLocation.dtd)
diff --git a/browser/themes/gnomestripe/browser.css b/browser/themes/gnomestripe/browser.css
index 784c346ede38..1a08806a10b4 100644
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2477,3 +2477,49 @@ html|*#gcli-output-frame {
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
+
+/* Responsive Mode */
+
+vbox[anonid=browserContainer][responsivemode] {
+  background: #2a3643 url("chrome://browser/skin/devtools/responsive-background.png");
+  box-shadow: 0 0 7px black inset;
+  padding: 0 20px 20px 20px;
+}
+
+stack[anonid=browserStack][responsivemode] {
+  box-shadow: 0 0 7px black;
+}
+
+.devtools-responsiveui-toolbar {
+  background: transparent;
+  margin: 10px 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+.devtools-responsiveui-toolbar > menulist,
+.devtools-responsiveui-toolbar > toolbarbutton {
+  min-width: 22px;
+  border-radius: 0;
+}
+
+.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
+.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
+  margin-left: 0;
+}
+
+.devtools-responsiveui-resizebar {
+  width: 7px;
+  height: 24px;
+  cursor: ew-resize;
+  -moz-transform: translate(12px, -12px);
+  background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
+}
+
+.devtools-responsiveui-resizehandle {
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+  -moz-transform: translate(12px, 12px);
+  background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
+}
diff --git a/browser/themes/gnomestripe/devtools/responsive-background.png b/browser/themes/gnomestripe/devtools/responsive-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..271dd5ebcfbdc858f83f0f7ea18a59bb1980d74f
GIT binary patch
literal 3127
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
RWY7Qr002ovPDHLkV1mzP?f?J)

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/responsive-se-resizer.png b/browser/themes/gnomestripe/devtools/responsive-se-resizer.png
new file mode 100644
index 0000000000000000000000000000000000000000..cba07d61053c8a529978fc971a644379ed060ec9
GIT binary patch
literal 269
zcmV+o0rLKdP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0002gNkl<Zc-q~O
zO$z~06o!?$P0`4Pj7%YZqMfYlG%FtsCc>oAlqee;f5eWRS<cF4yf<gExN$~y7EjHo
z`<%}EPAZC`pZLcG=i8k_0F4meEg(_kD@(AJ-^v0`PV2@IY%_)0hF_q{doTm1OAwZs
z2#V~35!hXWu*!6x$S$yeCuQWH@*R*&CwIX@%JKrfgO@x8Z7?C(OVWWL*#<2zBzcvz
z1N>*Rhld^DJTsdXU2~ug+)o{7*<!t)GnxbWm}W;WHRkb*{2uV%Ef6waoROO!_)UTk
TAbx#Y00000NkvXXu0mjfIhk<>

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/responsive-vertical-resizer.png b/browser/themes/gnomestripe/devtools/responsive-vertical-resizer.png
new file mode 100644
index 0000000000000000000000000000000000000000..b68ec90282d332d65eac2fec5ba66b4a9d861e03
GIT binary patch
literal 174
zcmeAS@N?(olHy`uVBq!ia0vp^>_9BR!3HGFE<K+Mq)I(q978H@y}h)WtHD6z*vCfS
z#JGUw=?e~??v~PRit?Ejc_ismsLr#}=99%Khc^6RkoxzA{eGviw!KD5vcGW4vtv_V
zx$sKelS_J$9kL?aY3m0T-A@q@8b2_c{r_X*$G@{967S7&yta_nKJ`LHf63$OrpD5n
Z>QVL@8_IjyzX2V<;OXk;vd$@?2>|YyNV)(3

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/jar.mn b/browser/themes/gnomestripe/jar.mn
index c7b8cef90d32..8ab052331564 100644
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@@ -157,6 +157,9 @@ browser.jar:
   skin/classic/browser/devtools/debugger-step-out.png  (devtools/debugger-step-out.png)
   skin/classic/browser/devtools/debugger-step-over.png (devtools/debugger-step-over.png)
   skin/classic/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
+  skin/classic/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
+  skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
+  skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css
index ed4b2947bf19..ba44602f4ec5 100644
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -3218,3 +3218,49 @@ html|*#gcli-output-frame {
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
+
+/* Responsive Mode */
+
+vbox[anonid=browserContainer][responsivemode] {
+  background: #2a3643 url("chrome://browser/skin/devtools/responsive-background.png");
+  box-shadow: 0 0 7px black inset;
+  padding: 0 20px 20px 20px;
+}
+
+stack[anonid=browserStack][responsivemode] {
+  box-shadow: 0 0 7px black;
+}
+
+.devtools-responsiveui-toolbar {
+  background: transparent;
+  margin: 10px 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+.devtools-responsiveui-toolbar > menulist,
+.devtools-responsiveui-toolbar > toolbarbutton {
+  min-width: 22px;
+  border-radius: 0;
+}
+
+.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
+.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
+  margin-left: 0;
+}
+
+.devtools-responsiveui-resizebar {
+  width: 7px;
+  height: 24px;
+  cursor: ew-resize;
+  -moz-transform: translate(12px, -12px);
+  background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
+}
+
+.devtools-responsiveui-resizehandle {
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+  -moz-transform: translate(12px, 12px);
+  background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
+}
diff --git a/browser/themes/pinstripe/devtools/responsive-background.png b/browser/themes/pinstripe/devtools/responsive-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..271dd5ebcfbdc858f83f0f7ea18a59bb1980d74f
GIT binary patch
literal 3127
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
RWY7Qr002ovPDHLkV1mzP?f?J)

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/responsive-se-resizer.png b/browser/themes/pinstripe/devtools/responsive-se-resizer.png
new file mode 100644
index 0000000000000000000000000000000000000000..cba07d61053c8a529978fc971a644379ed060ec9
GIT binary patch
literal 269
zcmV+o0rLKdP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0002gNkl<Zc-q~O
zO$z~06o!?$P0`4Pj7%YZqMfYlG%FtsCc>oAlqee;f5eWRS<cF4yf<gExN$~y7EjHo
z`<%}EPAZC`pZLcG=i8k_0F4meEg(_kD@(AJ-^v0`PV2@IY%_)0hF_q{doTm1OAwZs
z2#V~35!hXWu*!6x$S$yeCuQWH@*R*&CwIX@%JKrfgO@x8Z7?C(OVWWL*#<2zBzcvz
z1N>*Rhld^DJTsdXU2~ug+)o{7*<!t)GnxbWm}W;WHRkb*{2uV%Ef6waoROO!_)UTk
TAbx#Y00000NkvXXu0mjfIhk<>

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/responsive-vertical-resizer.png b/browser/themes/pinstripe/devtools/responsive-vertical-resizer.png
new file mode 100644
index 0000000000000000000000000000000000000000..b68ec90282d332d65eac2fec5ba66b4a9d861e03
GIT binary patch
literal 174
zcmeAS@N?(olHy`uVBq!ia0vp^>_9BR!3HGFE<K+Mq)I(q978H@y}h)WtHD6z*vCfS
z#JGUw=?e~??v~PRit?Ejc_ismsLr#}=99%Khc^6RkoxzA{eGviw!KD5vcGW4vtv_V
zx$sKelS_J$9kL?aY3m0T-A@q@8b2_c{r_X*$G@{967S7&yta_nKJ`LHf63$OrpD5n
Z>QVL@8_IjyzX2V<;OXk;vd$@?2>|YyNV)(3

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/jar.mn b/browser/themes/pinstripe/jar.mn
index 85a1746ba4aa..7905b0c40165 100644
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@@ -197,7 +197,10 @@ browser.jar:
   skin/classic/browser/devtools/debugger-step-in.png        (devtools/debugger-step-in.png)
   skin/classic/browser/devtools/debugger-step-out.png       (devtools/debugger-step-out.png)
   skin/classic/browser/devtools/debugger-step-over.png      (devtools/debugger-step-over.png)
-  skin/classic/browser/devtools/inspector-option-icon.png     (devtools/inspector-option-icon.png)
+  skin/classic/browser/devtools/inspector-option-icon.png   (devtools/inspector-option-icon.png)
+  skin/classic/browser/devtools/responsive-se-resizer.png   (devtools/responsive-se-resizer.png)
+  skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
+  skin/classic/browser/devtools/responsive-background.png   (devtools/responsive-background.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/winstripe/browser.css b/browser/themes/winstripe/browser.css
index e890e5bdb10d..95bd92381980 100644
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -3150,3 +3150,50 @@ html|*#gcli-output-frame {
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
+
+/* Responsive Mode */
+
+vbox[anonid=browserContainer][responsivemode] {
+  background: #2a3643 url("chrome://browser/skin/devtools/responsive-background.png");
+  box-shadow: 0 0 7px black inset;
+  padding: 0 20px 20px 20px;
+}
+
+stack[anonid=browserStack][responsivemode] {
+  box-shadow: 0 0 7px black;
+}
+
+.devtools-responsiveui-toolbar {
+  background: transparent;
+  margin: 10px 0;
+  padding: 0;
+  box-shadow: none;
+  border-bottom-width: 0;
+}
+
+.devtools-responsiveui-toolbar > menulist,
+.devtools-responsiveui-toolbar > toolbarbutton {
+  min-width: 22px;
+  border-radius: 0;
+}
+
+.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
+.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
+  margin-left: 0;
+}
+
+.devtools-responsiveui-resizebar {
+  width: 7px;
+  height: 24px;
+  cursor: ew-resize;
+  -moz-transform: translate(12px, -12px);
+  background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
+}
+
+.devtools-responsiveui-resizehandle {
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+  -moz-transform: translate(12px, 12px);
+  background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
+}
diff --git a/browser/themes/winstripe/devtools/responsive-background.png b/browser/themes/winstripe/devtools/responsive-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..271dd5ebcfbdc858f83f0f7ea18a59bb1980d74f
GIT binary patch
literal 3127
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
RWY7Qr002ovPDHLkV1mzP?f?J)

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/responsive-se-resizer.png b/browser/themes/winstripe/devtools/responsive-se-resizer.png
new file mode 100644
index 0000000000000000000000000000000000000000..cba07d61053c8a529978fc971a644379ed060ec9
GIT binary patch
literal 269
zcmV+o0rLKdP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0002gNkl<Zc-q~O
zO$z~06o!?$P0`4Pj7%YZqMfYlG%FtsCc>oAlqee;f5eWRS<cF4yf<gExN$~y7EjHo
z`<%}EPAZC`pZLcG=i8k_0F4meEg(_kD@(AJ-^v0`PV2@IY%_)0hF_q{doTm1OAwZs
z2#V~35!hXWu*!6x$S$yeCuQWH@*R*&CwIX@%JKrfgO@x8Z7?C(OVWWL*#<2zBzcvz
z1N>*Rhld^DJTsdXU2~ug+)o{7*<!t)GnxbWm}W;WHRkb*{2uV%Ef6waoROO!_)UTk
TAbx#Y00000NkvXXu0mjfIhk<>

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/responsive-vertical-resizer.png b/browser/themes/winstripe/devtools/responsive-vertical-resizer.png
new file mode 100644
index 0000000000000000000000000000000000000000..b68ec90282d332d65eac2fec5ba66b4a9d861e03
GIT binary patch
literal 174
zcmeAS@N?(olHy`uVBq!ia0vp^>_9BR!3HGFE<K+Mq)I(q978H@y}h)WtHD6z*vCfS
z#JGUw=?e~??v~PRit?Ejc_ismsLr#}=99%Khc^6RkoxzA{eGviw!KD5vcGW4vtv_V
zx$sKelS_J$9kL?aY3m0T-A@q@8b2_c{r_X*$G@{967S7&yta_nKJ`LHf63$OrpD5n
Z>QVL@8_IjyzX2V<;OXk;vd$@?2>|YyNV)(3

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/jar.mn b/browser/themes/winstripe/jar.mn
index ae409ee81fef..457045371ea9 100644
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@@ -184,6 +184,9 @@ browser.jar:
         skin/classic/browser/devtools/debugger-step-out.png         (devtools/debugger-step-out.png)
         skin/classic/browser/devtools/debugger-step-over.png        (devtools/debugger-step-over.png)
         skin/classic/browser/devtools/inspector-option-icon.png     (devtools/inspector-option-icon.png)
+        skin/classic/browser/devtools/responsive-se-resizer.png     (devtools/responsive-se-resizer.png)
+        skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
+        skin/classic/browser/devtools/responsive-background.png     (devtools/responsive-background.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -378,7 +381,10 @@ browser.jar:
         skin/classic/aero/browser/devtools/debugger-step-in.png      (devtools/debugger-step-in.png)
         skin/classic/aero/browser/devtools/debugger-step-out.png     (devtools/debugger-step-out.png)
         skin/classic/aero/browser/devtools/debugger-step-over.png    (devtools/debugger-step-over.png)
-        skin/classic/aero/browser/devtools/inspector-option-icon.png   (devtools/inspector-option-icon.png)
+        skin/classic/aero/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
+        skin/classic/aero/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
+        skin/classic/aero/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
+        skin/classic/aero/browser/devtools/responsive-background.png (devtools/responsive-background.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png