Backed out changeset ae73cf1c7395 (bug 1561873) for eslint failure at FrameListContent.js on a CLOSED TREE.
authorGurzau Raul <rgurzau@mozilla.com>
Fri, 30 Aug 2019 20:39:32 +0300
changeset 490909 598fa04e395e32634ccffc97bd7de7dae0497bdc
parent 490908 8ebdab6f0a35d12f7c0b8ceae23e59bdebb41bd8
child 490910 0fc21137fd5d4de89890c012d37b340539bc063a
push id94133
push userrgurzau@mozilla.com
push dateFri, 30 Aug 2019 17:40:28 +0000
treeherderautoland@598fa04e395e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1561873
milestone70.0a1
backs outae73cf1c7395dda33313fb7dbb56c8060be6174c
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
Backed out changeset ae73cf1c7395 (bug 1561873) for eslint failure at FrameListContent.js on a CLOSED TREE.
devtools/client/netmonitor/src/actions/web-sockets.js
devtools/client/netmonitor/src/components/websockets/FrameListContent.js
--- a/devtools/client/netmonitor/src/actions/web-sockets.js
+++ b/devtools/client/netmonitor/src/actions/web-sockets.js
@@ -10,19 +10,16 @@ const {
   WS_OPEN_FRAME_DETAILS,
   WS_CLEAR_FRAMES,
   WS_TOGGLE_FRAME_FILTER_TYPE,
   WS_SET_REQUEST_FILTER_TEXT,
   WS_TOGGLE_COLUMN,
   WS_RESET_COLUMNS,
 } = require("../constants");
 
-const { getDisplayedFrames } = require("../selectors/index");
-const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
-
 /**
  * Add frame into state.
  */
 function addFrame(httpChannelId, data, batch) {
   return {
     type: WS_ADD_FRAME,
     httpChannelId,
     data,
@@ -102,50 +99,18 @@ function resetWebSocketsColumns() {
  */
 function toggleWebSocketsColumn(column) {
   return {
     type: WS_TOGGLE_COLUMN,
     column,
   };
 }
 
-/**
- * Move the selection up to down according to the "delta" parameter. Possible values:
- * - Number: positive or negative, move up or down by specified distance
- * - "PAGE_UP" | "PAGE_DOWN" (String): page up or page down
- * - +Infinity | -Infinity: move to the start or end of the list
- */
-function selectFrameDelta(delta) {
-  return (dispatch, getState) => {
-    const state = getState();
-    const frames = getDisplayedFrames(state);
-
-    if (frames.length === 0) {
-      return;
-    }
-
-    const selIndex = frames.findIndex(
-      r => r === state.webSockets.selectedFrame
-    );
-
-    if (delta === "PAGE_DOWN") {
-      delta = Math.ceil(frames.length / PAGE_SIZE_ITEM_COUNT_RATIO);
-    } else if (delta === "PAGE_UP") {
-      delta = -Math.ceil(frames.length / PAGE_SIZE_ITEM_COUNT_RATIO);
-    }
-
-    const newIndex = Math.min(Math.max(0, selIndex + delta), frames.length - 1);
-    const newItem = frames[newIndex];
-    dispatch(selectFrame(newItem));
-  };
-}
-
 module.exports = {
   addFrame,
   selectFrame,
   openFrameDetails,
   clearFrames,
   toggleFrameFilterType,
   setFrameFilterText,
   resetWebSocketsColumns,
   toggleWebSocketsColumn,
-  selectFrameDelta,
 };
--- a/devtools/client/netmonitor/src/components/websockets/FrameListContent.js
+++ b/devtools/client/netmonitor/src/components/websockets/FrameListContent.js
@@ -46,25 +46,23 @@ class FrameListContent extends Component
     return {
       connector: PropTypes.object.isRequired,
       startPanelContainer: PropTypes.object,
       frames: PropTypes.array,
       selectedFrame: PropTypes.object,
       selectFrame: PropTypes.func.isRequired,
       columns: PropTypes.object.isRequired,
       channelId: PropTypes.number,
-      onSelectFrameDelta: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.onContextMenu = this.onContextMenu.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
     this.framesLimit = Services.prefs.getIntPref(
       "devtools.netmonitor.ws.displayed-frames.limit"
     );
     this.currentTruncatedNum = 0;
     this.state = {
       checked: false,
     };
     this.pinnedToBottom = false;
@@ -80,60 +78,30 @@ class FrameListContent extends Component
     if (scrollAnchor) {
       // Always scroll to anchor when FrameListContent component first mounts.
       scrollAnchor.scrollIntoView();
     }
     this.setupScrollToBottom(startPanelContainer, scrollAnchor);
   }
 
   componentDidUpdate(prevProps) {
-    const { startPanelContainer, channelId, frames } = this.props;
+    const { startPanelContainer, channelId } = this.props;
     const scrollAnchor = this.refs.scrollAnchor;
 
     // When frames are cleared, the previous scrollAnchor would be destroyed, so we need to reset this boolean.
     if (!scrollAnchor) {
       this.initIntersectionObserver = false;
     }
 
     // If a new WebSocket connection is selected, scroll to anchor.
     if (channelId !== prevProps.channelId && scrollAnchor) {
       scrollAnchor.scrollIntoView();
     }
 
-    // Do not autoscroll if the selection changed. This would cause
-    // the newly selected frame to jump just after clicking in.
-    // (not user friendly)
-    //
-    // If the selection changed, we need to ensure that the newly
-    // selected frame is properly scrolled into the visible area.
-    if (prevProps.selectedFrame === this.props.selectedFrame) {
-      this.setupScrollToBottom(startPanelContainer, scrollAnchor);
-    } else {
-      const head = document.querySelector("thead.ws-frames-list-headers-group");
-      const selectedRow = document.querySelector(
-        "tr.ws-frame-list-item.selected"
-      );
-
-      if (selectedRow) {
-        const rowRect = selectedRow.getBoundingClientRect();
-        const scrollableRect = startPanelContainer.getBoundingClientRect();
-        const headRect = head.getBoundingClientRect();
-
-        if (rowRect.top <= scrollableRect.top) {
-          selectedRow.scrollIntoView(true);
-
-          // We need to scroll a bit more to get the row out
-          // of the header. The header is sticky and overlaps
-          // part of the scrollable area.
-          startPanelContainer.scrollTop -= headRect.height;
-        } else if (rowRect.bottom > scrollableRect.bottom) {
-          selectedRow.scrollIntoView(false);
-        }
-      }
-    }
+    this.setupScrollToBottom(startPanelContainer, scrollAnchor);
   }
 
   componentWillUnmount() {
     // Reset observables and boolean values.
     const scrollAnchor = this.refs.scrollAnchor;
 
     if (this.intersectionObserver) {
       this.intersectionObserver.unobserve(scrollAnchor);
@@ -186,53 +154,16 @@ class FrameListContent extends Component
     evt.preventDefault();
     const { connector } = this.props;
     this.contextMenu = new FrameListContextMenu({
       connector,
     });
     this.contextMenu.open(evt, item);
   }
 
-  /**
-   * Handler for keyboard events. For arrow up/down, page up/down, home/end,
-   * move the selection up or down.
-   */
-  onKeyDown(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    let delta;
-
-    switch (evt.key) {
-      case "ArrowUp":
-      case "ArrowLeft":
-        delta = -1;
-        break;
-      case "ArrowDown":
-      case "ArrowRight":
-        delta = +1;
-        break;
-      case "PageUp":
-        delta = "PAGE_UP";
-        break;
-      case "PageDown":
-        delta = "PAGE_DOWN";
-        break;
-      case "Home":
-        delta = -Infinity;
-        break;
-      case "End":
-        delta = +Infinity;
-        break;
-    }
-
-    if (delta) {
-      this.props.onSelectFrameDelta(delta);
-    }
-  }
-
   render() {
     const { frames, selectedFrame, connector, columns } = this.props;
 
     if (frames.length === 0) {
       return div(
         { className: "empty-notice ws-frame-list-empty-notice" },
         FRAMES_EMPTY_TEXT
       );
@@ -264,17 +195,16 @@ class FrameListContent extends Component
     return div(
       {},
       table(
         { className: "ws-frames-list-table" },
         FrameListHeader(),
         tbody(
           {
             className: "ws-frames-list-body",
-            onKeyDown: this.onKeyDown,
           },
           tr(
             {
               tabIndex: 0,
             },
             td(
               {
                 className: "truncated-messages-cell",
@@ -342,11 +272,10 @@ class FrameListContent extends Component
 module.exports = connect(
   state => ({
     selectedFrame: getSelectedFrame(state),
     frames: getDisplayedFrames(state),
     columns: state.webSockets.columns,
   }),
   dispatch => ({
     selectFrame: item => dispatch(Actions.selectFrame(item)),
-    onSelectFrameDelta: delta => dispatch(Actions.selectFrameDelta(delta)),
   })
 )(FrameListContent);