Update UI to be more minimialistic Test: N/A Change-Id: I922edcb62d9c8fd61e4dc5fb3499ba87351422fc
diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue index 5dc5bb4..b9c81d0 100644 --- a/tools/winscope/src/App.vue +++ b/tools/winscope/src/App.vue
@@ -15,39 +15,51 @@ <template> <div id="app"> <md-app> - <md-app-toolbar md-tag="md-toolbar"> + <md-app-toolbar md-tag="md-toolbar" class="top-toolbar"> <h1 class="md-title" style="flex: 1">{{title}}</h1> <md-button - class="md-accent md-raised md-theme-default" + class="md-primary md-theme-default download-all-btn" @click="downloadAsZip(files)" v-if="dataLoaded" >Download All</md-button> <md-button - class="md-accent md-raised md-theme-default" + class="md-accent md-raised md-theme-default clear-btn" + style="box-shadow: none;" @click="clear()" v-if="dataLoaded" >Clear</md-button> </md-app-toolbar> <md-app-content class="main-content"> - <div class="md-layout m-2" v-if="!dataLoaded"> - <dataadb ref="adb" :store="store" @dataReady="onDataReady" @statusChange="setStatus" /> - <datainput ref="input" :store="store" @dataReady="onDataReady" @statusChange="setStatus" /> - </div> - <dataview - v-for="file in files" - :key="file.filename" - :ref="file.filename" - :store="store" - :file="file" - @click="onDataViewFocus(file)" - /> + <section class="data-inputs" v-if="!dataLoaded"> + <div class="input"> + <dataadb class="adbinput" ref="adb" :store="store" @dataReady="onDataReady" @statusChange="setStatus" /> + </div> + <div class="input"> + <datainput class="fileinput" ref="input" :store="store" @dataReady="onDataReady" @statusChange="setStatus" /> + </div> + </section> - <overlay - :store="store" - :ref="overlayRef" - v-if="dataLoaded" - /> + <section class="data-view"> + <div + class="data-view-container" + v-for="file in dataViewFiles" + :key="file.filename" + > + <dataview + :ref="file.filename" + :store="store" + :file="file" + @click="onDataViewFocus(file)" + /> + </div> + + <overlay + :store="store" + :ref="overlayRef" + v-if="dataLoaded" + /> + </section> </md-app-content> </md-app> </div> @@ -143,6 +155,9 @@ } return this.activeDataView; }, + dataViewFiles() { + return this.files.filter(f => this.hasDataView(f)); + } }, watch: { title() { @@ -158,16 +173,36 @@ }; </script> <style> +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); + #app .md-app-container { transform: none!important; /* Get rid of tranforms which prevent fixed position from being used */ + min-height: 100vh; } -.main-content { - padding-bottom: 75px; +#app .top-toolbar { + box-shadow: none; + background-color: #fff; + background-color: var(--md-theme-default-background, #fff); + border-bottom: thin solid rgba(0,0,0,.12); + padding: 0 40px; } -.main-content .md-layout>* { - margin: 1em; +#app .top-toolbar .md-title { + font-family: 'Open Sans', sans-serif; + white-space: nowrap; + color: #5f6368; + margin: 0; + padding: 0; + font-size: 22px; + letter-spacing: 0; + font-weight: 600; +} + +.data-view { + display: flex; + flex-direction: column; + padding-bottom: 75px; /* TODO: Disable if no bottom bar */ } .card-toolbar { @@ -200,4 +235,30 @@ a { color: #42b983; } + +.data-inputs { + display: flex; + flex-wrap: wrap; + height: 100%; + width: 100%; + align-self: center; + /* align-items: center; */ + align-content: center; + justify-content: center; +} + +.data-inputs .input { + padding: 15px; + flex: 1 1 0; + max-width: 840px; + /* align-self: center; */ +} + +.data-inputs .input > div { + height: 100%; +} + +.data-view-container { + padding: 25px 20px 0 20px; +} </style>
diff --git a/tools/winscope/src/DataAdb.vue b/tools/winscope/src/DataAdb.vue index c30fcd1..bc710e1 100644 --- a/tools/winscope/src/DataAdb.vue +++ b/tools/winscope/src/DataAdb.vue
@@ -13,7 +13,7 @@ limitations under the License. --> <template> - <md-card style="min-width: 50em"> + <flat-card style="min-width: 50em"> <md-card-header> <div class="md-title">ADB Connect</div> </md-card-header> @@ -72,24 +72,30 @@ <md-progress-spinner :md-size="30" md-indeterminate></md-progress-spinner> </md-card-content> <md-card-content v-if="status === STATES.START_TRACE"> - <md-list> - <md-list-item> - <md-icon>smartphone</md-icon> - <span class="md-list-item-text">{{ devices[selectedDevice].model }} ({{ selectedDevice }})</span> - </md-list-item> - </md-list> - <div> - <p>Trace targets:</p> - <md-checkbox v-for="file in TRACE_FILES" :key="file" v-model="adbStore[file]">{{FILE_TYPES[file].name}}</md-checkbox> + <div class="device-choice"> + <md-list> + <md-list-item> + <md-icon>smartphone</md-icon> + <span class="md-list-item-text">{{ devices[selectedDevice].model }} ({{ selectedDevice }})</span> + </md-list-item> + </md-list> + <md-button class="md-primary" @click="resetLastDevice">Change device</md-button> </div> - <div> - <p>Dump targets:</p> - <md-checkbox v-for="file in DUMP_FILES" :key="file" v-model="adbStore[file]">{{FILE_TYPES[file].name}}</md-checkbox> + <div class="trace-section"> + <h3>Trace targets:</h3> + <div class="selection"> + <md-checkbox class="md-primary" v-for="file in TRACE_FILES" :key="file" v-model="adbStore[file]">{{FILE_TYPES[file].name}}</md-checkbox> + </div> + <md-button class="md-primary trace-btn" @click="startTrace">Start trace</md-button> </div> - <div class="md-layout"> - <md-button class="md-accent md-raised" @click="startTrace">Start trace</md-button> - <md-button class="md-accent md-raised" @click="dumpState">Dump state</md-button> - <md-button class="md-raised" @click="resetLastDevice">Device list</md-button> + <div class="dump-section"> + <h3>Dump targets:</h3> + <div class="selection"> + <md-checkbox class="md-primary" v-for="file in DUMP_FILES" :key="file" v-model="adbStore[file]">{{FILE_TYPES[file].name}}</md-checkbox> + </div> + <div class="md-layout"> + <md-button class="md-primary dump-btn" @click="dumpState">Dump state</md-button> + </div> </div> </md-card-content> <md-card-content v-if="status === STATES.ERROR"> @@ -98,24 +104,25 @@ <pre> {{ errorText }} </pre> - <md-button class="md-raised md-accent" @click="restart">Retry</md-button> + <md-button class="md-primary" @click="restart">Retry</md-button> </md-card-content> <md-card-content v-if="status === STATES.END_TRACE"> <span class="md-subheading">Tracing...</span> <md-progress-bar md-mode="indeterminate"></md-progress-bar> <div class="md-layout"> - <md-button class="md-accent md-raised" @click="endTrace">End trace</md-button> + <md-button class="md-primary" @click="endTrace">End trace</md-button> </div> </md-card-content> <md-card-content v-if="status === STATES.LOAD_DATA"> <span class="md-subheading">Loading data...</span> <md-progress-bar md-mode="determinate" :md-value="loadProgress"></md-progress-bar> </md-card-content> - </md-card> + </flat-card> </template> <script> import { FILE_TYPES, DATA_TYPES } from './decode.js' import LocalStore from './localstore.js' +import FlatCard from './components/FlatCard.vue'; const STATES = { ERROR: 0, @@ -178,6 +185,9 @@ } }, props: ["store"], + components: { + 'flat-card': FlatCard, + }, methods: { getDevices() { if (this.status !== STATES.DEVICES && this.status !== STATES.CONNECTING) { @@ -345,3 +355,17 @@ } </script> +<style scoped> +.device-choice { + display: inline-flex; +} +h3 { + margin-bottom: 0; +} +.trace-btn, .dump-btn { + margin-top: 0; +} +pre { + white-space: pre-wrap; +} +</style> \ No newline at end of file
diff --git a/tools/winscope/src/DataInput.vue b/tools/winscope/src/DataInput.vue index 2bd3c6c..f20697d 100644 --- a/tools/winscope/src/DataInput.vue +++ b/tools/winscope/src/DataInput.vue
@@ -13,49 +13,51 @@ limitations under the License. --> <template> - <md-card style="min-width: 50em"> - <md-card-header> - <div class="md-title">Open files</div> - </md-card-header> - <md-card-content> - <md-list> - <md-list-item v-for="file in dataFiles" v-bind:key="file.filename"> - <md-icon>{{file.type.icon}}</md-icon> - <span class="md-list-item-text">{{file.filename}} ({{file.type.name}})</span> - <md-button class="md-icon-button md-accent" @click="onRemoveFile(file.type.name)"> - <md-icon>close</md-icon> - </md-button> - </md-list-item> - </md-list> - <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-show="loadingFiles"/> - <div> - <md-checkbox v-model="store.displayDefaults">Show default properties - <md-tooltip md-direction="bottom"> - If checked, shows the value of all properties. - Otherwise, hides all properties whose value is the default for its data type. - </md-tooltip> - </md-checkbox> + <flat-card style="min-width: 50em"> + <md-card-header> + <div class="md-title">Open files</div> + </md-card-header> + <md-card-content> + <md-list> + <md-list-item v-for="file in dataFiles" v-bind:key="file.filename"> + <md-icon>{{file.type.icon}}</md-icon> + <span class="md-list-item-text">{{file.filename}} ({{file.type.name}})</span> + <md-button class="md-icon-button md-accent" @click="onRemoveFile(file.type.name)"> + <md-icon>close</md-icon> + </md-button> + </md-list-item> + </md-list> + <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-show="loadingFiles"/> + <div> + <md-checkbox v-model="store.displayDefaults" class="md-primary"> + Show default properties + <md-tooltip md-direction="bottom"> + If checked, shows the value of all properties. + Otherwise, hides all properties whose value is the default for its data type. + </md-tooltip> + </md-checkbox> + </div> + <div class="md-layout"> + <div class="md-layout-item md-small-size-100"> + <md-field> + <md-select v-model="fileType" id="file-type" placeholder="File type"> + <md-option value="auto">Detect type</md-option> + <md-option value="bugreport">Bug Report (.zip)</md-option> + <md-option :value="k" v-for="(v,k) in FILE_TYPES" v-bind:key="v.name">{{v.name}}</md-option> + </md-select> + </md-field> </div> - <div class="md-layout"> - <div class="md-layout-item md-small-size-100"> - <md-field> - <md-select v-model="fileType" id="file-type" placeholder="File type"> - <md-option value="auto">Detect type</md-option> - <md-option value="bugreport">Bug Report (.zip)</md-option> - <md-option :value="k" v-for="(v,k) in FILE_TYPES" v-bind:key="v.name">{{v.name}}</md-option> - </md-select> - </md-field> - </div> - </div> - <div class="md-layout"> - <input type="file" @change="onLoadFile" ref="fileUpload" v-show="false" :multiple="fileType === 'auto'" /> - <md-button class="md-accent md-raised md-theme-default" @click="$refs.fileUpload.click()">Add File</md-button> - <md-button v-if="dataReady" @click="onSubmit" class="md-button md-primary md-raised md-theme-default">Submit</md-button> - </div> - </md-card-content> - </md-card> + </div> + <div class="md-layout"> + <input type="file" @change="onLoadFile" ref="fileUpload" v-show="false" :multiple="fileType === 'auto'" /> + <md-button class="md-primary md-theme-default" @click="$refs.fileUpload.click()">Add File</md-button> + <md-button v-if="dataReady" @click="onSubmit" class="md-button md-primary md-raised md-theme-default">Submit</md-button> + </div> + </md-card-content> + </flat-card> </template> <script> +import FlatCard from './components/FlatCard.vue'; import JSZip from 'jszip'; import { detectAndDecode, FILE_TYPES, DATA_TYPES } from './decode.js'; import { WebContentScriptMessageType } from './utils/consts'; @@ -279,7 +281,10 @@ }, computed: { dataReady: function() { return Object.keys(this.dataFiles).length > 0 } - } + }, + components: { + 'flat-card': FlatCard, + }, } </script>
diff --git a/tools/winscope/src/DataView.vue b/tools/winscope/src/DataView.vue index 33f5502..8d093e8 100644 --- a/tools/winscope/src/DataView.vue +++ b/tools/winscope/src/DataView.vue
@@ -14,7 +14,7 @@ --> <template> <div @click="onClick($event)"> - <md-card v-if="(isLog(file) || isTrace(file) || isTransactions(file))"> + <flat-card v-if="hasDataView(file)"> <md-card-header> <md-card-header-text> <div class="md-title"> @@ -32,7 +32,7 @@ <div v-if="!(isTrace(file) || isVideo(file) || isLog(file) || isTransactions(file))"> <h1 class="bad">Unrecognized DataType</h1> </div> - </md-card> + </flat-card> </div> </template> <script> @@ -40,6 +40,7 @@ import TransactionsView from "./TransactionsView.vue"; import LogView from "./LogView.vue"; import FileType from "./mixins/FileType.js"; +import FlatCard from "./components/FlatCard.vue"; export default { name: "dataview", @@ -61,9 +62,10 @@ props: ["store", "file"], mixins: [FileType], components: { - traceview: TraceView, - transactionsview: TransactionsView, - logview: LogView + 'traceview': TraceView, + 'transactionsview': TransactionsView, + 'logview': LogView, + 'flat-card': FlatCard, } }; </script>
diff --git a/tools/winscope/src/LogEntry.vue b/tools/winscope/src/LogEntry.vue index 0b74b07..dd4f761 100644 --- a/tools/winscope/src/LogEntry.vue +++ b/tools/winscope/src/LogEntry.vue
@@ -45,7 +45,7 @@ } .time-column .time-link { - width: 8.5em; + width: 9em; } .tag-column {
diff --git a/tools/winscope/src/LogView.vue b/tools/winscope/src/LogView.vue index fac894c..8d75f73 100644 --- a/tools/winscope/src/LogView.vue +++ b/tools/winscope/src/LogView.vue
@@ -60,7 +60,7 @@ </md-field> </div> - <virtual-list style="height: 360px; overflow-y: auto;" + <virtual-list style="height: 600px; overflow-y: auto;" :data-key="'uid'" :data-sources="processedData" :data-component="logEntryComponent" @@ -196,6 +196,11 @@ </script> <style> +.container { + display: flex; + flex-wrap: wrap; +} + .filters, .navigation { width: 100%; display: flex;
diff --git a/tools/winscope/src/TraceView.vue b/tools/winscope/src/TraceView.vue index 86e7450..43d19ff 100644 --- a/tools/winscope/src/TraceView.vue +++ b/tools/winscope/src/TraceView.vue
@@ -14,66 +14,81 @@ --> <template> <md-card-content class="container"> - <md-card class="rects" v-if="hasScreenView"> - <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"> - <h2 class="md-title">Screen</h2> - </md-content> - <md-content class="md-elevation-8"> - <rects :bounds="bounds" :rects="rects" :highlight="highlight" @rect-click="onRectClick" /> - </md-content> - </md-card> - <md-card class="hierarchy"> - <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"> - <h2 class="md-title" style="flex: 1;">Hierarchy</h2> - <md-checkbox - v-model="showHierachyDiff" - v-if="diffVisualizationAvailable" - > - Show Diff - </md-checkbox> - <md-checkbox v-model="store.onlyVisible">Only visible</md-checkbox> - <md-checkbox v-model="store.flattened">Flat</md-checkbox> - <input id="filter" type="search" placeholder="Filter..." v-model="hierarchyPropertyFilterString" /> - </md-content> - <tree-view - class="data-card" - :item="tree" - @item-selected="itemSelected" - :selected="hierarchySelected" - :filter="hierarchyFilter" - :flattened="store.flattened" - :items-clickable="true" - :useGlobalCollapsedState="true" - ref="hierarchy" - /> - </md-card> - <md-card class="properties"> - <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"> - <h2 class="md-title" style="flex: 1">Properties</h2> - <div class="filter"> + <div class="rects" v-if="hasScreenView"> + <rects :bounds="bounds" :rects="rects" :highlight="highlight" @rect-click="onRectClick" /> + </div> + + <div class="hierarchy"> + <flat-card> + <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"> + <h2 class="md-title" style="flex: 1;">Hierarchy</h2> + <md-checkbox + v-model="showHierachyDiff" + v-if="diffVisualizationAvailable" + > + Show Diff + </md-checkbox> + <md-checkbox v-model="store.onlyVisible">Only visible</md-checkbox> + <md-checkbox v-model="store.flattened">Flat</md-checkbox> + <md-field md-inline class="filter"> + <label>Filter...</label> + <md-input v-model="hierarchyPropertyFilterString"></md-input> + </md-field> + </md-content> + <tree-view + class="data-card" + :item="tree" + @item-selected="itemSelected" + :selected="hierarchySelected" + :filter="hierarchyFilter" + :flattened="store.flattened" + :items-clickable="true" + :useGlobalCollapsedState="true" + ref="hierarchy" + /> + </flat-card> + </div> + + <div class="properties"> + <flat-card> + <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"> + <h2 class="md-title" style="flex: 1">Properties</h2> <md-checkbox v-model="showPropertiesDiff" v-if="diffVisualizationAvailable" > Show Diff </md-checkbox> - <input id="filter" type="search" placeholder="Filter..." v-model="propertyFilterString" /> + <md-field md-inline class="filter"> + <label>Filter...</label> + <md-input v-model="propertyFilterString"></md-input> + </md-field> + </md-content> + <div v-if="selectedTree"> + <tree-view + class="pre-line-data-card" + :item="selectedTree" + :filter="propertyFilter" + :collapseChildren="true" + :useGlobalCollapsedState="true" + /> </div> - </md-content> - <tree-view - class="pre-line-data-card" - :item="selectedTree" - :filter="propertyFilter" - :collapseChildren="true" - :useGlobalCollapsedState="true" - /> - </md-card> + <div class="no-properties" v-else> + <i class="material-icons none-icon"> + filter_none + </i> + <span>No element selected in the hierachy.</span> + </div> + </flat-card> + </div> + </md-card-content> </template> <script> import TreeView from './TreeView.vue' import Timeline from './Timeline.vue' import Rects from './Rects.vue' +import FlatCard from './components/FlatCard.vue' import { ObjectTransformer } from './transform.js' import { DiffGenerator, defaultModifiedCheck } from './utils/diff.js' @@ -315,6 +330,7 @@ components: { 'tree-view': TreeView, 'rects': Rects, + 'flat-card': FlatCard, } } @@ -340,7 +356,12 @@ } </script> -<style> +<style scoped> +.container { + display: flex; + flex-wrap: wrap; +} + .rects { flex: none; margin: 8px; @@ -353,6 +374,16 @@ min-width: 400px; } +.rects, +.hierarchy, +.properties { + padding: 5px; +} + +.flat-card { + height: 100%; +} + .hierarchy>.tree-view, .properties>.tree-view { margin: 16px; @@ -360,7 +391,7 @@ .data-card { overflow: auto; - max-height: 48em; + max-height: 730px; } .pre-line-data-card { @@ -369,4 +400,27 @@ white-space: pre-line; } +.no-properties { + display: flex; + flex-direction: column; + align-self: center; + align-items: center; + justify-content: center; + height: calc(100% - 50px); + padding: 50px 25px; +} + +.no-properties .none-icon { + font-size: 35px; + margin-bottom: 10px; +} + +.no-properties span { + font-weight: 100; +} + +.filter { + width: auto; +} + </style>
diff --git a/tools/winscope/src/TransactionEntry.vue b/tools/winscope/src/TransactionEntry.vue index 393ba97..3d74d0a 100644 --- a/tools/winscope/src/TransactionEntry.vue +++ b/tools/winscope/src/TransactionEntry.vue
@@ -98,7 +98,7 @@ } .time-column .time-link { - width: 8.5em; + width: 9em; } .type-column {
diff --git a/tools/winscope/src/TransactionsView.vue b/tools/winscope/src/TransactionsView.vue index 5fdea06..5c9beaf 100644 --- a/tools/winscope/src/TransactionsView.vue +++ b/tools/winscope/src/TransactionsView.vue
@@ -15,10 +15,7 @@ <template> <md-card-content class="container"> - <md-card class="changes card"> - <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"> - <h2 class="md-title" style="flex: 1">Log</h2> - </md-content> + <flat-card class="changes card"> <div class="filters"> <md-field> <label>Transaction Type</label> @@ -40,27 +37,33 @@ </md-chips> </div> - <virtual-list style="height: 360px; overflow-y: auto;" + <virtual-list style="height: 600px; overflow-y: auto;" :data-key="'timestamp'" :data-sources="filteredData" :data-component="transactionEntryComponent" :extra-props="{'onClick': transactionSelected}" ref="loglist" /> - </md-card> + </flat-card> - <md-card class="changes card"> + <flat-card class="changes card"> <md-content md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense"> <h2 class="md-title" style="flex: 1">Changes</h2> </md-content> - <div class="changes-content"> + <div class="changes-content" v-if="selectedTree"> <tree-view :item="selectedTree" :collapseChildren="true" :useGlobalCollapsedState="true" /> </div> - </md-card> + <div class="no-properties" v-else> + <i class="material-icons none-icon"> + filter_none + </i> + <span>No transaction selected.</span> + </div> + </flat-card> </md-card-content> </template> @@ -68,9 +71,10 @@ import TreeView from './TreeView.vue'; import VirtualList from '../libs/virtualList/VirtualList'; import TransactionEntry from './TransactionEntry.vue'; +import FlatCard from './components/FlatCard.vue'; import { transform_json } from './transform.js'; -import { stableIdCompatibilityFixup } from './utils/utils.js' +import { stableIdCompatibilityFixup } from './utils/utils.js'; export default { name: 'transactionsview', @@ -268,6 +272,7 @@ components: { 'virtual-list': VirtualList, 'tree-view': TreeView, + 'flat-card': FlatCard, } } @@ -280,7 +285,8 @@ .transaction-table, .changes { - flex: 1; + flex: 1 1 0; + width: 0; margin: 8px; } @@ -301,4 +307,22 @@ overflow: auto; } +.no-properties { + display: flex; + flex-direction: column; + align-self: center; + align-items: center; + justify-content: center; + height: calc(100% - 50px); + padding: 50px 25px; +} + +.no-properties .none-icon { + font-size: 35px; + margin-bottom: 10px; +} + +.no-properties span { + font-weight: 100; +} </style>
diff --git a/tools/winscope/src/components/FlatCard.vue b/tools/winscope/src/components/FlatCard.vue new file mode 100644 index 0000000..38c3356 --- /dev/null +++ b/tools/winscope/src/components/FlatCard.vue
@@ -0,0 +1,38 @@ +<template> + <div class="flat-card"> + <slot /> + </div> +</template> +<script> +export default { + name: 'FlatCard', +} +</script> +<style scoped> +.flat-card { + word-break: normal; + tab-size: 4; + font-size: 14px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: rgba(0,0,0,0); + font-family: Roboto, sans-serif; + line-height: 1.5; + background-repeat: no-repeat; + box-sizing: inherit; + padding: 0; + margin: 0; + display: block; + max-width: 100%; + outline: none; + text-decoration: none; + transition-property: box-shadow,opacity; + overflow-wrap: break-word; + position: relative; + white-space: normal; + border: thin solid rgba(0,0,0,.12); + background-color: #fff; + color: rgba(0,0,0,.87); + border-radius: 4px; +} +</style> \ No newline at end of file
diff --git a/tools/winscope/src/mixins/FileType.js b/tools/winscope/src/mixins/FileType.js index 1700c24..fe83db7 100644 --- a/tools/winscope/src/mixins/FileType.js +++ b/tools/winscope/src/mixins/FileType.js
@@ -16,6 +16,9 @@ }, isLog(file) { return file.type == DATA_TYPES.PROTO_LOG + }, + hasDataView(file) { + return this.isLog(file) || this.isTrace(file) || this.isTransactions(file); } }
diff --git a/tools/winscope/webpack.config.js b/tools/winscope/webpack.config.js index 601c15f..67d5f2e 100644 --- a/tools/winscope/webpack.config.js +++ b/tools/winscope/webpack.config.js
@@ -66,7 +66,16 @@ options: { name: '[name].[ext]?[hash]' } - } + }, + { + test: /\.(ttf|otf|eot|woff|woff2)$/, + use: { + loader: "file-loader", + options: { + name: "fonts/[name].[ext]", + }, + }, + }, ] }, resolve: {
diff --git a/tools/winscope/yarn.lock b/tools/winscope/yarn.lock index 19bd65e..4a3dd4a 100644 --- a/tools/winscope/yarn.lock +++ b/tools/winscope/yarn.lock
@@ -3531,7 +3531,7 @@ dependencies: lodash._root "^3.0.0" -lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3: +lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.3: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==