Bug 1555114 - Convert the TextEditor markup into a React component. r=jdescottes (e73b26a8) · Commits · clairehurst / Tor Browser

devtools/client/inspector/markup/components/TextNode.js

0 → 100644

+77 −0

Original line number	Diff line number	Diff line
		/* This Source Code Form is subject to the terms of the Mozilla Public
		* License, v. 2.0. If a copy of the MPL was not distributed with this
		* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

		"use strict";

		const {
		createElement,
		createRef,
		Fragment,
		PureComponent,
		} = require("devtools/client/shared/vendor/react");
		const dom = require("devtools/client/shared/vendor/react-dom-factories");
		const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
		const { editableItem } = require("devtools/client/shared/inplace-editor");

		const { getFormatStr } = require("../utils/l10n");

		class TextNode extends PureComponent {
		static get propTypes() {
		return {
		showTextEditor: PropTypes.func.isRequired,
		type: PropTypes.string.isRequired,
		value: PropTypes.string.isRequired,
		};
		}

		constructor(props) {
		super(props);

		this.state = {
		value: this.props.value,
		};

		this.valuePreRef = createRef();
		}

		componentDidMount() {
		editableItem({
		element: this.valuePreRef.current,
		trigger: "dblclick",
		}, element => {
		this.props.showTextEditor(element);
		});
		}

		render() {
		const { value } = this.state;
		const isComment = this.props.type === "comment";
		const isWhiteSpace = !/[^\s]/.exec(value);

		return createElement(Fragment, null,
		isComment ? dom.span({}, "<!--") : null,
		dom.pre(
		{
		className: isWhiteSpace ? "whitespace" : "",
		ref: this.valuePreRef,
		style: {
		display: "inline-block",
		whiteSpace: "normal",
		},
		tabIndex: -1,
		title: isWhiteSpace ?
		getFormatStr("markupView.whitespaceOnly", value.replace(/\n/g, "⏎")
		.replace(/\t/g, "⇥")
		.replace(/ /g, "◦"))
		:
		"",
		},
		value
		),
		isComment ? dom.span({}, "-->") : null
		);
		}
		}

		module.exports = TextNode;

devtools/client/inspector/markup/components/moz.build

0 → 100644

+9 −0

Original line number	Diff line number	Diff line
		# -- Mode: python; indent-tabs-mode: nil; tab-width: 40 --
		# vim: set filetype=python:
		# This Source Code Form is subject to the terms of the Mozilla Public
		# License, v. 2.0. If a copy of the MPL was not distributed with this
		# file, You can obtain one at http://mozilla.org/MPL/2.0/.

		DevToolsModules(
		'TextNode.js',
		)

devtools/client/inspector/markup/moz.build

+2 −0

Original line number	Diff line number	Diff line
		@@ -5,6 +5,8 @@
		# file, You can obtain one at http://mozilla.org/MPL/2.0/.

		DIRS += [
		'components',
		'utils',
		'views',
		]

devtools/client/inspector/markup/test/browser_markup_keybindings_03.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -24,7 +24,7 @@ add_task(async function() {
		info("Click on the MarkupContainer element for the text node");
		await clickContainer(textFront, inspector);
		is(inspector.markup.doc.activeElement,
		getContainerForNodeFront(textFront, inspector).editor.value,
		getContainerForNodeFront(textFront, inspector).editor.textNode.valuePreRef.current,
		"The currently focused element is the node's text content");

		info("Click on the MarkupContainer element for the <div> node");

devtools/client/inspector/markup/utils/l10n.js

0 → 100644

+13 −0

Original line number	Diff line number	Diff line
		/* This Source Code Form is subject to the terms of the Mozilla Public
		* License, v. 2.0. If a copy of the MPL was not distributed with this
		* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

		"use strict";

		const { LocalizationHelper } = require("devtools/shared/l10n");
		const L10N = new LocalizationHelper("devtools/client/locales/inspector.properties");

		module.exports = {
		getStr: (...args) => L10N.getStr(...args),
		getFormatStr: (...args) => L10N.getFormatStr(...args),
		};