Bug 1581958 - Add sub-menu to watchpoints context menu r=jlast

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

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

devtools/client/debugger/src/components/SecondaryPanes/Scopes.js

@@ -128,11 +128,11 @@ class Scopes extends PureComponent<Props, State> {
     }
 
     if (!item.contents || item.contents.watchpoint) {
+      const removeWatchpointLabel = L10N.getStr("watchpoints.removeWatchpoint");
+
       const removeWatchpointItem = {
         id: "node-menu-remove-watchpoint",
-        // NOTE: we're going to update the UI to add a "break on..."
-        // sub menu. At that point we'll translate the strings. bug 1580591
-        label: "Remove watchpoint",
+        label: removeWatchpointLabel,
         disabled: false,
         click: () => removeWatchpoint(item),
       };
@@ -141,26 +141,33 @@ class Scopes extends PureComponent<Props, State> {
       return showMenu(event, menuItems);
     }
 
-    // NOTE: we're going to update the UI to add a "break on..."
-    // sub menu. At that point we'll translate the strings. bug 1580591
-    const addSetWatchpointLabel = "Pause on set";
-    const addGetWatchpointLabel = "Pause on get";
+    const addSetWatchpointLabel = L10N.getStr("watchpoints.setWatchpoint");
+    const addGetWatchpointLabel = L10N.getStr("watchpoints.getWatchpoint");
+    const watchpointsSubmenuLabel = L10N.getStr("watchpoints.submenu");
 
-    const addSetWatchpoint = {
+    const addSetWatchpointItem = {
       id: "node-menu-add-set-watchpoint",
       label: addSetWatchpointLabel,
       disabled: false,
       click: () => addWatchpoint(item, "set"),
     };
 
-    const addGetWatchpoint = {
+    const addGetWatchpointItem = {
       id: "node-menu-add-get-watchpoint",
       label: addGetWatchpointLabel,
       disabled: false,
       click: () => addWatchpoint(item, "get"),
     };
 
-    const menuItems = [addGetWatchpoint, addSetWatchpoint];
+    const watchpointsSubmenuItem = {
+      id: "node-menu-watchpoints",
+      label: watchpointsSubmenuLabel,
+      disabled: false,
+      click: () => addWatchpoint(item, "set"),
+      submenu: [addSetWatchpointItem, addGetWatchpointItem],
+    };
+
+    const menuItems = [watchpointsSubmenuItem];
     showMenu(event, menuItems);
   };
 

devtools/client/debugger/test/mochitest/browser_dbg-watchpoints.js

@@ -16,7 +16,8 @@ add_task(async function() {
   await toggleScopeNode(dbg, 3);
   const addedWatchpoint = waitForDispatch(dbg, "SET_WATCHPOINT");
   await rightClickScopeNode(dbg, 5);
-  selectContextMenuItem(dbg, selectors.addGetWatchpoint);
+  selectContextMenuItem(dbg, selectors.watchpointsSubmenu);
+  document.querySelector(selectors.addGetWatchpoint).click();
   await addedWatchpoint;
 
   info(`Resume and wait to pause at the access to b on line 12`);

devtools/client/debugger/test/mochitest/helpers.js

@@ -1302,6 +1302,7 @@ const selectors = {
   inlinePreviewLables: ".CodeMirror-linewidget .inline-preview-label",
   inlinePreviewValues: ".CodeMirror-linewidget .inline-preview-value",
   inlinePreviewOpenInspector: ".inline-preview-value button.open-inspector",
+  watchpointsSubmenu: "#node-menu-watchpoints",
   addGetWatchpoint: "#node-menu-add-get-watchpoint",
   addSetWatchpoint: "#node-menu-add-set-watchpoint",
   removeWatchpoint: "#node-menu-remove-watchpoint",

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

@@ -491,6 +491,17 @@ xhrBreakpoints.item.label=URL contains “%S”
 # when the debugger will pause on any XHR requests.
 pauseOnAnyXHR=Pause on any URL
 
+# LOCALIZATION NOTE (watchpoints.submenu): This is the text for the watchpoints sub-menu.
+watchpoints.submenu=Break on...
+
+# LOCALIZATION NOTE (watchpoints.getWatchpoint): This is the text that appears in the
+# watchpoints sub-menu to add a "get" watchpoint on an object property.
+watchpoints.getWatchpoint=Property get
+
+# LOCALIZATION NOTE (watchpoints.setWatchpoint): This is the text that appears in the
+# watchpoints submenu to add a "set" watchpoint on an object property.
+watchpoints.setWatchpoint=Property set
+
 # LOCALIZATION NOTE (watchpoints.removeWatchpoint): This is the text that appears in the
 # context menu to delete a watchpoint on an object property.
 watchpoints.removeWatchpoint=Remove watchpoint
@@ -790,7 +801,7 @@ whyPaused.promiseRejection=Paused on promise rejection
 # LOCALIZATION NOTE (whyPaused.getWatchpoint): The text that is displayed
 # in a info block explaining how the debugger is currently paused at a
 # watchpoint on an object property
-whyPaused.getWatchpoint=Paused on property access
+whyPaused.getWatchpoint=Paused on property get
 
 # LOCALIZATION NOTE (whyPaused.setWatchpoint): The text that is displayed
 # in an info block explaining how the debugger is currently paused at a