[1] Introduce beta feature flag for new Ime panels

Add a new toolbar at the top of the front page of Winscope app.
This toolbar will show a list of beta features and checkboxes for
users to choose whether to use the beta feature.

For now, the only beta feature is the new / improved UI version
of the ImeTrace panels (to be implemented in the next few CLs).

Bug: 236226833
Test: manual (on local winscope build)

Change-Id: If64aff9e899363188010633758e36be474666984

tools/winscope/src/App.vue

@@ -56,6 +56,7 @@
 
       <md-app-content class="main-content" :style="mainContentStyle">
         <section class="data-inputs" v-if="!dataLoaded">
+          <betafeatures :setBetaImePanelFlag="this.setBetaImePanelFlag" />
           <div class="input">
             <dataadb class="adbinput" ref="adb" :store="store"
               @dataReady="onDataReady" />
@@ -112,6 +113,7 @@ import {NAVIGATION_STYLE, SEARCH_TYPE} from './utils/consts';
 import {TRACE_TYPES, FILE_TYPES, dataFile} from './decode.js';
 import { TaggingEngine } from './flickerlib/common';
 import titleComponent from './Title.vue';
+import BetaFeaturesToolbar from '@/BetaFeaturesToolbar';
 
 const APP_NAME = 'Winscope';
 
@@ -134,6 +136,9 @@ export default {
         flickerTraceView: false,
         showFileTypes: [],
         isInputMode: false,
+        betaFeatures: {
+          newImePanels: false,
+        },
       }),
       overlayRef: 'overlay',
       mainContentStyle: {
@@ -145,7 +150,7 @@ export default {
       searchTypes: [SEARCH_TYPE.TIMESTAMP],
       hasTagOrErrorTraces: false,
       traceName: "unnamed_winscope_trace",
-      editingTraceName: false
+      editingTraceName: false,
     };
   },
   created() {
@@ -307,7 +312,13 @@ export default {
 
     editTraceName() {
       this.editingTraceName = true;
-    }
+    },
+
+    setBetaImePanelFlag(flag) {
+      console.log('Beta IME feature (combining WM&SF properties in)' +
+          ' enabled:', flag);
+      this.store.betaFeatures.newImePanels = flag;
+    },
   },
   computed: {
     files() {
@@ -368,6 +379,7 @@ export default {
     dataadb: DataAdb,
     searchbar: Searchbar,
     ["vue-title"]: titleComponent,
+    betafeatures: BetaFeaturesToolbar,
   },
 };
 </script>

tools/winscope/src/BetaFeaturesToolbar.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="beta-options md-toolbar md-transparent md-dense">
+    <div>
+      <h2 class="heading md-title">Beta Features</h2>
+      <md-checkbox
+          v-model="betaImePanel">
+        IME Panel with WM & SF Properties
+      </md-checkbox>
+    </div>
+    <div class="description">
+      These features are still in beta and you may experience
+      some issues with them. Please select / unselect the checkbox(es)
+      BEFORE capturing with ADB or uploading your files.
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BetaFeaturesToolbar.vue',
+  props: ['setBetaImePanelFlag'],
+  data() {
+    return {
+      betaImePanel: false,
+    };
+  },
+  created() {
+    // reset store's flag for use case where user clicks 'Clear'
+    this.setBetaImePanelFlag(this.betaImePanel);
+  },
+  watch: {
+    betaImePanel() {
+      // this.$store.commit('setBetaImePanelFlag', this.betaImePanel());
+      // this.store.betaFeatures.newImePanels = this.betaImePanel();
+      this.setBetaImePanelFlag(this.betaImePanel);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.beta-options {
+  border-bottom: 1px solid rgba(0, 0, 0, .12);
+  flex-direction: column !important;
+  align-content: flex-start !important;
+  align-items: flex-start !important;
+}
+
+.beta-options .heading {
+  padding-right: 15px;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.beta-options .md-checkbox {
+  margin: 4px 10px;
+  padding-bottom: 7px;
+}
+
+.beta-options .description {
+  margin: 6px 8px 12px 8px;
+}
+</style>