[tools][system-analyzer] Emit fileuploadstart event that toggles panels

This CL enables the hide panel functionality
upon uploading a new file. File reader emits
fileuploadstart event when it receives a new file
which hides the panels.

Bug: v8:10644

Change-Id: Ic26cce1a92559efd494f2ef1e32b514897a73324
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2305892
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#69015}
This commit is contained in:
Zeynep Cankara 2020-07-23 09:41:38 +01:00 committed by Commit Bot
parent f9dd24a561
commit 938ed34159
3 changed files with 14 additions and 5 deletions

View File

@ -44,14 +44,14 @@ found in the LICENSE file. -->
<script type="module" >
import {App} from './index.mjs';
globalThis.app = new App("#map-panel", "#timeline-panel", "#ic-panel");
globalThis.app = new App("#log-file-reader", "#map-panel", "#timeline-panel", "#ic-panel");
</script>
</head>
<body>
<div id="content">
<section id="file-reader">
<br></br>
<log-file-reader id="log-file-reader" onchange="app.handleDataUpload(event)"></log-file-reader>
<log-file-reader id="log-file-reader"></log-file-reader>
<br></br>
</section>
<div id="container" style="display: none;">

View File

@ -9,13 +9,17 @@ import './ic-panel.mjs';
import './timeline-panel.mjs';
import './map-panel.mjs';
import './log-file-reader.mjs';
class App {
constructor(mapPanelId, timelinePanelId, icPanelId) {
constructor(fileReaderId, mapPanelId, timelinePanelId, icPanelId) {
this.mapPanelId_ = mapPanelId;
this.timelinePanelId_ = timelinePanelId;
this.icPanelId_ = icPanelId;
this.icPanel_ = this.$(icPanelId);
this.logFileReader_ = this.$(fileReaderId);
this.logFileReader_.addEventListener('fileuploadstart',
e => this.handleFileUpload(e));
this.logFileReader_.addEventListener('fileuploadend',
e => this.handleDataUpload(e));
document.addEventListener('keydown', e => this.handleKeyDown(e));
this.icPanel_.addEventListener(
'ictimefilter', e => this.handleICTimeFilter(e));
@ -26,6 +30,9 @@ class App {
this.entries = undefined;
}
handleFileUpload(e){
this.$('#container').style.display = 'none';
}
handleMapClick(e) {
//TODO(zcankara) Direct the event based on the key and value
console.log("map: ", e.detail.key);

View File

@ -33,6 +33,8 @@ defineCustomElement('log-file-reader', (templateText) =>
handleChange(event) {
// Used for drop and file change.
event.preventDefault();
this.dispatchEvent(new CustomEvent(
'fileuploadstart', {bubbles: true, composed: true}));
var host = event.dataTransfer ? event.dataTransfer : event.target;
this.readFile(host.files[0]);
}
@ -60,7 +62,7 @@ defineCustomElement('log-file-reader', (templateText) =>
dataModel.chunk = e.target.result;
this.updateLabel('Finished loading \'' + file.name + '\'.');
this.dispatchEvent(new CustomEvent(
'change', {bubbles: true, composed: true, detail: dataModel}));
'fileuploadend', {bubbles: true, composed: true, detail: dataModel}));
this.section.className = 'success';
this.$('#fileReader').classList.add('done');
} catch (err) {