RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 08:47:34 +00:00
Code Issues Activity Actions

LibWebView: Draw some knurling on the draggable Inspector separator

Browse source
This commit is contained in:
Timothy Flynn 2023-12-04 07:28:24 -05:00 • committed by Andreas Kling
parent f1837eded9
commit 65a9eae142
2 changed files with 22 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

19
Base/res/html/inspector/inspector.css
View file

@ -23,6 +23,9 @@ body {
width: 100%; width: 100%;
height: 5px; height: 5px;
display: flex;
justify-content: center;
cursor: row-resize; cursor: row-resize;
user-select: none; user-select: none;
} }
@ -84,6 +87,10 @@ body {
background-color: dimgray; background-color: dimgray;
} }
.split-view-separator circle {
fill: rgb(57, 57, 57);
}
.tab-controls-container { .tab-controls-container {
background-color: rgb(57, 57, 57); background-color: rgb(57, 57, 57);
} }
@ -103,14 +110,18 @@ body {
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.tab-controls-container {
background-color: rgb(229, 229, 229);
}
.split-view-separator { .split-view-separator {
background-color: lightgray; background-color: lightgray;
} }
.split-view-separator circle {
fill: white;
}
.tab-controls-container {
background-color: rgb(229, 229, 229);
}
.tab-controls button { .tab-controls button {
color: black; color: black;
background-color: white; background-color: white;

8
Userland/Libraries/LibWebView/InspectorClient.cpp
View file

@ -230,7 +230,13 @@ void InspectorClient::load_inspector()
<div id="dom-tree" class="tab-content html"></div> <div id="dom-tree" class="tab-content html"></div>
<div id="accessibility-tree" class="tab-content"></div> <div id="accessibility-tree" class="tab-content"></div>
</div> </div>
<div id="inspector-separator" class="split-view-separator"></div> <div id="inspector-separator" class="split-view-separator">
<svg viewBox="0 0 16 5" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2.5" r="2" />
<circle cx="8" cy="2.5" r="2" />
<circle cx="14" cy="2.5" r="2" />
</svg>
</div>
<div id="inspector-bottom" class="split-view-container" style="height: calc(40% - 5px)"> <div id="inspector-bottom" class="split-view-container" style="height: calc(40% - 5px)">
<div class="tab-controls-container"> <div class="tab-controls-container">
<div class="tab-controls"> <div class="tab-controls">