mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Wolfgang Beyer
760462e3a4
This CL adds a detail view for each frame which opens when clicking on the frame in the application panel's frame tree. Currently there is not much info to see there, but we want to add info about the frame's security state, etc. Screenshots: Before: https://i.imgur.com/nmzX6bk.png After: https://i.imgur.com/T7CB3lf.png Bug: chromium:1093247 Change-Id: I1eb8b70fee0fffec6db524e04909d0982e9883d6 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2294982 Commit-Queue: Wolfgang Beyer <wolfi@chromium.org> Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
126 lines
2.0 KiB
CSS
126 lines
2.0 KiB
CSS
/*
|
|
* Copyright 2016 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
:host {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.report-content-box {
|
|
background-color: white;
|
|
white-space: nowrap;
|
|
overflow: auto;
|
|
}
|
|
|
|
.report-content-box.no-scroll {
|
|
overflow: visible;
|
|
}
|
|
|
|
.report-header {
|
|
border-bottom: 1px solid rgb(230 230 230);
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
.report-header .toolbar {
|
|
margin-bottom: -8px;
|
|
margin-top: 5px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.report-title {
|
|
font-size: 15px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.report-url,
|
|
.report-subtitle {
|
|
font-size: 12px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.report-section {
|
|
display: flex;
|
|
padding: 12px;
|
|
border-bottom: 1px solid rgb(230 230 230);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.report-section-header {
|
|
margin-left: 18px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.report-section-title {
|
|
flex: auto;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
color: #555;
|
|
}
|
|
|
|
.report-field {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.report-row {
|
|
margin: 10px 0 2px 18px;
|
|
}
|
|
|
|
.report-field-name {
|
|
color: #888;
|
|
flex: 0 0 128px;
|
|
text-align: right;
|
|
padding: 0 6px;
|
|
white-space: pre;
|
|
}
|
|
|
|
.report-field-value {
|
|
flex: auto;
|
|
padding: 0 6px;
|
|
white-space: pre;
|
|
}
|
|
|
|
.report-field-value-is-flexed {
|
|
display: flex;
|
|
}
|
|
|
|
.report-field-value-subtitle {
|
|
color: #888;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.report-row-selectable {
|
|
user-select: text;
|
|
}
|
|
|
|
.image-wrapper,
|
|
.image-wrapper img {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
display: block;
|
|
}
|
|
|
|
.image-wrapper {
|
|
height: fit-content;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.show-mask img {
|
|
/* The safe zone is a centrally positioned circle, with radius 2/5
|
|
* (40%) of the minimum of the icon's width and height.
|
|
* https://w3c.github.io/manifest/#icon-masks */
|
|
clip-path: circle(40% at 50% 50%);
|
|
}
|
|
|
|
.show-mask .image-wrapper {
|
|
background: url(Images/checker.png);
|
|
}
|