From 7cdd07b89a4d739d5a3a57cc7c301ed94bd1b4b6 Mon Sep 17 00:00:00 2001 From: Timothy Flynn Date: Fri, 24 Nov 2023 12:30:46 -0500 Subject: [PATCH] LibWebView: Scroll inspected elements into view with a slight offset When scrolling to the inspected element, if we scroll to its exact position, it would often be placed behind the fixed header at the top of the WebView. This patch gives the scroll a bit of an offset to scroll comfortably beneath the header. --- Userland/Libraries/LibWebView/InspectorClient.cpp | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/Userland/Libraries/LibWebView/InspectorClient.cpp b/Userland/Libraries/LibWebView/InspectorClient.cpp index 5eda8c8273..6afdf0696b 100644 --- a/Userland/Libraries/LibWebView/InspectorClient.cpp +++ b/Userland/Libraries/LibWebView/InspectorClient.cpp @@ -322,6 +322,16 @@ void InspectorClient::maybe_load_inspector() let initialTabButton = document.getElementById("dom-tree-button"); selectTab(initialTabButton, "dom-tree"); + const scrollToElement = (element) => { + // Include an offset to prevent the element being placed behind the fixed `tab-controls` header. + const offset = 45; + + let position = element.getBoundingClientRect().top; + position += window.pageYOffset - offset; + + window.scrollTo(0, position); + } + inspector.inspectDOMNodeID = nodeID => { let domNodes = document.querySelectorAll(`[data-id="${nodeID}"]`); if (domNodes.length !== 1) { @@ -335,7 +345,7 @@ void InspectorClient::maybe_load_inspector() } inspectDOMNode(domNodes[0]); - selectedDOMNode.scrollIntoView({ block: "start", inline: "start" }); + scrollToElement(selectedDOMNode); }; inspector.clearInspectedDOMNode = () => {