DevTools: added "overlayContents" mode, where DevTools content is placed around and underneath inse…

Source/devtools/front_end/inspector.css

Index: Source/devtools/front_end/inspector.css
diff --git a/Source/devtools/front_end/inspector.css b/Source/devtools/front_end/inspector.css
index 29216f3b723c403b174cb3ebce321dea106f5177..76f7a5f705d3283d162f5ab215f7962429bbba1f 100644
--- a/Source/devtools/front_end/inspector.css
+++ b/Source/devtools/front_end/inspector.css
@@ -118,18 +118,29 @@ body.inactive .toolbar-background {
 
 body.dock-to-bottom .toolbar-background {
     padding-top: 0;
-    border-top: 1px solid rgb(100, 100, 100);
-    cursor: default;
 }
 
-body.dock-to-bottom.platform-mac .toolbar-background {
+body.dock-to-bottom.platform-mac:not(.overlay-contents) .toolbar-background {
     border-top-color: white;
 }
 
-body.dock-to-bottom.inactive .toolbar-background {
+body.dock-to-bottom:not(.overlay-contents) .toolbar-background {
+    border-top: 1px solid rgb(100, 100, 100);
+    cursor: default;
+}
+
+body.dock-to-bottom.inactive:not(.overlay-contents) .toolbar-background {
     border-top: 1px solid rgb(64%, 64%, 64%);
 }
 
+body.dock-to-bottom.overlay-contents .toolbar-background .tabbed-pane-header {
+    cursor: ns-resize;
+}
+
+body.dock-to-bottom.overlay-contents .toolbar-background .tabbed-pane-header .tabbed-pane-header-tabs {
+    cursor: default;
+}
+
 body.platform-windows .toolbar-background,
 body.platform-windows.inactive .toolbar-background {
     background-image: none;
@@ -2835,3 +2846,7 @@ body.platform-mac .progress-bar-container progress {
 body.undocked .toolbar-close-button-item {
     display: none;
 }
+
+body.dock-to-bottom.overlay-contents #inspector-split-view .split-view-resizer {
+    display: none;
+}