LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-20 13:28:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWebView: Improve scrolling of Inspector content containers

Browse Source 
Currently, the feel of scrolling containers in the Inspector is a bit
awkward. We make the entire split-view container scrollable, then we
absolutely position the tab control buttons to force them to not scroll.
The result is that the scroll bar is painted over the tab controls, and
the tab content that we actually want to scroll has to scroll under the
tab controls. This never looked quite right.

It was basically:

    <div tab-container> <!-- Scrollable -->
        <div tab-controls /> <!-- Pinned to not be scrollable -->
        <div tab-content /> <!-- The part we actually want to scroll -->
    </div>

This patch moves the "scrollability" to just the tab content. We then
don't need to go out of our way to ensure only the content is actually
scrollable.

So we now have:

    <div tab-container> <!-- Not scrollable -->
        <div tab-controls /> <!-- Not pinned, uses normal layout -->
        <div tab-content /> <!-- Scrollable -->
    </div>
This commit is contained in:
Timothy Flynn 2024-08-02 10:34:41 -04:00 committed by Tim Flynn
parent 113b4da1df
commit d2c775b0ca
Notes: github-actions[bot] 2024-08-02 16:22:19 +00:00 
Author: https://github.com/trflynn89
Commit: https://github.com/LadybirdBrowser/ladybird/commit/d2c775b0ca2
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/934
Reviewed-by: https://github.com/AtkinsSJ ✅
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Base/res/ladybird/inspector.css
View File

@ -15,8 +15,6 @@ body {
.split-view-container {
max-height: calc(100% - 40px);
min-height: 40px;
overflow: scroll;
}
.split-view-separator {
@ -28,10 +26,11 @@ body {
cursor: row-resize;
user-select: none;
z-index: 100;
}
.tab-controls-container {
position: absolute;
width: 100%;
padding: 4px;
@ -69,13 +68,14 @@ body {
}
.tab-content {
height: 100%;
height: calc(100% - 40px);
display: none;
border-radius: 0.5rem;
margin-top: 30px;
padding: 8px 0px 0px 4px;
overflow: scroll;
}
@media (prefers-color-scheme: dark) {
@ -175,6 +175,10 @@ details > :not(:first-child) {
}
}
#console {
overflow: unset;
}
.console {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
width: 100%;
@ -182,7 +186,7 @@ details > :not(:first-child) {
}
.console-output {
height: calc(100% - 75px);
height: calc(100% - 32px);
overflow: scroll;
}

9
Base/res/ladybird/inspector.js
View File

@ -73,15 +73,6 @@ const selectTopTab = (tabButton, tabID) => {
const selectBottomTab = (tabButton, tabID) => {
selectedBottomTab = selectTab(tabButton, tabID, selectedBottomTab, selectedBottomTabButton);
selectedBottomTabButton = tabButton;
let inspectorBottom = document.getElementById("inspector-bottom");
inspectorBottom.scrollTo(0, 0);
if (tabID === "console") {
inspectorBottom.style.overflow = "hidden";
} else {
inspectorBottom.style.overflow = "scroll";
}
};
let initialTopTabButton = document.getElementById("dom-tree-button");