[Lorenz] Apply different themes to class and package pages

The package graph page is now blue, and the class graph page is now red. The favicons for each page type have been updated to reflect this, and links to the other page type have the corresponding icons in order to indicate a change in the page type. Hyperlinks remain blue, regardless of page type, to avoid confusion. Bug: 1102546 Change-Id: I23ef7fb7cb2a85678a4b29712716905523a89cab Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2354526 Commit-Queue: James Long <yjlong@google.com> Reviewed-by: Samuel Huang <huangs@chromium.org> Reviewed-by: Mohamed Heikal <mheikal@chromium.org> Cr-Commit-Position: refs/heads/master@{#798140}

[Lorenz] Apply different themes to class and package pages
The package graph page is now blue, and the class graph page is now red. The favicons for each page type have been updated to reflect this, and links to the other page type have the corresponding icons in order to indicate a change in the page type. Hyperlinks remain blue, regardless of page type, to avoid confusion. Bug: 1102546 Change-Id: I23ef7fb7cb2a85678a4b29712716905523a89cab Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2354526 Commit-Queue: James Long <yjlong@google.com> Reviewed-by: Samuel Huang <huangs@chromium.org> Reviewed-by: Mohamed Heikal <mheikal@chromium.org> Cr-Commit-Position: refs/heads/master@{#798140}
23e55fc6 · James Long · Commit Bot · 84c96536 · 23e55fc6 · 23e55fc6
Commit 23e55fc6 authored Aug 14, 2020 by James Long Committed by Commit Bot Aug 14, 2020
12 changed files
--- a/tools/android/dependency_analysis/js/package.json
+++ b/tools/android/dependency_analysis/js/package.json
@@ -23,7 +23,8 @@
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "http-server": "^0.12.3",
-    "style-loader": "^1.2.1",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^9.0.3",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",

--- a/tools/android/dependency_analysis/js/src/assets/class_graph_icon.png
+++ b/tools/android/dependency_analysis/js/src/assets/class_graph_icon.png
--- a/tools/android/dependency_analysis/js/src/assets/graph_icon.png
+++ b/tools/android/dependency_analysis/js/src/assets/graph_icon.png
--- a/tools/android/dependency_analysis/js/src/class_view.html
+++ b/tools/android/dependency_analysis/js/src/class_view.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <link rel="icon" type="image/png"
-        href="https://fonts.gstatic.com/s/i/googlematerialicons/account_tree/v6/gm_blue-48dp/1x/gm_account_tree_gm_blue_48dp.png">
    <link rel="stylesheet"
        href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
  </head>

--- a/tools/android/dependency_analysis/js/src/class_view.js
+++ b/tools/android/dependency_analysis/js/src/class_view.js
@@ -21,7 +21,6 @@ import {
 } from 'vue-material/dist/components';

 import 'vue-material/dist/vue-material.min.css';
-import 'vue-material/dist/theme/default.css';

 document.addEventListener('DOMContentLoaded', () => {
  loadGraph().then(data => {

--- a/tools/android/dependency_analysis/js/src/package_view.html
+++ b/tools/android/dependency_analysis/js/src/package_view.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <link rel="icon" type="image/png"
-        href="https://fonts.gstatic.com/s/i/googlematerialicons/account_tree/v6/gm_blue-48dp/1x/gm_account_tree_gm_blue_48dp.png">
    <link rel="stylesheet"
        href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
  </head>

--- a/tools/android/dependency_analysis/js/src/package_view.js
+++ b/tools/android/dependency_analysis/js/src/package_view.js
@@ -21,7 +21,6 @@ import {
 } from 'vue-material/dist/components';

 import 'vue-material/dist/vue-material.min.css';
-import 'vue-material/dist/theme/default.css';

 document.addEventListener('DOMContentLoaded', () => {
  loadGraph().then(data => {

--- a/tools/android/dependency_analysis/js/src/vue_components/class_graph_page.vue
+++ b/tools/android/dependency_analysis/js/src/vue_components/class_graph_page.vue
@@ -271,6 +271,17 @@ const ClassGraphPage = {
 export default ClassGraphPage;
 </script>

+<style lang="scss">
+@import "~vue-material/dist/theme/engine";
+
+@include md-register-theme("default", (
+  primary: #ff5252,
+  accent: #ff5252,
+));
+
+@import "~vue-material/dist/theme/all";
+</style>
+
 <style scoped>
 #title {
  padding: 10px;

--- a/tools/android/dependency_analysis/js/src/vue_components/graph_filter_input.vue
+++ b/tools/android/dependency_analysis/js/src/vue_components/graph_filter_input.vue
@@ -3,7 +3,7 @@
     found in the LICENSE file. -->

 <template>
-  <div class="user-input-group">
+  <div>
    <label
        class="md-subheading"
        for="filter-input">

--- a/tools/android/dependency_analysis/js/src/vue_components/link_to_graph.vue
+++ b/tools/android/dependency_analysis/js/src/vue_components/link_to_graph.vue
@@ -8,7 +8,7 @@
      :href="url">
    <img
        class="link-to-graph-icon"
-        :src="GraphIcon">
+        :src="graphIcon">
    <div class="link-to-graph-text">
      {{ text }}
    </div>
@@ -16,9 +16,15 @@
 </template>

 <script>
-import {UrlProcessor, URL_PARAM_KEYS} from '../url_processor.js';
+import {PagePathName, UrlProcessor, URL_PARAM_KEYS} from '../url_processor.js';

-import GraphIcon from '../assets/graph_icon.png';
+import PackageGraphIcon from '../assets/package_graph_icon.png';
+import ClassGraphIcon from '../assets/class_graph_icon.png';
+
+const GRAPH_NAME_TO_ICON = {
+  [PagePathName.PACKAGE]: PackageGraphIcon,
+  [PagePathName.CLASS]: ClassGraphIcon,
+};

 // @vue/component
 const LinkToGraph = {
@@ -28,7 +34,9 @@ const LinkToGraph = {
    text: String,
  },
  computed: {
-    GraphIcon: () => GraphIcon,
+    graphIcon: function() {
+      return GRAPH_NAME_TO_ICON[this.graphType] || '';
+    },
    url: function() {
      const urlProcessor = UrlProcessor.createForOutput();
      urlProcessor.appendArray(URL_PARAM_KEYS.FILTER_NAMES, this.filter);
@@ -43,10 +51,21 @@ export default LinkToGraph;
 <style scoped>
 .link-to-graph-container {
  align-items: center;
+  /**
+   * !important because the vue-material theme specifically styles
+   * `.md-theme-default a` elements (md-theme-default is a class on the root
+   * <html/>) and is imported later by webpack, giving it precedence over any
+   * class selectors.
+   */
+  color: #448aff !important;
  display: flex;
  flex-direction: row;
 }

+.link-to-graph-container:hover {
+  color: #448aff !important;
+}
+
 .link-to-graph-icon {
  height: 24px;
  margin-right: 10px;
@@ -54,6 +73,7 @@ export default LinkToGraph;
 }

 .link-to-graph-text {
+  color: #448aff;
  min-width: 0;
  white-space: normal;
  word-wrap: break-word;

--- a/tools/android/dependency_analysis/js/src/vue_components/package_graph_page.vue
+++ b/tools/android/dependency_analysis/js/src/vue_components/package_graph_page.vue
@@ -241,11 +241,15 @@ const PackageGraphPage = {
 export default PackageGraphPage;
 </script>

-<style>
-.user-input-group {
-  display: flex;
-  flex-direction: column;
-}
+<style lang="scss">
+@import "~vue-material/dist/theme/engine";
+
+@include md-register-theme("default", (
+  primary: #448aff,
+  accent: #448aff,
+));
+
+@import "~vue-material/dist/theme/all";
 </style>

 <style scoped>

--- a/tools/android/dependency_analysis/js/webpack.config.js
+++ b/tools/android/dependency_analysis/js/webpack.config.js
@@ -59,7 +59,11 @@ module.exports = {
      },
      {
        test: /\.css$/,
-        use: ['vue-style-loader', 'style-loader', 'css-loader'],
+        use: ['vue-style-loader', 'css-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
@@ -72,11 +76,13 @@ module.exports = {
    new HtmlWebpackPlugin({
      filename: 'package_view.html',
      template: './src/package_view.html',
+      favicon: './src/assets/package_graph_icon.png',
      chunks: ['packageView'],
    }),
    new HtmlWebpackPlugin({
      filename: 'class_view.html',
      template: './src/class_view.html',
+      favicon: './src/assets/class_graph_icon.png',
      chunks: ['classView'],
    }),
    // For development purposes: Copies `json_graph.txt` in `src` to `src/dist`