about:start - let the user toggle between graphs and tables, with graphs as the default

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

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="toggle-container">
-    <div id="overview"/>
+      <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>
+    <div id="graphs">
-    <table id="duration-table">
+      <div id="graph"/>
-      <tr>
+      <div id="overview"/>
-        <th>&about.startup.timestamp;</th>
+    </div>
-        <th>&about.startup.duration.launch;</th>
+
-        <th>&about.startup.duration.startup;</th>
+    <div id="tables">
-        <th>&about.startup.duration.ready;</th>
+      <table id="duration-table">
-        <th colspan="4">&about.startup.version;</th>
+        <tr>
-      </tr>
+          <th>&about.startup.timestamp;</th>
-      <tr class="empty"><td colspan="8"><i>&about.startup.noevents;</i></td></tr>
+          <th>&about.startup.duration.launch;</th>
-    </table>
+          <th>&about.startup.duration.startup;</th>
-    <table id="event-table">
+          <th>&about.startup.duration.ready;</th>
-      <tr><th>&about.startup.timestamp;</th><th>&about.startup.eventdesc;</th></tr>
+          <th colspan="4">&about.startup.version;</th>
-      <tr class="empty"><td colspan="2"><i>&about.startup.noevents;</i></td></tr>
+        </tr>
-    </table>
+        <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>

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.table "Show Table">
-<!ENTITY about.startup.graph "Graph">
+<!ENTITY about.startup.graph "Show Graph">
 <!ENTITY about.startup.eventdesc "Event Description">
 <!ENTITY about.startup.noevents "No Events Recorded">

toolkit/themes/winstripe/global/aboutStartup.css

@@ -1,6 +1,6 @@
 h1 {
-  font-size: 140%;
+    font-size: 140%;
-  margin: .5em 0;
+    margin: .5em 0;
 }
 
 #graph, #overview {
@@ -13,6 +13,22 @@ h1 {
     height: 100px;
 }
 
-.legend table {
+.toggle {
-  width: auto;
+    font-size: smaller;
+    padding: 1pt;
+    position: absolute;
+    right: 0;
+    text-align: right;
+}
+
+#showgraph {
+    display: none;
+}
+
+#tables {
+    display: none;
+}
+
+.legend table {
+    width: auto;
 }