mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-10 05:35:05 +08:00
Patrick Brosset
436d8ac8c5
In bug 1109177 I cleaned up the display of nodes listed in the Layout panel by making them not wrap, and have an ellipsis when they were too long. This caused a visual regression in the breadcrumbs of the Elements tree. The nodes there use the same component and they were affected by my CSS change. Namely, the focus outline became taller and got cropped. In this change, I'm just reverting the change of CSS to NodeText. Instead, I'm moving this to the layoutPane.css, so it now only applies to nodes in the Layout pane, and not the breadcrumbs anymore. Before: https://imgur.com/CTGA6SO.jpg After: https://imgur.com/sFfUQLk.jpg Bug: 1124250 Change-Id: I9433cf0187be17a0044766472236470bb1be4b79 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2389035 Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com> Reviewed-by: Michael Liao <michael.liao@microsoft.com>
115 lines
1.9 KiB
CSS
115 lines
1.9 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.header {
|
|
align-items: center;
|
|
background-color: var(--toolbar-bg-color, #f3f3f3);
|
|
border-bottom: var(--divider-border, 1px solid #d0d0d0);
|
|
border-top: var(--divider-border, 1px solid #d0d0d0);
|
|
display: flex;
|
|
line-height: 1.6;
|
|
overflow: hidden;
|
|
padding: 0 5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.content-section {
|
|
padding: 16px;
|
|
border-bottom: var(--divider-border, 1px solid #d0d0d0);
|
|
}
|
|
|
|
.content-section-title {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.checkbox-settings {
|
|
margin-top: 8px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 5px;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.checkbox-settings .checkbox-label {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.checkbox-settings .checkbox-label:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.checkbox-label input {
|
|
margin: 0 6px 0 0;
|
|
padding: 0;
|
|
flex: none;
|
|
}
|
|
|
|
.checkbox-label .color-swatch {
|
|
margin: 0 0 0 8px;
|
|
}
|
|
|
|
.checkbox-label > span {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.select-settings {
|
|
margin-top: 16px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 150px);
|
|
gap: 16px;
|
|
}
|
|
|
|
.select-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.select-label span {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.elements {
|
|
margin-top: 12px;
|
|
color: var(--dom-tag-name-color);
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.element {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.show-element {
|
|
margin: 0 0 0 8px;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
-webkit-mask-image: url(Images/ic_show_node_16x16.svg);
|
|
background-color: rgba(0 0 0 / 62%);
|
|
width: 16px;
|
|
height: 16px;
|
|
display: block;
|
|
cursor: pointer;
|
|
flex: none;
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .show-element {
|
|
background-color: rgb(204 204 204);
|
|
}
|