Merge

README.md

@@ -22,14 +22,16 @@ If you don't want to build Hide from source, you can download a nightly build fr
 #### 1. Install Prerequisites
 - Install [Haxe](https://haxe.org/) using appropriate installer from https://haxe.org/download/
 - Install these libraries:
-```
+```shell
+haxelib git format https://github.com/HaxeFoundation/format
 haxelib git heaps https://github.com/HeapsIO/heaps
 haxelib git castle https://github.com/ncannasse/castle
 haxelib git hxbit https://github.com/ncannasse/hxbit
 haxelib git hscript https://github.com/HaxeFoundation/hscript
 haxelib git hxnodejs https://github.com/HaxeFoundation/hxnodejs
 haxelib git domkit https://github.com/HeapsIO/domkit
 haxelib git hx3compat https://github.com/HaxeFoundation/hx3compat
+haxelib git hashlink https://github.com/HaxeFoundation/hashlink master other/haxelib/
 ```
 
 #### 2. Build Heaps IDE

bin/cdb.css

@@ -9,9 +9,6 @@
   padding: 0 5px 0 5px;
   border-top: solid 1px black;
   border-bottom: solid 1px black;
-  position: sticky;
-  z-index: 50;
-  top: 0;
   background-color: #222222;
 }
 .cdb-view .top-bar span {
@@ -45,18 +42,29 @@
   color: #e12729;
 }
 .cdb-view .cdb {
-  margin-bottom: 350px;
+  overflow-y: scroll;
+}
+.cdb-view .cdb > table {
+  margin-bottom: 200px;
 }
 .cdb-view.cdb-diff .cdb-sheet th,
 .cdb-view.cdb-diff th.start {
   background-color: #d60;
 }
 .cdb {
-  background-color: black;
+  height: 100%;
 }
 .cdb:focus {
   outline: none;
 }
+.cdb .cdb-sheet {
+  overflow-x: auto;
+  width: 100%;
+  table-layout: fixed;
+  border-spacing: 0;
+  background-color: #222;
+  position: relative;
+}
 .cdb .cdb-sheet td.cursorView {
   outline: 2px solid #ccc !important;
   outline-offset: -1px;
@@ -104,14 +112,6 @@
 .cdb .cdb-sheet td.selected.left {
   border-left: 1px solid #ccc;
 }
-.cdb .cdb-sheet {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  border-spacing: 0;
-  background-color: #222;
-  position: relative;
-}
 .cdb .cdb-sheet th.start {
   width: 30px;
   border-left-color: #333;
@@ -122,16 +122,18 @@
   cursor: pointer;
   background-color: #333;
   border-left: none;
+  border-bottom: 1px solid #444;
 }
 .cdb .cdb-sheet tr.head td.start {
   cursor: nw-resize;
 }
 .cdb .cdb-sheet tr.separator {
+  --level: 0;
   height: 10px;
 }
 .cdb .cdb-sheet tr.separator td {
   position: sticky;
-  top: 39px;
+  top: 21px;
   z-index: 2;
   border-left: none;
   padding-top: 6px;
@@ -147,41 +149,11 @@
 .cdb .cdb-sheet tr.separator td .toggle:hover {
   color: #ccc;
 }
-.cdb .cdb-sheet tr.separator.seplevel-1 td {
-  background-color: #3d3d3d;
-}
-.cdb .cdb-sheet tr.separator.seplevel-1 td .toggle {
-  padding-left: 25px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-2 td {
-  background-color: #383838;
-}
-.cdb .cdb-sheet tr.separator.seplevel-2 td .toggle {
-  padding-left: 40px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-3 td {
-  background-color: #343434;
-}
-.cdb .cdb-sheet tr.separator.seplevel-3 td .toggle {
-  padding-left: 50px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-4 td {
-  background-color: #303030;
-}
-.cdb .cdb-sheet tr.separator.seplevel-4 td .toggle {
-  padding-left: 60px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-5 td {
-  background-color: #303030;
-}
-.cdb .cdb-sheet tr.separator.seplevel-5 td .toggle {
-  padding-left: 70px;
-}
-.cdb .cdb-sheet tr.separator.seplevel-6 td {
-  background-color: #303030;
+.cdb .cdb-sheet tr.separator td {
+  background-color: #NaNNaNNaN;
 }
-.cdb .cdb-sheet tr.separator.seplevel-6 td .toggle {
-  padding-left: 80px;
+.cdb .cdb-sheet tr.separator td .toggle {
+  padding-left: calc(25px + var(--level) * 20px);
 }
 .cdb .cdb-sheet tr.locIgnored {
   background-color: #221C1C;
@@ -237,19 +209,25 @@
 .cdb .cdb-sheet tr.clickable:hover {
   background-color: #f8f8f8;
 }
-.cdb .cdb-sheet:not(.cdb-sub-sheet) > thead.head > th {
+.cdb .cdb-sheet thead.head {
+  background-color: #2A2A2A;
+  z-index: 9;
+}
+.cdb .cdb-sheet:not(.cdb-sub-sheet) > thead.head {
   position: sticky;
-  z-index: 600;
-  top: 20px;
+  top: 0;
+}
+.cdb .cdb-sheet .cdb-sub-sheet > thead.head {
+  top: 21px;
+  z-index: 10;
 }
 .cdb .cdb-sheet tr.head,
 .cdb .cdb-sheet th {
   font-weight: bold;
   text-align: center;
   padding: 1px 10px 4px 10px;
-  box-shadow: inset 0px -1px 1px #666;
-  border-left: 1px solid #444;
-  background-color: #222;
+  border-left: 1px solid #666;
+  border-bottom: 1px solid #666;
   color: #ddd;
   width: auto;
   white-space: nowrap;
@@ -263,8 +241,6 @@
 .cdb .cdb-sheet td {
   user-select: none;
   border-left: 1px solid #444;
-}
-.cdb .cdb-sheet tr {
   border-bottom: 1px solid #333;
 }
 .cdb .cdb-sheet tr.validation-error td {
@@ -397,7 +373,6 @@
   outline: 1px solid black;
 }
 .cdb .cdb-sheet td.t_flags {
-  position: relative;
   overflow: visible;
 }
 .cdb .cdb-sheet td.t_ref,
@@ -532,13 +507,17 @@
   border: 1px solid black;
   padding: 5px;
   z-index: 810;
+  max-width: 500px;
 }
 .cdb .cdb-sheet td.t_file .preview .previewContent .label {
   text-align: center;
   margin-bottom: 5px;
   background-color: #444;
   font-family: monospace;
 }
+.cdb .cdb-sheet td.t_file .preview .previewContent > img {
+  width: 100%;
+}
 .cdb .cdb-sheet td.t_file .inlineImage > img {
   max-height: 100px;
 }