[Lorenz] Update UI of selected node details panel

Instead of displaying below the "general details" section, the class and
package-specific node details have now been moved up and placed in the
same list layout as the general details, making the panel more uniform.
Icons have also been added beside all links, the same as the favicon for
the page, to indicate that the links take you to a different graph.

Bug: 1102546
Change-Id: Ib05b35b7108685dad3cb5f0a87841302fa061e73
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2349983
Commit-Queue: James Long <yjlong@google.com>
Reviewed-by: Mohamed Heikal <mheikal@chromium.org>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#797399}

tools/android/dependency_analysis/js/package.json

@@ -20,6 +20,7 @@
     "eslint": "^7.2.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-vue": "^7.0.0-alpha.9",
+    "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.3.0",
     "http-server": "^0.12.3",
     "style-loader": "^1.2.1",

tools/android/dependency_analysis/js/src/vue_components/class_details_panel.vue

@@ -3,24 +3,36 @@
      found in the LICENSE file. -->
 
 <template>
-  <div
-      v-if="selectedClass !== null"
-      class="class-details-panel">
-    <LinkToGraph
-        :filter="[selectedClass.packageName]"
-        :graph-type="PagePathName.PACKAGE"
-        :text="'View ' + selectedClass.packageName"/>
-    <div v-if="selectedClass.buildTargets.length > 0">
-      <div>Class buildtarget(s):</div>
-      <ul>
-        <li
-            v-for="buildTarget in selectedClass.buildTargets"
-            :key="buildTarget">
-          {{ buildTarget }}
-        </li>
-      </ul>
-    </div>
-  </div>
+  <MdList class="md-double-line details-list">
+    <MdListItem>
+      <div class="list-item-entry">
+        <!-- Ideally this is the first element under .md-list-item-text for a
+             double-line layout, but vue-material doesn't recognize this
+             component. Therefore it's pulled outside, and a placeholder <span/>
+             is added so the second line would be properly styled. -->
+        <LinkToGraph
+            :filter="[selectedClass.packageName]"
+            :graph-type="PagePathName.PACKAGE"
+            :text="selectedClass.packageName"/>
+        <div class="md-list-item-text">
+          <span/>
+          <span>Package Graph URL</span>
+        </div>
+      </div>
+    </MdListItem>
+    <MdListItem v-if="selectedClass.buildTargets.length > 0">
+      <div class="md-list-item-text">
+        <ul class="buildtarget-list">
+          <li
+              v-for="buildTarget in selectedClass.buildTargets"
+              :key="buildTarget">
+            {{ buildTarget }}
+          </li>
+        </ul>
+        <span>Build Targets</span>
+      </div>
+    </MdListItem>
+  </MdList>
 </template>
 
 <script>
@@ -43,3 +55,17 @@ const ClassDetailsPanel = {
 
 export default ClassDetailsPanel;
 </script>
+
+<style scoped>
+.buildtarget-list {
+  padding-left: 0;
+}
+
+.details-list {
+  padding: 0;
+}
+
+.list-item-entry {
+  width: 100%;
+}
+</style>

tools/android/dependency_analysis/js/src/vue_components/class_graph_page.vue

@@ -73,9 +73,10 @@
       <GraphSelectedNodeDetails
           :selected-node-details-data="pageModel.selectedNodeDetailsData"
           @[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
-          @[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode"/>
-      <ClassDetailsPanel
-          :selected-class="pageModel.selectedNodeDetailsData.selectedNode"/>
+          @[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode">
+        <ClassDetailsPanel
+            :selected-class="pageModel.selectedNodeDetailsData.selectedNode"/>
+      </GraphSelectedNodeDetails>
     </div>
   </div>
 </template>
@@ -270,13 +271,6 @@ const ClassGraphPage = {
 export default ClassGraphPage;
 </script>
 
-<style>
-.user-input-group {
-  display: flex;
-  flex-direction: column;
-}
-</style>
-
 <style scoped>
 #title {
   padding: 10px;
@@ -300,7 +294,7 @@ export default ClassGraphPage;
   flex-direction: column;
   flex-grow: 0;
   overflow-y: scroll;
-  padding: 0 20px;
+  padding: 0 20px 20px 20px;
   width: 30vw;
 }
 

tools/android/dependency_analysis/js/src/vue_components/graph_filter_items.vue

@@ -94,13 +94,6 @@ const GraphFilterItems = {
 export default GraphFilterItems;
 </script>
 
-<style>
-#filter-list .md-list-item-content {
-  min-height: 0;
-  padding: 0;
-}
-</style>
-
 <style scoped>
 ul {
   list-style-type: none;
@@ -126,6 +119,11 @@ ul {
   overflow-y: scroll;
 }
 
+#filter-list >>> .md-list-item-content {
+  min-height: 0;
+  padding: 0;
+}
+
 #controls {
   display: flex;
   flex-direction: row;

tools/android/dependency_analysis/js/src/vue_components/graph_selected_node_details.vue

@@ -5,24 +5,9 @@
 <template>
   <div class="selected-node-details">
     <template v-if="selectedNode !== null">
-      <MdList class="md-double-line">
-        <MdListItem>
-          <div class="md-list-item-text">
-            <span class="selected-node-details-text">
-              {{ selectedNode.id }}
-            </span>
-            <span>Name</span>
-          </div>
-        </MdListItem>
-        <MdListItem>
-          <div class="md-list-item-text">
-            <span class="selected-node-details-text">
-              {{ selectedNode.displayName }}
-            </span>
-            <span>Display Name</span>
-          </div>
-        </MdListItem>
-      </MdList>
+      <div class="md-title selected-node-title">
+        {{ selectedNode.displayName }}
+      </div>
       <MdButton
           v-if="selectedNode.visualizationState.selectedByFilter"
           class="md-primary md-raised md-dense"
@@ -35,6 +20,17 @@
           @click="checkNodeInFilter">
         Add/check in filter
       </MdButton>
+      <MdList class="md-double-line details-list">
+        <MdListItem>
+          <div class="md-list-item-text">
+            <span class="selected-node-details-text">
+              {{ selectedNode.id }}
+            </span>
+            <span>Full Name</span>
+          </div>
+        </MdListItem>
+      </MdList>
+      <slot/>
     </template>
     <div v-else>
       (Click a node for more details.)
@@ -72,8 +68,15 @@ export default GraphSelectedNodeDetails;
   flex-direction: column;
 }
 
-.selected-node-details-text{
-  display: inline-block;
+.details-list {
+  padding: 0;
+}
+
+.selected-node-title {
+  word-wrap: break-word;
+}
+
+.selected-node-details-text {
   white-space: normal;
   width: 100%;
   word-wrap: break-word;

tools/android/dependency_analysis/js/src/vue_components/link_to_graph.vue

@@ -3,12 +3,23 @@
      found in the LICENSE file. -->
 
 <template>
-  <a :href="url">{{ text }}</a>
+  <a
+      class="link-to-graph-container"
+      :href="url">
+    <img
+        class="link-to-graph-icon"
+        :src="GraphIcon">
+    <div class="link-to-graph-text">
+      {{ text }}
+    </div>
+  </a>
 </template>
 
 <script>
 import {UrlProcessor, URL_PARAM_KEYS} from '../url_processor.js';
 
+import GraphIcon from '../assets/graph_icon.png';
+
 // @vue/component
 const LinkToGraph = {
   props: {
@@ -17,6 +28,7 @@ const LinkToGraph = {
     text: String,
   },
   computed: {
+    GraphIcon: () => GraphIcon,
     url: function() {
       const urlProcessor = UrlProcessor.createForOutput();
       urlProcessor.appendArray(URL_PARAM_KEYS.FILTER_NAMES, this.filter);
@@ -27,3 +39,23 @@ const LinkToGraph = {
 
 export default LinkToGraph;
 </script>
+
+<style scoped>
+.link-to-graph-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.link-to-graph-icon {
+  height: 24px;
+  margin-right: 10px;
+  width: 24px;
+}
+
+.link-to-graph-text {
+  min-width: 0;
+  white-space: normal;
+  word-wrap: break-word;
+}
+</style>

tools/android/dependency_analysis/js/src/vue_components/package_details_panel.vue

@@ -3,24 +3,49 @@
      found in the LICENSE file. -->
 
 <template>
-  <div
-      v-if="selectedPackage !== null"
-      class="package-details-panel">
-    <LinkToGraph
-        :filter="packageClassNames"
-        :graph-type="PagePathName.CLASS"
-        text="Class graph with all classes in this package"/>
-    <ul>
-      <li
-          v-for="classObj in packageClassObjects"
-          :key="classObj.name">
+  <MdList class="md-double-line details-list">
+    <MdListItem>
+      <div class="list-item-entry">
+        <!-- Ideally this is the first element under .md-list-item-text for a
+             double-line layout, but vue-material doesn't recognize this
+             component. Therefore it's pulled outside, and a placeholder <span/>
+             is added so the second line would be properly styled. -->
         <LinkToGraph
-            :filter="[classObj.name]"
+            :filter="packageClassNames"
             :graph-type="PagePathName.CLASS"
-            :text="classObj.shortName"/>
-      </li>
-    </ul>
-  </div>
+            :text="selectedPackage.displayName"/>
+        <div class="md-list-item-text">
+          <span/>
+          <span>Full Class Graph URL</span>
+        </div>
+      </div>
+    </MdListItem>
+    <MdListItem>
+      <div class="list-item-entry">
+        <!-- Ideally this is the first element under .md-list-item-text for a
+             double-line layout, but vue-material doesn't recognize this
+             component. Therefore it's pulled outside, and a placeholder <span/>
+             is added so the second line would be properly styled. -->
+        <MdList
+            id="class-list"
+            class="md-scrollbar">
+          <MdListItem
+              v-for="classObj in packageClassObjects"
+              :key="classObj.name">
+            <LinkToGraph
+                class="class-list-entry"
+                :filter="[classObj.name]"
+                :graph-type="PagePathName.CLASS"
+                :text="classObj.shortName"/>
+          </MdListItem>
+        </MdList>
+        <div class="md-list-item-text">
+          <span/>
+          <span>Individual Class Graph URLs</span>
+        </div>
+      </div>
+    </MdListItem>
+  </MdList>
 </template>
 
 <script>
@@ -57,10 +82,27 @@ export default PackageDetailsPanel;
 </script>
 
 <style scoped>
-.package-details-panel {
-  max-height: 400px;
-  min-height: 200px;
+#class-list {
+  max-height: 300px;
   overflow-y: scroll;
-  overflow-x: hidden;
+}
+
+#class-list >>> .md-list-item-content {
+  min-height: 0;
+  padding: 0;
+}
+
+.class-list-entry {
+  width: 100%;
+}
+
+.details-list {
+  padding: 0;
+}
+
+.list-item-entry {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 </style>

tools/android/dependency_analysis/js/src/vue_components/package_graph_page.vue

@@ -68,9 +68,10 @@
       <GraphSelectedNodeDetails
           :selected-node-details-data="pageModel.selectedNodeDetailsData"
           @[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
-          @[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode"/>
-      <PackageDetailsPanel
-          :selected-package="pageModel.selectedNodeDetailsData.selectedNode"/>
+          @[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode">
+        <PackageDetailsPanel
+            :selected-package="pageModel.selectedNodeDetailsData.selectedNode"/>
+      </GraphSelectedNodeDetails>
     </div>
   </div>
 </template>
@@ -270,7 +271,7 @@ export default PackageGraphPage;
   flex-direction: column;
   flex-grow: 0;
   overflow-y: scroll;
-  padding: 0 20px;
+  padding: 0 20px 20px 20px;
   width: 30vw;
 }
 

tools/android/dependency_analysis/js/webpack.config.js

@@ -61,6 +61,10 @@ module.exports = {
         test: /\.css$/,
         use: ['vue-style-loader', 'style-loader', 'css-loader'],
       },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: 'file-loader',
+      },
     ],
   },
   plugins: [