Skip to content

V
V8
Commit a43ba7da authored by Sigurd Schneider's avatar Sigurd Schneider Committed by Commit Bot
Browse files
Options

[turbolizer] Add tabs to left and right pane 

Notry: true
Bug: v8:7327
Change-Id: I5192891c85da12638e036b605713264d0e59aedc
Reviewed-on: https://chromium-review.googlesource.com/c/1324490
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: 's avatarGeorg Neis <neis@chromium.org>
Cr-Commit-Position: refs/heads/master@{#57355}
parent 6d692dbb
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 7 deletions
tools/turbolizer/index.html
View file @ a43ba7da
......@@ -4,12 +4,13 @@
<head>
<title>Turbolizer</title>
<link rel="stylesheet" href="turbo-visualizer.css" />
<link rel="stylesheet" href="tabs.css" />
<link rel="stylesheet" href="prettify.css" />
<link rel="icon" type="image/png" href="turbolizer.png">
</head>
<body>
<div id="left" class="viewpane scrollable"></div>
<div id="left" class="content"></div>
<div id="resizer-left" class="resizer"></div>
<div id="middle">
<div id="graph-toolbox-anchor">
......@@ -38,7 +39,7 @@
</div>
</div>
<div id="resizer-right" class="resizer"></div>
<div id="right" class="viewpane scrollable"></div>
<div id="right" class="content"></div>
<div id="source-collapse" class="collapse-pane">
<input id="source-expand" type="image" title="show source" src="right-arrow.png" class="button-input invisible">
<input id="source-shrink" type="image" title="hide source" src="left-arrow.png" class="button-input">
......
tools/turbolizer/src/tabs.ts 0 → 100644
View file @ a43ba7da
export class Tabs {
container: HTMLElement
tabBar: HTMLElement;
nextTabId: number;
mkTabBar(container: HTMLElement) {
container.classList.add("nav-tabs-container")
this.tabBar = document.createElement("ul");
this.tabBar.id = `tab-bar-${container.id}`;
this.tabBar.className = "nav-tabs";
this.tabBar.ondrop = this.tabBarOnDrop.bind(this);
this.tabBar.ondragover = this.tabBarOnDragover.bind(this);
this.tabBar.onclick = this.tabBarOnClick.bind(this);
const defaultDiv = document.createElement("div");
defaultDiv.className = "tab-content tab-default";
defaultDiv.id = `tab-content-${container.id}-default`;
container.insertBefore(defaultDiv, container.firstChild)
container.insertBefore(this.tabBar, container.firstChild);
}
constructor(container: HTMLElement) {
this.container = container;
this.nextTabId = 0;
this.mkTabBar(container);
}
showTab(li: HTMLElement, show: boolean = true) {
const tabDiv = document.getElementById(li.dataset.divid);
tabDiv.style.display = show ? "block" : "none";
}
activateTab(tab: HTMLLIElement) {
if (typeof tab.dataset.divid !== "string") return;
for (const li of this.tabBar.querySelectorAll<HTMLLIElement>("li.active")) {
console.log(li)
li.classList.remove("active");
this.showTab(li, false);
}
tab.classList.add("active");
this.showTab(tab, true);
}
addTab(caption: string): HTMLLIElement {
const newTab = document.createElement("li");
newTab.innerHTML = caption;
newTab.id = `tab-header-${this.container.id}-${this.nextTabId++}`;
const lastTab = this.tabBar.querySelector("li.open-tab");
this.tabBar.insertBefore(newTab, lastTab);
return newTab;
}
addTabAndContent(caption: string): [HTMLLIElement, HTMLDivElement] {
const contentDiv = document.createElement("div");
contentDiv.className = "tab-content tab-default";
contentDiv.id = `tab-content-${this.container.id}-${this.nextTabId++}`;
this.container.appendChild(contentDiv);
const newTab = this.addTab(caption);
newTab.dataset.divid = contentDiv.id;
newTab.draggable = true;
newTab.ondragstart = this.tabOnDragStart.bind(this);
const lastTab = this.tabBar.querySelector("li.open-tab");
this.tabBar.insertBefore(newTab, lastTab);
return [newTab, contentDiv];
}
moveTabDiv(tab: HTMLLIElement) {
const tabDiv = document.getElementById(tab.dataset.divid);
tabDiv.style.display = "none";
tab.classList.remove("active");
this.tabBar.parentNode.appendChild(tabDiv);
}
tabBarOnDrop(e) {
e.preventDefault();
console.log("ondrop", e.dataTransfer.getData("text"), e);
const tabId = e.dataTransfer.getData("text");
const tab = document.getElementById(tabId) as HTMLLIElement;
if (tab.parentNode != this.tabBar) {
this.moveTabDiv(tab);
}
const dropTab =
e.target.parentNode == this.tabBar
? e.target : this.tabBar.querySelector("li.open-tab");
this.tabBar.insertBefore(tab, dropTab);
this.activateTab(tab);
}
tabBarOnDragover(e) {
e.preventDefault();
}
tabOnDragStart(e) {
e.dataTransfer.setData("text", e.target.id);
console.log("ondragstart", e.target, e)
}
tabBarOnClick(e: MouseEvent) {
const li = e.target as HTMLLIElement;
this.activateTab(li);
}
}
tools/turbolizer/src/turbo-visualizer.ts
View file @ a43ba7da
......@@ -8,6 +8,7 @@ import { SelectionBroker } from "../src/selection-broker"
import { DisassemblyView } from "../src/disassembly-view"
import { GraphMultiView } from "../src/graphmultiview"
import { CodeMode, CodeView } from "../src/code-view"
import { Tabs } from "../src/tabs"
import * as d3 from "d3"
class Snapper {
......@@ -244,17 +245,29 @@ window.onload = function () {
sourceResolver.setNodePositionMap(jsonObj.nodePositions);
sourceResolver.parsePhases(jsonObj.phases);
let sourceView = new CodeView(C.SOURCE_PANE_ID, selectionBroker, sourceResolver, fnc, CodeMode.MAIN_SOURCE);
const sourceTabsContainer = document.getElementById(C.SOURCE_PANE_ID);
const sourceTabs = new Tabs(sourceTabsContainer);
const [sourceTab, sourceContainer] = sourceTabs.addTabAndContent("Source")
sourceContainer.classList.add("viewpane", "scrollable");
sourceTabs.activateTab(sourceTab);
sourceTabs.addTab("&#x2b;").classList.add("open-tab");
let sourceView = new CodeView(sourceContainer, selectionBroker, sourceResolver, fnc, CodeMode.MAIN_SOURCE);
sourceView.show(null, null);
sourceViews.push(sourceView);
sourceResolver.forEachSource((source) => {
let sourceView = new CodeView(C.SOURCE_PANE_ID, selectionBroker, sourceResolver, source, CodeMode.INLINED_SOURCE);
let sourceView = new CodeView(sourceContainer, selectionBroker, sourceResolver, source, CodeMode.INLINED_SOURCE);
sourceView.show(null, null);
sourceViews.push(sourceView);
});
disassemblyView = new DisassemblyView(C.GENERATED_PANE_ID, selectionBroker);
const disassemblyTabsContainer = document.getElementById(C.GENERATED_PANE_ID);
const disassemblyTabs = new Tabs(disassemblyTabsContainer);
const [disassemblyTab, disassemblyContainer] = disassemblyTabs.addTabAndContent("Disassembly")
disassemblyContainer.classList.add("viewpane", "scrollable");
disassemblyTabs.activateTab(disassemblyTab);
disassemblyTabs.addTab("&#x2b;").classList.add("open-tab");
disassemblyView = new DisassemblyView(disassemblyContainer, selectionBroker);
disassemblyView.initializeCode(fnc.sourceText);
if (sourceResolver.disassemblyPhase) {
disassemblyView.initializePerfProfile(jsonObj.eventCounts);
......@@ -292,7 +305,6 @@ window.onload = function () {
initializeUploadHandlers();
resizer.snapper.setSourceExpanded(resizer.snapper.getLastExpandedState("source", true));
resizer.snapper.setDisassemblyExpanded(resizer.snapper.getLastExpandedState("disassembly", false));
......
tools/turbolizer/tabs.css 0 → 100644
View file @ a43ba7da
.content {
display: grid;
grid-template-areas: "tabs" "window";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
min-height: calc(100vh);
}
.nav-tabs-container {
grid-area: tabs;
padding: 0px;
background-color: #999999;
border-bottom: 4px solid #CCCCCC;
}
.tab-content {
grid-area: window;
background-color: white;
padding: 0px;
display:none;
}
.tab-content.tab-default {
display: block;
}
ul.nav-tabs {
padding: 0px;
margin: 0px;
overflow: auto;
display: table-row;
min-height: 2ex;
}
.nav-tabs li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
min-width: 20px;
text-decoration: none;
color: black;
text-align: center;
user-select: none;
cursor: pointer;
}
.nav-tabs li:hover {
background-color: #EEEEEE;
}
.nav-tabs li.active {
background-color: #CCCCCC;
}
\ No newline at end of file
tools/turbolizer/turbo-visualizer.css
View file @ a43ba7da
......@@ -440,11 +440,11 @@ text {
.source-position .marker {
content: "";
display: inline-block;
position: relative;
bottom: -1ex;
width: 0px;
margin-left: -4px;
margin-right: -4px;
margin-bottom: -1ex;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment