зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset ae73cf1c7395 (bug 1561873) for eslint failure at FrameListContent.js on a CLOSED TREE.
This commit is contained in:
Родитель
a0497df342
Коммит
6f5e14995c
|
@ -15,9 +15,6 @@ const {
|
||||||
WS_RESET_COLUMNS,
|
WS_RESET_COLUMNS,
|
||||||
} = require("../constants");
|
} = require("../constants");
|
||||||
|
|
||||||
const { getDisplayedFrames } = require("../selectors/index");
|
|
||||||
const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add frame into state.
|
* Add frame into state.
|
||||||
*/
|
*/
|
||||||
|
@ -107,37 +104,6 @@ function toggleWebSocketsColumn(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 = {
|
module.exports = {
|
||||||
addFrame,
|
addFrame,
|
||||||
selectFrame,
|
selectFrame,
|
||||||
|
@ -147,5 +113,4 @@ module.exports = {
|
||||||
setFrameFilterText,
|
setFrameFilterText,
|
||||||
resetWebSocketsColumns,
|
resetWebSocketsColumns,
|
||||||
toggleWebSocketsColumn,
|
toggleWebSocketsColumn,
|
||||||
selectFrameDelta,
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -51,7 +51,6 @@ class FrameListContent extends Component {
|
||||||
selectFrame: PropTypes.func.isRequired,
|
selectFrame: PropTypes.func.isRequired,
|
||||||
columns: PropTypes.object.isRequired,
|
columns: PropTypes.object.isRequired,
|
||||||
channelId: PropTypes.number,
|
channelId: PropTypes.number,
|
||||||
onSelectFrameDelta: PropTypes.func.isRequired,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -59,7 +58,6 @@ class FrameListContent extends Component {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.onContextMenu = this.onContextMenu.bind(this);
|
this.onContextMenu = this.onContextMenu.bind(this);
|
||||||
this.onKeyDown = this.onKeyDown.bind(this);
|
|
||||||
this.framesLimit = Services.prefs.getIntPref(
|
this.framesLimit = Services.prefs.getIntPref(
|
||||||
"devtools.netmonitor.ws.displayed-frames.limit"
|
"devtools.netmonitor.ws.displayed-frames.limit"
|
||||||
);
|
);
|
||||||
|
@ -85,7 +83,7 @@ class FrameListContent extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
const { startPanelContainer, channelId, frames } = this.props;
|
const { startPanelContainer, channelId } = this.props;
|
||||||
const scrollAnchor = this.refs.scrollAnchor;
|
const scrollAnchor = this.refs.scrollAnchor;
|
||||||
|
|
||||||
// When frames are cleared, the previous scrollAnchor would be destroyed, so we need to reset this boolean.
|
// When frames are cleared, the previous scrollAnchor would be destroyed, so we need to reset this boolean.
|
||||||
|
@ -98,37 +96,7 @@ class FrameListContent extends Component {
|
||||||
scrollAnchor.scrollIntoView();
|
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);
|
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
@ -191,43 +159,6 @@ class FrameListContent extends Component {
|
||||||
this.contextMenu.open(evt, item);
|
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() {
|
render() {
|
||||||
const { frames, selectedFrame, connector, columns } = this.props;
|
const { frames, selectedFrame, connector, columns } = this.props;
|
||||||
|
|
||||||
|
@ -269,7 +200,6 @@ class FrameListContent extends Component {
|
||||||
tbody(
|
tbody(
|
||||||
{
|
{
|
||||||
className: "ws-frames-list-body",
|
className: "ws-frames-list-body",
|
||||||
onKeyDown: this.onKeyDown,
|
|
||||||
},
|
},
|
||||||
tr(
|
tr(
|
||||||
{
|
{
|
||||||
|
@ -347,6 +277,5 @@ module.exports = connect(
|
||||||
}),
|
}),
|
||||||
dispatch => ({
|
dispatch => ({
|
||||||
selectFrame: item => dispatch(Actions.selectFrame(item)),
|
selectFrame: item => dispatch(Actions.selectFrame(item)),
|
||||||
onSelectFrameDelta: delta => dispatch(Actions.selectFrameDelta(delta)),
|
|
||||||
})
|
})
|
||||||
)(FrameListContent);
|
)(FrameListContent);
|
||||||
|
|
Загрузка…
Ссылка в новой задаче