Show subs box on clicking breakable categories in dmprof visualizer.

- For clicks on the graph, the box shows up on the cursor.
- For clicks on the menu view, the box shows up below the menu box.
- Clicks on non-breakable categories erase the box.
- Clicks out of graph and menu-box do nothing.


BUG=259206
NOTRY=true

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

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

10 files changed, 75 insertions, 20 deletions

diff --git a/tools/deep_memory_profiler/visualizer/app.py b/tools/deep_memory_profiler/visualizer/app.py
index aa9bd991..caebd6f 100644
--- a/tools/deep_memory_profiler/visualizer/app.py
+++ b/tools/deep_memory_profiler/visualizer/app.py
@@ -2,6 +2,10 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+# This file is expected to be used under another directory to use,
+# so we disable checking import path of GAE tools from this directory.
+# pylint: disable=F0401,E0611,W0232
+
 import jinja2
 import json
 import os
@@ -92,4 +96,4 @@ application = webapp2.WSGIApplication([
   ('/', MainPage),
   ('/upload', UploadHandler),
   ('/share', ShareHandler)
-], debug=True)
\ No newline at end of file
+], debug=True)
diff --git a/tools/deep_memory_profiler/visualizer/app_unittest.py b/tools/deep_memory_profiler/visualizer/app_unittest.py
index 03110dc..cf30f7ea 100644
--- a/tools/deep_memory_profiler/visualizer/app_unittest.py
+++ b/tools/deep_memory_profiler/visualizer/app_unittest.py
@@ -2,6 +2,10 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+# This file is expected to be used under another directory to use,
+# so we disable checking import path of GAE tools from this directory.
+# pylint: disable=F0401,E0611
+
 import json
 import unittest
 
diff --git a/tools/deep_memory_profiler/visualizer/run_tests.py b/tools/deep_memory_profiler/visualizer/run_tests.py
index 0fd3ff1..7a0669c 100755
--- a/tools/deep_memory_profiler/visualizer/run_tests.py
+++ b/tools/deep_memory_profiler/visualizer/run_tests.py
@@ -3,6 +3,10 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+# This file is expected to be used under another directory to use,
+# so we disable checking import path of GAE tools from this directory.
+# pylint: disable=F0401
+
 import os
 import sys
 import unittest
@@ -25,4 +29,4 @@ def main():
 
 
 if __name__ == '__main__':
-  sys.exit(main())
\ No newline at end of file
+  sys.exit(main())
diff --git a/tools/deep_memory_profiler/visualizer/services.py b/tools/deep_memory_profiler/visualizer/services.py
index 1b9ad3c..8c8bc65 100644
--- a/tools/deep_memory_profiler/visualizer/services.py
+++ b/tools/deep_memory_profiler/visualizer/services.py
@@ -2,6 +2,10 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+# This file is expected to be used under another directory to use,
+# so we disable checking import path of GAE tools from this directory.
+# pylint: disable=F0401,E0611,W0232
+
 import json
 
 from google.appengine.ext import blobstore
diff --git a/tools/deep_memory_profiler/visualizer/static/dropdown-view.js b/tools/deep_memory_profiler/visualizer/static/dropdown-view.js
index 64820bb..61799ea 100644
--- a/tools/deep_memory_profiler/visualizer/static/dropdown-view.js
+++ b/tools/deep_memory_profiler/visualizer/static/dropdown-view.js
@@ -37,15 +37,22 @@ DropdownView.prototype.redraw_ = function() {
     });
   } else {
     this.$tree_.tree('loadData', data);
+    $(this.placeholder_).css('display', 'none');
   }
 };
 
 /**
  * Update dropdown view when new model is selected in menu view.
  * @param {string} id Model id.
+ * @param {Object} pos Clicked position.
  * @private
  */
-DropdownView.prototype.update_ = function(id) {
+DropdownView.prototype.update_ = function(id, pos) {
+  if (id == null) {
+    $(this.placeholder_).css('display', 'none');
+    return;
+  }
+
   var self = this;
 
   // Get all subs of selected model.
@@ -83,6 +90,19 @@ DropdownView.prototype.update_ = function(id) {
   if (curSub) {
     var node = $tree.tree('getNodeById', curSub);
     $tree.tree('selectNode', node);
-    $tree.tree('scrollToNode', node);
+  }
+
+  // If selected category has subs, display subs box.
+  $(this.placeholder_).css('display', 'none');
+  if (children.length > 0) {
+    var view = $(this.placeholder_);
+    view.css('display', 'block');
+    if (pos != undefined) {
+      view.css('position', 'fixed');
+      view.css('top', pos.pageY);
+      view.css('left', pos.pageX);
+    } else {
+      view.css('position', 'static');
+    }
   }
 };
diff --git a/tools/deep_memory_profiler/visualizer/static/graph-view.js b/tools/deep_memory_profiler/visualizer/static/graph-view.js
index b69c5d2..2cd596e 100644
--- a/tools/deep_memory_profiler/visualizer/static/graph-view.js
+++ b/tools/deep_memory_profiler/visualizer/static/graph-view.js
@@ -155,10 +155,12 @@ GraphView.prototype.redraw_ = function(models) {
       }
 
       // If pos.y is higher than all lines, return.
-      if (i === lines.length)
+      if (i === lines.length) {
+        self.profiler_.setSelected(null);
         return;
+      }
 
-      self.profiler_.setSelected(lines[i].id);
+      self.profiler_.setSelected(lines[i].id, pos);
     });
   } else {
     this.graph_.setData(data);
diff --git a/tools/deep_memory_profiler/visualizer/static/index.css b/tools/deep_memory_profiler/visualizer/static/index.css
index ad35df6..d4ab2c7 100644
--- a/tools/deep_memory_profiler/visualizer/static/index.css
+++ b/tools/deep_memory_profiler/visualizer/static/index.css
@@ -32,19 +32,14 @@ h1 {
 }
 
 #graph-div {
-  width: 1024px;
-  height: 600px;
   float: left;
+  height: 600px;
+  width: 1024px;
 }
 
 #info-div {
-  width: 240px;
-  height: 600px;
   float: left;
   margin-left: 50px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-  outline: 1px solid rgba(0,0,0,0.2);
-  overflow: auto;
 }
 
 ul.jqtree-tree .jqtree-title {
@@ -53,9 +48,23 @@ ul.jqtree-tree .jqtree-title {
 }
 
 #category-menu {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  outline: 1px solid rgba(0,0,0,0.2);
+  overflow: auto;
+  padding-bottom: 15px;
   padding-left: 15px;
+  width: 240px;
 }
 
 #subs-dropdown {
+  background: rgb(255, 255, 255);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  display: none;
+  margin-top: 10px;
+  outline: 1px solid rgba(0,0,0,0.2);
+  overflow: auto;
+  padding-bottom: 15px;
   padding-left: 15px;
+  position: fixed;
+  width: 240px;
 }
\ No newline at end of file
diff --git a/tools/deep_memory_profiler/visualizer/static/menu-view.js b/tools/deep_memory_profiler/visualizer/static/menu-view.js
index 2a88f25..a2aeba2 100644
--- a/tools/deep_memory_profiler/visualizer/static/menu-view.js
+++ b/tools/deep_memory_profiler/visualizer/static/menu-view.js
@@ -18,14 +18,20 @@ var MenuView = function(profiler) {
 
 /**
  * Highlight the node being selected.
- * @param {string} id Model id.
+ * @param {string|null} id Model id.
+ * @param {Object} pos Clicked position. Not used
  * @private
  */
 MenuView.prototype.selectNode_ = function(id) {
   var $tree = this.$tree_;
+
+  if (id == null) {
+    $tree.tree('selectNode', null);
+    return;
+  }
+
   var node = $tree.tree('getNodeById', id);
   $tree.tree('selectNode', node);
-  $tree.tree('scrollToNode', node);
 };
 
 /**
diff --git a/tools/deep_memory_profiler/visualizer/static/profiler.js b/tools/deep_memory_profiler/visualizer/static/profiler.js
index 89e91d0..f76dbd2 100644
--- a/tools/deep_memory_profiler/visualizer/static/profiler.js
+++ b/tools/deep_memory_profiler/visualizer/static/profiler.js
@@ -80,10 +80,12 @@ Profiler.prototype.getRunId = function() {
 /**
  * To be called by view when new model being selected.
  * And then triggers all relative views to update.
+ * @param {string} id Model id.
+ * @param {Object} pos Clicked position.
  */
-Profiler.prototype.setSelected = function(id) {
+Profiler.prototype.setSelected = function(id, pos) {
   this.selected_ = id;
-  this.emit('changed:selected', id);
+  this.emit('changed:selected', id, pos);
 };
 
 /**
@@ -274,7 +276,7 @@ Profiler.prototype.accumulate_ = function(
             name: categoryName + '-remaining',
             size: size - retVal.totalSize
           });
-        } else {
+        } else if (size < retVal.totalSize) {
           // Output WARNING when sub-breakdown size is larger.
           console.log('WARNING: size of sub-breakdown is larger');
         }
diff --git a/tools/deep_memory_profiler/visualizer/template.py b/tools/deep_memory_profiler/visualizer/template.py
index 3e2b15b..49aed79 100755
--- a/tools/deep_memory_profiler/visualizer/template.py
+++ b/tools/deep_memory_profiler/visualizer/template.py
@@ -42,8 +42,8 @@ _TEMPLATE = """<!DOCTYPE html>
   <h2>Deep Memory Profiler Visulaizer</h2>
   <div id="graph-div"></div>
   <div id="info-div">
-    <div id="subs-dropdown"></div>
     <div id="category-menu"></div>
+    <div id="subs-dropdown"></div>
   </div>
 </body>
 """
@@ -77,4 +77,4 @@ def main(argv):
 
 
 if __name__ == '__main__':
-  sys.exit(main(sys.argv))
\ No newline at end of file
+  sys.exit(main(sys.argv))