c39e47aaa0
- Double click on the current timeline selection to focus and zoom in - Make timeline-tracks focusable by setting a tabindex - Add back arrow-key navigation for the map panel (only when focused) - Prepare code for adding keyboard-based horizontal scrolling - Use --code-font CSS variable Bug: v8:10644 Change-Id: Ic473695c9fcdc795d173cd064b4660e100ae8b24 Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3568475 Reviewed-by: Patrick Thier <pthier@chromium.org> Commit-Queue: Camillo Bruni <cbruni@chromium.org> Cr-Commit-Position: refs/heads/main@{#79786}
113 lines
2.3 KiB
HTML
113 lines
2.3 KiB
HTML
<!-- 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. -->
|
|
<head>
|
|
<link href="./index.css" rel="stylesheet">
|
|
</head>
|
|
<style>
|
|
:host {
|
|
position: absolute;
|
|
z-index: 100;
|
|
will-change: transform;
|
|
}
|
|
|
|
#body {
|
|
display: none;
|
|
position: absolute;
|
|
--tip-offset: 10px;
|
|
--tip-width: 10px;
|
|
--tip-height: 40px;
|
|
}
|
|
|
|
#content {
|
|
background-color: rgba(var(--surface-color-rgb), 0.8);
|
|
border: 3px var(--primary-color) solid;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
width: auto;
|
|
min-width: 100px;
|
|
max-width: 400px;
|
|
min-height: 100px;
|
|
max-height: 400px;
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
#content > h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.textContent {
|
|
font-family: var(--code-font);
|
|
white-space: pre;
|
|
overflow-wrap: anywhere;
|
|
overflow-x: hidden;
|
|
max-width: 500px;
|
|
}
|
|
|
|
#body.top {
|
|
bottom: var(--tip-height);
|
|
}
|
|
#body.bottom {
|
|
top: var(--tip-height);
|
|
}
|
|
#body.left {
|
|
right: calc(var(--tip-offset) * -1 - var(--tip-width));
|
|
}
|
|
#body.right {
|
|
left: calc(var(--tip-offset) * -1 - var(--tip-width));
|
|
}
|
|
|
|
.tip, .tipThin {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
position: absolute;
|
|
border-color: var(--primary-color) transparent transparent transparent;
|
|
pointer-events: none;
|
|
}
|
|
.tip {
|
|
border-width: var(--tip-width) var(--tip-width) 0 var(--tip-width);
|
|
}
|
|
.tipThin {
|
|
border-width: var(--tip-height) 4px 2px 4px;
|
|
bottom: -30px;
|
|
left: -4px;
|
|
}
|
|
/* Tip positioning modifiers */
|
|
.top > .tip {
|
|
bottom: calc(var(--tip-width) * -1);
|
|
}
|
|
.top > .tipThin {
|
|
bottom: calc(var(--tip-height) * -1);
|
|
}
|
|
.bottom > .tip {
|
|
top: calc(var(--tip-width) * -1);
|
|
transform: scaleY(-1);
|
|
}
|
|
.bottom > .tipThin {
|
|
top: calc(var(--tip-height) * -1);
|
|
transform: scaleY(-1);
|
|
}
|
|
.left > .tip {
|
|
right: var(--tip-offset);
|
|
}
|
|
.left > .tipThin {
|
|
right: var(--tip-offset);
|
|
}
|
|
.right > .tip {
|
|
left: var(--tip-offset);
|
|
}
|
|
.right > .tipThin {
|
|
left: var(--tip-offset);
|
|
}
|
|
</style>
|
|
|
|
<div id="body">
|
|
<div id="content">
|
|
<property-link-table id="properties"></property-link-table>
|
|
</div>
|
|
<div class="tip">
|
|
<div class="tipThin"></div>
|
|
</div>
|
|
</div>
|