Bug 1062256 - Improve the design of the »What is this« bubble on about:newtab [r=adw]

Move customize item to outside the panel. Update various panel styling: spacing, sizing, colors.

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();
   },

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() {

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 */

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>
 

browser/themes/shared/newtab/newTab.inc.css

@@ -135,6 +135,7 @@
 }
 
 /* TITLES */
+#newtab-intro-what,
 .newtab-sponsored,
 .newtab-title {
   color: #5c5c5c;