Custom.css

/* Toolbar customization for vertical docking */
/* decrease the size of toolbar buttons */
#-webkit-web-inspector.dock-to-right:not(.detached) #toolbar {
    zoom: 0.9;
}

/* move up everything else to account for the decrease in the toolbar's height */
#-webkit-web-inspector.dock-to-right:not(.detached) #main {
    top: 50px !important;
}



/* when devtools is very narrow, the panel buttons in the toolbar start moving
 * into a dropdown, which is fine by itself, except that the dropdown goes off
 * the right edge of the screen; this is a fix for that */
#-webkit-web-inspector.dock-to-right:not(.detached) #toolbar-dropdown {
    left: auto !important;
    right: 5px !important;
}



/* "Elements" panel optimized for vertical layout */
/* left column (DOM) */
#-webkit-web-inspector.dock-to-right:not(.detached) .elements .source-code {
    left: auto;
    right: auto;
    width: 100% !important;
    height: 70%;
    border-bottom: 3px solid #eee;
}

/* right column (CSS) */
#-webkit-web-inspector.dock-to-right:not(.detached) .elements .split-view-sidebar-right {
    left: auto;
    right: auto;
    width: 100% !important;
    height: 30%;
    border-top: 1px solid #ccc;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .elements .split-view-contents {
    position: relative !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .elements .split-view-resizer {
    display: none;
}

/* "Scripts" panel optimized for vertical layout:
 * In the default layout, the panel has 3 columns A, B, C, organized as follows:
 * ,-----------.
 * \___________\___
 * |   |       |   |
 * | A |   B   | C |
 * |___|_______|___|
 * `-----------'
 *
 * The dotted border indicates the DOM hierarchy:
 *
 * <div>
 *   <div>
 *     <!-- column A -->
 *     <!-- column B -->
 *   </div>
 *   <!-- column C -->
 * </div>
 *
 * We need to reorganize them so that B appears on top, and A and C share the bottom half:
 *  _______
 * |       |
 * |       |
 * |   B   |
 * |       |
 * |_______|
 * |   |   |
 * | A | C |
 * |___|___|
 */

/* wrapper containing A and B: (A B) */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child {
    width: 100%;
}

/* column A (when pinned) */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .split-view-sidebar-left {
    left: 0px;
    top: 70% !important;
    width: 50% !important;
    z-index: 10;
    background-color: white;
}

/* column A (when overlayed, i.e., when NOT pinned) */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .sidebar-overlay {
    top: 70% !important;
}

/* get rid of split view resizer between columns A and B */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .split-view-resizer {
    display: none;
}

/* column B */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-contents:first-child > .split-view > .split-view-contents:nth-child(2) {
    left: 0px !important;
    height: 70%;
    position: static !important; /* needed for correctly positioning column A's show / hide button later on */
    border-bottom: 1px solid #888;
}

/* column C */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view > .split-view-sidebar-right {
    right: 0px;
    top: 70% !important;
    width: 50% !important;
    background-color: white;
}

/* reposition the buttons for showing / hiding / resizing the sidebars */
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view .scripts-debugger-show-hide-button,
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view .scripts-navigator-show-hide-button,
#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-debug-sidebar-resizer-widget {
    top: 70% !important;
    z-index: 20 !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-editor-container-tabbed-pane > .scripts-navigator-show-hide-button {
    left: auto !important;
    right: 50% !important;
    margin-right: 20px !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #scripts-split-view .sidebar-overlay .navigator-tabbed-pane .scripts-navigator-show-hide-button {
    top: 0 !important;
}



/*
 * Network panel
 */
#-webkit-web-inspector.dock-to-right:not(.detached) .network .split-view-sidebar-left {
    position: static;
    width: 100% !important;
	height: 50% !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #main-panels .network .split-view-sidebar-left.maximized {
	height: 100% !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #main-panels #network-views {
	position: static;
	left: 0 !important;
	top: 50% !important;
	width: 100%;
	height: 50% !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #network-container .data-grid table.header col,
#-webkit-web-inspector.dock-to-right:not(.detached) #network-container .data-grid table.data col {
	display: block !important;
	width: auto !important;
}
#-webkit-web-inspector.dock-to-right:not(.detached) #network-container .data-grid .data-grid-resizer {
	display: block !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #network-container .network-log-grid.data-grid td {
	border-right: 1px solid #D2D2D2 !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) #network-container .data-grid th {
	border-right: 1px solid #B3B3B3 !important;
}


/* "Resources", "Audits", and "Profiles" panels optimized for vertical layout */
#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left,
#-webkit-web-inspector.dock-to-right:not(.detached) .audits .split-view-sidebar-left,
#-webkit-web-inspector.dock-to-right:not(.detached) .profiles .split-view-sidebar-left {
    height: 30% !important;
    width: 100% !important;
    border-bottom: 3px solid #eee;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-contents:nth-child(2),
#-webkit-web-inspector.dock-to-right:not(.detached) .audits .split-view-contents:nth-child(2),
#-webkit-web-inspector.dock-to-right:not(.detached) .profiles .split-view-contents:nth-child(2) {
    top: 30% !important;
    left: 0 !important;
    border-top: 1px solid #ccc;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-resizer,
#-webkit-web-inspector.dock-to-right:not(.detached) .audits .split-view-resizer,
#-webkit-web-inspector.dock-to-right:not(.detached) .profiles .split-view-resizer {
    display: none;
}


/* Dynamically-expanding split view in the Resources panel
 * Idea credits: https://github.com/mauricelam/DockToRight/blob/c9e9425d50ddfe625831a34a3ea63d15d10b62b3/Custom.css#L244-L260 */
#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left {
    height: 30% !important;
    z-index: 20;
    -webkit-transition: 0.2s;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left:hover {
    height: 50% !important;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left + .split-view-contents {
    top: 20% !important;
    -webkit-transition: 0.2s;
}

#-webkit-web-inspector.dock-to-right:not(.detached) .resources .split-view-sidebar-left:hover + .split-view-contents {
    top: 50% !important;
}