about:startup - get the graphs sized and scaled correctly
authorDaniel Brooks <db48x@db48x.net>
Sun, 12 Sep 2010 10:29:27 -0400
changeset 58833 26b25563cab6e0563b92a44aed59b3539efc0e15
parent 58832 4e118384113d1addea206b14f1b6db54b1216a6c
child 58834 cce7ee266da0f09d71239d469e90786a0588825a
push id1
push usershaver@mozilla.com
push dateTue, 04 Jan 2011 17:58:04 +0000
milestone2.0b6pre
about:startup - get the graphs sized and scaled correctly
toolkit/content/aboutStartup.js
toolkit/content/aboutStartup.xhtml
toolkit/themes/faststripe/global/jar.mn
toolkit/themes/gnomestripe/global/aboutStartup.css
toolkit/themes/gnomestripe/global/jar.mn
toolkit/themes/pinstripe/global/aboutStartup.css
toolkit/themes/pinstripe/global/jar.mn
toolkit/themes/winstripe/global/aboutStartup.css
toolkit/themes/winstripe/global/jar.mn
--- a/toolkit/content/aboutStartup.js
+++ b/toolkit/content/aboutStartup.js
@@ -20,28 +20,28 @@ displayDuration("restored", restored - s
 function displayTimestamp(id, µs) document.getElementById(id).textContent = formatstamp(µs);
 function displayDuration(id, µs) document.getElementById(id).nextSibling.textContent = formatµs(µs);
 
 function formatstamp(µs) new Date(µs/1000) +" ("+ formatµs(µs) +")";
 function formatµs(µs) µs + " µs";
 function formatms(ms) ms + " ms";
 
 function point(stamp, µs, v, b) [stamp / 1000, µs / 1000, { appVersion: v, appBuild: b }];
-function range(a, b) ({ from: a, to: b || a });
-function mark(x, y) ({ xaxis: x, yaxis: y });
-function major(r) { r.color = "black"; r.lineWidth = "3"; return r; }
-function minor(r) { r.color = "lightgrey"; r.lineWidth = "1"; return r; }
+function range(a, b) ({ from: a / 1000, to: (b || a) / 1000 });
+function mark(x, y) { var r = {}; x && (r.xaxis = x); y && (r.yaxis = y); return r };
+function major(r) { r.color = "#444"; return r; }
+function minor(r) { r.color = "#AAA"; return r; }
 function label(r, l) { r.label = l; return r; }
-function majorMark(x, l) mark(label(major(range(x)), l));
-function minorMark(x, l) mark(label(minor(range(x)), l));
-function extensionMark(x, l) mark(label(range(x), l));
+function majorMark(x, l) label(major(mark(range(x))), l);
+function minorMark(x, l) label(minor(mark(range(x))), l);
+function extensionMark(x, l) label(mark(range(x)), l);
 
 var graph, overview;
 var options = { legend: { show: false, position: "ne", margin: 10, labelBoxBorderColor: "transparent" },
-                xaxis: { mode: "time", min: Date.now() - 259200000 },
+                xaxis: { mode: "time" },
                 yaxis: { min: 0, tickFormatter: formatms },
                 selection: { mode: "xy", color: "#00A" },
                 grid: { show: true, borderWidth: 0, markings: [], aboveData: true, tickColor: "white" },
                 series: { lines: { show: true, fill: true },
                           points: { show: true, fill: true },
                         }
               };
 var overviewOpts = $.extend(true, {}, options,
@@ -67,30 +67,33 @@ var file = Components.classes["@mozilla.
                      .getService(Components.interfaces.nsIProperties)
                      .get("ProfD", Components.interfaces.nsIFile);
 file.append("startup.sqlite");
 
 var svc = Components.classes["@mozilla.org/storage/service;1"]
                     .getService(Components.interfaces.mozIStorageService);
 var db = svc.openDatabase(file);
 var query = db.createStatement("SELECT timestamp, launch, startup, appVersion, appBuild, platformVersion, platformBuild FROM duration");
+var lastver, lastbuild;
 query.executeAsync({
   handleResult: function(results)
   {
-    var lastver, lastbuild;
     for (let row = results.getNextRow(); row; row = results.getNextRow())
     {
       var stamp = row.getResultByName("timestamp");
       var version = row.getResultByName("appVersion");
       var build = row.getResultByName("appBuild");
       if (lastver != version)
-        options.grid.markings.push(majorMark(stamp));
+      {
+        options.grid.markings.push(majorMark(stamp, "Firefox "+ version +" ("+ build +")"));
+      }
       else
         if (lastbuild != build)
-          options.grid.markings.push(minorMark(stamp));
+          options.grid.markings.push(minorMark(stamp, "Firefox "+ version +" ("+ build +")"));
+
       lastver = version;
       lastbuild = build;
       var l, s;
       series[1].data.push(point(stamp, l = row.getResultByName("launch"), version, build));
       series[0].data.push(point(stamp, l + (s = row.getResultByName("startup")), version, build));
       table.appendChild(tr(td(formatstamp(stamp)),
                            td(formatµs(l)),
                            td(formatµs(s)),
@@ -102,34 +105,59 @@ query.executeAsync({
     }
   },
   handleError: function(error)
   {
     table.appendChild(tr(td("Error: "+ error.message +" ("+ error.result +")")));
   },
   handleCompletion: function()
   {
+    var table = $("table");
+    var height = $(window).height() - (table.offset().top + table.outerHeight(true)) - 110;
+    $("#graph").height(Math.max(350, height));
+
+    options.xaxis.min = Date.now() - 604800000; // 7 days in milliseconds
+    var max = 0;
+    for each (let [stamp, d] in series[0].data)
+      if (stamp >= options.xaxis.min && d > max)
+        max = d;
+    options.yaxis.max = max;
+
     graph = $.plot($("#graph"), series, options);
+
+    var offset = graph.getPlotOffset().left;
+    $("#overview").width($("#overview").width() - offset);
+    $("#overview").css("margin-left", offset);
     overview = $.plot($("#overview"), series, overviewOpts);
+
+    //var axes = graph.getAxes();
+    //overview.setSelection({ xaxis: { min: axes.xaxis.min,
+    //                                 max: axes.xaxis.max
+    //                               },
+    //                        yaxis: { min: axes.yaxis.min,
+    //                                 max: axes.yaxis.max
+    //                               }
+    //                      },
+    //                      true);
   },
 });
 
 $("#graph").bind("plotselected", function (event, ranges)
 {
   // do the zooming
   graph = $.plot($("#graph"),
-                series,
-                $.extend(true, {}, options,
-                         { xaxis: { min: ranges.xaxis.from,
-                                    max: ranges.xaxis.to
-                                  },
-                           yaxis: { min: ranges.yaxis.from,
-                                    max: ranges.yaxis.to
-                                  },
-                         }));
+                 series,
+                 $.extend(true, {}, options,
+                          { xaxis: { min: ranges.xaxis.from,
+                                     max: ranges.xaxis.to
+                                   },
+                            yaxis: { min: ranges.yaxis.from,
+                                     max: ranges.yaxis.to
+                                   },
+                          }));
 
   // don't fire event on the overview to prevent eternal loop
   overview.setSelection(ranges, true);
 });
 
 $("#overview").bind("plotselected", function (event, ranges) {
   graph.setSelection(ranges);
 });
--- a/toolkit/content/aboutStartup.xhtml
+++ b/toolkit/content/aboutStartup.xhtml
@@ -9,32 +9,33 @@
   <!ENTITY % aboutStartupDTD SYSTEM "chrome://global/locale/aboutStartup.dtd">
   %aboutStartupDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&about.startup.title;</title>
     <link rel="stylesheet" href="chrome://global/skin/aboutSupport.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://global/skin/aboutStartup.css" type="text/css"/>
     <script type="application/javascript" src="chrome://jquery/content/jquery.js"/>
     <script type="application/javascript" src="chrome://jquery/content/jquery.flot.js"/>
     <script type="application/javascript" src="chrome://jquery/content/jquery.flot.selection.js"/>
   </head>
 
   <body>
     <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" style="width: 800px; height: 400px;"/>
-    <div id="overview" style="width: 800px; height: 100px;"/>
+    <div id="graph"/>
+    <div id="overview"/>
 
     <h1>&about.startup.table;</h1>
     <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>
--- a/toolkit/themes/faststripe/global/jar.mn
+++ b/toolkit/themes/faststripe/global/jar.mn
@@ -7,8 +7,9 @@ toolkit.jar:
 +  skin/classic/global/groupbox.css
 +  skin/classic/global/menu.css
 +  skin/classic/global/menulist.css
 +  skin/classic/global/popup.css
 +  skin/classic/global/radio.css
 +  skin/classic/global/tabbox.css
 +  skin/classic/global/textbox.css
 +  skin/classic/global/scrollbars.css                       (xulscrollbars.css)
++  skin/classic/global/aboutStartup.css
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/gnomestripe/global/aboutStartup.css
@@ -0,0 +1,14 @@
+h1 {
+  font-size: 140%;
+  margin: .5em 0;
+}
+
+#graph, #overview {
+    margin: 0;
+    width: 100%;
+    height: 350px;
+}
+
+#overview {
+    height: 100px;
+}
--- a/toolkit/themes/gnomestripe/global/jar.mn
+++ b/toolkit/themes/gnomestripe/global/jar.mn
@@ -41,8 +41,9 @@ toolkit.jar:
 +  skin/classic/global/icons/find.png                          (icons/find.png)
 +  skin/classic/global/icons/folder-item.png                   (icons/folder-item.png)
 +  skin/classic/global/icons/loading_16.png                    (icons/loading_16.png)
 +  skin/classic/global/icons/notloading_16.png                 (icons/notloading_16.png)
 +  skin/classic/global/icons/resizer.png                       (icons/resizer.png)
 +  skin/classic/global/icons/sslWarning.png                    (icons/sslWarning.png)
 +  skin/classic/global/icons/wrap.png                          (icons/wrap.png)
 +  skin/classic/global/toolbar/spring.png                      (toolbar/spring.png)
++  skin/classic/global/aboutStartup.css
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/pinstripe/global/aboutStartup.css
@@ -0,0 +1,14 @@
+h1 {
+  font-size: 140%;
+  margin: .5em 0;
+}
+
+#graph, #overview {
+    margin: 0;
+    width: 100%;
+    height: 350px;
+}
+
+#overview {
+    height: 100px;
+}
--- a/toolkit/themes/pinstripe/global/jar.mn
+++ b/toolkit/themes/pinstripe/global/jar.mn
@@ -150,8 +150,9 @@ toolkit.jar:
   skin/classic/global/splitter/grip-right.gif                        (splitter/grip-right.gif)
   skin/classic/global/toolbar/spring.png                             (toolbar/spring.png)
   skin/classic/global/toolbar/toolbar-separator.png                  (toolbar/toolbar-separator.png)
   skin/classic/global/tree/columnpicker.gif                          (tree/columnpicker.gif)
   skin/classic/global/tree/folder.png                                (tree/folder.png)
   skin/classic/global/tree/item.png                                  (tree/item.png)
   skin/classic/global/tree/sort-asc.gif                              (tree/sort-asc.gif)
   skin/classic/global/tree/sort-dsc.gif                              (tree/sort-dsc.gif)
+  skin/classic/global/aboutStartup.css
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/winstripe/global/aboutStartup.css
@@ -0,0 +1,14 @@
+h1 {
+  font-size: 140%;
+  margin: .5em 0;
+}
+
+#graph, #overview {
+    margin: 0;
+    width: 100%;
+    height: 350px;
+}
+
+#overview {
+    height: 100px;
+}
--- a/toolkit/themes/winstripe/global/jar.mn
+++ b/toolkit/themes/winstripe/global/jar.mn
@@ -163,16 +163,17 @@ toolkit.jar:
         skin/classic/global/toolbar/spring.png                   (toolbar/spring.png)
         skin/classic/global/tree/columnpicker.gif                (tree/columnpicker.gif)
         skin/classic/global/tree/sort-asc.png                    (tree/sort-asc.png)
         skin/classic/global/tree/sort-dsc.png                    (tree/sort-dsc.png)
         skin/classic/global/tree/sort-asc-classic.png            (tree/sort-asc-classic.png)
         skin/classic/global/tree/sort-dsc-classic.png            (tree/sort-dsc-classic.png)
         skin/classic/global/tree/twisty-clsd.png                 (tree/twisty-clsd.png)
         skin/classic/global/tree/twisty-open.png                 (tree/twisty-open.png)
+        skin/classic/global/aboutStartup.css
 
 #ifdef XP_WIN
 toolkit.jar:
 % skin global classic/1.0 %skin/classic/aero/global/ os=WINNT osversion>=6
         skin/classic/aero/global/about.css
         skin/classic/aero/global/aboutCache.css
         skin/classic/aero/global/aboutCacheEntry.css
         skin/classic/aero/global/aboutMemory.css
@@ -338,9 +339,10 @@ toolkit.jar:
         skin/classic/aero/global/tree/twisty-clsd.png                    (tree/twisty-clsd-aero.png)
         skin/classic/aero/global/tree/twisty-clsd-rtl.png                (tree/twisty-clsd-rtl-aero.png)
         skin/classic/aero/global/tree/twisty-clsd-hover.png              (tree/twisty-clsd-hover-aero.png)
         skin/classic/aero/global/tree/twisty-clsd-hover-rtl.png          (tree/twisty-clsd-hover-rtl-aero.png)
         skin/classic/aero/global/tree/twisty-open.png                    (tree/twisty-open-aero.png)
         skin/classic/aero/global/tree/twisty-open-rtl.png                (tree/twisty-open-rtl-aero.png)
         skin/classic/aero/global/tree/twisty-open-hover.png              (tree/twisty-open-hover-aero.png)
         skin/classic/aero/global/tree/twisty-open-hover-rtl.png          (tree/twisty-open-hover-rtl-aero.png)
+        skin/classic/aero/global/aboutStartup.css
 #endif