AccessibilityPrefs.js (3285B)
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 "use strict"; 5 6 // React 7 const { 8 createFactory, 9 Component, 10 } = require("resource://devtools/client/shared/vendor/react.mjs"); 11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 12 const { 13 L10N, 14 } = require("resource://devtools/client/accessibility/utils/l10n.js"); 15 16 const { 17 hr, 18 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 19 20 loader.lazyGetter(this, "MenuButton", function () { 21 return createFactory( 22 require("resource://devtools/client/shared/components/menu/MenuButton.js") 23 ); 24 }); 25 loader.lazyGetter(this, "MenuItem", function () { 26 return createFactory( 27 require("resource://devtools/client/shared/components/menu/MenuItem.js") 28 ); 29 }); 30 loader.lazyGetter(this, "MenuList", function () { 31 return createFactory( 32 require("resource://devtools/client/shared/components/menu/MenuList.js") 33 ); 34 }); 35 36 const { 37 A11Y_LEARN_MORE_LINK, 38 } = require("resource://devtools/client/accessibility/constants.js"); 39 const { openDocLink } = require("resource://devtools/client/shared/link.js"); 40 41 const { 42 updatePref, 43 } = require("resource://devtools/client/accessibility/actions/ui.js"); 44 45 const { 46 connect, 47 } = require("resource://devtools/client/shared/vendor/react-redux.js"); 48 const { 49 PREFS, 50 } = require("resource://devtools/client/accessibility/constants.js"); 51 52 class AccessibilityPrefs extends Component { 53 static get propTypes() { 54 return { 55 dispatch: PropTypes.func.isRequired, 56 [PREFS.SCROLL_INTO_VIEW]: PropTypes.bool.isRequired, 57 toolboxDoc: PropTypes.object.isRequired, 58 }; 59 } 60 61 togglePref(prefKey) { 62 this.props.dispatch(updatePref(prefKey, !this.props[prefKey])); 63 } 64 65 onPrefClick(prefKey) { 66 this.togglePref(prefKey); 67 } 68 69 onLearnMoreClick() { 70 openDocLink(A11Y_LEARN_MORE_LINK); 71 } 72 73 render() { 74 return MenuButton( 75 { 76 menuId: "accessibility-tree-filters-prefs-menu", 77 toolboxDoc: this.props.toolboxDoc, 78 className: `devtools-button badge toolbar-menu-button prefs`, 79 title: L10N.getStr("accessibility.tree.filters.prefs"), 80 }, 81 MenuList({}, [ 82 MenuItem({ 83 key: "pref-scroll-into-view", 84 checked: this.props[PREFS.SCROLL_INTO_VIEW], 85 className: `pref ${PREFS.SCROLL_INTO_VIEW}`, 86 label: L10N.getStr("accessibility.pref.scroll.into.view.label"), 87 tooltip: L10N.getStr("accessibility.pref.scroll.into.view.title"), 88 onClick: this.onPrefClick.bind(this, PREFS.SCROLL_INTO_VIEW), 89 }), 90 hr({ key: "hr" }), 91 MenuItem({ 92 role: "link", 93 key: "accessibility-tree-filters-prefs-menu-help", 94 className: "help", 95 label: L10N.getStr("accessibility.documentation.label"), 96 tooltip: L10N.getStr("accessibility.learnMore"), 97 onClick: this.onLearnMoreClick, 98 }), 99 ]) 100 ); 101 } 102 } 103 104 const mapStateToProps = ({ ui }) => ({ 105 [PREFS.SCROLL_INTO_VIEW]: ui[PREFS.SCROLL_INTO_VIEW], 106 }); 107 108 // Exports from this module 109 module.exports = connect(mapStateToProps)(AccessibilityPrefs);