Bug 1548703 - Rearrange the markup context menu items. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 24 Jun 2019 13:12:10 -0400
changeset 542949 e85689f036c3f111f42dbc6b23b4b3c991271bdd
parent 542948 253c999a24524445c675359b2a915d159a150387
child 542950 2e756d175cb048ef209fab61f3e84866f2bc56ee
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1548703
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/locales/en-US/inspector.properties
--- a/devtools/client/inspector/markup/markup-context-menu.js
+++ b/devtools/client/inspector/markup/markup-context-menu.js
@@ -581,16 +581,41 @@ class MarkupContextMenu {
         INSPECTOR_L10N.getStr("inspectorHTMLPasteLastChild.accesskey"),
       disabled: disableFirstLastPaste,
       click: () => this._pasteAdjacentHTML("beforeEnd"),
     }));
 
     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.
       return null;
     }
 
     const markupContainer = this.markup.getContainer(this.selection.nodeFront);
 
@@ -643,34 +668,62 @@ class MarkupContextMenu {
         INSPECTOR_L10N.getStr("inspectorAttributesSubmenu.accesskey"),
       submenu: this._getAttributesSubmenu(isEditableElement),
     }));
 
     menu.append(new MenuItem({
       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(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "node-menu-showdomproperties",
+      label: INSPECTOR_L10N.getStr("inspectorShowDOMProperties.label"),
+      click: () => this._showDOMProperties(),
+    }));
+
+    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(),
+      }));
+    }
 
-      if (isSelectionElement) {
-        const checked = this.selection.nodeFront.hasPseudoClassLock(name);
-        menuitem.checked = checked;
-      } else {
-        menuitem.disabled = true;
-      }
+    menu.append(new MenuItem({
+      type: "separator",
+    }));
+
+    menu.append(new MenuItem({
+      label: INSPECTOR_L10N.getStr("inspectorPseudoClassSubmenu.label"),
+      submenu: this._getPseudoClassSubmenu(isSelectionElement),
+    }));
 
-      menu.append(menuitem);
-    }
+    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),
@@ -695,59 +748,16 @@ class MarkupContextMenu {
     }));
     menu.append(new MenuItem({
       id: "node-menu-collapse",
       label: INSPECTOR_L10N.getStr("inspectorCollapseAll.label"),
       disabled: !isNodeWithChildren || !markupContainer.expanded,
       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({
         id: "node-menu-link-separator",
         type: "separator",
       }));
     }
 
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -285,16 +285,20 @@ inspectorAttributesSubmenu.label=Attribu
 inspectorAttributesSubmenu.accesskey=A
 
 # LOCALIZATION NOTE (inspectorAddAttribute.label): This is the label shown in
 # the inspector contextual-menu for the item that lets users add attribute
 # to current node
 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
 
 # LOCALIZATION NOTE (inspectorImageDataUri.label): This is the label
 # shown in the inspector contextual-menu for the item that lets users copy
 # the URL embedding the image data encoded in Base 64 (what we name
 # here Image Data URL). For more information: