Bug 1273211 - Added side panel enter and return controls, added keyboard space selection for controls in netmonitor; r?yzen draft
authorNancy Pang <npang@mozilla.com>
Fri, 20 May 2016 09:28:34 -0400
changeset 369135 5c81468aa6772f66252ec656ba62b171b7990744
parent 367490 966a5c060e93043f164f8256ac31bea0e8aa1cab
child 521478 7dd67721a261e1ae29310014dbb242b5efe519b3
push id18756
push userbmo:npang@mozilla.com
push dateFri, 20 May 2016 13:28:28 +0000
reviewersyzen
bugs1273211
milestone49.0a1
Bug 1273211 - Added side panel enter and return controls, added keyboard space selection for controls in netmonitor; r?yzen MozReview-Commit-ID: HGGTeshLBDs
devtools/client/debugger/views/toolbar-view.js
devtools/client/inspector/inspector-panel.js
devtools/client/netmonitor/netmonitor-view.js
--- a/devtools/client/debugger/views/toolbar-view.js
+++ b/devtools/client/debugger/views/toolbar-view.js
@@ -16,17 +16,18 @@
 function ToolbarView(DebuggerController, DebuggerView) {
   dumpn("ToolbarView was instantiated");
 
   this.StackFrames = DebuggerController.StackFrames;
   this.ThreadState = DebuggerController.ThreadState;
   this.DebuggerController = DebuggerController;
   this.DebuggerView = DebuggerView;
 
-  this._onTogglePanesPressed = this._onTogglePanesPressed.bind(this);
+  this._onTogglePanesClicked= this._onTogglePanesClicked.bind(this);
+  this._onTogglePanesPressed= this._onTogglePanesPressed.bind(this);
   this._onResumePressed = this._onResumePressed.bind(this);
   this._onStepOverPressed = this._onStepOverPressed.bind(this);
   this._onStepInPressed = this._onStepInPressed.bind(this);
   this._onStepOutPressed = this._onStepOutPressed.bind(this);
 }
 
 ToolbarView.prototype = {
   get activeThread() {
@@ -57,17 +58,18 @@ ToolbarView.prototype = {
     let stepOutKey = ShortcutUtils.prettifyShortcut(document.getElementById("stepOutKey"));
     this._resumeTooltip = L10N.getFormatStr("resumeButtonTooltip", resumeKey);
     this._pauseTooltip = L10N.getFormatStr("pauseButtonTooltip", resumeKey);
     this._pausePendingTooltip = L10N.getStr("pausePendingButtonTooltip");
     this._stepOverTooltip = L10N.getFormatStr("stepOverTooltip", stepOverKey);
     this._stepInTooltip = L10N.getFormatStr("stepInTooltip", stepInKey);
     this._stepOutTooltip = L10N.getFormatStr("stepOutTooltip", stepOutKey);
 
-    this._instrumentsPaneToggleButton.addEventListener("mousedown", this._onTogglePanesPressed, false);
+    this._instrumentsPaneToggleButton.addEventListener("mousedown", this._onTogglePanesClicked, false);
+    this._instrumentsPaneToggleButton.addEventListener("keydown", this._onTogglePanesPressed, false);
     this._resumeButton.addEventListener("mousedown", this._onResumePressed, false);
     this._stepOverButton.addEventListener("mousedown", this._onStepOverPressed, false);
     this._stepInButton.addEventListener("mousedown", this._onStepInPressed, false);
     this._stepOutButton.addEventListener("mousedown", this._onStepOutPressed, false);
 
     this._stepOverButton.setAttribute("tooltiptext", this._stepOverTooltip);
     this._stepInButton.setAttribute("tooltiptext", this._stepInTooltip);
     this._stepOutButton.setAttribute("tooltiptext", this._stepOutTooltip);
@@ -77,17 +79,18 @@ ToolbarView.prototype = {
   },
 
   /**
    * Destruction function, called when the debugger is closed.
    */
   destroy: function() {
     dumpn("Destroying the ToolbarView");
 
-    this._instrumentsPaneToggleButton.removeEventListener("mousedown", this._onTogglePanesPressed, false);
+    this._instrumentsPaneToggleButton.removeEventListener("mousedown", this._onTogglePanesClicked, false);
+    this._instrumentsPaneToggleButton.removeEventListener("keydown", this._onTogglePanesPressed, false);
     this._resumeButton.removeEventListener("mousedown", this._onResumePressed, false);
     this._stepOverButton.removeEventListener("mousedown", this._onStepOverPressed, false);
     this._stepInButton.removeEventListener("mousedown", this._onStepInPressed, false);
     this._stepOutButton.removeEventListener("mousedown", this._onStepOutPressed, false);
   },
 
   /**
    * Add commands that XUL can fire.
@@ -163,20 +166,26 @@ ToolbarView.prototype = {
       this._stepInButton,
       this._stepOverButton
     ];
     for (let button of buttons) {
       button.disabled = !enabled;
     }
   },
 
+  _onTogglePanesPressed: function(e) {
+    if(e.keyCode === e.DOM_VK_SPACE || e.keyCode === e.DOM_VK_RETURN){
+      this._onTogglePanesClicked();
+    }
+  },
+
   /**
    * Listener handling the toggle button click event.
    */
-  _onTogglePanesPressed: function() {
+  _onTogglePanesClicked: function() {
     DebuggerView.toggleInstrumentsPane({
       visible: DebuggerView.instrumentsPaneHidden,
       animated: true,
       delayed: true
     });
   },
 
   /**
--- a/devtools/client/inspector/inspector-panel.js
+++ b/devtools/client/inspector/inspector-panel.js
@@ -88,16 +88,17 @@ function InspectorPanel(iframeWindow, to
   this.onNewRoot = this.onNewRoot.bind(this);
   this._setupNodeMenu = this._setupNodeMenu.bind(this);
   this._resetNodeMenu = this._resetNodeMenu.bind(this);
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
   this.onNewSelection = this.onNewSelection.bind(this);
   this.onBeforeNewSelection = this.onBeforeNewSelection.bind(this);
   this.onDetached = this.onDetached.bind(this);
   this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
+  this.onPaneToggleButtonPressed = this.onPaneToggleButtonPressed.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
 
   this._target.on("will-navigate", this._onBeforeNavigate);
 
   EventEmitter.decorate(this);
 }
 
 exports.InspectorPanel = InspectorPanel;
@@ -397,18 +398,22 @@ InspectorPanel.prototype = {
     this.setupSidebarToggle();
   },
 
   /**
    * Add the expand/collapse behavior for the sidebar panel.
    */
   setupSidebarToggle: function() {
     this._paneToggleButton = this.panelDoc.getElementById("inspector-pane-toggle");
+    this._paneToggleButton.setAttribute("tooltiptext",
+      strings.GetStringFromName("inspector.collapsePane"));
     this._paneToggleButton.addEventListener("mousedown",
       this.onPaneToggleButtonClicked);
+    this._paneToggleButton.addEventListener("keydown",
+      this.onPaneToggleButtonPressed);
   },
 
   /**
    * Reset the inspector on new root mutation.
    */
   onNewRoot: function() {
     this._defaultNode = null;
     this.selection.setNodeFront(null);
@@ -650,16 +655,18 @@ InspectorPanel.prototype = {
     let sidebarDestroyer = this.sidebar.destroy();
     this.sidebar = null;
 
     this.nodemenu.removeEventListener("popupshowing", this._setupNodeMenu, true);
     this.nodemenu.removeEventListener("popuphiding", this._resetNodeMenu, true);
     this.breadcrumbs.destroy();
     this._paneToggleButton.removeEventListener("mousedown",
       this.onPaneToggleButtonClicked);
+    this._paneToggleButton.removeEventListener("keydown",
+      this.onPaneToggleButtonPressed);
     this._paneToggleButton = null;
     this.selection.off("new-node-front", this.onNewSelection);
     this.selection.off("before-new-node", this.onBeforeNewSelection);
     this.selection.off("before-new-node-front", this.onBeforeNewSelection);
     this.selection.off("detached-front", this.onDetached);
     let markupDestroyer = this._destroyMarkup();
     this.panelWin.inspector = null;
     this.target = null;
@@ -1027,16 +1034,22 @@ InspectorPanel.prototype = {
       this._markupFrame = null;
     }
 
     this._markupBox = null;
 
     return destroyPromise;
   },
 
+  onPaneToggleButtonPressed: function(e) {
+    if(e.keyCode === e.DOM_VK_SPACE || e.keyCode === e.DOM_VK_RETURN){
+      this.onPaneToggleButtonClicked();
+    }
+  },
+
   /**
    * When the pane toggle button is clicked, toggle the pane, change the button
    * state and tooltip.
    */
   onPaneToggleButtonClicked: function(e) {
     let sidePane = this.panelDoc.querySelector("#inspector-sidebar");
     let button = this._paneToggleButton;
     let isVisible = !button.hasAttribute("pane-collapsed");
--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -439,17 +439,19 @@ RequestsMenuView.prototype = Heritage.ex
     this.maintainSelectionVisible = true;
 
     this.widget.addEventListener("select", this._onSelect, false);
     this.widget.addEventListener("swap", this._onSwap, false);
     this._splitter.addEventListener("mousemove", this._onResize, false);
     window.addEventListener("resize", this._onResize, false);
 
     this.requestsMenuSortEvent = getKeyWithEvent(this.sortBy.bind(this));
+    this.requestsMenuSortEventPress = getKeyWithEvent(this.sortByPress.bind(this));
     this.requestsMenuFilterEvent = getKeyWithEvent(this.filterOn.bind(this));
+    this.requestsMenuFilterEventPress = getKeyWithEvent(this.filterOnPress.bind(this));
     this.reqeustsMenuClearEvent = this.clear.bind(this);
     this._onContextShowing = this._onContextShowing.bind(this);
     this._onContextNewTabCommand = this.openRequestInTab.bind(this);
     this._onContextCopyUrlCommand = this.copyUrl.bind(this);
     this._onContextCopyImageAsDataUriCommand =
       this.copyImageAsDataUri.bind(this);
     this._onContextCopyResponseCommand = this.copyResponse.bind(this);
     this._onContextResendCommand = this.cloneSelectedRequest.bind(this);
@@ -471,18 +473,22 @@ RequestsMenuView.prototype = Heritage.ex
     this.freetextFilterBox = $("#requests-menu-filter-freetext-text");
     this.freetextFilterBox.addEventListener("input",
       this.requestsFreetextFilterEvent, false);
     this.freetextFilterBox.addEventListener("command",
       this.requestsFreetextFilterEvent, false);
 
     $("#toolbar-labels").addEventListener("click",
       this.requestsMenuSortEvent, false);
+    $("#toolbar-labels").addEventListener("keydown",
+      this.requestsMenuSortEventPress, false);
     $("#requests-menu-filter-buttons").addEventListener("click",
       this.requestsMenuFilterEvent, false);
+    $("#requests-menu-filter-buttons").addEventListener("keydown",
+      this.requestsMenuFilterEventPress, false);
     $("#requests-menu-clear-button").addEventListener("click",
       this.reqeustsMenuClearEvent, false);
     $("#network-request-popup").addEventListener("popupshowing",
       this._onContextShowing, false);
     $("#request-menu-context-newtab").addEventListener("command",
       this._onContextNewTabCommand, false);
     $("#request-menu-context-copy-url").addEventListener("command",
       this._onContextCopyUrlCommand, false);
@@ -546,18 +552,22 @@ RequestsMenuView.prototype = Heritage.ex
 
     this.widget.removeEventListener("select", this._onSelect, false);
     this.widget.removeEventListener("swap", this._onSwap, false);
     this._splitter.removeEventListener("mousemove", this._onResize, false);
     window.removeEventListener("resize", this._onResize, false);
 
     $("#toolbar-labels").removeEventListener("click",
       this.requestsMenuSortEvent, false);
+    $("#toolbar-labels").removeEventListener("keydown",
+      this.requestsMenuSortEventPress, false);
     $("#requests-menu-filter-buttons").removeEventListener("click",
       this.requestsMenuFilterEvent, false);
+    $("#requests-menu-filter-buttons").removeEventListener("keydown",
+      this.requestsMenuFilterEventPress, false);
     $("#requests-menu-clear-button").removeEventListener("click",
       this.reqeustsMenuClearEvent, false);
     this.freetextFilterBox.removeEventListener("input",
       this.requestsFreetextFilterEvent, false);
     this.freetextFilterBox.removeEventListener("command",
       this.requestsFreetextFilterEvent, false);
 
     this.userInputTimer.cancel();
@@ -983,16 +993,22 @@ RequestsMenuView.prototype = Heritage.ex
 
   /**
    * Filters all network requests in this container by a specified type.
    *
    * @param string type
    *        Either "all", "html", "css", "js", "xhr", "fonts", "images", "media"
    *        "flash", "ws" or "other".
    */
+  filterOnPress: function(type, e){
+      if(e.keyCode === e.DOM_VK_SPACE || e.keyCode === e.DOM_VK_RETURN){
+        this.filterOn(type);
+      }
+  },
+
   filterOn: function (type = "all") {
     if (type === "all") {
       // The filter "all" is special as it doesn't toggle.
       // - If some filters are selected and 'all' is clicked, the previously
       //   selected filters will be disabled and 'all' is the only active one.
       // - If 'all' is already selected, do nothing.
       if (this._activeFilters.indexOf("all") !== -1) {
         return;
@@ -1111,16 +1127,22 @@ RequestsMenuView.prototype = Heritage.ex
 
   /**
    * Sorts all network requests in this container by a specified detail.
    *
    * @param string type
    *        Either "status", "method", "file", "domain", "type", "transferred",
    *        "size" or "waterfall".
    */
+  sortByPress: function(type, e){
+      if(e.keyCode === e.DOM_VK_SPACE || e.keyCode === e.DOM_VK_RETURN){
+        this.sortBy(type);
+      }
+  },
+
   sortBy: function (type = "waterfall") {
     let target = $("#requests-menu-" + type + "-button");
     let headers = document.querySelectorAll(".requests-menu-header-button");
 
     for (let header of headers) {
       if (header != target) {
         header.removeAttribute("sorted");
         header.removeAttribute("tooltiptext");
@@ -3877,17 +3899,17 @@ function responseIsFresh({ responseHeade
  *          is present in event.target.
  * @return function
  *          Wrapped function with the target data-key as the first argument.
  */
 function getKeyWithEvent(callback) {
   return function (event) {
     let key = event.target.getAttribute("data-key");
     if (key) {
-      callback.call(null, key);
+      callback.call(null, key, event);
     }
   };
 }
 
 /**
  * Form a data: URI given a mime type, encoding, and some text.
  *
  * @param {String} mimeType the mime type