From 6883a7868fb378b697c7ebd780dc97dbc44a427d Mon Sep 17 00:00:00 2001
From: Paul Rouget <paul@mozilla.com>
Date: Fri, 8 Mar 2013 05:00:00 -0800
Subject: [PATCH] Bug 767678 - Responsive Design mode has no close button.
 r=mikeratcliffe

---
 browser/devtools/responsivedesign/responsivedesign.jsm | 10 ++++++++++
 .../chrome/browser/devtools/responsiveUI.properties    |  3 +++
 .../themes/shared/devtools/responsivedesign.inc.css    |  2 --
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/browser/devtools/responsivedesign/responsivedesign.jsm b/browser/devtools/responsivedesign/responsivedesign.jsm
index 5fd78144d57f..81d0c19c9348 100644
--- a/browser/devtools/responsivedesign/responsivedesign.jsm
+++ b/browser/devtools/responsivedesign/responsivedesign.jsm
@@ -154,6 +154,7 @@ function ResponsiveUI(aWindow, aTab)
   this.bound_addPreset = this.addPreset.bind(this);
   this.bound_removePreset = this.removePreset.bind(this);
   this.bound_rotate = this.rotate.bind(this);
+  this.bound_close = this.close.bind(this);
   this.bound_startResizing = this.startResizing.bind(this);
   this.bound_stopResizing = this.stopResizing.bind(this);
   this.bound_onDrag = this.onDrag.bind(this);
@@ -222,6 +223,7 @@ ResponsiveUI.prototype = {
     this.tab.removeEventListener("TabClose", this);
     this.tabContainer.removeEventListener("TabSelect", this);
     this.rotatebutton.removeEventListener("command", this.bound_rotate, true);
+    this.closebutton.removeEventListener("command", this.bound_close, true);
     this.addbutton.removeEventListener("command", this.bound_addPreset, true);
     this.removebutton.removeEventListener("command", this.bound_removePreset, true);
 
@@ -292,6 +294,7 @@ ResponsiveUI.prototype = {
    *  <toolbar class="devtools-toolbar devtools-responsiveui-toolbar">
    *    <menulist class="devtools-menulist"/> // presets
    *    <toolbarbutton tabindex="0" class="devtools-toolbarbutton" label="rotate"/> // rotate
+   *    <toolbarbutton tabindex="0" class="devtools-toolbarbutton devtools-closebutton" tooltiptext="Leave Responsive Design View"/> // close
    *  </toolbar>
    *  <stack class="browserStack"> From tabbrowser.xml
    *    <browser/>
@@ -334,6 +337,13 @@ ResponsiveUI.prototype = {
     this.rotatebutton.className = "devtools-toolbarbutton";
     this.rotatebutton.addEventListener("command", this.bound_rotate, true);
 
+    this.closebutton = this.chromeDoc.createElement("toolbarbutton");
+    this.closebutton.setAttribute("tabindex", "0");
+    this.closebutton.className = "devtools-toolbarbutton devtools-closebutton";
+    this.closebutton.setAttribute("tooltiptext", this.strings.GetStringFromName("responsiveUI.close"));
+    this.closebutton.addEventListener("command", this.bound_close, true);
+
+    this.toolbar.appendChild(this.closebutton);
     this.toolbar.appendChild(this.menulist);
     this.toolbar.appendChild(this.rotatebutton);
 
diff --git a/browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties b/browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties
index 91ada54c97cf..85a93beaf0fc 100644
--- a/browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties
@@ -35,6 +35,9 @@ responsiveUI.namedResolution=%S (%S)
 # the user to specify a name for a new custom preset.
 responsiveUI.customNamePromptTitle=Responsive Design View
 
+# LOCALIZATION NOTE (responsiveUI.close): tooltip text of the close button.
+responsiveUI.close=Leave Responsive Design View
+
 # LOCALIZATION NOTE  (responsiveUI.customNamePromptMsg): prompt message when asking
 # the user to specify a name for a new custom preset.
 responsiveUI.customNamePromptMsg=Give a name to the %Sx%S preset
diff --git a/browser/themes/shared/devtools/responsivedesign.inc.css b/browser/themes/shared/devtools/responsivedesign.inc.css
index 6933f09f769f..db349bdef6c3 100644
--- a/browser/themes/shared/devtools/responsivedesign.inc.css
+++ b/browser/themes/shared/devtools/responsivedesign.inc.css
@@ -20,9 +20,7 @@
   margin: 10px 0;
   padding: 0;
   box-shadow: none;
-%ifdef XP_WIN
   border-bottom-width: 0;
-%endif
 }
 
 .devtools-responsiveui-toolbar > menulist,