Bug 1600084 - Allow to edit a ShadowRoot's html, by modifying its inner, not outerHTML. r=jdescottes

Turns out this was pretty easy to support, and I think it is useful.

Differential Revision: https://phabricator.services.mozilla.com/D55131

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/markup/markup-context-menu.js

@@ -203,8 +203,7 @@ class MarkupContextMenu {
     if (!this.selection.isNode()) {
       return;
     }
-
-    this.markup.beginEditingOuterHTML(this.selection.nodeFront);
+    this.markup.beginEditingHTML(this.selection.nodeFront);
   }
 
   /**
@@ -750,7 +749,6 @@ class MarkupContextMenu {
     const isAnonymous = this.selection.isAnonymousNode();
     const isElement =
       this.selection.isElementNode() && !this.selection.isPseudoElementNode();
-    const isEditableElement = isElement && !isAnonymous;
     const isDuplicatableElement =
       isElement && !isAnonymous && !this.selection.isRoot();
     const isScreenshotable =
@@ -762,7 +760,7 @@ class MarkupContextMenu {
         id: "node-menu-edithtml",
         label: INSPECTOR_L10N.getStr("inspectorHTMLEdit.label"),
         accesskey: INSPECTOR_L10N.getStr("inspectorHTMLEdit.accesskey"),
-        disabled: !isEditableElement,
+        disabled: isAnonymous || (!isElement && !isFragment),
         click: () => this._editHTML(),
       })
     );
@@ -799,7 +797,7 @@ class MarkupContextMenu {
         accesskey: INSPECTOR_L10N.getStr(
           "inspectorAttributesSubmenu.accesskey"
         ),
-        submenu: this._getAttributesSubmenu(isEditableElement),
+        submenu: this._getAttributesSubmenu(isElement && !isAnonymous),
       })
     );
 

devtools/client/inspector/markup/markup.js

@@ -126,7 +126,7 @@ const shortcutHandlers = {
     }
   },
   "markupView.edit.key": markupView => {
-    markupView.beginEditingOuterHTML(markupView._selectedContainer.node);
+    markupView.beginEditingHTML(markupView._selectedContainer.node);
   },
   "markupView.scrollInto.key": markupView => {
     markupView.scrollNodeIntoView();
@@ -1887,13 +1887,18 @@ MarkupView.prototype = {
   },
 
   /**
-   * Open an editor in the UI to allow editing of a node's outerHTML.
+   * Open an editor in the UI to allow editing of a node's html.
    *
    * @param  {NodeFront} node
    *         The NodeFront to edit.
    */
-  beginEditingOuterHTML: function(node) {
-    this.getNodeOuterHTML(node).then(oldValue => {
+  beginEditingHTML: function(node) {
+    // We use outer html for elements, but inner html for fragments.
+    const isOuter = node.nodeType == nodeConstants.ELEMENT_NODE;
+    const html = isOuter
+      ? this.getNodeOuterHTML(node)
+      : this.getNodeInnerHTML(node);
+    html.then(oldValue => {
       const container = this.getContainer(node);
       if (!container) {
         return;
@@ -1911,7 +1916,11 @@ MarkupView.prototype = {
         this.doc.documentElement.focus();
 
         if (commit) {
-          this.updateNodeOuterHTML(node, value, oldValue);
+          if (isOuter) {
+            this.updateNodeOuterHTML(node, value, oldValue);
+          } else {
+            this.updateNodeInnerHTML(node, value, oldValue);
+          }
         }
 
         const end = this.telemetry.msSystemNow();

devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js

@@ -23,6 +23,7 @@ const ACTIVE_ON_DOCTYPE_ITEMS = [
 const ACTIVE_ON_SHADOW_ROOT_ITEMS = [
   "node-menu-pasteinnerhtml",
   "node-menu-copyinner",
+  "node-menu-edithtml",
 ].concat(ACTIVE_ON_DOCTYPE_ITEMS);
 
 const ALL_MENU_ITEMS = [