Selaa lähdekoodia

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.
Timothy Flynn 1 vuosi sitten
vanhempi
commit
7cdd07b89a
1 muutettua tiedostoa jossa 11 lisäystä ja 1 poistoa
  1. 11 1
      Userland/Libraries/LibWebView/InspectorClient.cpp

+ 11 - 1
Userland/Libraries/LibWebView/InspectorClient.cpp

@@ -322,6 +322,16 @@ void InspectorClient::maybe_load_inspector()
         let initialTabButton = document.getElementById("dom-tree-button");
         let initialTabButton = document.getElementById("dom-tree-button");
         selectTab(initialTabButton, "dom-tree");
         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 => {
         inspector.inspectDOMNodeID = nodeID => {
             let domNodes = document.querySelectorAll(`[data-id="${nodeID}"]`);
             let domNodes = document.querySelectorAll(`[data-id="${nodeID}"]`);
             if (domNodes.length !== 1) {
             if (domNodes.length !== 1) {
@@ -335,7 +345,7 @@ void InspectorClient::maybe_load_inspector()
             }
             }
 
 
             inspectDOMNode(domNodes[0]);
             inspectDOMNode(domNodes[0]);
-            selectedDOMNode.scrollIntoView({ block: "start", inline: "start" });
+            scrollToElement(selectedDOMNode);
         };
         };
 
 
         inspector.clearInspectedDOMNode = () => {
         inspector.clearInspectedDOMNode = () => {