e6f11a460e
This CL attempts to encapsulate Statistics gathered to a separate custom web component. Screenshots: https://imgur.com/a/xlffxDE Bug: v8:10667 Change-Id: I37816a4fe3d37f2b042d05a7110eda04af303fbb Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2287506 Reviewed-by: Camillo Bruni <cbruni@chromium.org> Commit-Queue: Zeynep Cankara <zcankara@google.com> Cr-Commit-Position: refs/heads/master@{#68794}
91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
// Copyright 2020 the V8 project authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
import "./stats-panel.mjs";
|
|
|
|
defineCustomElement('map-panel', (templateText) =>
|
|
class MapPanel extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
const shadowRoot = this.attachShadow({mode: 'open'});
|
|
shadowRoot.innerHTML = templateText;
|
|
this.transitionViewSelect.addEventListener(
|
|
'mousemove', e => this.handleTransitionViewChange(e));
|
|
this.$('#searchBarBtn').addEventListener(
|
|
'click', e => this.handleSearchBar(e));
|
|
}
|
|
|
|
$(id) {
|
|
return this.shadowRoot.querySelector(id);
|
|
}
|
|
|
|
querySelectorAll(query) {
|
|
return this.shadowRoot.querySelectorAll(query);
|
|
}
|
|
|
|
get transitionViewSelect() {
|
|
return this.$('#transitionView');
|
|
}
|
|
|
|
get searchBarSelect() {
|
|
return this.$('#searchBar');
|
|
}
|
|
|
|
get mapDetailsSelect() {
|
|
return this.$('#mapDetails');
|
|
}
|
|
|
|
get tooltipSelect() {
|
|
return this.$('#tooltip');
|
|
}
|
|
get tooltipContentsSelect() {
|
|
return this.$('#tooltipContents');
|
|
}
|
|
get tooltipContentsSelect() {
|
|
return this.$('#tooltipContents');
|
|
}
|
|
|
|
get statsPanelSelect() {
|
|
return this.$('#stats-panel');
|
|
}
|
|
|
|
// send a timeline to the stats-panel
|
|
get timeline() {
|
|
return this.statsPanelSelect.timeline;
|
|
}
|
|
set timeline(value) {
|
|
console.assert(value !== undefined, "timeline undefined!");
|
|
this.statsPanelSelect.timeline = value;
|
|
this.statsPanelSelect.update();
|
|
}
|
|
|
|
|
|
handleTransitionViewChange(e){
|
|
this.tooltipSelect.style.left = e.pageX + "px";
|
|
this.tooltipSelect.style.top = e.pageY + "px";
|
|
let map = e.target.map;
|
|
if (map) {
|
|
this.tooltipContentsSelect.innerText = map.description;
|
|
}
|
|
}
|
|
|
|
handleSearchBar(e){
|
|
let dataModel = Object.create(null);
|
|
let searchBar = this.$('#searchBarInput');
|
|
let searchBarInput = searchBar.value;
|
|
//access the map from model cache
|
|
let selectedMap = V8Map.get(searchBarInput);
|
|
if(selectedMap){
|
|
dataModel.isValidMap = true;
|
|
dataModel.map = selectedMap;
|
|
searchBar.className = "success";
|
|
} else {
|
|
dataModel.isValidMap = false;
|
|
searchBar.className = "failure";
|
|
}
|
|
this.dispatchEvent(new CustomEvent(
|
|
'click', {bubbles: true, composed: true, detail: dataModel}));
|
|
}
|
|
|
|
});
|