Fix jumpy page on highlighting due to scrollbar (#49)

Fix jumpy page on highlighting due to scrollbar

Author: marvinhagemeister

src/adapter/adapter/highlight.ts

@@ -2,7 +2,7 @@ import { Renderer } from "../renderer";
 import { render, h } from "preact";
 import { getNearestElement, measureNode } from "../dom";
 import { ID } from "../../view/store/types";
-import { Highlighter } from "../../view/components/Highlighter";
+import { Highlighter, style } from "../../view/components/Highlighter";
 
 /**
  * This module is responsible for displaying the transparent element overlay
@@ -35,7 +35,7 @@ export function createHightlighter(renderer: Renderer) {
 			if (highlightRef == null) {
 				highlightRef = document.createElement("div");
 				highlightRef.id = "preact-devtools-highlighter";
-				highlightRef.className = "foobar";
+				highlightRef.className = style.outerContainer;
 
 				document.body.appendChild(highlightRef);
 			}

src/examples/10/Highlighting.tsx

@@ -0,0 +1,26 @@
+import { h } from "../vendor/preact-10";
+
+function Inner() {
+	return (
+		<div
+			style={`
+        background: #aaa;
+        width: 100vh;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 15rem;
+      `}
+		>
+			full width
+		</div>
+	);
+}
+
+export function FullWidthHighlighter() {
+	return (
+		<div style="padding-top: 20rem">
+			<Inner />
+		</div>
+	);
+}

src/examples/10/setup.tsx

@@ -7,6 +7,7 @@ import { Stateful } from "./state";
 import { createRenderer } from "../../adapter/10/renderer";
 import { setupOptions } from "../../adapter/10/options";
 import { Booleans, Complex } from "./DataTypes";
+import { FullWidthHighlighter } from "./Highlighting";
 
 export function initPreact10(hook: DevtoolsHook) {
 	if (hook.attachPreact) {
@@ -27,18 +28,25 @@ export function initPreact10(hook: DevtoolsHook) {
 export function renderExamples10(node: HTMLElement) {
 	render(
 		<div>
-			<p>Todo list</p>
-			<TodoList />
-			<p>Legacy context</p>
-			<LegacyContext />
-			<p>Class state</p>
-			<Stateful />
-			<p>Data Types</p>
-			<Booleans value={true} />
-			<Complex />
-			<p>Deep tree</p>
-			<DeepTree />
-			<br />
+			{/* <FullWidthHighlighter /> */}
+			<div style="padding: 2rem">
+				<p>Highlight full width</p>
+				<small>
+					Uncomment all other components so that the vertical scrollbar is gone
+				</small>
+				<p>Todo list</p>
+				<TodoList />
+				<p>Legacy context</p>
+				<LegacyContext />
+				<p>Class state</p>
+				<Stateful />
+				<p>Data Types</p>
+				<Booleans value={true} />
+				<Complex />
+				<p>Deep tree</p>
+				<DeepTree />
+				<br />
+			</div>
 		</div>,
 		node,
 	);

src/index.tsx

@@ -41,11 +41,11 @@ wrapper.style.cssText = `
 `;
 const container = div("container");
 container.style.cssText = `
-	padding: 2rem;
 	overflow: auto;
 `;
 
 const examples10 = div("preact-10");
+examples10.style.cssText = "position: relative";
 document.body.appendChild(wrapper);
 wrapper.appendChild(container);
 wrapper.appendChild(devtools);

src/view/components/Highlighter.css

@@ -72,3 +72,12 @@
 .fixed.fixedBottom {
 	bottom: 1.5em;
 }
+
+.outerContainer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+}

src/view/components/Highlighter.tsx

@@ -2,6 +2,8 @@ import { h } from "preact";
 import s from "./Highlighter.css";
 import { Measurements } from "../../adapter/dom";
 
+export const style = s;
+
 export interface Props extends Measurements {
 	label: string;
 }