object-with-text.mjs (1836B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ 4 5 import PropTypes from "resource://devtools/client/shared/vendor/react-prop-types.mjs"; 6 import { span } from "resource://devtools/client/shared/vendor/react-dom-factories.mjs"; 7 8 import { wrapRender } from "./rep-utils.mjs"; 9 10 import { rep as StringRep } from "./string.mjs"; 11 12 /** 13 * Renders a grip object with textual data. This is used for objects like 14 * CSSMediaRule, CSSStyleRule, Temporals.*, :..… 15 */ 16 17 ObjectWithText.propTypes = { 18 object: PropTypes.object.isRequired, 19 shouldRenderTooltip: PropTypes.bool, 20 }; 21 22 function ObjectWithText(props) { 23 const grip = props.object; 24 const config = getElementConfig(props); 25 26 return span(config, getTitle(grip), getDescription(grip)); 27 } 28 29 function getElementConfig(opts) { 30 const shouldRenderTooltip = opts.shouldRenderTooltip; 31 const grip = opts.object; 32 33 return { 34 "data-link-actor-id": grip.actor, 35 className: `objectTitle objectBox objectBox-${getType(grip)}`, 36 title: shouldRenderTooltip 37 ? `${getType(grip)} "${grip.preview.text}"` 38 : null, 39 }; 40 } 41 42 function getTitle(grip) { 43 return span({ className: "objectTitle" }, `${getType(grip)} `); 44 } 45 46 function getType(grip) { 47 return grip.class; 48 } 49 50 function getDescription(grip) { 51 const type = getType(grip); 52 53 return StringRep({ 54 object: grip.preview.text, 55 // For Temporal, it looks better to not have the quotes around the string 56 useQuotes: !type || !type.startsWith("Temporal"), 57 }); 58 } 59 60 // Registration 61 function supportsObject(grip) { 62 return grip?.preview?.kind == "ObjectWithText"; 63 } 64 65 const rep = wrapRender(ObjectWithText); 66 67 // Exports from this module 68 export { rep, supportsObject };