mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Joel Einbinder
27131b2e5c
Previously, the sidebar and main widgets were arranged via css. This caused the tab order to be wrong for keyboard navigation. This patch puts the dom elements in the correct order, which lets us remove the CSS hacks and fixes the tab order. If the main widget and the sidebar widget both contain extension iframes, we can't swap the widgets without destroying the extensions. This is quite an exotic scenario though, and currently never happens in DevTools. Bug: 941182 Change-Id: I3a93d7f3e6fb52f5f7c1b1a8511f713d31ae07ff Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1521798 Reviewed-by: Erik Luo <luoe@chromium.org> Commit-Queue: Joel Einbinder <einbinder@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#640657} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 8cd1b24aabce4a31a644db856351f3f9ef29dd92
96 lines
2.7 KiB
CSS
96 lines
2.7 KiB
CSS
/*
|
|
* Copyright (C) 2011 Google Inc. All rights reserved.
|
|
*
|
|
* Redistribution and use in source and binary forms, with or without
|
|
* modification, are permitted provided that the following conditions are
|
|
* met:
|
|
*
|
|
* 1. Redistributions of source code must retain the above copyright
|
|
* notice, this list of conditions and the following disclaimer.
|
|
*
|
|
* 2. Redistributions in binary form must reproduce the above
|
|
* copyright notice, this list of conditions and the following disclaimer
|
|
* in the documentation and/or other materials provided with the
|
|
* distribution.
|
|
*
|
|
* THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
|
|
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
|
|
* OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
|
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
|
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
|
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
*/
|
|
|
|
:host {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shadow-split-widget {
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shadow-split-widget-contents {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
contain: layout size style;
|
|
}
|
|
|
|
.shadow-split-widget-sidebar {
|
|
flex: none;
|
|
}
|
|
|
|
.shadow-split-widget-main, .shadow-split-widget-sidebar.maximized {
|
|
flex: auto;
|
|
}
|
|
|
|
.shadow-split-widget.hbox > .shadow-split-widget-resizer {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 6px;
|
|
z-index: 500;
|
|
}
|
|
|
|
.shadow-split-widget.vbox > .shadow-split-widget-resizer {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 6px;
|
|
z-index: 500;
|
|
}
|
|
|
|
.shadow-split-widget-resizer-border {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.shadow-split-widget.vbox > .shadow-split-widget-sidebar.no-default-splitter {
|
|
border: 0 !important;
|
|
}
|
|
|
|
.shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
|
|
border: 0;
|
|
border-top: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.shadow-split-widget.vbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
|
|
border: 0;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.shadow-split-widget.hbox > .shadow-split-widget-sidebar:not(.maximized) {
|
|
border: 0;
|
|
border-left: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.shadow-split-widget.hbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
|
|
border: 0;
|
|
border-right: 1px solid var(--divider-color);
|
|
}
|