From 0b385fc5e6693947e5915435ea6ed0933fba8345 Mon Sep 17 00:00:00 2001
From: Daniel Brooks <db48x@db48x.net>
Date: Mon, 13 Sep 2010 09:46:22 -0400
Subject: [PATCH] about:start - let the user toggle between graphs and tables,
 with graphs as the default

---
 toolkit/content/aboutStartup.js               | 16 +++++++
 toolkit/content/aboutStartup.xhtml            | 42 +++++++++++--------
 .../en-US/chrome/global/aboutStartup.dtd      |  4 +-
 .../themes/winstripe/global/aboutStartup.css  | 24 +++++++++--
 4 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/toolkit/content/aboutStartup.js b/toolkit/content/aboutStartup.js
index 15abf04ce93..3375a39b7ef 100755
--- a/toolkit/content/aboutStartup.js
+++ b/toolkit/content/aboutStartup.js
@@ -254,3 +254,19 @@ function tr()
   Array.forEach(arguments, function(cell) { row.appendChild(cell); });
   return row;
 }
+
+function showTable()
+{
+  $("#showtable").hide();
+  $("#showgraph").show();
+  $("#graphs").hide();
+  $("#tables").show();
+}
+
+function showGraph()
+{
+  $("#showgraph").hide();
+  $("#showtable").show();
+  $("#tables").hide();
+  $("#graphs").show();
+}
diff --git a/toolkit/content/aboutStartup.xhtml b/toolkit/content/aboutStartup.xhtml
index b1576ee678b..ee5b3b6cc9a 100755
--- a/toolkit/content/aboutStartup.xhtml
+++ b/toolkit/content/aboutStartup.xhtml
@@ -29,24 +29,32 @@
       <tr><td>&about.startup.app.ready;</td><td id="restored">—</td><td>—</td></tr>
     </table>
 
-    <div id="graph"/>
-    <div id="overview"/>
+    <div id="toggle-container">
+      <a class="toggle" id="showtable" href="#" onclick="showTable()">&about.startup.table;</a>
+      <a class="toggle" id="showgraph" href="#" onclick="showGraph()">&about.startup.graph;</a>
+    </div>
 
-    <h1>&about.startup.table;</h1>
-    <table id="duration-table">
-      <tr>
-        <th>&about.startup.timestamp;</th>
-        <th>&about.startup.duration.launch;</th>
-        <th>&about.startup.duration.startup;</th>
-        <th>&about.startup.duration.ready;</th>
-        <th colspan="4">&about.startup.version;</th>
-      </tr>
-      <tr class="empty"><td colspan="8"><i>&about.startup.noevents;</i></td></tr>
-    </table>
-    <table id="event-table">
-      <tr><th>&about.startup.timestamp;</th><th>&about.startup.eventdesc;</th></tr>
-      <tr class="empty"><td colspan="2"><i>&about.startup.noevents;</i></td></tr>
-    </table>
+    <div id="graphs">
+      <div id="graph"/>
+      <div id="overview"/>
+    </div>
+
+    <div id="tables">
+      <table id="duration-table">
+        <tr>
+          <th>&about.startup.timestamp;</th>
+          <th>&about.startup.duration.launch;</th>
+          <th>&about.startup.duration.startup;</th>
+          <th>&about.startup.duration.ready;</th>
+          <th colspan="4">&about.startup.version;</th>
+        </tr>
+        <tr class="empty"><td colspan="8"><i>&about.startup.noevents;</i></td></tr>
+      </table>
+      <table id="event-table">
+        <tr><th>&about.startup.timestamp;</th><th>&about.startup.eventdesc;</th></tr>
+        <tr class="empty"><td colspan="2"><i>&about.startup.noevents;</i></td></tr>
+      </table>
+    </div>
     <script type="application/javascript;version=1.8" src="chrome://global/content/aboutStartup.js"/>
   </body>
 </html>
diff --git a/toolkit/locales/en-US/chrome/global/aboutStartup.dtd b/toolkit/locales/en-US/chrome/global/aboutStartup.dtd
index 9584d0ec9e7..39451fbd975 100644
--- a/toolkit/locales/en-US/chrome/global/aboutStartup.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutStartup.dtd
@@ -36,7 +36,7 @@ ready to use. -->
 <!ENTITY about.startup.duration.ready "Elapsed Time">
 
 <!ENTITY about.startup.version "Version">
-<!ENTITY about.startup.table "Table">
-<!ENTITY about.startup.graph "Graph">
+<!ENTITY about.startup.table "Show Table">
+<!ENTITY about.startup.graph "Show Graph">
 <!ENTITY about.startup.eventdesc "Event Description">
 <!ENTITY about.startup.noevents "No Events Recorded">
diff --git a/toolkit/themes/winstripe/global/aboutStartup.css b/toolkit/themes/winstripe/global/aboutStartup.css
index 3ac2769a887..4e8202b6287 100644
--- a/toolkit/themes/winstripe/global/aboutStartup.css
+++ b/toolkit/themes/winstripe/global/aboutStartup.css
@@ -1,6 +1,6 @@
 h1 {
-  font-size: 140%;
-  margin: .5em 0;
+    font-size: 140%;
+    margin: .5em 0;
 }
 
 #graph, #overview {
@@ -13,6 +13,22 @@ h1 {
     height: 100px;
 }
 
-.legend table {
-  width: auto;
+.toggle {
+    font-size: smaller;
+    padding: 1pt;
+    position: absolute;
+    right: 0;
+    text-align: right;
+}
+
+#showgraph {
+    display: none;
+}
+
+#tables {
+    display: none;
+}
+
+.legend table {
+    width: auto;
 }