Minor UI/CSS refactor to memory_inspector.

- Moving css into /css subfolder
- Removing the IsMmapTracingEnabled (it's a noop, so no reason should be there)
- Many small HTML/JS UI fixes and some renaming.
- Some whitespaces and quoting cleanup.

TBR=pliard@chromium.org
BUG=340294
NOTRY=true

Review URL: https://codereview.chromium.org/201343002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@257405 0039d316-1c4b-4281-b951-d872f2087c98

16 files changed, 251 insertions, 195 deletions

diff --git a/tools/memory_inspector/memory_inspector/backends/android/android_backend.py b/tools/memory_inspector/memory_inspector/backends/android/android_backend.py
index eb7c873..c49a504 100644
--- a/tools/memory_inspector/memory_inspector/backends/android/android_backend.py
+++ b/tools/memory_inspector/memory_inspector/backends/android/android_backend.py
@@ -95,23 +95,16 @@ class AndroidDevice(backends.Device):
                                          _PSEXT_PATH_ON_DEVICE)
     self._initialized = True
 
-  def EnableMmapTracing(self, enabled):
-    """Nothing to do here. memdump is already deployed in Initialize()."""
-    pass
-
-  def IsMmapTracingEnabled(self):
-    return True
-
-  def IsNativeAllocTracingEnabled(self):
+  def IsNativeTracingEnabled(self):
     """Checks for the libc.debug.malloc system property."""
-    return self.adb.system_properties[_DLMALLOC_DEBUG_SYSPROP]
+    return bool(self.adb.system_properties[_DLMALLOC_DEBUG_SYSPROP])
 
-  def EnableNativeAllocTracing(self, enabled):
+  def EnableNativeTracing(self, enabled):
     """Enables libc.debug.malloc and restarts the shell."""
     assert(self._initialized)
     prop_value = '1' if enabled else ''
     self.adb.system_properties[_DLMALLOC_DEBUG_SYSPROP] = prop_value
-    assert(self.IsNativeAllocTracingEnabled())
+    assert(self.IsNativeTracingEnabled())
     # The libc.debug property takes effect only after restarting the Zygote.
     self.adb.RestartShell()
 
diff --git a/tools/memory_inspector/memory_inspector/classification/mmap_classifier.py b/tools/memory_inspector/memory_inspector/classification/mmap_classifier.py
index 9abad90..ab7b274 100644
--- a/tools/memory_inspector/memory_inspector/classification/mmap_classifier.py
+++ b/tools/memory_inspector/memory_inspector/classification/mmap_classifier.py
@@ -17,8 +17,8 @@ from memory_inspector.core import exceptions
 from memory_inspector.core import memory_map
 
 
-_RESULT_KEYS = ['total_rss', 'priv_clean_bytes', 'priv_dirty_bytes',
-                'shared_clean_bytes', 'shared_dirty_bytes']
+_RESULT_KEYS = ['RSS', 'Private Dirty', 'Private Clean', 'Shared Dirty',
+                'Shared Clean']
 
 
 def LoadRules(content):
diff --git a/tools/memory_inspector/memory_inspector/classification/results.py b/tools/memory_inspector/memory_inspector/classification/results.py
index 2409148..11b1c1b 100644
--- a/tools/memory_inspector/memory_inspector/classification/results.py
+++ b/tools/memory_inspector/memory_inspector/classification/results.py
@@ -109,7 +109,6 @@ class Bucket(object):
     self.values = [0] * num_keys
     self.children = []
 
-
   @property
   def name(self):
     return self.rule.name
\ No newline at end of file
diff --git a/tools/memory_inspector/memory_inspector/core/backends.py b/tools/memory_inspector/memory_inspector/core/backends.py
index 9eeb521..752a036 100644
--- a/tools/memory_inspector/memory_inspector/core/backends.py
+++ b/tools/memory_inspector/memory_inspector/core/backends.py
@@ -81,22 +81,14 @@ class Device(object):
     """Called before anything else, for initial provisioning."""
     raise NotImplementedError()
 
-  def IsNativeAllocTracingEnabled(self):
+  def IsNativeTracingEnabled(self):
     """Check if the device is ready to capture native allocation traces."""
     raise NotImplementedError()
 
-  def EnableNativeAllocTracing(self, enabled):
+  def EnableNativeTracing(self, enabled):
     """Provision the device and make it ready to trace native allocations."""
     raise NotImplementedError()
 
-  def IsMmapTracingEnabled(self):
-    """Check if the device is ready to capture memory map traces."""
-    raise NotImplementedError()
-
-  def EnableMmapTracing(self, enabled):
-    """Provision the device and make it ready to trace memory maps."""
-    raise NotImplementedError()
-
   def ListProcesses(self):
     """Returns a sequence of |Process|."""
     raise NotImplementedError()
diff --git a/tools/memory_inspector/memory_inspector/data/file_storage.py b/tools/memory_inspector/memory_inspector/data/file_storage.py
index ff888ba..55656f5 100644
--- a/tools/memory_inspector/memory_inspector/data/file_storage.py
+++ b/tools/memory_inspector/memory_inspector/data/file_storage.py
@@ -82,7 +82,7 @@ class Archive(object):
   _NHEAP_EXT = '-nheap.json'
   _SNAP_EXT = '.snapshot'
   _SYM_FILE = 'syms.json'
-  _TIME_FMT = '%Y-%m-%d_%H:%M:%S:%f'
+  _TIME_FMT = '%Y-%m-%d_%H-%M-%S-%f'
 
   def __init__(self, name, path):
     assert(os.path.isdir(path))
@@ -119,8 +119,7 @@ class Archive(object):
     """Returns a list of timestamps (datetime.datetime instances)."""
     file_names = sorted(
         [name[:-(len(Archive._SNAP_EXT))] for name in os.listdir(self._path)
-            if name.endswith(Archive._SNAP_EXT)],
-        reverse=True)
+            if name.endswith(Archive._SNAP_EXT)])
     timestamps = [datetime.datetime.strptime(x, Archive._TIME_FMT)
                   for x in file_names]
     return timestamps
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/css/mmap.css b/tools/memory_inspector/memory_inspector/frontends/www_content/css/mmap.css
new file mode 100644
index 0000000..2983273
--- /dev/null
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/css/mmap.css
@@ -0,0 +1,76 @@
+/* Copyright 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+#tabs-mm > header {
+  clear: both;
+  margin-bottom: 1em;
+  overflow: auto;
+  padding: 1em;
+}
+
+#tabs-mm > header tr {
+  height: 2em;
+}
+
+#mm-tools, #mm-stats {
+  box-shadow: 0 0 1em #ccc;
+  display: inline-table;
+  font-size: 0.85em;
+  vertical-align: top;
+}
+
+#mm-tools {
+  text-align: left;
+  width: 30%;
+}
+
+#mm-tools tr:first-of-type {
+  background: #eee;
+  text-align: center;
+}
+
+#mm-tools input[type="text"] {
+  float: right;
+  font-family: 'Consolas', monospace;
+  font-size: 0.8em;
+  height: 1em;
+  margin: 0;
+  padding: 0;
+  width: 6em;
+}
+
+#mm-stats {
+  float: right;
+  width: 65%;
+}
+
+#mm-stats td {
+  border: 1px solid #bbb;
+  text-align: center;
+}
+
+#mm-stats th:first-of-type {
+  text-align: left;
+}
+
+#mm-stats tr:first-of-type th {
+  background: #eee;
+}
+
+#mm-filter-clear {
+  width: 2em;
+  text-align: center
+}
+
+.mm-resident-table {
+  border: 1px solid #999;
+}
+
+.mm-resident-table td {
+  padding: 0.2em;
+}
+
+.mm-resident-table td.resident {
+  background: lightgreen;
+}
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/mmap.css b/tools/memory_inspector/memory_inspector/frontends/www_content/css/processes.css
index b47adb4..a95713e 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/mmap.css
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/css/processes.css
@@ -2,15 +2,11 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-.mm-resident-table {
-  border: 1px solid #999;
-}
-
-.mm-resident-table td {
-  padding: 0.2em;
-}
-
-.mm-resident-table td.resident {
-  background: lightgreen;
-}
-
+#os-mem_chart,
+#os-cpu_chart {
+  width: 49%;
+  max-width: 49%;
+  margin: 0;
+  display: inline-block;
+  height: 20em;
+}
\ No newline at end of file
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/rootUi.css b/tools/memory_inspector/memory_inspector/frontends/www_content/css/rootUi.css
index 7654f57..1ccda0b 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/rootUi.css
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/css/rootUi.css
@@ -27,11 +27,6 @@ h1 {
   line-height: 1em;
 }
 
-input[type="text"] {
-  border: 1px solid #999;
-  box-shadow: inset -1px -1px 7px #ddd;
-}
-
 #load_banner {
   text-align: center;
   position: fixed;
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/settings.css b/tools/memory_inspector/memory_inspector/frontends/www_content/css/settings.css
index cb3d90d..cb3d90d 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/settings.css
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/css/settings.css
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/index.html b/tools/memory_inspector/memory_inspector/frontends/www_content/index.html
index 18baadb..2c9e880 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/index.html
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/index.html
@@ -10,9 +10,10 @@
   <title>Memory Inspector</title>
   <link href='//fonts.googleapis.com/css?family=Coda' rel='stylesheet' type='text/css'>
   <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css" rel="stylesheet">
-  <link href="/mmap.css" rel="stylesheet" type="text/css">
-  <link href="/rootUi.css" rel="stylesheet" type="text/css">
-  <link href="/settings.css" rel="stylesheet" type="text/css">
+  <link href="/css/mmap.css" rel="stylesheet" type="text/css">
+  <link href="/css/processes.css" rel="stylesheet" type="text/css">
+  <link href="/css/rootUi.css" rel="stylesheet" type="text/css">
+  <link href="/css/settings.css" rel="stylesheet" type="text/css">
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
   <script src="//www.google.com/jsapi"></script>
@@ -22,8 +23,8 @@
   </script>
   <script src="/js/devices.js"></script>
   <script src="/js/mmap.js"></script>
-  <script src="/js/rootUi.js"></script>
   <script src="/js/processes.js"></script>
+  <script src="/js/rootUi.js"></script>
   <script src="/js/settings.js"></script>
   <script src="/js/timers.js"></script>
   <script src="/js/webservice.js"></script>
@@ -34,10 +35,9 @@
     <div id="tabs">
       <ul>
         <li><a href="#tabs-ps">Processes</a></li>
-        <li><a href="#tabs-mm">Aggregated Memory maps</a></li>
-        <li><a href="#tabs-mm-table">Memory maps table</a></li>
-        <li><a href="#tabs-native_alloc">Aggregated native allocs.</a></li>
-        <li><a href="#tabs-archive">Archive</a></li>
+        <li><a href="#tabs-prof">Profiler</a></li>
+        <li><a href="#tabs-mm">Memory maps table</a></li>
+        <li><a href="#tabs-storage">Archived traces</a></li>
         <li><a href="#tabs-settings">Settings</a></li>
       </ul>
 
@@ -63,103 +63,72 @@
         </div>
 
         <div id="ps-table-wrapper">
-          <input type="checkbox" id="ps-show_all">
-          <label for="ps-show_all">Show all system processes</label>
+          <div id="ps-toolbar" class="ui-widget-header ui-corner-all">
+            <button id="ps-dump_mmaps">Dump mmaps</button>
+            <input type="checkbox" id="ps-show_all">
+            <label for="ps-show_all">Show all processes</label>
+          </div>
           <div id="ps-table"></div>
         </div>
       </div>
 
-      <div id="tabs-mm">
-        <header id="mm-options">
-          <span>
-            Current metric:
-            <select id="mm-cur-serie"></select>
-          </span>
-          <span>
-            Current snapshot: <select id="mm-cur-snap"></select>
-            of <span id="mm-nsnapshots"></span>
-          </span>
-        </header>
-        <h2>Hierarchical view of selected snapshot</h2>
-        <div id="mm-chart-hierarchy"></div>
-
-        <div id="mm-chart-area"></div>
-
-        <div id="mm-chart-treemap"></div>
-
-      </div>
-
-      <div id="tabs-mm-table">
-        <div id="mm-table-wrapper">
-          <header>
-            <b>Filters: </b>
-            <span>
-            <input type="button" id="mm-filter-clear" value="Reset">
-            Prot. flags: <input type="text" id="mm-filter-prot">
-            File name: <input type="text" id="mm-filter-file">
-            <i>(Just press enter to apply filters)</i>
-            </span>
-          </header>
-          <header>
-            <b>Lookup addr: </b>
-            <input type="text" id="mm-lookup-addr">
-            <span><b>Offset in mapping:</b></span>
-            <span id="mm-lookup-offset">0</span>
-            </span>
-          </header>
-          <hr>
-          <header>
-            <b>Totals [Kb]: </b>
-            <b>Priv dirty: </b><span id="mm-totals-priv-dirty">0</span>
-            <b>Priv clean: </b><span id="mm-totals-priv-clean">0</span>
-            <b>Shared dirty: </b><span id="mm-totals-shared-dirty">0</span>
-            <b>Shared clean: </b><span id="mm-totals-shared-clean">0</span>
-          </header>
-          <header>
-            <b>Selected [Kb]: </b>
-            <b>Priv dirty: </b><span id="mm-selected-priv-dirty">0</span>
-            <b>Priv clean: </b><span id="mm-selected-priv-clean">0</span>
-            <b>Shared dirty: </b><span id="mm-selected-shared-dirty">0</span>
-            <b>Shared clean: </b><span id="mm-selected-shared-clean">0</span>
-          </header>
-          <div id="mm-table"></div>
-        </div>
+      <div id="tabs-prof">
       </div>
 
-      <div id="tabs-native_alloc">
-        <header id="nh-options">
-          <span>
-            Current metric:
-            <select id="nh-cur-serie"></select>
-          </span>
-          <span>
-            Current snapshot: <select id="nh-cur-snap"></select>
-            of <span id="nh-nsnapshots"></span>
-          </span>
+      <div id="tabs-mm">
+        <header>
+          <table id="mm-tools">
+            <tr>
+              <th colspan="3">
+                Data filters
+                <input type="button" id="mm-filter-clear" value="&#10226;">
+              </th>
+            </tr>
+            <tr>
+              <th>Filter</th>
+              <td>Prot: <input type="text" id="mm-filter-prot"></td>
+              <td>File: <input type="text" id="mm-filter-file"></td>
+            </tr>
+            <tr>
+              <th>Lookup</th>
+              <td>Addr: <input type="text" id="mm-lookup-addr"></td>
+              <td>Offset: <input type="text" id="mm-lookup-offset" readonly=""></td>
+            </tr>
+          </table>
+          <table id="mm-stats">
+            <tr>
+              <th>Totals</th>
+              <th>Priv Dirty [KB]</th>
+              <th>Priv Clean [KB]</th>
+              <th>Shared Dirty [KB]</th>
+              <th>Shared Clean [KB]</th>
+            </tr>
+            <tr>
+              <th>Shown</th>
+              <td><span id="mm-totals-priv-dirty">0</span></td>
+              <td><span id="mm-totals-priv-clean">0</span></td>
+              <td><span id="mm-totals-shared-dirty">0</span></td>
+              <td><span id="mm-totals-shared-clean">0</span></td>
+            </tr>
+            <tr>
+              <th>Selected</th>
+              <td><span id="mm-selected-priv-dirty">0</span></td>
+              <td><span id="mm-selected-priv-clean">0</span></td>
+              <td><span id="mm-selected-shared-dirty">0</span></td>
+              <td><span id="mm-selected-shared-clean">0</span></td>
+            </tr>
+          </table>
         </header>
-        <h2>Hierarchical view of selected snapshot</h2>
-        <div id="nh-chart-hierarchy"></div>
-        <div id="nh-chart-area"></div>
-        <div id="nh-chart-treemap"></div>
-        <div id="native_alloc_chart"></div>
-        <div id="native_alloc_table"></div>
+        <div id="mm-table"></div>
       </div>
 
-      <div id="tabs-archive">
-        <input type="button" value="Refresh" id="archive-refresh">
-        <input type="button" value="Analyze Memory maps" id="archive-classify_mmaps">
-        <input type="button" value="Analyze Native Heap" id="archive-classify_native">
-        <div id="archive">
-        </div>
+      <div id="tabs-storage">
       </div>
 
       <div id="tabs-settings">
-        <header>
-          <input type="button" value="Reload" id="settings-load">
-          <input type="button" value="Store" id="settings-store">
-        </header>
         <div id="settings-container">
         </div>
+        <button id="settings-store">Save settings</button>
       </div>
     </div>
   </div>
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/js/devices.js b/tools/memory_inspector/memory_inspector/frontends/www_content/js/devices.js
index ba6e755..ff2ae18 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/js/devices.js
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/js/devices.js
@@ -42,9 +42,6 @@ this.onBackendsAjaxResponse_ = function(data) {
                        ' broken. Please file a bug');
   }
   this.backends_ = data;
-
-  // Reload settings now that both devices and backends have been enumerated.
-  settings.reload();
 };
 
 this.onDevicesAjaxResponse_ = function(data) {
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/js/mmap.js b/tools/memory_inspector/memory_inspector/frontends/www_content/js/mmap.js
index 400d24f..a9d53f0 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/js/mmap.js
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/js/mmap.js
@@ -4,7 +4,6 @@
 
 mmap = new (function() {
 
-this.AJAX_BASE_URL_ = '/ajax';
 this.COL_START = 0;
 this.COL_END = 1;
 this.COL_LEN = 2;
@@ -27,6 +26,12 @@ this.onDomReady_ = function() {
   $('#mm-filter-file').on('change', this.applyMapsTableFilters_.bind(this));
   $('#mm-filter-prot').on('change', this.applyMapsTableFilters_.bind(this));
   $('#mm-filter-clear').on('click', this.resetMapsTableFilters_.bind(this));
+
+  // Create the mmaps table.
+  this.mapsTable_ = new google.visualization.Table($('#mm-table')[0]);
+  google.visualization.events.addListener(
+      this.mapsTable_, 'select', this.onMmapTableRowSelect_.bind(this));
+  $('#mm-table').on('dblclick', this.onMmapTableDblClick_.bind(this));
 };
 
 this.dumpMmaps = function(targetProcUri) {
@@ -43,11 +48,6 @@ this.onDumpAjaxResponse_ = function(data) {
   this.mapsData_ = new google.visualization.DataTable(data);
   this.mapsFilter_ = new google.visualization.DataView(this.mapsData_);
   this.mapsFilter_.setColumns(this.SHOW_COLUMNS);
-  this.mapsTable_ = new google.visualization.Table($('#mm-table')[0]);
-  google.visualization.events.addListener(
-      this.mapsTable_, 'select', this.onMmapTableRowSelect_.bind(this));
-  $('#mm-table').on('dblclick', this.onMmapTableDblClick_.bind(this));
-  rootUi.showTab('mm-table');
   this.applyMapsTableFilters_();
   rootUi.hideDialog();
 };
@@ -76,12 +76,13 @@ this.applyMapsTableFilters_ = function() {
     totSharedDirty += this.mapsData_.getValue(row,this.COL_SHARED_DIRTY);
     totSharedClean += this.mapsData_.getValue(row, this.COL_SHARED_CLEAN);
   }
+
   this.mapsFilter_.setRows(rows);
-  this.mapsTable_.draw(this.mapsFilter_);
   $('#mm-totals-priv-dirty').text(totPrivDirty);
   $('#mm-totals-priv-clean').text(totPrivClean);
   $('#mm-totals-shared-dirty').text(totSharedDirty);
   $('#mm-totals-shared-clean').text(totSharedClean);
+  this.redraw();
 };
 
 this.resetMapsTableFilters_ = function() {
@@ -151,6 +152,12 @@ this.onMmapTableDblClick_ = function() {
   rootUi.showDialog(table, 'Resident page list');
 };
 
+this.redraw = function() {
+  if (!this.mapsFilter_)
+    return;
+  this.mapsTable_.draw(this.mapsFilter_);
+};
+
 this.lookupAddress = function() {
   // Looks up the user-provided address in the mmap table and highlights the
   // row containing the map (if found).
@@ -158,7 +165,7 @@ this.lookupAddress = function() {
     return;
 
   addr = parseInt($('#mm-lookup-addr').val(), 16);
-  $('#mm-lookup-offset').text('');
+  $('#mm-lookup-offset').val('');
   if (!addr)
     return;
 
@@ -177,7 +184,7 @@ this.lookupAddress = function() {
       lbound = row + 1;
     }
     else {
-      $('#mm-lookup-offset').text((addr - start).toString(16));
+      $('#mm-lookup-offset').val((addr - start).toString(16));
       this.mapsTable_.setSelection([{row: row, column: null}]);
       // Scroll to row.
       $('#wrapper').scrollTop(
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/js/processes.js b/tools/memory_inspector/memory_inspector/frontends/www_content/js/processes.js
index fc7b98e..343857f 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/js/processes.js
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/js/processes.js
@@ -9,6 +9,7 @@ this.DEV_STATS_INTERVAL_SEC_ = 2;
 this.PROC_STATS_INTERVAL_SEC_ = 1;
 
 this.selProcUri_ = null;
+this.selProcName_ = null;
 this.psTable_ = null;
 this.psTableData_ = null;
 this.memChart_ = null;
@@ -24,24 +25,43 @@ this.onDomReady_ = function() {
   $('#device_tabs').tabs();
   $('#device_tabs').on('tabsactivate', this.redrawPsStats_.bind(this));
   $('#device_tabs').on('tabsactivate', this.redrawDevStats_.bind(this));
+
+  // Initialize the toolbar.
+  $('#ps-dump_mmaps').button({icons:{primary: 'ui-icon-calculator'}})
+      .click(this.dumpSelectedProcessMmaps_.bind(this));
+
+  // Create the process table.
+  this.psTable_ = new google.visualization.Table($('#ps-table')[0]);
+  google.visualization.events.addListener(
+      this.psTable_, 'select', this.onPsTableRowSelect_.bind(this));
+
+  // Create the device stats charts.
+  this.memChart_ = new google.visualization.PieChart($('#os-mem_chart')[0]);
+  this.cpuChart_ = new google.visualization.BarChart($('#os-cpu_chart')[0]);
+
+  // Create the selected process stats charts.
+  this.procCpuChart_ =
+      new google.visualization.ComboChart($('#proc-cpu_chart')[0]);
+  this.procMemChart_ =
+      new google.visualization.ComboChart($('#proc-mem_chart')[0]);
 };
 
 this.getSelectedProcessURI = function() {
   return this.selProcUri_;
 };
 
+this.dumpSelectedProcessMmaps_ = function() {
+  if (!this.selProcUri_)
+    return alert('Must select a process!');
+  mmap.dumpMmaps(this.selProcUri_, false);
+  rootUi.showTab('mm');
+};
+
 this.refreshPsTable = function() {
   var targetDevUri = devices.getSelectedURI();
   if (!targetDevUri)
     return this.stopPsTable();
 
-  if (!this.psTable_) {
-    this.psTable_ = new google.visualization.Table($('#ps-table')[0]);
-    google.visualization.events.addListener(
-        this.psTable_, 'select', this.onPsTableRowSelect_.bind(this));
-    $('#ps-table').on('dblclick', this.onPsTableDblClick_.bind(this));
-  };
-
   var showAllParam = $('#ps-show_all').prop('checked') ? '?all=1' : '';
   webservice.ajaxRequest('/ps/' + targetDevUri + showAllParam,
                          this.onPsAjaxResponse_.bind(this),
@@ -56,6 +76,7 @@ this.startPsTable = function() {
 
 this.stopPsTable = function() {
   this.selProcUri_ = null;
+  this.selProcName_ = null;
   timers.stop('ps_table');
 };
 
@@ -69,19 +90,23 @@ this.onPsTableRowSelect_ = function() {
     return;
   var pid = this.psTableData_.getValue(sel[0].row, 0);
   this.selProcUri_ = targetDevUri + '/' + pid;
+  this.selProcName_ = this.psTableData_.getValue(sel[0].row, 1);
   this.startSelectedProcessStats();
 };
 
-this.onPsTableDblClick_ = function() {
-  mmap.dumpMmaps(this.getSelectedProcessURI());
+this.onPsAjaxResponse_ = function(data) {
+  this.psTableData_ = new google.visualization.DataTable(data);
+  this.redrawPsTable_();
 };
 
-this.onPsAjaxResponse_ = function(data) {
+this.redrawPsTable_ = function(data) {
+  if (!this.psTableData_)
+    return;
+
   // Redraw table preserving sorting info.
   var sort = this.psTable_.getSortInfo() || {column: -1, ascending: false};
-  this.psTableData_ = new google.visualization.DataTable(data);
   this.psTable_.draw(this.psTableData_, {sortColumn: sort.column,
-                                            sortAscending: sort.ascending});
+                                         sortAscending: sort.ascending});
 };
 
 this.refreshDeviceStats = function() {
@@ -100,7 +125,6 @@ this.startDeviceStats = function() {
                this.DEV_STATS_INTERVAL_SEC_);
 };
 
-
 this.stopDeviceStats = function() {
   timers.stop('device_stats');
 };
@@ -115,11 +139,6 @@ this.redrawDevStats_ = function(data) {
   if (!this.memChartData_ || !this.cpuChartData_)
     return;
 
-  if (!this.memChart_) {
-    this.memChart_ = new google.visualization.PieChart($('#os-mem_chart')[0]);
-    this.cpuChart_ = new google.visualization.BarChart($('#os-cpu_chart')[0]);
-  }
-
   this.memChart_.draw(this.memChartData_,
                        {title: 'System Memory Usage (MB)', is3D: true});
   this.cpuChart_.draw(this.cpuChartData_,
@@ -158,13 +177,6 @@ this.redrawPsStats_ = function() {
   if (!this.procCpuChartData_ || !this.procMemChartData_)
     return;
 
-  if (!this.procCpuChart_) {
-    this.procCpuChart_ =
-        new google.visualization.ComboChart($('#proc-cpu_chart')[0]);
-    this.procMemChart_ =
-        new google.visualization.ComboChart($('#proc-mem_chart')[0]);
-  }
-
   this.procCpuChart_.draw(this.procCpuChartData_, {
       title: 'CPU stats for ' + this.selProcUri_,
       seriesType: 'line',
@@ -183,6 +195,14 @@ this.redrawPsStats_ = function() {
   });
 };
 
+this.redraw = function() {
+  this.redrawPsTable_();
+  if ($('#device_tabs').tabs('option', 'active') == 0)
+    this.redrawDevStats_();
+  else
+    this.redrawPsStats_();
+};
+
 $(document).ready(this.onDomReady_.bind(this));
 
 })();
\ No newline at end of file
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/js/rootUi.js b/tools/memory_inspector/memory_inspector/frontends/www_content/js/rootUi.js
index a2620eb..5da2a04 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/js/rootUi.js
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/js/rootUi.js
@@ -6,28 +6,18 @@ rootUi = new (function() {
 
 this.onDomReady_ = function() {
   $('#js_loading_banner').hide();
-  $('#tabs').tabs();
+  $('#tabs').tabs({activate: this.onTabChange_.bind(this)});
   $('#tabs').css('visibility', 'visible');
 
   // Initialize the status bar.
-  var statusBar = $('#statusBar');
-  var statusMessages = $('#statusMessages');
-  statusMessages.mouseenter(function() {
-    statusBar.addClass('expanded');
-    statusMessages.scrollTop(statusMessages.height());
+  $('#status_messages').mouseenter(function() {
+    $('#status_bar').addClass('expanded');
+    $('#status_messages').scrollTop($('#status_messages').height());
   });
-  statusMessages.mouseleave(function() {
-    statusBar.removeClass('expanded');
-  });
-
-  var progressBar = $('#progressBar');
-  var progressLabel = $('#progressBar-label');
-  progressBar.progressbar({
-    value: 1,
-    change: function() {
-      progressLabel.text(progressBar.progressbar('value') + '%' );
-    }
+  $('#status_messages').mouseleave(function() {
+    $('#status_bar').removeClass('expanded');
   });
+  $('#progress_bar').progressbar({value: 1});
 };
 
 this.showTab = function(tabId) {
@@ -36,8 +26,23 @@ this.showTab = function(tabId) {
     $('#tabs').tabs('option', 'active', index - 1);
 };
 
+this.onTabChange_ = function(_, ui) {
+  switch(ui.newPanel.attr('id').replace('tabs-', '')) {
+    case 'ps':
+      return processes.redraw();
+    case 'prof':
+      return profiler.redraw();
+    case 'mm':
+      return mmap.redraw();
+    case 'settings':
+      return settings.reload();
+    case 'storage':
+      return storage.reload();
+  }
+};
+
 this.showDialog = function(content, title) {
-  var dialog = $("#message_dialog");
+  var dialog = $('#message_dialog');
   title = title || '';
   if (dialog.length == 0) {
     dialog = $('<div id="message_dialog"/>');
@@ -52,7 +57,16 @@ this.showDialog = function(content, title) {
 };
 
 this.hideDialog = function() {
-  $("#message_dialog").dialog('close');
+  $('#message_dialog').dialog('close');
+};
+
+this.setProgress = function(value) {
+  $('#progress_bar').progressbar('option', 'value', value);
+  $('#progress_bar-label').text(value + '%' );
+};
+
+this.setStatusMessage = function(content) {
+  $('#status_messages').text(content);
 };
 
 $(document).ready(this.onDomReady_.bind(this));
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_content/js/settings.js b/tools/memory_inspector/memory_inspector/frontends/www_content/js/settings.js
index 30d71cf..3a5f495 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_content/js/settings.js
+++ b/tools/memory_inspector/memory_inspector/frontends/www_content/js/settings.js
@@ -5,8 +5,8 @@
 settings = new (function() {
 
 this.onDomReady_ = function() {
-  $('#settings-load').click(this.reload.bind(this));
-  $('#settings-store').click(this.store.bind(this));
+  $('#settings-store').button({icons: {primary: 'ui-icon-disk'}})
+      .click(this.store.bind(this));
 };
 
 this.reload = function() {
diff --git a/tools/memory_inspector/memory_inspector/frontends/www_server.py b/tools/memory_inspector/memory_inspector/frontends/www_server.py
index 784881f..9d3ce36 100644
--- a/tools/memory_inspector/memory_inspector/frontends/www_server.py
+++ b/tools/memory_inspector/memory_inspector/frontends/www_server.py
@@ -170,8 +170,7 @@ def _InitializeDevice(args, req_vars):  # pylint: disable=W0613
     return _HTTP_GONE, [], 'Device not found'
   device.Initialize()
   return _HTTP_OK, [], {
-    'is_mmap_tracing_enabled': device.IsMmapTracingEnabled(),
-    'is_native_alloc_tracing_enabled': device.IsNativeAllocTracingEnabled()}
+    'isNativeTracingEnabled': device.IsNativeTracingEnabled()}
 
 
 @AjaxHandler(r'/ajax/ps/(\w+)/(\w+)$')  # /ajax/ps/Android/a0b1c2[?all=1]