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:
Gabriel Luong 2018-09-07 20:00:30 -04:00
Родитель 74d7f402ee
Коммит 77b3ad5206
5 изменённых файлов: 48 добавлений и 67 удалений

Просмотреть файл

@ -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,