Add back the Quickdial show/hide control.

This also slightly tweaks the grid design styling.
Resolves #563

4 files changed, 25 insertions, 3 deletions

diff --git a/application/palemoon/base/content/newtab/newTab.css b/application/palemoon/base/content/newtab/newTab.css
index 117150b30..fe745d2fd 100644
--- a/application/palemoon/base/content/newtab/newTab.css
+++ b/application/palemoon/base/content/newtab/newTab.css
@@ -42,6 +42,18 @@ input[type=button] {
   pointer-events: none;
 }
 
+/* TOGGLE */
+#newtab-toggle {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
+#newtab-toggle:-moz-locale-dir(rtl) {
+  left: 12px;
+  right: auto;
+}
+
 /* MARGINS */
 #newtab-vertical-margin {
   display: -moz-box;
@@ -100,7 +112,7 @@ input[type=button] {
   -moz-box-orient: vertical;
   min-width: 600px;
   min-height: 400px;
-  transition: 300ms ease-out;
+  transition: 175ms ease-out;
   transition-property: opacity;
 }
 
@@ -136,7 +148,7 @@ input[type=button] {
 .newtab-site {
   position: relative;
   -moz-box-flex: 1;
-  transition: 200ms ease-out;
+  transition: 150ms ease-out;
   transition-property: top, left, opacity;
 }
 
diff --git a/application/palemoon/base/content/newtab/newTab.xhtml b/application/palemoon/base/content/newtab/newTab.xhtml
index eac62c987..de000e723 100644
--- a/application/palemoon/base/content/newtab/newTab.xhtml
+++ b/application/palemoon/base/content/newtab/newTab.xhtml
@@ -54,6 +54,7 @@
     </div>
 
     <div id="newtab-margin-bottom"/>
+    <input id="newtab-toggle" type="button"/>
   </div>
 </body>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/newtab/newTab.js"/>
diff --git a/application/palemoon/base/content/newtab/page.js b/application/palemoon/base/content/newtab/page.js
index cbd6750b6..7117d4527 100644
--- a/application/palemoon/base/content/newtab/page.js
+++ b/application/palemoon/base/content/newtab/page.js
@@ -21,6 +21,10 @@ var gPage = {
 
     // Listen for 'unload' to unregister this page.
     addEventListener("unload", this, false);
+    
+    // Listen for toggle button clicks.
+    let button = document.getElementById("newtab-toggle");
+    button.addEventListener("click", e => this.toggleEnabled(e));
 
     // XXX bug 991111 - Not all click events are correctly triggered when
     // listening from xhtml nodes -- in particular middle clicks on sites, so
@@ -277,6 +281,11 @@ var gPage = {
     }
   },
 
+  toggleEnabled: function(aEvent) {
+    gAllPages.enabled = !gAllPages.enabled;
+    event.stopPropagation();
+  },
+  
   maybeShowAutoMigrationUndoNotification() {
     // sendAsyncMessage("NewTab:MaybeShowAutoMigrationUndoNotification");
   },
diff --git a/application/palemoon/themes/shared/newtab/newTab.css.inc b/application/palemoon/themes/shared/newtab/newTab.css.inc
index 4ffd32d50..3341ba7e5 100644
--- a/application/palemoon/themes/shared/newtab/newTab.css.inc
+++ b/application/palemoon/themes/shared/newtab/newTab.css.inc
@@ -105,7 +105,7 @@ body {
 
 .newtab-site:hover,
 .newtab-site[dragged] {
-  box-shadow: 0 3px 10px rgba(8,20,37,.6);
+  box-shadow: 0 3px 6px 1px rgba(8,20,37,.6);
 }
 
 .newtab-site[dragged] {