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 id17440
push userdb48x@yahoo.com
push dateWed, 08 Dec 2010 04:15:54 +0000
treeherdermozilla-central@a89f24bf1798 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
milestone2.0b6pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;
 }