From 6730caa507dfb1f6f7ec2327430be34ac98fc59b Mon Sep 17 00:00:00 2001
From: Ed Lee <edilee@mozilla.com>
Date: Thu, 24 Jul 2014 17:20:03 -0700
Subject: [PATCH] Bug 1037091 - Add gear button with doorhanger configuration
 of newtab page [r=adw] Add new newtab control file for the customize
 functionality. Reuse existing panel styling of the search engine panel.

--HG--
extra : rebase_source : 77e84fad6997504040831872d80069d024b1d570
---
 browser/base/content/newtab/customize.js      | 62 +++++++++++++++++++
 browser/base/content/newtab/newTab.css        | 17 +++--
 browser/base/content/newtab/newTab.js         |  1 +
 browser/base/content/newtab/newTab.xul        | 16 ++++-
 browser/base/content/newtab/page.js           | 18 ++----
 .../locales/en-US/chrome/browser/newTab.dtd   |  4 ++
 .../en-US/chrome/browser/newTab.properties    |  2 -
 browser/themes/shared/newtab/newTab.inc.css   | 23 +++----
 8 files changed, 107 insertions(+), 36 deletions(-)
 create mode 100644 browser/base/content/newtab/customize.js

diff --git a/browser/base/content/newtab/customize.js b/browser/base/content/newtab/customize.js
new file mode 100644
index 00000000000..011d930571e
--- /dev/null
+++ b/browser/base/content/newtab/customize.js
@@ -0,0 +1,62 @@
+#ifdef 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+#endif
+
+let gCustomize = {
+  _nodeIDSuffixes: [
+    "blank",
+    "button",
+    "classic",
+    "enhanced",
+    "panel",
+  ],
+
+  _nodes: {},
+
+  init: function() {
+    for (let idSuffix of this._nodeIDSuffixes) {
+      this._nodes[idSuffix] = document.getElementById("newtab-customize-" + idSuffix);
+    }
+
+    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.updateSelected();
+  },
+
+  showPanel: function() {
+    let {button, panel} = this._nodes;
+    panel.openPopup(button);
+    button.setAttribute("active", true);
+    panel.addEventListener("popuphidden", function onHidden() {
+      panel.removeEventListener("popuphidden", onHidden);
+      button.removeAttribute("active");
+    });
+  },
+
+  updateSelected: function() {
+    let {enabled, enhanced} = gAllPages;
+    let selected = enabled ? enhanced ? "enhanced" : "classic" : "blank";
+    ["enhanced", "classic", "blank"].forEach(id => {
+      let node = this._nodes[id];
+      if (id == selected) {
+        node.setAttribute("selected", true);
+      }
+      else {
+        node.removeAttribute("selected");
+      }
+    });
+  },
+};
diff --git a/browser/base/content/newtab/newTab.css b/browser/base/content/newtab/newTab.css
index 3e34309ec9b..ca3a2c7ac04 100644
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -38,15 +38,15 @@ input[type=button] {
   pointer-events: none;
 }
 
-/* TOGGLE */
-#newtab-toggle {
+/* CUSTOMIZE */
+#newtab-customize-button {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 6px;
+  right: 6px;
 }
 
-#newtab-toggle:-moz-locale-dir(rtl) {
-  left: 12px;
+#newtab-customize-button:-moz-locale-dir(rtl) {
+  left: 6px;
   right: auto;
 }
 
@@ -351,6 +351,7 @@ input[type=button] {
   transition-duration: 0ms;
 }
 
+#newtab-customize-panel .panel-arrowcontent,
 #newtab-search-panel .panel-arrowcontent {
   -moz-padding-start: 0;
   -moz-padding-end: 0;
@@ -359,6 +360,7 @@ input[type=button] {
   background: rgb(248, 250, 251);
 }
 
+.newtab-customize-panel-item,
 .newtab-search-panel-engine {
   -moz-box-align: center;
   padding-top: 4px;
@@ -367,6 +369,7 @@ input[type=button] {
   -moz-padding-end: 24px;
 }
 
+.newtab-customize-panel-item:not(:last-child),
 .newtab-search-panel-engine:not(:last-child) {
   border-bottom: 1px solid #ccc;
 }
@@ -378,12 +381,14 @@ input[type=button] {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
 
+.newtab-customize-panel-item > label,
 .newtab-search-panel-engine > label {
   -moz-padding-start: 0;
   -moz-margin-start: 0;
   color: rgb(130, 132, 133);
 }
 
+.newtab-customize-panel-item[selected],
 .newtab-search-panel-engine[selected] {
   background: url("chrome://global/skin/menu/shared-menu-check.png") center left 4px no-repeat transparent;
 }
diff --git a/browser/base/content/newtab/newTab.js b/browser/base/content/newtab/newTab.js
index bd059d30350..b62191d907d 100644
--- a/browser/base/content/newtab/newTab.js
+++ b/browser/base/content/newtab/newTab.js
@@ -57,6 +57,7 @@ const XUL_NAMESPACE = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only
 #include updater.js
 #include undo.js
 #include search.js
+#include customize.js
 
 // Everything is loaded. Initialize the New Tab Page.
 gPage.init();
diff --git a/browser/base/content/newtab/newTab.xul b/browser/base/content/newtab/newTab.xul
index 4cc1c4ac28e..cb8be859190 100644
--- a/browser/base/content/newtab/newTab.xul
+++ b/browser/base/content/newtab/newTab.xul
@@ -34,6 +34,19 @@
     </xul:hbox>
   </xul:panel>
 
+  <xul:panel id="newtab-customize-panel" orient="vertical" type="arrow"
+             noautohide="true">
+    <xul:hbox id="newtab-customize-enhanced" class="newtab-customize-panel-item">
+      <xul:label>&newtab.customize.enhanced;</xul:label>
+    </xul:hbox>
+    <xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-item">
+      <xul:label>&newtab.customize.classic;</xul:label>
+    </xul:hbox>
+    <xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item">
+      <xul:label>&newtab.customize.blank;</xul:label>
+    </xul:hbox>
+  </xul:panel>
+
   <div id="newtab-scrollbox">
 
     <div id="newtab-vertical-margin">
@@ -78,7 +91,8 @@
       <div id="newtab-margin-bottom"/>
 
     </div>
-    <input id="newtab-toggle" type="button"/>
+
+    <input id="newtab-customize-button" type="button" title="&newtab.customize.title;"/>
   </div>
 
   <xul:script type="text/javascript;version=1.8"
diff --git a/browser/base/content/newtab/page.js b/browser/base/content/newtab/page.js
index 782672633db..c2a13c1feba 100644
--- a/browser/base/content/newtab/page.js
+++ b/browser/base/content/newtab/page.js
@@ -41,6 +41,9 @@ let gPage = {
       this._init();
 
     this._updateAttributes(enabled);
+
+    // Initialize customize controls.
+    gCustomize.init();
   },
 
   /**
@@ -48,6 +51,8 @@ let gPage = {
    */
   observe: function Page_observe(aSubject, aTopic, aData) {
     if (aTopic == "nsPref:changed") {
+      gCustomize.updateSelected();
+
       let enabled = gAllPages.enabled;
       this._updateAttributes(enabled);
 
@@ -137,7 +142,7 @@ let gPage = {
    */
   _updateAttributes: function Page_updateAttributes(aValue) {
     // Set the nodes' states.
-    let nodeSelector = "#newtab-scrollbox, #newtab-toggle, #newtab-grid, #newtab-search-container";
+    let nodeSelector = "#newtab-scrollbox, #newtab-grid, #newtab-search-container";
     for (let node of document.querySelectorAll(nodeSelector)) {
       if (aValue)
         node.removeAttribute("page-disabled");
@@ -153,10 +158,6 @@ let gPage = {
       else
         input.setAttribute("tabindex", "-1");
     }
-
-    // Update the toggle button's title.
-    let toggle = document.getElementById("newtab-toggle");
-    toggle.setAttribute("title", newTabString(aValue ? "hide" : "show"));
   },
 
   /**
@@ -169,13 +170,6 @@ let gPage = {
         break;
       case "click":
         let {button, target} = aEvent;
-        if (target.id == "newtab-toggle") {
-          if (button == 0) {
-            gAllPages.enabled = !gAllPages.enabled;
-          }
-          break;
-        }
-
         // Go up ancestors until we find a Site or not
         while (target) {
           if (target.hasOwnProperty("_newtabSite")) {
diff --git a/browser/locales/en-US/chrome/browser/newTab.dtd b/browser/locales/en-US/chrome/browser/newTab.dtd
index 0996712e07e..2be5896dd31 100644
--- a/browser/locales/en-US/chrome/browser/newTab.dtd
+++ b/browser/locales/en-US/chrome/browser/newTab.dtd
@@ -4,6 +4,10 @@
 
 <!-- These strings are used in the about:newtab page -->
 <!ENTITY newtab.pageTitle "New Tab">
+<!ENTITY newtab.customize.title "Customize your New Tab page">
+<!ENTITY newtab.customize.enhanced "Enhanced">
+<!ENTITY newtab.customize.classic "Classic">
+<!ENTITY newtab.customize.blank "Blank">
 <!ENTITY newtab.undo.removedLabel "Thumbnail removed.">
 <!ENTITY newtab.undo.undoButton "Undo.">
 <!ENTITY newtab.undo.restoreButton "Restore All.">
diff --git a/browser/locales/en-US/chrome/browser/newTab.properties b/browser/locales/en-US/chrome/browser/newTab.properties
index 0ec4df801f9..c0f4f390bff 100644
--- a/browser/locales/en-US/chrome/browser/newTab.properties
+++ b/browser/locales/en-US/chrome/browser/newTab.properties
@@ -5,6 +5,4 @@
 newtab.pin=Pin this site at its current position
 newtab.unpin=Unpin this site
 newtab.block=Remove this site
-newtab.show=Show the new tab page
-newtab.hide=Hide the new tab page
 newtab.sponsored=Show information on sponsored tiles
diff --git a/browser/themes/shared/newtab/newTab.inc.css b/browser/themes/shared/newtab/newTab.inc.css
index 16a6a44e1b9..1f628ac7067 100644
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -58,24 +58,17 @@
   outline: 1px dotted;
 }
 
-/* TOGGLE */
-#newtab-toggle {
-  width: 16px;
-  height: 16px;
-  padding: 0;
+/* CUSTOMIZE */
+#newtab-customize-button {
+  background-color: transparent;
+  background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0);
   border: none;
-  background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png);
+  height: 32px;
+  width: 32px;
 }
 
-#newtab-toggle[page-disabled] {
-  background-position: -232px 0;
-}
-
-@media (min-resolution: 2dppx) {
-  #newtab-toggle {
-    background-image: url(chrome://browser/skin/newtab/controls@2x.png);
-    background-size: 296px;
-  }
+#newtab-customize-button:-moz-any(:hover, :active, [active]) {
+  background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
 }
 
 /* CELLS */