Bug 1062256 - Improve the design of the »What is this« bubble on about:newtab [r=adw a=sylvestre]
authorEd Lee <edilee@mozilla.com>
Wed, 24 Sep 2014 21:41:22 -0700
changeset 216869 2a8947c986ed
parent 216868 02da3cf36508
child 216870 3d41bbe16481
push id3946
push useredilee@gmail.com
push date2014-09-28 14:45 +0000
treeherdermozilla-beta@2a8947c986ed [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw, sylvestre
bugs1062256
milestone33.0
Bug 1062256 - Improve the design of the »What is this« bubble on about:newtab [r=adw a=sylvestre] Move customize item to outside the panel. Update various panel styling: spacing, sizing, colors.
browser/base/content/newtab/customize.js
browser/base/content/newtab/intro.js
browser/base/content/newtab/newTab.css
browser/base/content/newtab/newTab.xul
browser/themes/shared/newtab/newTab.inc.css
--- a/browser/base/content/newtab/customize.js
+++ b/browser/base/content/newtab/customize.js
@@ -6,46 +6,42 @@
 
 let gCustomize = {
   _nodeIDSuffixes: [
     "blank",
     "button",
     "classic",
     "enhanced",
     "panel",
-    "what",
   ],
 
   _nodes: {},
 
   init: function() {
     for (let idSuffix of this._nodeIDSuffixes) {
       this._nodes[idSuffix] = document.getElementById("newtab-customize-" + idSuffix);
     }
 
     this._nodes.button.setAttribute("title", newTabString("customize.title"));
-    ["enhanced", "classic", "blank", "what"].forEach(name => {
+    ["enhanced", "classic", "blank"].forEach(name => {
       this._nodes[name].firstChild.textContent = newTabString("customize." + name);
     });
 
     this._nodes.button.addEventListener("click", e => this.showPanel());
     this._nodes.blank.addEventListener("click", e => {
       gAllPages.enabled = false;
     });
     this._nodes.classic.addEventListener("click", e => {
       gAllPages.enabled = true;
       gAllPages.enhanced = false;
     });
     this._nodes.enhanced.addEventListener("click", e => {
       gAllPages.enabled = true;
       gAllPages.enhanced = true;
     });
-    this._nodes.what.addEventListener("click", e => {
-      gIntro.showPanel();
-    });
 
     this.updateSelected();
   },
 
   showPanel: function() {
     if (!DirectoryLinksProvider.enabled) {
       gAllPages.enabled = !gAllPages.enabled;
       return;
--- a/browser/base/content/newtab/intro.js
+++ b/browser/base/content/newtab/intro.js
@@ -6,45 +6,46 @@
 
 const PREF_INTRO_SHOWN = "browser.newtabpage.introShown";
 
 let gIntro = {
   _introShown: Services.prefs.getBoolPref(PREF_INTRO_SHOWN),
 
   _nodeIDSuffixes: [
     "panel",
+    "what",
   ],
 
   _nodes: {},
 
   init: function() {
     for (let idSuffix of this._nodeIDSuffixes) {
       this._nodes[idSuffix] = document.getElementById("newtab-intro-" + idSuffix);
     }
 
+    this._nodes.what.textContent = newTabString("customize.what");
+
     this._nodes.panel.addEventListener("popupshowing", e => this._setUpPanel());
+    this._nodes.what.addEventListener("click", e => this.showPanel());
   },
 
   showIfNecessary: function() {
     if (!DirectoryLinksProvider.enabled) {
       return;
     }
 
     if (!this._introShown) {
       Services.prefs.setBoolPref(PREF_INTRO_SHOWN, true);
       this.showPanel();
     }
   },
 
   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() {
     // Build the panel if necessary
     if (this._nodes.panel.childNodes.length == 0) {
       let h1 = document.createElementNS(HTML_NAMESPACE, "h1");
       this._nodes.panel.appendChild(h1);
       h1.textContent = newTabString("intro.header");
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -44,31 +44,51 @@ input[type=button] {
   right: 6px;
 }
 
 #newtab-customize-button:-moz-locale-dir(rtl) {
   left: 6px;
   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;
 }
 
 /* MARGINS */
 #newtab-vertical-margin {
   display: -moz-box;
   position: relative;
@@ -226,22 +246,22 @@ input[type=button] {
   line-height: 20px;
   padding: 15px 10px;
   position: absolute;
   text-align: start;
 }
 
 #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 */
 .newtab-control {
   position: absolute;
   top: 4px;
   opacity: 0;
   transition: opacity 100ms ease-out;
--- a/browser/base/content/newtab/newTab.xul
+++ b/browser/base/content/newtab/newTab.xul
@@ -16,17 +16,17 @@
   %searchBarDTD;
 ]>
 
 <xul:window id="newtab-window" xmlns="http://www.w3.org/1999/xhtml"
             xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
             title="&newtab.pageTitle;">
 
   <xul:panel id="newtab-intro-panel" orient="vertical" type="arrow"
-             noautohide="true" position="leftcenter topright">
+             noautohide="true">
   </xul:panel>
 
   <xul:panel id="newtab-search-panel" orient="vertical" type="arrow"
              noautohide="true">
     <xul:hbox id="newtab-search-manage" class="newtab-search-panel-engine">
       <xul:label>&cmd_engineManager.label;</xul:label>
     </xul:hbox>
   </xul:panel>
@@ -37,19 +37,16 @@
       <xul:label/>
     </xul:hbox>
     <xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-item">
       <xul:label/>
     </xul:hbox>
     <xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item">
       <xul:label/>
     </xul:hbox>
-    <xul:hbox id="newtab-customize-what" class="newtab-customize-panel-item">
-      <xul:label/>
-    </xul:hbox>
   </xul:panel>
 
   <div id="newtab-scrollbox">
 
     <div id="newtab-vertical-margin">
 
       <div id="newtab-margin-top"/>
 
@@ -87,16 +84,18 @@
 
         <div class="newtab-side-margin"/>
       </div>
 
       <div id="newtab-margin-bottom"/>
 
     </div>
 
+    <div id="newtab-intro-what"></div>
+
     <input id="newtab-customize-button" type="button"/>
   </div>
 
   <xul:script type="text/javascript;version=1.8"
               src="chrome://browser/content/newtab/newTab.js"/>
   <xul:script type="text/javascript;version=1.8"
               src="chrome://browser/content/searchSuggestionUI.js"/>
 </xul:window>
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -130,16 +130,17 @@
 .newtab-site[type=enhanced] .newtab-thumbnail,
 .newtab-site[type=organic] .newtab-thumbnail,
 .newtab-site[type=sponsored] .newtab-thumbnail {
   background-position: center center;
   background-size: auto;
 }
 
 /* TITLES */
+#newtab-intro-what,
 .newtab-sponsored,
 .newtab-title {
   color: #5c5c5c;
 }
 
 .newtab-site:hover .newtab-title {
   color: #222;
 }