Bug 1548703 - Rearrange the markup context menu items. r=rcaliman

This patch rearranges the second and third group of context menu items
in the markup context menu.

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

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

@@ -586,6 +586,31 @@ class MarkupContextMenu {
     return pasteSubmenu;
   }
 
+  _getPseudoClassSubmenu(isSelectionElement) {
+    const menu = new Menu();
+
+    // Set the pseudo classes
+    for (const name of PSEUDO_CLASSES) {
+      const menuitem = new MenuItem({
+        id: "node-menu-pseudo-" + name.substr(1),
+        label: name.substr(1),
+        type: "checkbox",
+        click: () => this.inspector.togglePseudoClass(name),
+      });
+
+      if (isSelectionElement) {
+        const checked = this.selection.nodeFront.hasPseudoClassLock(name);
+        menuitem.checked = checked;
+      } else {
+        menuitem.disabled = true;
+      }
+
+      menu.append(menuitem);
+    }
+
+    return menu;
+  }
+
   _openMenu({ target, screenX = 0, screenY = 0 } = {}) {
     if (this.selection.isSlotted()) {
       // Slotted elements should not show any context menu.
@@ -648,29 +673,57 @@ class MarkupContextMenu {
       type: "separator",
     }));
 
-    // Set the pseudo classes
-    for (const name of PSEUDO_CLASSES) {
-      const menuitem = new MenuItem({
-        id: "node-menu-pseudo-" + name.substr(1),
-        label: name.substr(1),
-        type: "checkbox",
-        click: () => this.inspector.togglePseudoClass(name),
-      });
+    menu.append(new MenuItem({
+      id: "node-menu-useinconsole",
+      label: INSPECTOR_L10N.getStr("inspectorUseInConsole.label"),
+      click: () => this._useInConsole(),
+    }));
 
-      if (isSelectionElement) {
-        const checked = this.selection.nodeFront.hasPseudoClassLock(name);
-        menuitem.checked = checked;
-      } else {
-        menuitem.disabled = true;
-      }
+    menu.append(new MenuItem({
+      id: "node-menu-showdomproperties",
+      label: INSPECTOR_L10N.getStr("inspectorShowDOMProperties.label"),
+      click: () => this._showDOMProperties(),
+    }));
 
-      menu.append(menuitem);
+    this._buildA11YMenuItem(menu);
+
+    if (this.selection.nodeFront.customElementLocation) {
+      menu.append(new MenuItem({
+        id: "node-menu-jumptodefinition",
+        label: INSPECTOR_L10N.getStr("inspectorCustomElementDefinition.label"),
+        click: () => this._jumpToCustomElementDefinition(),
+      }));
     }
 
     menu.append(new MenuItem({
       type: "separator",
     }));
 
+    menu.append(new MenuItem({
+      label: INSPECTOR_L10N.getStr("inspectorPseudoClassSubmenu.label"),
+      submenu: this._getPseudoClassSubmenu(isSelectionElement),
+    }));
+
+    menu.append(new MenuItem({
+      id: "node-menu-screenshotnode",
+      label: INSPECTOR_L10N.getStr("inspectorScreenshotNode.label"),
+      disabled: !isScreenshotable,
+      click: () => this.inspector.screenshotNode().catch(console.error),
+    }));
+
+    menu.append(new MenuItem({
+      id: "node-menu-scrollnodeintoview",
+      label: INSPECTOR_L10N.getStr("inspectorScrollNodeIntoView.label"),
+      accesskey:
+        INSPECTOR_L10N.getStr("inspectorScrollNodeIntoView.accesskey"),
+      disabled: !isSelectionElement,
+      click: () => this.markup.scrollNodeIntoView(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+    }));
+
     menu.append(new MenuItem({
       label: INSPECTOR_L10N.getStr("inspectorCopyHTMLSubmenu.label"),
       submenu: this._getCopySubmenu(markupContainer, isSelectionElement),
@@ -700,49 +753,6 @@ class MarkupContextMenu {
       click: () => this.markup.collapseAll(this.selection.nodeFront),
     }));
 
-    menu.append(new MenuItem({
-      type: "separator",
-    }));
-
-    menu.append(new MenuItem({
-      id: "node-menu-scrollnodeintoview",
-      label: INSPECTOR_L10N.getStr("inspectorScrollNodeIntoView.label"),
-      accesskey:
-        INSPECTOR_L10N.getStr("inspectorScrollNodeIntoView.accesskey"),
-      disabled: !isSelectionElement,
-      click: () => this.markup.scrollNodeIntoView(),
-    }));
-    menu.append(new MenuItem({
-      id: "node-menu-screenshotnode",
-      label: INSPECTOR_L10N.getStr("inspectorScreenshotNode.label"),
-      disabled: !isScreenshotable,
-      click: () => this.inspector.screenshotNode().catch(console.error),
-    }));
-    menu.append(new MenuItem({
-      id: "node-menu-useinconsole",
-      label: INSPECTOR_L10N.getStr("inspectorUseInConsole.label"),
-      click: () => this._useInConsole(),
-    }));
-    menu.append(new MenuItem({
-      id: "node-menu-showdomproperties",
-      label: INSPECTOR_L10N.getStr("inspectorShowDOMProperties.label"),
-      click: () => this._showDOMProperties(),
-    }));
-
-    if (this.selection.nodeFront.customElementLocation) {
-      menu.append(new MenuItem({
-        type: "separator",
-      }));
-
-      menu.append(new MenuItem({
-        id: "node-menu-jumptodefinition",
-        label: INSPECTOR_L10N.getStr("inspectorCustomElementDefinition.label"),
-        click: () => this._jumpToCustomElementDefinition(),
-      }));
-    }
-
-    this._buildA11YMenuItem(menu);
-
     const nodeLinkMenuItems = this._getNodeLinkMenuItems();
     if (nodeLinkMenuItems.filter(item => item.visible).length > 0) {
       menu.append(new MenuItem({

devtools/client/locales/en-US/inspector.properties

@@ -290,6 +290,10 @@ inspectorAttributesSubmenu.accesskey=A
 inspectorAddAttribute.label=Add Attribute
 inspectorAddAttribute.accesskey=A
 
+# LOCALIZATION NOTE (inspectorPseudoClassSubmenu.label): This is the label
+# shown in the inspector contextual-menu for the sub-menu of the pseudo-classes.
+inspectorPseudoClassSubmenu.label=Change Pseudo-class
+
 # LOCALIZATION NOTE (inspectorSearchHTML.label3): This is the label that is
 # shown as the placeholder for the markup view search in the inspector.
 inspectorSearchHTML.label3=Search HTML