From c740c28fc9301b002d88b87f8f9c8ad06ef43d96 Mon Sep 17 00:00:00 2001
From: Ed Lee <edilee@mozilla.com>
Date: Wed, 24 Sep 2014 21:41:22 -0700
Subject: [PATCH] =?UTF-8?q?Bug=201062256=20-=20Improve=20the=20design=20of?=
 =?UTF-8?q?=20the=20=C2=BBWhat=20is=20this=C2=AB=20bubble=20on=20about:new?=
 =?UTF-8?q?tab=20[r=3Dadw]=20Move=20customize=20item=20to=20outside=20the?=
 =?UTF-8?q?=20panel.=20Update=20various=20panel=20styling:=20spacing,=20si?=
 =?UTF-8?q?zing,=20colors.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/base/content/newtab/customize.js    |  4 ---
 browser/base/content/newtab/intro.js        |  9 +++---
 browser/base/content/newtab/newTab.css      | 36 ++++++++++++++++-----
 browser/base/content/newtab/newTab.xul      |  7 ++--
 browser/themes/shared/newtab/newTab.inc.css |  1 +
 5 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/browser/base/content/newtab/customize.js b/browser/base/content/newtab/customize.js
index 48f212a4391..270e1f70de1 100644
--- a/browser/base/content/newtab/customize.js
+++ b/browser/base/content/newtab/customize.js
@@ -11,7 +11,6 @@ let gCustomize = {
     "classic",
     "enhanced",
     "panel",
-    "what",
   ],
 
   _nodes: {},
@@ -33,9 +32,6 @@ let gCustomize = {
       gAllPages.enabled = true;
       gAllPages.enhanced = true;
     });
-    this._nodes.what.addEventListener("click", e => {
-      gIntro.showPanel();
-    });
 
     this.updateSelected();
   },
diff --git a/browser/base/content/newtab/intro.js b/browser/base/content/newtab/intro.js
index 6829113cc09..bba69339b14 100644
--- a/browser/base/content/newtab/intro.js
+++ b/browser/base/content/newtab/intro.js
@@ -11,6 +11,7 @@ let gIntro = {
 
   _nodeIDSuffixes: [
     "panel",
+    "what",
   ],
 
   _nodes: {},
@@ -21,6 +22,7 @@ let gIntro = {
     }
 
     this._nodes.panel.addEventListener("popupshowing", e => this._setUpPanel());
+    this._nodes.what.addEventListener("click", e => this.showPanel());
   },
 
   showIfNecessary: function() {
@@ -31,11 +33,8 @@ let gIntro = {
   },
 
   showPanel: function() {
-    // Open the customize menu first
-    gCustomize.showPanel().then(nodes => {
-      // Point the panel at the 'what' menu item
-      this._nodes.panel.openPopup(nodes.what);
-    });
+    // Point the panel at the 'what' link
+    this._nodes.panel.openPopup(this._nodes.what);
   },
 
   _setUpPanel: function() {
diff --git a/browser/base/content/newtab/newTab.css b/browser/base/content/newtab/newTab.css
index bcb271d8674..d652394d0a2 100644
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -49,21 +49,41 @@ input[type=button] {
   right: auto;
 }
 
+#newtab-intro-what {
+  cursor: pointer;
+  position: absolute;
+  right: 55px;
+  top: 15px;
+}
+
+#newtab-intro-what:-moz-locale-dir(rtl) {
+  left: 55px;
+  right: auto;
+}
+
 #newtab-intro-panel {
-  color: #737373;
+  color: #6a7b86;
   font-size: 15px;
-  line-height: 20px;
-  margin-top: -32px;
-  padding: 10px;
-  width: 500px;
+  line-height: 19px;
+  width: 520px;
 }
 
 #newtab-intro-panel h1 {
   color: #343f48;
   font-family: Open Sans, sans-serif;
   font-size: 30px;
+  margin: 20px;
 }
 
+#newtab-intro-panel p {
+  margin: 10px 20px;
+}
+
+#newtab-intro-panel p:last-child {
+  margin-bottom: 30px;
+}
+
+#newtab-intro-what:hover,
 #newtab-intro-panel a {
   color: #4a90e2;
 }
@@ -231,12 +251,12 @@ input[type=button] {
 
 #newtab-intro-panel input,
 .sponsored-explain input {
-  background-size: 20px;
-  height: 20px;
+  background-size: 18px;
+  height: 18px;
   opacity: 1;
   pointer-events: none;
   position: static;
-  width: 20px;
+  width: 18px;
 }
 
 /* CONTROLS */
diff --git a/browser/base/content/newtab/newTab.xul b/browser/base/content/newtab/newTab.xul
index 8517ddf34ee..5bc716cf7a7 100644
--- a/browser/base/content/newtab/newTab.xul
+++ b/browser/base/content/newtab/newTab.xul
@@ -21,7 +21,7 @@
             title="&newtab.pageTitle;">
 
   <xul:panel id="newtab-intro-panel" orient="vertical" type="arrow"
-             noautohide="true" position="leftcenter topright">
+             noautohide="true">
     <h1>&newtab.intro.header;</h1>
   </xul:panel>
 
@@ -43,9 +43,6 @@
     <xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item">
       <xul:label>&newtab.customize.blank;</xul:label>
     </xul:hbox>
-    <xul:hbox id="newtab-customize-what" class="newtab-customize-panel-item">
-      <xul:label>&newtab.customize.what;</xul:label>
-    </xul:hbox>
   </xul:panel>
 
   <div id="newtab-scrollbox">
@@ -93,6 +90,8 @@
 
     </div>
 
+    <div id="newtab-intro-what">&newtab.customize.what;</div>
+
     <input id="newtab-customize-button" type="button" title="&newtab.customize.title;"/>
   </div>
 
diff --git a/browser/themes/shared/newtab/newTab.inc.css b/browser/themes/shared/newtab/newTab.inc.css
index 0c3aabe0c45..0ff83516712 100644
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -135,6 +135,7 @@
 }
 
 /* TITLES */
+#newtab-intro-what,
 .newtab-sponsored,
 .newtab-title {
   color: #5c5c5c;