Commit 8c9f5ca8 authored by Sigurd Schneider's avatar Sigurd Schneider Committed by Commit Bot

[turbolizer] Do not scroll toolbox in middle pane

Change-Id: I1fe4454e3c0f2ec5cc044e36c311012d41e896a7
Notry: true
Bug: v8:7327
Reviewed-on: https://chromium-review.googlesource.com/c/1319768
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: 's avatarGeorg Neis <neis@chromium.org>
Cr-Commit-Position: refs/heads/master@{#57287}
parent 5d83fdc0
<!DOCTYPE HTML>
<html>
<head>
<title>Turbolizer</title>
<link rel="stylesheet" href="turbo-visualizer.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 class="resizer-left"></div>
<div id="middle" class="viewpane">
<div id="graph-toolbox-anchor">
<span id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png"
alt="layout graph" class="button-input">
<input id="show-all" type="image" title="show all nodes" src="expand-all.jpg"
alt="show all nodes" class="button-input">
<input id="toggle-hide-dead" type="image" title="show only live nodes" src="live.png"
alt="only live nodes" class="button-input">
<input id="hide-unselected" type="image" title="hide unselected nodes"
src="hide-unselected.png" alt="hide unselected nodes" class="button-input">
<input id="hide-selected" type="image" title="hide selected nodes"
src="hide-selected.png" alt="hide selected nodes" class="button-input">
<input id="zoom-selection" type="image" title="zoom to selection"
src="search.png" alt="zoom to selection" class="button-input">
<input id="toggle-types" type="image" title="show/hide types"
src="types.png" alt="show/hide types" class="button-input">
<input id="search-input" type="text" title="search nodes for regex"
alt="search node for regex" class="search-input"
placeholder="find with regexp&hellip;">
<select id="display-selector">
<option disabled selected>(please open a file)</option>
</select>
</span>
<head>
<title>Turbolizer</title>
<link rel="stylesheet" href="turbo-visualizer.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 class="resizer-left"></div>
<div id="middle">
<div id="graph-toolbox-anchor">
<div id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png" alt="layout graph" class="button-input">
<input id="show-all" type="image" title="show all nodes" src="expand-all.jpg" alt="show all nodes" class="button-input">
<input id="toggle-hide-dead" type="image" title="show only live nodes" src="live.png" alt="only live nodes"
class="button-input">
<input id="hide-unselected" type="image" title="hide unselected nodes" src="hide-unselected.png" alt="hide unselected nodes"
class="button-input">
<input id="hide-selected" type="image" title="hide selected nodes" src="hide-selected.png" alt="hide selected nodes"
class="button-input">
<input id="zoom-selection" type="image" title="zoom to selection" src="search.png" alt="zoom to selection"
class="button-input">
<input id="toggle-types" type="image" title="show/hide types" src="types.png" alt="show/hide types" class="button-input">
<input id="search-input" type="text" title="search nodes for regex" alt="search node for regex" class="search-input"
placeholder="find with regexp&hellip;">
<select id="display-selector">
<option disabled selected>(please open a file)</option>
</select>
</div>
<div id="load-file">
<input id="upload-helper" type="file">
<input id="upload" type="image" title="load graph" class="button-input"
src="upload-icon.png" alt="upload graph">
</div>
</div>
<div class="resizer-right"></div>
<div id="right" class="viewpane scrollable"></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">
</div>
<div id="disassembly-collapse" class="collapse-pane">
<input id="disassembly-expand" type="image" title="show disassembly"
src="left-arrow.png" class="button-input invisible">
<input id="disassembly-shrink" type="image" title="hide disassembly"
src="right-arrow.png" class="button-input">
</div>
<div id='text-placeholder' width="0px" height="0px" style="position: absolute; top:100000px;">
<svg>
<text text-anchor="right">
<tspan white-space="inherit" id="text-measure" />
</text>
</svg>
<div id="load-file">
<input id="upload-helper" type="file">
<input id="upload" type="image" title="load graph" class="button-input" src="upload-icon.png" alt="upload graph">
</div>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="build/turbolizer.js"></script>
</body>
</html>
</div>
<div class="resizer-right"></div>
<div id="right" class="viewpane scrollable"></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">
</div>
<div id="disassembly-collapse" class="collapse-pane">
<input id="disassembly-expand" type="image" title="show disassembly" src="left-arrow.png" class="button-input invisible">
<input id="disassembly-shrink" type="image" title="hide disassembly" src="right-arrow.png" class="button-input">
</div>
<div id='text-placeholder' width="0px" height="0px" style="position: absolute; top:100000px;">
<svg>
<text text-anchor="right">
<tspan white-space="inherit" id="text-measure" />
</text>
</svg>
</div>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="build/turbolizer.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -2,12 +2,14 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {GraphView} from "../src/graph-view"
import {ScheduleView} from "../src/schedule-view"
import {SequenceView} from "../src/sequence-view"
import {SourceResolver} from "../src/source-resolver"
import {SelectionBroker} from "../src/selection-broker"
import {View, PhaseView} from "../src/view"
import { GraphView } from "../src/graph-view"
import { ScheduleView } from "../src/schedule-view"
import { SequenceView } from "../src/sequence-view"
import { SourceResolver } from "../src/source-resolver"
import { SelectionBroker } from "../src/selection-broker"
import { View, PhaseView } from "../src/view"
const multiviewID = "multiview";
export class GraphMultiView extends View {
sourceResolver: SourceResolver;
......@@ -20,7 +22,8 @@ export class GraphMultiView extends View {
createViewElement() {
const pane = document.createElement('div');
pane.setAttribute('id', "multiview");
pane.setAttribute('id', multiviewID);
pane.className = "viewpane";
return pane;
}
......@@ -35,10 +38,10 @@ export class GraphMultiView extends View {
view.currentPhaseView.searchInputAction(searchInput, e)
});
searchInput.setAttribute("value", window.sessionStorage.getItem("lastSearch") || "");
this.graph = new GraphView(id, selectionBroker,
this.graph = new GraphView(this.divNode, selectionBroker,
(phaseName) => view.displayPhaseByName(phaseName));
this.schedule = new ScheduleView(id, selectionBroker);
this.sequence = new SequenceView(id, selectionBroker);
this.schedule = new ScheduleView(this.divNode, selectionBroker);
this.sequence = new SequenceView(this.divNode, selectionBroker);
this.selectMenu = (<HTMLSelectElement>document.getElementById('display-selector'));
}
......@@ -81,7 +84,7 @@ export class GraphMultiView extends View {
displayPhaseView(view, data) {
const rememberedSelection = this.hideCurrentPhase();
view.show(data, rememberedSelection);
document.getElementById("middle").classList.toggle("scrollable", view.isScrollable());
this.divNode.classList.toggle("scrollable", view.isScrollable());
this.currentPhaseView = view;
}
......
......@@ -3,11 +3,11 @@
// found in the LICENSE file.
import * as C from "../src/constants"
import {SourceResolver} from "../src/source-resolver"
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 { SourceResolver } from "../src/source-resolver"
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 * as d3 from "d3"
class Snapper {
......
......@@ -10,8 +10,8 @@ export abstract class View {
abstract deleteContent(): void;
abstract detachSelection(): Set<string>;
constructor(id) {
this.container = document.getElementById(id);
constructor(idOrContainer: string | HTMLElement) {
this.container = typeof idOrContainer == "string" ? document.getElementById(idOrContainer) : idOrContainer;
this.divNode = this.createViewElement();
}
......
......@@ -319,6 +319,10 @@ span.linkable-text:hover {
background-color: #FFFFFF;
}
.multiview {
width: 100%;
}
#disassembly-collapse {
right: 0;
......@@ -339,13 +343,14 @@ span.linkable-text:hover {
#graph-toolbox {
position: relative;
top: 1em;
left: 25px;
border: 2px solid #eee8d5;
border-radius: 5px;
padding: 0.7em;
border-bottom: 2px solid #eee8d5;
padding-bottom: 3px;
z-index: 5;
background: rgba(100%, 100%, 100%, 0.7);
padding-top: 3px;
box-sizing: border-box;
margin-left: 4px;
margin-right: 4px;
}
#disassembly-toolbox {
......
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