Skip to content

GitLab

T
tangled
Commit 9bbad064 authored by Tiger Oakes's avatar Tiger Oakes Committed by Commit Bot
Browse files
Options

Added infocard that displays on hover to supersize 

When a tree node is hovered over, an information card displays breaking down
the contents of that node. This is based on the hover effect from the old UI.

For symbols, this is a card with its full name, byte size, and type, showing
information similar to what is currently represented by the "title" attribute.

For containers, this is a card that also includes a breakdown of the symbol
types within that container. A table listing the sizes and percentags is
displayed, as well as a pie chart rendered with the Canvas API.

Demo:
https://notwoods.github.io/chrome-supersize-reports/monochrome-2018-07-06/

Bug: 847599
Change-Id: Ie33ea09bc3476e260d70391c5b2e88597f09a69d
Reviewed-on: https://chromium-review.googlesource.com/1127857
Commit-Queue: Tiger Oakes <tigero@google.com>
Reviewed-by: default avatarPeter Wen <wnwen@chromium.org>
Reviewed-by: default avataragrieve <agrieve@chromium.org>
Reviewed-by: default avatarEric Stevenson <estevenson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#573326}
parent 24db2e5d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 451 additions and 36 deletions
tools/binary_size/libsupersize/html_report.py
View file @ 9bbad064
......@@ -341,6 +341,7 @@ def _CopyTreeViewTemplateFiles(template_src, dest_dir, **kwargs):
"""
_MakeDirIfDoesNotExist(dest_dir)
shutil.copy(os.path.join(template_src, 'options.css'), dest_dir)
shutil.copy(os.path.join(template_src, 'infocard.css'), dest_dir)
shutil.copy(os.path.join(template_src, 'state.js'), dest_dir)
with open(os.path.join(dest_dir, 'index.html'), 'w') as out_html, \
......
tools/binary_size/libsupersize/template_tree_view/index.html
View file @ 9bbad064
......@@ -65,6 +65,14 @@
.subhead-2 {
font-size: 14px;
}
.body-2 {
font-weight: 400;
font-size: 14px;
}
.caption {
font-size: 12px;
color: #5f6368;
}
ul {
list-style-type: none;
......@@ -91,6 +99,7 @@
}
.icon {
display: block;
margin-right: 6px;
}
......@@ -134,7 +143,7 @@
flex: 1;
}
.size {
.size, .percent {
margin-left: 16px;
text-align: right;
color: #5f6368;
......@@ -144,7 +153,6 @@
color: #ea4335;
}
</style>
<link href="options.css" rel="stylesheet">
<script defer src="state.js"></script>
<script defer src="tree.js"></script>
<script defer async onload="loadTree(tree_data);" src="data.js"></script>
......@@ -179,6 +187,7 @@
</svg>
</button>
</header>
<link href="options.css" rel="stylesheet">
<form id="options" class="options" method="GET">
<header class="form-bar">
<button type="button" class="icon-button toggle-options" title="Close">
......@@ -385,6 +394,88 @@
<ul id="symboltree" class="tree" role="tree" aria-labelledby="headline"></ul>
</main>
</div>
<link href="infocard.css" rel="stylesheet">
<footer class="infocard infocard-container open" id="infocardcontainer" hidden>
<canvas class="type-pie-info" height="80" width="80"></canvas>
<header class="header-info">
<h4 class="subhead size-info">N bytes</h4>
<p class="body-2 path-info">path/to/<span class="symbol-name-info">symbol</span></p>
</header>
<table class="type-breakdown-info">
<thead>
<tr>
<th class="subhead-2">Type</th>
<th class="subhead-2 size">Total size</th>
<th class="subhead-2 percent">Percent</th>
</tr>
</thead>
<tbody>
<tr class="bss-info">
<th scope="row">.bss</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="data-info">
<th scope="row">.data and .data.*</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="rodata-info">
<th scope="row">.rodata</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="text-info">
<th scope="row">.text</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="vtable-info">
<th scope="row">Vtable entry</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="gen-info">
<th scope="row">Generated symbols</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="dexnon-info">
<th scope="row">Dex non-method entries</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="dex-info">
<th scope="row">Dex methods</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="pak-info">
<th scope="row">Locale pak entries</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="paknon-info">
<th scope="row">Non-locale pak entries</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
<tr class="other-info">
<th scope="row">Other entries</th>
<td class="size">0</td>
<td class="percent">0%</td>
</tr>
</tbody>
</table>
</footer>
<footer class="infocard infocard-symbol" id="infocardsymbol" hidden>
<div class="icon-info"></div>
<header class="header-info">
<h4 class="subhead size-info">N bytes</h4>
<p class="body-2 path-info">path/to/<span class="symbol-name-info">symbol</span></p>
</header>
<p class="caption type-info">Initialized data (.data)</p>
</footer>
</body>
</html>
\ No newline at end of file
tools/binary_size/libsupersize/template_tree_view/infocard.css 0 → 100644
View file @ 9bbad064
/* Copyright 2018 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. */
.infocard {
display: grid;
position: fixed;
padding: 16px;
margin: 0 auto;
bottom: 8px;
left: 8px;
right: 8px;
max-width: 512px;
max-height: 50vh;
overflow-y: auto;
background: white;
border-radius: 8px;
box-shadow: 0 1px 2px #3c40434d, 0 1px 3px 1px #3c404326;
}
.infocard-container {
grid-template-areas: 'header icon' 'type type';
grid-template-columns: auto 80px;
grid-column-gap: 16px;
grid-row-gap: 8px;
}
.infocard-symbol {
grid-template-areas: 'icon header' 'type type';
grid-template-columns: 40px auto;
grid-column-gap: 16px;
}
.infocard[hidden] {
display: none;
}
@media (min-width: 700px) {
.show-options .infocard {
right: 256px;
}
}
.icon-info {
grid-area: icon;
align-self: center;
padding: 8px 2px 8px 8px;
border-radius: 50%;
}
.header-info {
grid-area: header;
}
.size-info {
margin: 0 0 2px;
color: #202124;
}
.path-info {
margin: 0 0 8px;
word-break: break-word;
}
.symbol-name-info {
font-weight: 500;
}
.type-info {
grid-area: type;
margin-bottom: 0;
}
.type-pie-info {
grid-area: icon;
align-self: center;
background: #5f6368;
border-radius: 50%;
}
.type-breakdown-info {
grid-area: type;
border-top: 1px solid #dadce0;
padding-top: 8px;
clear: right;
}
th {
text-align: left;
}
th[scope='row'],
td {
font-weight: normal;
font-size: 14px;
}
tools/binary_size/libsupersize/template_tree_view/options.css
View file @ 9bbad064
......@@ -13,6 +13,7 @@
/** Black overlay shown on smaller screens when options is visible. */
.scrim {
z-index: 5; /* Side panel layer */
position: fixed;
top: 0;
left: 0;
......@@ -23,6 +24,7 @@
/** Options side panel */
.options {
z-index: 5; /* Side panel layer */
display: none;
grid-area: options;
padding: 0 16px;
......
tools/binary_size/libsupersize/template_tree_view/tree-worker.js
View file @ 9bbad064
......@@ -36,14 +36,17 @@
*/
/**
* @typedef {object} TreeNode Node object used to represent the file tree
* @typedef {object} TreeNode Node object used to represent the file tree. Can
* represent either a folder, file, component, or symbol.
* @prop {TreeNode[]} children Child tree nodes
* @prop {TreeNode | null} parent Parent tree node. null if this is a root node.
* @prop {string} idPath
* @prop {string} shortName
* @prop {number} size
* @prop {string} type
* @prop {{ [type: string]: number }} childSizes
* @prop {string} idPath Full path to this node.
* @prop {string} shortName Name of this node, included in idPath.
* @prop {number} size Byte size of this node and its children.
* @prop {string} type Type of this node. If this node has children, the string
* may have a second character to denote the most common child.
* @prop {{[type: string]: number}} childSizes The sizes of the children
* of this node, split by the types of the children.
*/
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment