зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1478397
- Part 8: Refactor the flex item shown to prevent it from being hidden on reflow updates. r=rcaliman
- This removes the "shown" property from the flexItem types, and introduces a flexItemShown property in the flexbox state that keeps track of the node actor ID of the flex item that is shown.
This commit is contained in:
Родитель
74d7f402ee
Коммит
77b3ad5206
|
@ -108,21 +108,15 @@ class FlexContainer extends PureComponent {
|
|||
} = this.props;
|
||||
const {
|
||||
flexItems,
|
||||
highlighted,
|
||||
flexItemShown,
|
||||
} = flexbox;
|
||||
|
||||
if (!highlighted || !flexItems.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selectedFlexItem = flexItems.find(item => item.shown);
|
||||
|
||||
if (!selectedFlexItem) {
|
||||
if (!flexItemShown) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return FlexItemSelector({
|
||||
flexItem: selectedFlexItem,
|
||||
flexItem: flexItems.find(item => item.nodeFront.actorID === flexItemShown),
|
||||
flexItems,
|
||||
onToggleFlexItemShown,
|
||||
});
|
||||
|
|
|
@ -45,16 +45,10 @@ class Flexbox extends PureComponent {
|
|||
} = this.props;
|
||||
const {
|
||||
flexItems,
|
||||
highlighted,
|
||||
flexItemShown,
|
||||
} = flexbox;
|
||||
|
||||
if (!highlighted || !flexItems.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selectedFlexItem = flexItems.find(item => item.shown);
|
||||
|
||||
if (selectedFlexItem) {
|
||||
if (flexItemShown) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
@ -68,22 +62,16 @@ class Flexbox extends PureComponent {
|
|||
const { flexbox } = this.props;
|
||||
const {
|
||||
flexItems,
|
||||
highlighted,
|
||||
flexItemShown,
|
||||
} = flexbox;
|
||||
|
||||
if (!highlighted || !flexItems.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selectedFlexItem = flexItems.find(item => item.shown);
|
||||
|
||||
if (!selectedFlexItem) {
|
||||
if (!flexItemShown) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return FlexItemSizingProperties({
|
||||
flexDirection: flexbox.properties["flex-direction"],
|
||||
flexItem: selectedFlexItem,
|
||||
flexItem: flexItems.find(item => item.nodeFront.actorID === flexItemShown),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -176,45 +176,39 @@ class FlexboxInspector {
|
|||
* Handler for the "reflow" event fired by the inspector's reflow tracker. On reflows,
|
||||
* updates the flexbox panel because the shape of the flexbox on the page may have
|
||||
* changed.
|
||||
*
|
||||
* TODO: In the future, we will want to compare the flex item fragment data returned
|
||||
* for rendering the flexbox outline.
|
||||
*/
|
||||
async onReflow() {
|
||||
if (!this.isPanelVisible() || !this.store || !this.inspector.selection.nodeFront) {
|
||||
if (!this.isPanelVisible() ||
|
||||
!this.store ||
|
||||
!this.inspector.selection.nodeFront ||
|
||||
!this.hasGetCurrentFlexbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { flexbox } = this.store.getState();
|
||||
|
||||
let flexboxFront;
|
||||
try {
|
||||
if (!this.hasGetCurrentFlexbox) {
|
||||
const flexboxFront = await this.layoutInspector.getCurrentFlexbox(
|
||||
this.inspector.selection.nodeFront);
|
||||
|
||||
// Clear the flexbox panel if there is no flex container for the current node
|
||||
// selection.
|
||||
if (!flexboxFront) {
|
||||
this.store.dispatch(clearFlexbox());
|
||||
return;
|
||||
}
|
||||
|
||||
flexboxFront = await this.layoutInspector.getCurrentFlexbox(
|
||||
this.inspector.selection.nodeFront);
|
||||
const { flexbox } = this.store.getState();
|
||||
|
||||
// Do nothing because the same flex container is still selected.
|
||||
if (flexbox.actorID == flexboxFront.actorID) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the flexbox panel with the new flexbox front contents.
|
||||
this.update(flexboxFront);
|
||||
} catch (e) {
|
||||
// This call might fail if called asynchrously after the toolbox is finished
|
||||
// closing.
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear the flexbox panel if there is no flex container for the current node
|
||||
// selection.
|
||||
if (!flexboxFront) {
|
||||
this.store.dispatch(clearFlexbox());
|
||||
return;
|
||||
}
|
||||
|
||||
// Do nothing because the same flex container is still selected.
|
||||
if (flexbox.actorID == flexboxFront.actorID) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the flexbox panel with the new flexbox front contents.
|
||||
this.update(flexboxFront);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -354,7 +348,6 @@ class FlexboxInspector {
|
|||
|
||||
flexItems.push({
|
||||
actorID: flexItemFront.actorID,
|
||||
shown: false,
|
||||
flexItemSizing: flexItemFront.flexItemSizing,
|
||||
nodeFront: itemNodeFront,
|
||||
properties: flexItemFront.properties,
|
||||
|
@ -370,10 +363,21 @@ class FlexboxInspector {
|
|||
const customColors = await this.getCustomFlexboxColors();
|
||||
const color = customColors[hostname] ? customColors[hostname] : FLEXBOX_COLOR;
|
||||
|
||||
const { flexbox } = this.store.getState();
|
||||
let { flexItemShown } = flexbox;
|
||||
|
||||
// Check if the flex item shown still exists in the list of flex items, otherwise
|
||||
// set the flex item shown to null.
|
||||
if (flexItemShown &&
|
||||
!flexItemFronts.find(item => item.nodeFront.actorID === flexItemShown)) {
|
||||
flexItemShown = null;
|
||||
}
|
||||
|
||||
this.store.dispatch(updateFlexbox({
|
||||
actorID: flexboxFront.actorID,
|
||||
color,
|
||||
flexItems,
|
||||
flexItemShown,
|
||||
highlighted,
|
||||
nodeFront: containerNodeFront,
|
||||
properties: flexboxFront.properties,
|
||||
|
|
|
@ -19,6 +19,8 @@ const INITIAL_FLEXBOX = {
|
|||
color: "",
|
||||
// An array of flex items belonging to the current flex container.
|
||||
flexItems: [],
|
||||
// The NodeFront actor ID of the flex item to display the flex item sizing properties.
|
||||
flexItemShown: null,
|
||||
// Whether or not the flexbox highlighter is highlighting the flex container.
|
||||
highlighted: false,
|
||||
// The NodeFront of the flex container.
|
||||
|
@ -34,18 +36,11 @@ const reducers = {
|
|||
},
|
||||
|
||||
[TOGGLE_FLEX_ITEM_SHOWN](flexbox, { nodeFront }) {
|
||||
return Object.assign({}, flexbox, {
|
||||
flexItems: flexbox.flexItems.map(flexItem => {
|
||||
if (flexItem.nodeFront !== nodeFront) {
|
||||
return Object.assign({}, flexItem, {
|
||||
shown: false,
|
||||
});
|
||||
}
|
||||
const { flexItems } = flexbox;
|
||||
const flexItemShown = flexItems.find(item => item.nodeFront === nodeFront);
|
||||
|
||||
return Object.assign({}, flexItem, {
|
||||
shown: !flexItem.shown,
|
||||
});
|
||||
})
|
||||
return Object.assign({}, flexbox, {
|
||||
flexItemShown: flexItemShown ? flexItemShown.nodeFront.actorID : null,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
@ -81,9 +81,6 @@ const flexItem = exports.flexItem = {
|
|||
// The computed style properties of the flex item.
|
||||
properties: PropTypes.shape(flexItemProperties),
|
||||
|
||||
// Whether or not the flex item sizing information is shown.
|
||||
shown: PropTypes.bool,
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -122,6 +119,9 @@ exports.flexbox = {
|
|||
// Array of flex container's flex items.
|
||||
flexItems: PropTypes.arrayOf(PropTypes.shape(flexItem)),
|
||||
|
||||
// The NodeFront actor ID of the flex item to display the flex item sizing properties.
|
||||
flexItemShown: PropTypes.string,
|
||||
|
||||
// Whether or not the flexbox highlighter is highlighting the flex container.
|
||||
highlighted: PropTypes.bool,
|
||||
|
||||
|
|
Загрузка…
Ссылка в новой задаче