mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Mengdi Chen
6dbccb9249
## Summary resolves #24522 To upgrade to Manifest V3, one of the biggest issue is that we are no longer allowed to add a script element with code in textContent so that it would run synchronously. It's necessary for us because we need to inject a global hook for react reconciler to detect whether devtools exist. To do that, we'll leverage a new API `chrome.scripting.registerContentScripts` in V3. Particularly, we rely on the "world" option (added in Chrome v102 [commit](https://chromium.googlesource.com/chromium/src/+/e5ad3451c17b21341b0b9019b074801c44c92c9f)) to run it in the "main world" on the page. This PR also renames a few content script files so that it's easier to tell them apart from other extension scripts and understand the purpose of each of them. Manifest V3 is not yet ready for Firefox, so we need to keep some code for compatibility. ## How did you test this change? `yarn build:chrome && yarn test:chrome` `yarn build:edge && yarn test:edge` `yarn build:firefox && yarn test:firefox`
100 lines
1.6 KiB
CSS
100 lines
1.6 KiB
CSS
.Tree {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: 1px solid var(--color-border);
|
|
|
|
/* Default size will be adjusted by Tree after scrolling */
|
|
--indentation-size: 12px;
|
|
}
|
|
|
|
.List {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.InnerElementType {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.SearchInput {
|
|
flex: 0 0 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.AutoSizerWrapper {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
flex: 1 0 auto;
|
|
}
|
|
.AutoSizerWrapper:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.List {
|
|
font-family: var(--font-family-monospace);
|
|
font-size: var(--font-size-monospace-normal);
|
|
line-height: var(--line-height-data);
|
|
}
|
|
|
|
.VRule {
|
|
height: 20px;
|
|
width: 1px;
|
|
flex: 0 0 1px;
|
|
margin: 0 0.5rem;
|
|
background-color: var(--color-border);
|
|
}
|
|
|
|
.Loading {
|
|
height: 100%;
|
|
padding-left: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: flex-start;
|
|
font-size: var(--font-size-sans-large);
|
|
color: var(--color-dim);
|
|
}
|
|
|
|
.IconAndCount {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--font-size-sans-normal);
|
|
}
|
|
|
|
.ErrorIcon, .WarningIcon {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
margin-left: 0.25rem;
|
|
margin-right: 0.25rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
.ErrorIcon {
|
|
color: var(--color-console-error-icon);
|
|
}
|
|
.WarningIcon {
|
|
color: var(--color-console-warning-icon);
|
|
}
|
|
|
|
.ZeroElementsNotice {
|
|
padding-left: 1em;
|
|
opacity: 0;
|
|
animation: fadeIn 0.5s forwards;
|
|
animation-delay: 2s;
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.Link {
|
|
color: var(--color-button-active);
|
|
} |