Refactor the frontend using material-desing UI.

Changed the layout and improved UX.

Test: Mannual tested.
Change-Id: I964357aec78af57bc42efc79dd4ab9be6df6b777

tools/ota_analysis/src/App.vue

@@ -1,347 +1,41 @@
 <template>
-  <div id="nav">
-    <router-link :to="{ name: 'Analysis' }">
-      Analysis
-    </router-link> |
-    <router-link :to="{ name: 'About' }">
-      About
-    </router-link>
-  </div>
-  <div id="app">
-    <router-view />
-  </div>
+  <v-app>
+    <v-app-bar
+      rounded
+      color="primary"
+    >
+      <v-app-bar-title> OTA Analyzer </v-app-bar-title>
+      <v-spacer />
+      <v-btn
+        v-for="link in links"
+        :key="`${link}-header-link`"
+        :to="{ name: link }"
+        class="ml-5"
+        color="primary"
+      >
+        {{ link }}
+      </v-btn>
+    </v-app-bar>
+    <v-main>
+      <v-container fluid>
+        <router-view />
+      </v-container>
+    </v-main>
+  </v-app>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      links: ['Analysis', 'About'],
+    }
+  },
+}
+</script>
+
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-
-h4 {
-  font-size: 20px;
-  text-align: center;
-}
-html {
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-body {
-  margin: 0;
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-}
-#app {
-  box-sizing: border-box;
-  width: 500px;
-  padding: 0 20px 20px;
-  margin: 0 auto;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-a {
-  color: #39b982;
-  font-weight: 600;
-  background-color: transparent;
-}
-img {
-  border-style: none;
-  width: 100%;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  display: flex;
-  align-items: center;
-  font-family: "Montserrat", sans-serif;
-}
-h1 {
-  font-size: 50px;
-  font-weight: 700;
-}
-h2 {
-  font-size: 38px;
-  font-weight: 700;
-}
 h3 {
-  font-size: 28px;
-  font-weight: 700;
-}
-h4 {
-  font-size: 21px;
-  font-weight: 700;
-}
-h5 {
-  font-size: 16px;
-  font-weight: 700;
-}
-h6 {
-  font-size: 15px;
-  font-weight: 700;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-small {
-  font-size: 80%;
-}
-.eyebrow {
-  font-size: 20px;
-}
-.-text-primary {
-  color: #39b982;
-}
-.-text-base {
-  color: #000;
-}
-.-text-error {
-  color: tomato;
-}
-.-text-gray {
-  color: rgba(0, 0, 0, 0.5);
-}
-.-shadow {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.13);
-}
-.badge {
-  display: inline-flex;
-  height: 26px;
-  width: auto;
-  padding: 0 7px;
-  margin: 0 5px;
-  background: transparent;
-  border-radius: 13px;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 26px;
-}
-.badge.-fill-gradient {
-  background: linear-gradient(to right, #16c0b0, #84cf6a);
-  color: #fff;
-}
-button,
-label,
-input,
-optgroup,
-select,
-textarea {
-  display: inline-flex;
-  font-family: "Open sans", sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: none;
-}
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 2px solid #39b982;
-}
-label {
-  color: rgba(0, 0, 0, 0.5);
-  font-weight: 700;
-}
-input,
-textarea {
-  box-sizing: border-box;
-  border: solid 1px rgba(0, 0, 0, 0.4);
-}
-input.error,
-select.error {
-  margin-bottom: 0;
-}
-input + p.errorMessage {
-  margin-bottom: 24px;
-}
-textarea {
-  width: 100%;
-  overflow: auto;
-  font-size: 20px;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-  margin-right: 0.5rem;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-[type="text"],
-[type="number"],
-[type="search"],
-[type="password"] {
-  height: 52px;
-  width: 100%;
-  padding: 0 10px;
-  font-size: 20px;
-}
-[type="text"]:focus,
-[type="number"]:focus,
-[type="search"]:focus,
-[type="password"]:focus {
-  border-color: #39b982;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-[hidden] {
-  display: none;
-}
-.error {
-  border: 1px solid red;
-}
-select {
-  width: 100%;
-  height: 52px;
-  padding: 0 24px 0 10px;
-  vertical-align: middle;
-  background: #fff
-    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
-    no-repeat right 12px center;
-  background-size: 8px 10px;
-  border: solid 1px rgba(0, 0, 0, 0.4);
-  border-radius: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-select:focus {
-  border-color: #39b982;
-  outline: 0;
-}
-select:focus::ms-value {
-  color: #000;
-  background: #fff;
-}
-select::ms-expand {
-  opacity: 0;
-}
-.field {
-  margin-bottom: 24px;
-}
-.error {
-  border: 1px solid red;
-}
-.errorMessage {
-  color: red;
-}
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 52px;
-  padding: 0 40px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
   text-align: center;
-  font-weight: 600;
-  white-space: nowrap;
-  transition: all 0.2s linear;
 }
-.button:hover {
-  -webkit-transform: scale(1.02);
-  transform: scale(1.02);
-  box-shadow: 0 7px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-.button:active {
-  -webkit-transform: scale(1);
-  transform: scale(1);
-  box-shadow: none;
-}
-.button:focus {
-  outline: 0;
-}
-.button:disabled {
-  -webkit-transform: scale(1);
-  transform: scale(1);
-  box-shadow: none;
-}
-.button + .button {
-  margin-left: 1em;
-}
-.button.-fill-gradient {
-  background: linear-gradient(to right, #16c0b0, #84cf6a);
-  color: #ffffff;
-}
-.button.-fill-gray {
-  background: rgba(0, 0, 0, 0.5);
-  color: #ffffff;
-}
-.button.-size-small {
-  height: 32px;
-}
-.button.-icon-right {
-  text-align: left;
-  padding: 0 20px;
-}
-.button.-icon-right > .icon {
-  margin-left: 10px;
-}
-.button.-icon-left {
-  text-align: right;
-  padding: 0 20px;
-}
-.button.-icon-left > .icon {
-  margin-right: 10px;
-}
-.button.-icon-center {
-  padding: 0 20px;
-}
-</style>
+</style>

tools/ota_analysis/src/components/OperationDetail.vue

@@ -1,23 +1,26 @@
 <template>
-  {{ mapType.get(operation.type) }}
-  <p v-if="operation.hasOwnProperty('dataOffset')">
-    Data offset: {{ operation.dataOffset }}
-  </p>
-  <p v-if="operation.hasOwnProperty('dataLength')">
-    Data length: {{ operation.dataLength }}
-  </p>
-  <p v-if="operation.hasOwnProperty('srcExtents')">
-    Source: {{ operation.srcExtents.length }} extents ({{ srcTotalBlocks }}
-    blocks)
-    <br>
-    {{ srcBlocks }}
-  </p>
-  <p v-if="operation.hasOwnProperty('dstExtents')">
-    Destination: {{ operation.dstExtents.length }} extents ({{ dstTotalBlocks }}
-    blocks)
-    <br>
-    {{ dstBlocks }}
-  </p>
+  <ul>
+    <h5> {{ mapType.get(operation.type) }} </h5>
+    <li v-if="operation.hasOwnProperty('dataOffset')">
+      <strong> Data offset: </strong> {{ operation.dataOffset }}
+    </li>
+    <li v-if="operation.hasOwnProperty('dataLength')">
+      <strong> Data length: </strong> {{ operation.dataLength }}
+    </li>
+    <li v-if="operation.hasOwnProperty('srcExtents')">
+      <strong> Source: </strong> {{ operation.srcExtents.length }} extents ({{ srcTotalBlocks }}
+      blocks)
+      <br>
+      {{ srcBlocks }}
+    </li>
+    <li v-if="operation.hasOwnProperty('dstExtents')">
+      <strong> Destination: </strong> {{ operation.dstExtents.length }} extents ({{ dstTotalBlocks }}
+      blocks)
+      <br>
+      {{ dstBlocks }}
+    </li>
+  </ul>
+  <v-divider />
 </template>
 
 <script>
@@ -53,4 +56,16 @@ export default {
     }
   },
 }
-</script>
+</script>
+
+<style scoped>
+ul {
+  padding: 5px;
+}
+
+li {
+  color: black;
+  list-style-type: none;
+}
+
+</style>

tools/ota_analysis/src/components/PartialCheckbox.vue

@@ -1,14 +1,17 @@
 <template>
-  <ul v-bind="$attrs">
-    <button
-      type="button"
-      @click="revertAllSelection"
-      v-text="selectAllText[selectAll]"
-    />
-    <br>
-    <li
+  <v-btn
+    block
+    type="button"
+    class="my-5"
+    @click="revertAllSelection"
+  >
+    {{ selectAllText[selectAll] }}
+  </v-btn>
+  <v-row class="mb-5">
+    <v-col
       v-for="label in labels"
       :key="label"
+      cols="3"
     >
       <input
         type="checkbox"
@@ -17,8 +20,8 @@
         @change="updateSelected($event.target.value)"
       >
       <label v-if="label"> {{ label }} </label>
-    </li>
-  </ul>
+    </v-col>
+  </v-row>
 </template>
 
 <script>

tools/ota_analysis/src/components/PartitionDetail.vue

@@ -57,4 +57,8 @@ export default {
   cursor: pointer;
   color: #00c255;
 }
+
+li {
+  list-style-type: none;
+}
 </style>

tools/ota_analysis/src/components/PayloadComposition.vue

@@ -3,28 +3,56 @@
     v-model="partitionInclude"
     :labels="updatePartitions"
   />
-  <button @click="updateChart('blocks')">
-    Analyse Installed Blocks (in target build)
-  </button>
-  <button @click="updateChart('payload')">
-    Analyse Payload Composition
-  </button>
-  <button @click="updateChart('COWmerge')">
-    Analyse COW Merge Operations
-  </button>
-  <BaseFile
-    label="Select The Target Android Build"
-    @file-select="selectBuild"
-  />
-  <button
-    :disabled="!targetFile"
-    @click="updateChart('extensions')"
-  >
-    Analyse File Extensions
-  </button>
   <div v-if="echartsData">
     <PieChart :echartsData="echartsData" />
   </div>
+  <v-divider />
+  <v-row>
+    <v-col cols="6">
+      <v-btn
+        block
+        @click="updateChart('blocks')"
+      >
+        Analyse Installed Blocks (in target build)
+      </v-btn>
+    </v-col>
+    <v-col cols="6">
+      <v-btn
+        block
+        @click="updateChart('payload')"
+      >
+        Analyse Payload Composition
+      </v-btn>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="6">
+      <v-btn
+        block
+        @click="updateChart('COWmerge')"
+      >
+        Analyse COW Merge Operations
+      </v-btn>
+    </v-col>
+    <v-col cols="6">
+      <v-btn
+        block
+        :disabled="!targetFile"
+        @click="updateChart('extensions')"
+      >
+        Analyse File Extensions
+      </v-btn>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="6" />
+    <v-col cols="6">
+      <BaseFile
+        label="Drag and drop or Select The target Android build"
+        @file-select="selectBuild"
+      />
+    </v-col>
+  </v-row>
 </template>
 
 <script>
@@ -38,7 +66,7 @@ export default {
   components: {
     PartialCheckbox,
     PieChart,
-    BaseFile
+    BaseFile,
   },
   props: {
     manifest: {
@@ -51,7 +79,7 @@ export default {
       partitionInclude: new Map(),
       echartsData: null,
       listData: '',
-      targetFile: null
+      targetFile: null,
     }
   },
   computed: {
@@ -71,15 +99,16 @@ export default {
           metrics,
           partitionSelected,
           this.manifest.blockSize,
-          this.targetFile) }
-      catch (err) {
+          this.targetFile
+        )
+      } catch (err) {
         alert('Cannot be processed for the following issue: ', err)
       }
     },
     selectBuild(files) {
       //TODO(lishutong) check the version of target file is same to the OTA target
       this.targetFile = files[0]
-    }
+    },
   },
 }
 </script>

tools/ota_analysis/src/components/PayloadDetail.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="zipFile">
+  <div
+    v-if="zipFile"
+    class="mb-5"
+  >
     <h3>File infos</h3>
     <ul>
       <li>File name: {{ zipFile.name }}</li>
@@ -7,27 +10,36 @@
       <li>File last modified date: {{ zipFile.lastModifiedDate }}</li>
     </ul>
   </div>
+  <v-divider />
   <div v-if="payload">
-    <h3>Payload Compositin</h3>
-    <div v-if="payload.manifest">
-      <PayloadComposition :manifest="payload.manifest" />
-    </div>
     <h3>Partition List</h3>
-    <ul v-if="payload.manifest">
-      <li
+    <v-row
+      v-if="payload.manifest"
+      class="mb-5"
+    >
+      <v-col
         v-for="partition in payload.manifest.partitions"
         :key="partition.partitionName"
+        cols="4"
       >
-        <h4>{{ partition.partitionName }}</h4>
-        <p v-if="partition.estimateCowSize">
-          Estimate COW Size: {{ partition.estimateCowSize }} Bytes
-        </p>
-        <p v-else>
-          Estimate COW Size: 0 Bytes
-        </p>
-        <PartitionDetail :partition="partition" />
-      </li>
-    </ul>
+        <v-card
+          elevation="5"
+          hover
+          shaped
+          class="partial-info"
+        >
+          <h4> {{ partition.partitionName }} </h4>
+          <p v-if="partition.estimateCowSize">
+            <strong> Estimate COW Size: </strong> {{ partition.estimateCowSize }} Bytes
+          </p>
+          <p v-else>
+            <strong> Estimate COW Size: </strong> 0 Bytes
+          </p>
+          <PartitionDetail :partition="partition" />
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-divider />
     <h3>Metadata Signature</h3>
     <div
       v-if="payload.metadata_signature"
@@ -42,13 +54,11 @@
 
 <script>
 import PartitionDetail from './PartitionDetail.vue'
-import PayloadComposition from './PayloadComposition.vue'
 import { Payload } from '@/services/payload.js'
 
 export default {
   components: {
     PartitionDetail,
-    PayloadComposition,
   },
   props: {
     zipFile: {
@@ -84,4 +94,8 @@ function octToHex(bufferArray) {
   width: 100%;
   word-break: break-all;
 }
+
+.partial-info {
+  padding: 5px;
+}
 </style>

tools/ota_analysis/src/views/PackageAnalysis.vue

@@ -1,26 +1,43 @@
 <template>
-  <div>
-    <BaseFile
-      label="Select an OTA package"
-      @file-select="unpackOTA"
+  <v-row>
+    <v-col
+      cols="6"
+    >
+      <BaseFile
+        label="Please drag and drop an OTA package or Select one"
+        @file-select="unpackOTA"
+      />
+      <PayloadDetail
+        v-if="zipFile && payload"
+        :zipFile="zipFile"
+        :payload="payload"
+      />
+    </v-col>
+    <v-divider
+      vertical
     />
-    <PayloadDetail
-      v-if="zipFile && payload"
-      :zipFile="zipFile"
-      :payload="payload"
-    />
-  </div>
+    <v-col
+      cols="6"
+    >
+      <PayloadComposition
+        v-if="zipFile && payload.manifest"
+        :manifest="payload.manifest"
+      />
+    </v-col>
+  </v-row>
 </template>
 
 <script>
 import BaseFile from '@/components/BaseFile.vue'
 import PayloadDetail from '@/components/PayloadDetail.vue'
+import PayloadComposition from '@/components/PayloadComposition.vue'
 import { Payload } from '@/services/payload.js'
 
 export default {
   components: {
     BaseFile,
     PayloadDetail,
+    PayloadComposition,
   },
   data() {
     return {