about:start - let the user toggle between graphs and tables, with graphs as the default
authorDaniel Brooks <db48x@db48x.net>
Mon, 13 Sep 2010 09:46:22 -0400
changeset 58840 4a6800b88bbc440c40c26e9cc43e4dfd641cb14c
parent 58839 e08982b4328f9341ba72fd7c148efff637ef1458
child 58841 0198aa4d41f738be6bd5152adaa5621ad104e036
push idunknown
push userunknown
push dateunknown
milestone2.0b6pre
about:start - let the user toggle between graphs and tables, with graphs as the default
toolkit/content/aboutStartup.js
toolkit/content/aboutStartup.xhtml
toolkit/locales/en-US/chrome/global/aboutStartup.dtd
toolkit/themes/winstripe/global/aboutStartup.css
--- a/toolkit/content/aboutStartup.js
+++ b/toolkit/content/aboutStartup.js
@@ -249,8 +249,24 @@ function td(str)
 }
 
 function tr()
 {
   let row = document.createElement("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();
+}
--- a/toolkit/content/aboutStartup.xhtml
+++ b/toolkit/content/aboutStartup.xhtml
@@ -24,29 +24,37 @@
     <h1>&about.startup.title;</h1>
     <table>
       <tr><th></th><th>&about.startup.timestamp;</th><th>&about.startup.elapsed;</th></tr>
       <tr><td>&about.startup.app.launched;</td><td id="launched">—</td><td>—</td></tr>
       <tr><td>&about.startup.app.started;</td><td id="started">—</td><td>—</td></tr>
       <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>
+
+    <div id="graphs">
+      <div id="graph"/>
+      <div id="overview"/>
+    </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="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>
--- a/toolkit/locales/en-US/chrome/global/aboutStartup.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutStartup.dtd
@@ -31,12 +31,12 @@ startup process. -->
 <!ENTITY about.startup.duration.startup "Startup Time">
 
 <!-- LOCALIZATION NOTE (about.startup.duration.ready): The total time
 that the user had to wait between when they lauched firefox and it was
 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">
--- a/toolkit/themes/winstripe/global/aboutStartup.css
+++ b/toolkit/themes/winstripe/global/aboutStartup.css
@@ -1,18 +1,34 @@
 h1 {
-  font-size: 140%;
-  margin: .5em 0;
+    font-size: 140%;
+    margin: .5em 0;
 }
 
 #graph, #overview {
     margin: 0;
     width: 100%;
     height: 350px;
 }
 
 #overview {
     height: 100px;
 }
 
+.toggle {
+    font-size: smaller;
+    padding: 1pt;
+    position: absolute;
+    right: 0;
+    text-align: right;
+}
+
+#showgraph {
+    display: none;
+}
+
+#tables {
+    display: none;
+}
+
 .legend table {
-  width: auto;
+    width: auto;
 }