SuperSize: A few fixes to caspian

* Dex nodes were not showing their shortName properly (needs to use
  templateName rather than fullName)
* Show "Full Name" in info card
* Make diff status icon not show focus rect
* Update README.md

Change-Id: I94715117b1d343e63b61cf60e611dab7854aad6a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1972231Reviewed-by: Eric Stevenson <estevenson@chromium.org>
Commit-Queue: Andrew Grieve <agrieve@chromium.org>
Cr-Commit-Position: refs/heads/master@{#725677}

tools/binary_size/libsupersize/.gitignore

+static/caspian_web*

tools/binary_size/libsupersize/caspian/README.md

+# Caspian
+
+## What is it?
+
+Caspian is the name for the WebAssembly portion of the SuperSize Tiger Viewer.
+
+## How do I build it?
+
+Install emscripten from:
+https://emscripten.org/docs/getting_started/downloads.html
+
+```sh
+git apply tools/binary_size/libsupersize/caspian/wasmbuild.patch
+gn gen out/caspian --args='is_official_build=true treat_warnings_as_errors=false fatal_linker_warnings=false'
+autoninja -C out/caspian tools/binary_size:caspian_web
+cp out/caspian/wasm/caspian_web.* tools/binary_size/libsupersize/static/
+```
+
+Then run locally via:
+```sh
+tools/binary_size/supersize start_server out.size
+```
+
+or upload to hosted site via:
+```sh
+tools/binary_size/libsupersize/upload_html_viewer.py --sync
+```

tools/binary_size/libsupersize/caspian/caspian.md

-# Caspian
-
-## What is it?
-
-Caspian is the name for the WebAssembly portion of the SuperSize Tiger Viewer.
-
-## How do I build it?
-
-1. Apply the patch file at `tools/binary_size/libsupersize/caspian/wasmbuild.patch`
-
-2. From `src/`, run
-`gn gen out/caspian &&
-third_party/depot_tools/autoninja -C out/caspian tools/binary_size:caspian_web -v &&
-cp out/caspian/wasm/caspian_web.* tools/binary_size/libsupersize/static/`
-
-  * If doing a release build, you should change your gn args: set is\_debug=false
-
-3. You can then launch a local instance using `tools/binary_size/supersize start_server out.size`
-

tools/binary_size/libsupersize/caspian/model.cc

@@ -328,15 +328,12 @@ void TreeNode::WriteIntoJson(
     bool is_sparse,
     Json::Value* out) {
   if (symbol) {
+    (*out)["helpme"] = std::string(symbol->Name());
+    (*out)["idPath"] = std::string(symbol->TemplateName());
+    (*out)["fullName"] = std::string(symbol->FullName());
     if (symbol->NumAliases() > 1) {
       (*out)["numAliases"] = symbol->NumAliases();
     }
-    if (symbol->IsDex()) {
-      (*out)["idPath"] = std::string(symbol->FullName());
-    } else {
-      (*out)["idPath"] = std::string(symbol->TemplateName());
-      (*out)["fullName"] = std::string(symbol->FullName());
-    }
     if (symbol->SourcePath()) {
       (*out)["srcPath"] = symbol->SourcePath();
     }

tools/binary_size/libsupersize/caspian/tree_builder.cc

@@ -159,7 +159,8 @@ void TreeBuilder::AddFileEntry(GroupedPath grouped_path,
     }
     TreeNode* symbol_node = new TreeNode();
     symbol_node->container_type = ContainerType::kSymbol;
-    symbol_node->id_path = GroupedPath{"", sym->FullName()};
+    symbol_node->id_path =
+        GroupedPath{"", sym->IsDex() ? sym->TemplateName() : sym->FullName()};
     symbol_node->size = sym->Pss();
     symbol_node->node_stats = NodeStats(*sym);
     symbol_node->symbol = sym;

tools/binary_size/libsupersize/static/infocard-ui.js

@@ -88,6 +88,10 @@ const displayInfocard = (() => {
             document.createElement('br'),
             dom.textElement('span', 'Component: ', 'symbol-name-info'),
             document.createTextNode(node.component || '(No component)'),
+            document.createElement('br'),
+            dom.textElement('span', 'Full Name: ', 'symbol-name-info'),
+            document.createTextNode(node.fullName || ''),
+            document.createElement('br'),
         ]);
       } else {
         const path = node.idPath.slice(0, node.shortNameIndex);

tools/binary_size/libsupersize/static/main.css

@@ -143,6 +143,9 @@ ul {
 }
 
 /** Tree nodes */
+[role="treeitem"] {
+  position: relative;
+}
 .node {
   display: flex;
   padding-right: 8px;
@@ -151,7 +154,6 @@ ul {
   text-decoration: none;
   color: inherit;
   border-radius: 4px;
-  position: relative;
 }
 .node:hover {
   background: #f1f3f4;

tools/binary_size/libsupersize/static/tree-ui.js

@@ -310,10 +310,10 @@ const newTreeElement = (() => {
     const isLeaf = data.children && data.children.length === 0;
     const template = isLeaf ? _leafTemplate : _treeTemplate;
     const element = document.importNode(template.content, true);
+    const listItemEl = element.firstElementChild;
+    const link = listItemEl.firstElementChild;
 
     // Associate clickable node & tree data
-    /** @type {HTMLAnchorElement | HTMLSpanElement} */
-    const link = element.querySelector('.node');
     _uiNodeData.set(link, Object.freeze(data));
 
     // Icons are predefined in the HTML through hidden SVG elements
@@ -327,7 +327,7 @@ const newTreeElement = (() => {
     // Insert an SVG icon at the start of the link to represent adds/removals.
     const diffStatusIcon = getDiffStatusTemplate(data);
     if (diffStatusIcon) {
-      link.insertBefore(diffStatusIcon, link.firstElementChild);
+      listItemEl.insertBefore(diffStatusIcon, listItemEl.firstElementChild);
     }
 
     // Insert an SVG icon at the start of the link to represent type