HighlightLines.js (1698B)
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 /** 6 * Uses of this panel are:- 7 * - Highlighting lines of a function selected to be copied using the "Copy function" context menu in the Outline panel 8 */ 9 10 import { Component } from "devtools/client/shared/vendor/react"; 11 import PropTypes from "devtools/client/shared/vendor/react-prop-types"; 12 13 class HighlightLines extends Component { 14 static get propTypes() { 15 return { 16 editor: PropTypes.object.isRequired, 17 range: PropTypes.object.isRequired, 18 }; 19 } 20 21 componentDidMount() { 22 this.highlightLineRange(); 23 } 24 25 // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 26 UNSAFE_componentWillUpdate() { 27 this.clearHighlightRange(); 28 } 29 30 componentDidUpdate() { 31 this.highlightLineRange(); 32 } 33 34 componentWillUnmount() { 35 this.clearHighlightRange(); 36 } 37 38 clearHighlightRange() { 39 const { range, editor } = this.props; 40 41 if (!range || !editor) { 42 return; 43 } 44 45 editor.removeLineContentMarker("multi-highlight-line-marker"); 46 } 47 48 highlightLineRange = () => { 49 const { range, editor } = this.props; 50 51 if (!range || !editor) { 52 return; 53 } 54 55 editor.scrollTo(range.start, 0); 56 const lines = []; 57 for (let line = range.start; line <= range.end; line++) { 58 lines.push({ line }); 59 } 60 editor.setLineContentMarker({ 61 id: editor.markerTypes.MULTI_HIGHLIGHT_LINE_MARKER, 62 lineClassName: "highlight-lines", 63 lines, 64 }); 65 }; 66 67 render() { 68 return null; 69 } 70 } 71 72 export default HighlightLines;