Bug 1388104 - Remove inspector-specific context menu handling for HTML inputs;r=gl draft
authorBrian Grinstead <bgrinstead@mozilla.com>
Tue, 15 Aug 2017 15:39:45 -0700
changeset 646986 3be3578f73005c51a876e6c8c580184245d3e8bb
parent 646985 d1febb54888a8a82f93d54c78ddbdd40281f91ee
child 726384 c23ddd220d02b1fba993138d94dcc776af0b6235
push id74274
push userbgrinstead@mozilla.com
push dateTue, 15 Aug 2017 22:40:49 +0000
reviewersgl
bugs1388104
milestone57.0a1
Bug 1388104 - Remove inspector-specific context menu handling for HTML inputs;r=gl These are now handled by the toolbox listener introduced in the previous patch MozReview-Commit-ID: J93BUEw4Pyq
devtools/client/inspector/boxmodel/box-model.js
devtools/client/inspector/computed/computed.js
devtools/client/inspector/fonts/components/App.js
devtools/client/inspector/fonts/fonts.js
devtools/client/inspector/inspector-search.js
devtools/client/inspector/inspector.js
devtools/client/inspector/markup/views/element-editor.js
devtools/client/inspector/markup/views/text-editor.js
devtools/client/inspector/rules/rules.js
devtools/client/inspector/rules/views/rule-editor.js
devtools/client/inspector/rules/views/text-property-editor.js
--- a/devtools/client/inspector/boxmodel/box-model.js
+++ b/devtools/client/inspector/boxmodel/box-model.js
@@ -319,17 +319,16 @@ BoxModel.prototype = {
 
         let node = this.inspector.selection.nodeFront;
         this.inspector.pageStyle.getLayout(node, {
           autoMargins: true,
         }).then(layout => {
           this.store.dispatch(updateLayout(layout));
         }, e => console.error(e));
       },
-      contextMenu: this.inspector.onTextBoxContextMenu,
       cssProperties: getCssProperties(this.inspector.toolbox)
     }, event);
   },
 
   /**
    * Shows the box-model highlighter on the currently selected element.
    *
    * @param  {Object} options
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -188,17 +188,16 @@ function CssComputedView(inspector, docu
   this._onShortcut = this._onShortcut.bind(this);
   this.shortcuts.on("CmdOrCtrl+F", this._onShortcut);
   this.shortcuts.on("Escape", this._onShortcut);
   this.styleDocument.addEventListener("copy", this._onCopy);
   this.styleDocument.addEventListener("mousedown", this.focusWindow);
   this.element.addEventListener("click", this._onClick);
   this.element.addEventListener("contextmenu", this._onContextMenu);
   this.searchField.addEventListener("input", this._onFilterStyles);
-  this.searchField.addEventListener("contextmenu", this.inspector.onTextBoxContextMenu);
   this.searchClearButton.addEventListener("click", this._onClearSearch);
   this.includeBrowserStylesCheckbox.addEventListener("input",
     this._onIncludeBrowserStyles);
 
   this.searchClearButton.hidden = true;
 
   // No results text.
   this.noResults = this.styleDocument.getElementById("computed-no-results");
@@ -776,18 +775,16 @@ CssComputedView.prototype = {
     this.highlighters.removeFromView(this);
 
     // Remove bound listeners
     this.styleDocument.removeEventListener("mousedown", this.focusWindow);
     this.element.removeEventListener("click", this._onClick);
     this.styleDocument.removeEventListener("copy", this._onCopy);
     this.element.removeEventListener("contextmenu", this._onContextMenu);
     this.searchField.removeEventListener("input", this._onFilterStyles);
-    this.searchField.removeEventListener("contextmenu",
-      this.inspector.onTextBoxContextMenu);
     this.searchClearButton.removeEventListener("click", this._onClearSearch);
     this.includeBrowserStylesCheckbox.removeEventListener("input",
       this._onIncludeBrowserStyles);
 
     // Nodes used in templating
     this.element = null;
     this.boxModelWrapper = null;
     this.searchField = null;
--- a/devtools/client/inspector/fonts/components/App.js
+++ b/devtools/client/inspector/fonts/components/App.js
@@ -2,17 +2,16 @@
  * 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 { addons, createClass, createFactory, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 
 const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
 const FontList = createFactory(require("./FontList"));
 
 const { getStr } = require("../utils/l10n");
 const Types = require("../types");
 
 const PREVIEW_UPDATE_DELAY = 150;
@@ -20,35 +19,20 @@ const PREVIEW_UPDATE_DELAY = 150;
 const App = createClass({
 
   displayName: "App",
 
   propTypes: {
     fonts: PropTypes.arrayOf(PropTypes.shape(Types.font)).isRequired,
     onPreviewFonts: PropTypes.func.isRequired,
     onShowAllFont: PropTypes.func.isRequired,
-    onTextBoxContextMenu: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
-  componentDidMount() {
-    let { onTextBoxContextMenu } = this.props;
-
-    let searchInput = findDOMNode(this).querySelector(".devtools-textinput");
-    searchInput.addEventListener("contextmenu", onTextBoxContextMenu);
-  },
-
-  componentWillUnmount() {
-    let { onTextBoxContextMenu } = this.props;
-
-    let searchInput = findDOMNode(this).querySelector(".devtools-textinput");
-    searchInput.removeEventListener("contextmenu", onTextBoxContextMenu);
-  },
-
   render() {
     let {
       fonts,
       onPreviewFonts,
       onShowAllFont,
     } = this.props;
 
     return dom.div(
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -42,17 +42,16 @@ FontInspector.prototype = {
   init() {
     if (!this.inspector) {
       return;
     }
 
     let app = App({
       onPreviewFonts: this.onPreviewFonts,
       onShowAllFont: this.onShowAllFont,
-      onTextBoxContextMenu: this.inspector.onTextBoxContextMenu
     });
 
     let provider = createElement(Provider, {
       store: this.store,
       id: "fontinspector",
       title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
       key: "fontinspector",
     }, app);
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -39,17 +39,16 @@ function InspectorSearch(inspector, inpu
 
   this.searchClearButton.hidden = true;
 
   this._onKeyDown = this._onKeyDown.bind(this);
   this._onInput = this._onInput.bind(this);
   this._onClearSearch = this._onClearSearch.bind(this);
   this.searchBox.addEventListener("keydown", this._onKeyDown, true);
   this.searchBox.addEventListener("input", this._onInput, true);
-  this.searchBox.addEventListener("contextmenu", this.inspector.onTextBoxContextMenu);
   this.searchClearButton.addEventListener("click", this._onClearSearch);
 
   // For testing, we need to be able to wait for the most recent node request
   // to finish.  Tests can watch this promise for that.
   this._lastQuery = promise.resolve(null);
 
   this.autocompleter = new SelectorAutocompleter(inspector, input);
   EventEmitter.decorate(this);
@@ -60,18 +59,16 @@ exports.InspectorSearch = InspectorSearc
 InspectorSearch.prototype = {
   get walker() {
     return this.inspector.walker;
   },
 
   destroy: function () {
     this.searchBox.removeEventListener("keydown", this._onKeyDown, true);
     this.searchBox.removeEventListener("input", this._onInput, true);
-    this.searchBox.removeEventListener("contextmenu",
-      this.inspector.onTextBoxContextMenu);
     this.searchClearButton.removeEventListener("click", this._onClearSearch);
     this.searchBox = null;
     this.searchClearButton = null;
     this.autocompleter.destroy();
   },
 
   _onSearch: function (reverse = false) {
     this.doFullTextSearch(this.searchBox.value, reverse)
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -118,17 +118,16 @@ function Inspector(toolbox) {
   this.onNewRoot = this.onNewRoot.bind(this);
   this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
   this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
   this.onShowBoxModelHighlighterForNode =
     this.onShowBoxModelHighlighterForNode.bind(this);
   this.onSidebarHidden = this.onSidebarHidden.bind(this);
   this.onSidebarSelect = this.onSidebarSelect.bind(this);
   this.onSidebarShown = this.onSidebarShown.bind(this);
-  this.onTextBoxContextMenu = this.onTextBoxContextMenu.bind(this);
 
   this._target.on("will-navigate", this._onBeforeNavigate);
   this._detectingActorFeatures = this._detectActorFeatures();
 }
 
 Inspector.prototype = {
   /**
    * open is effectively an asynchronous constructor
@@ -1057,27 +1056,16 @@ Inspector.prototype = {
     e.preventDefault();
     this._openMenu({
       screenX: e.screenX,
       screenY: e.screenY,
       target: e.target,
     });
   },
 
-  /**
-   * This is meant to be called by all the search, filter, inplace text boxes in the
-   * inspector, and just calls through to the toolbox openTextBoxContextMenu helper.
-   * @param {DOMEvent} e
-   */
-  onTextBoxContextMenu: function (e) {
-    e.stopPropagation();
-    e.preventDefault();
-    this.toolbox.openTextBoxContextMenu(e.screenX, e.screenY);
-  },
-
   _openMenu: function ({ target, screenX = 0, screenY = 0 } = { }) {
     let markupContainer = this.markup.getContainer(this.selection.nodeFront);
 
     this.contextMenuTarget = target;
     this.nodeMenuTriggerInfo = markupContainer &&
       markupContainer.editor.getInfoAtNode(target);
 
     let isSelectionElement = this.selection.isElementNode() &&
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -64,17 +64,16 @@ function ElementEditor(container, node) 
     this.tag.setAttribute("tabindex", "-1");
     editableField({
       element: this.tag,
       multiline: true,
       maxWidth: () => getAutocompleteMaxWidth(this.tag, this.container.elt),
       trigger: "dblclick",
       stopOnReturn: true,
       done: this.onTagEdit.bind(this),
-      contextMenu: this.markup.inspector.onTextBoxContextMenu,
       cssProperties: this._cssProperties
     });
   }
 
   // Make the new attribute space editable.
   this.newAttr.editMode = editableField({
     element: this.newAttr,
     multiline: true,
@@ -92,17 +91,16 @@ function ElementEditor(container, node) 
       let undoMods = this._startModifyingAttributes();
       this._applyAttributes(val, null, doMods, undoMods);
       this.container.undo.do(() => {
         doMods.apply();
       }, function () {
         undoMods.apply();
       });
     },
-    contextMenu: this.markup.inspector.onTextBoxContextMenu,
     cssProperties: this._cssProperties
   });
 
   let displayName = this.node.displayName;
   this.tag.textContent = displayName;
   this.closeTag.textContent = displayName;
 
   let isVoidElement = HTML_VOID_ELEMENTS.includes(displayName);
@@ -397,17 +395,16 @@ ElementEditor.prototype = {
         doMods.removeAttribute(attribute.name);
         this._applyAttributes(newValue, attr, doMods, undoMods);
         this.container.undo.do(() => {
           doMods.apply();
         }, () => {
           undoMods.apply();
         });
       },
-      contextMenu: this.markup.inspector.onTextBoxContextMenu,
       cssProperties: this._cssProperties
     });
 
     // Figure out where we should place the attribute.
     if (attribute.name == "id") {
       before = this.attrList.firstChild;
     } else if (attribute.name == "class") {
       let idNode = this.attrElements.get("id");
--- a/devtools/client/inspector/markup/views/text-editor.js
+++ b/devtools/client/inspector/markup/views/text-editor.js
@@ -50,17 +50,16 @@ function TextEditor(container, node, typ
             this.node.setNodeValue(val);
           }, () => {
             this.node.setNodeValue(oldValue);
           });
         });
       });
     },
     cssProperties: getCssProperties(this.markup.toolbox),
-    contextMenu: this.markup.inspector.onTextBoxContextMenu
   });
 
   this.update();
 }
 
 TextEditor.prototype = {
   buildMarkup: function (type) {
     let doc = this.markup.doc;
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -145,17 +145,16 @@ function CssRuleView(inspector, document
   this.shortcuts.on("Escape", this._onShortcut);
   this.shortcuts.on("Return", this._onShortcut);
   this.shortcuts.on("Space", this._onShortcut);
   this.shortcuts.on("CmdOrCtrl+F", this._onShortcut);
   this.element.addEventListener("copy", this._onCopy);
   this.element.addEventListener("contextmenu", this._onContextMenu);
   this.addRuleButton.addEventListener("click", this._onAddRule);
   this.searchField.addEventListener("input", this._onFilterStyles);
-  this.searchField.addEventListener("contextmenu", this.inspector.onTextBoxContextMenu);
   this.searchClearButton.addEventListener("click", this._onClearSearch);
   this.pseudoClassToggle.addEventListener("click", this._onTogglePseudoClassPanel);
   this.classToggle.addEventListener("click", this._onToggleClassPanel);
   this.hoverCheckbox.addEventListener("click", this._onTogglePseudoClass);
   this.activeCheckbox.addEventListener("click", this._onTogglePseudoClass);
   this.focusCheckbox.addEventListener("click", this._onTogglePseudoClass);
 
   this._handlePrefChange = this._handlePrefChange.bind(this);
@@ -696,18 +695,16 @@ CssRuleView.prototype = {
     this.classListPreviewer.destroy();
 
     // Remove bound listeners
     this.shortcuts.destroy();
     this.element.removeEventListener("copy", this._onCopy);
     this.element.removeEventListener("contextmenu", this._onContextMenu);
     this.addRuleButton.removeEventListener("click", this._onAddRule);
     this.searchField.removeEventListener("input", this._onFilterStyles);
-    this.searchField.removeEventListener("contextmenu",
-      this.inspector.onTextBoxContextMenu);
     this.searchClearButton.removeEventListener("click", this._onClearSearch);
     this.pseudoClassToggle.removeEventListener("click", this._onTogglePseudoClassPanel);
     this.classToggle.removeEventListener("click", this._onToggleClassPanel);
     this.hoverCheckbox.removeEventListener("click", this._onTogglePseudoClass);
     this.activeCheckbox.removeEventListener("click", this._onTogglePseudoClass);
     this.focusCheckbox.removeEventListener("click", this._onTogglePseudoClass);
 
     this.searchField = null;
--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -139,17 +139,16 @@ RuleEditor.prototype = {
         // Clicks within the selector shouldn't propagate any further.
         event.stopPropagation();
       });
 
       editableField({
         element: this.selectorText,
         done: this._onSelectorDone,
         cssProperties: this.rule.cssProperties,
-        contextMenu: this.ruleView.inspector.onTextBoxContextMenu
       });
     }
 
     if (this.rule.domRule.type !== CSSRule.KEYFRAME_RULE) {
       Task.spawn(function* () {
         let selector;
 
         if (this.rule.domRule.selectors) {
@@ -458,17 +457,16 @@ RuleEditor.prototype = {
     this.editor = new InplaceEditor({
       element: this.newPropSpan,
       done: this._onNewProperty,
       destroy: this._newPropertyDestroy,
       advanceChars: ":",
       contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
       popup: this.ruleView.popup,
       cssProperties: this.rule.cssProperties,
-      contextMenu: this.ruleView.inspector.onTextBoxContextMenu
     });
 
     // Auto-close the input if multiple rules get pasted into new property.
     this.editor.input.addEventListener("paste",
       blurOnMultipleProperties(this.rule.cssProperties));
   },
 
   /**
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -223,17 +223,16 @@ TextPropertyEditor.prototype = {
         start: this._onStartEditing,
         element: this.nameSpan,
         done: this._onNameDone,
         destroy: this.updatePropertyState,
         advanceChars: ":",
         contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
         popup: this.popup,
         cssProperties: this.cssProperties,
-        contextMenu: this.ruleView.inspector.onTextBoxContextMenu
       });
 
       // Auto blur name field on multiple CSS rules get pasted in.
       this.nameContainer.addEventListener("paste",
         blurOnMultipleProperties(this.cssProperties));
 
       this.valueContainer.addEventListener("click", (event) => {
         // Clicks within the value shouldn't propagate any further.
@@ -295,17 +294,16 @@ TextPropertyEditor.prototype = {
         validate: this._onValidate,
         advanceChars: advanceValidate,
         contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
         property: this.prop,
         popup: this.popup,
         multiline: true,
         maxWidth: () => this.container.getBoundingClientRect().width,
         cssProperties: this.cssProperties,
-        contextMenu: this.ruleView.inspector.onTextBoxContextMenu
       });
 
       this.ruleView.highlighters.on("hover-shape-point", this._onHoverShapePoint);
     }
   },
 
   /**
    * Get the path from which to resolve requests for this