script-panel-template.html 1.78 KB
Newer Older
1 2 3 4
<!-- 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. -->

5 6 7
<head>
  <link href="./index.css" rel="stylesheet">
</head>
8
<style>
9 10
  .scriptNode {
    font-family: Consolas, monospace;
11 12
  }

13
  .scriptNode span {
14
    counter-increment: sourceLineCounter 1;
15 16 17
    text-indent: -3.5em;
    padding-left: 3.5em;
    display: block;
18 19
  }

20
  .scriptNode span::before {
21
    content: counter(sourceLineCounter) ": ";
22
    width: 3.5em;
23
    display: inline-block;
24
    white-space: pre;
25
    text-align: right;
26
  }
27

28 29 30 31 32 33 34 35 36 37 38
  mark {
    width: 1ch;
    border-radius: 2px;
    border: 0.5px var(--background-color) solid;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--on-primary-color);
  }

  .marked {
    background-color: var(--secondary-color);
39 40 41 42
    box-shadow: 0px 0px 2px 3px var(--secondary-color);
    animation-name: pulse;
    animation-duration: 3s;
    animation-delay: 500ms;
43 44 45 46
  }

  @keyframes pulse {
    0% {
47
      box-shadow: 0px 0px 0px 3px var(--secondary-color);
48 49 50 51 52 53 54 55 56 57 58
    }
    5% {
      box-shadow: 0px 0px 0px 10px var(--secondary-color);
    }
    10% {
      box-shadow: 0px 0px 0px 0px var(--secondary-color);
    }
    15% {
      box-shadow: 0px 0px 0px 10px var(--secondary-color);
    }
    20% {
59
      box-shadow: 0px 0px 2px 3px var(--secondary-color);
60
    }
61
  }
62 63
</style>
<div class="panel">
64 65
  <input type="checkbox" id="closer" class="panelCloserInput" checked>
  <label class="panelCloserLabel" for="closer"></label>
66
  <h2>Source Panel</h2>
67 68 69 70
  <div class="selection">
    <select id="script-dropdown"></select>
    <button id="selectedRelatedButton">Select Related Events</button>
  </div>
71
  <div id="script" class="panelBody">
72
    <div class="scriptNode"></div>
73 74
  </div>
</div>