mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
221f3002ca
Addresses https://github.com/facebook/react/issues/32244. ### Chromium We will use [chrome.permissions](https://developer.chrome.com/docs/extensions/reference/api/permissions) for checking / requesting `clipboardWrite` permission before copying something to the clipboard. ### Firefox We will keep `clipboardWrite` as a required permission, because there is no reliable and working API for requesting optional permissions for extensions that are extending browser DevTools: - `chrome.permissions` is unavailable for devtools pages - https://bugzilla.mozilla.org/show_bug.cgi?id=1796933 - You can't call `chrome.permissions.request` from background, because this instruction has to be executed inside user-event callback, basically only initiated by user. I don't really want to come up with solutions like opening a new tab with a button that user has to click.
106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import {copy} from 'clipboard-js';
|
|
import * as React from 'react';
|
|
import Button from '../Button';
|
|
import ButtonIcon from '../ButtonIcon';
|
|
import KeyValue from './KeyValue';
|
|
import {alphaSortEntries, serializeDataForCopy} from '../utils';
|
|
import Store from '../../store';
|
|
import styles from './InspectedElementSharedStyles.css';
|
|
import {
|
|
ElementTypeClass,
|
|
ElementTypeFunction,
|
|
} from 'react-devtools-shared/src/frontend/types';
|
|
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
|
|
|
|
import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
|
|
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
|
|
import type {Element} from 'react-devtools-shared/src/frontend/types';
|
|
|
|
type Props = {
|
|
bridge: FrontendBridge,
|
|
element: Element,
|
|
inspectedElement: InspectedElement,
|
|
store: Store,
|
|
};
|
|
|
|
export default function InspectedElementContextTree({
|
|
bridge,
|
|
element,
|
|
inspectedElement,
|
|
store,
|
|
}: Props): React.Node {
|
|
const {hasLegacyContext, context, type} = inspectedElement;
|
|
|
|
const isReadOnly = type !== ElementTypeClass && type !== ElementTypeFunction;
|
|
|
|
if (context == null) {
|
|
return null;
|
|
}
|
|
|
|
const entries = Object.entries(context);
|
|
entries.sort(alphaSortEntries);
|
|
const isEmpty = entries.length === 0;
|
|
|
|
const handleCopy = withPermissionsCheck(
|
|
{permissions: ['clipboardWrite']},
|
|
() => copy(serializeDataForCopy(context)),
|
|
);
|
|
|
|
// We add an object with a "value" key as a wrapper around Context data
|
|
// so that we can use the shared <KeyValue> component to display it.
|
|
// This wrapper object can't be renamed.
|
|
// $FlowFixMe[missing-local-annot]
|
|
const canRenamePathsAtDepth = depth => depth > 1;
|
|
|
|
if (isEmpty) {
|
|
return null;
|
|
} else {
|
|
return (
|
|
<div>
|
|
<div className={styles.HeaderRow}>
|
|
<div className={styles.Header}>
|
|
{hasLegacyContext ? 'legacy context' : 'context'}
|
|
</div>
|
|
{!isEmpty && (
|
|
<Button onClick={handleCopy} title="Copy to clipboard">
|
|
<ButtonIcon type="copy" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{isEmpty && <div className={styles.Empty}>None</div>}
|
|
{!isEmpty &&
|
|
(entries: any).map(([name, value]) => (
|
|
<KeyValue
|
|
key={name}
|
|
alphaSort={true}
|
|
bridge={bridge}
|
|
canDeletePaths={!isReadOnly}
|
|
canEditValues={!isReadOnly}
|
|
canRenamePaths={!isReadOnly}
|
|
canRenamePathsAtDepth={canRenamePathsAtDepth}
|
|
depth={1}
|
|
element={element}
|
|
hidden={false}
|
|
inspectedElement={inspectedElement}
|
|
name={name}
|
|
path={[name]}
|
|
pathRoot="context"
|
|
store={store}
|
|
type="context"
|
|
value={value}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
}
|