зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1500936 - Run eslint --fix on devtools/client/inspector for comma-dangle;r=Standard8
Differential Revision: https://phabricator.services.mozilla.com/D9409 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Julian Descottes
Родитель
078990ad01
Коммит
eac312a589
|
|
@ -11,7 +11,7 @@ const {
|
|||
UPDATE_HIGHLIGHTED_NODE,
|
||||
UPDATE_PLAYBACK_RATES,
|
||||
UPDATE_SELECTED_ANIMATION,
|
||||
UPDATE_SIDEBAR_SIZE
|
||||
UPDATE_SIDEBAR_SIZE,
|
||||
} = require("./index");
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -82,5 +82,5 @@ module.exports = {
|
|||
type: UPDATE_SIDEBAR_SIZE,
|
||||
sidebarSize,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const {
|
|||
updateHighlightedNode,
|
||||
updatePlaybackRates,
|
||||
updateSelectedAnimation,
|
||||
updateSidebarSize
|
||||
updateSidebarSize,
|
||||
} = require("./actions/animations");
|
||||
const {
|
||||
hasAnimationIterationCountInfinite,
|
||||
|
|
@ -111,7 +111,7 @@ class AnimationInspector {
|
|||
{
|
||||
id: "animationinspector",
|
||||
key: "animationinspector",
|
||||
store: this.inspector.store
|
||||
store: this.inspector.store,
|
||||
},
|
||||
App(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ class AnimatedPropertyList extends Component {
|
|||
this.setState(
|
||||
{
|
||||
animatedProperties,
|
||||
isStateUpdating: false
|
||||
isStateUpdating: false,
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ class AnimatedPropertyList extends Component {
|
|||
|
||||
return dom.ul(
|
||||
{
|
||||
className: "animated-property-list"
|
||||
className: "animated-property-list",
|
||||
},
|
||||
animatedProperties.map(({ isUnchanged, keyframes, name, type }) => {
|
||||
const state = this.getPropertyState(name);
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ class AnimatedPropertyListContainer extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: `animated-property-list-container ${ animation.state.type }`
|
||||
className: `animated-property-list-container ${ animation.state.type }`,
|
||||
},
|
||||
ProgressInspectionPanel(
|
||||
{
|
||||
|
|
@ -72,7 +72,7 @@ class AnimatedPropertyListContainer extends PureComponent {
|
|||
ticks: [0, 50, 100].map(position => {
|
||||
const label = getFormatStr("detail.propertiesHeader.percentage", position);
|
||||
return { position, label };
|
||||
})
|
||||
}),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ class AnimationDetailContainer extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: "animation-detail-container"
|
||||
className: "animation-detail-container",
|
||||
},
|
||||
animation ?
|
||||
AnimationDetailHeader(
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ class AnimationList extends PureComponent {
|
|||
|
||||
return dom.ul(
|
||||
{
|
||||
className: "animation-list"
|
||||
className: "animation-list",
|
||||
},
|
||||
animations.map(animation =>
|
||||
AnimationItem(
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ class AnimationListContainer extends PureComponent {
|
|||
componentDidUpdate(prevProps) {
|
||||
const {
|
||||
timeScale,
|
||||
sidebarWidth
|
||||
sidebarWidth,
|
||||
} = this.props;
|
||||
|
||||
if (timeScale.getDuration() !== prevProps.timeScale.getDuration() ||
|
||||
|
|
@ -126,7 +126,7 @@ class AnimationListContainer extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: "animation-list-container"
|
||||
className: "animation-list-container",
|
||||
},
|
||||
ProgressInspectionPanel(
|
||||
{
|
||||
|
|
@ -163,7 +163,7 @@ class AnimationListContainer extends PureComponent {
|
|||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
sidebarWidth: state.animations.sidebarSize ? state.animations.sidebarSize.width : 0
|
||||
sidebarWidth: state.animations.sidebarSize ? state.animations.sidebarSize.width : 0,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ class AnimationTarget extends Component {
|
|||
if (!nodeFront) {
|
||||
return dom.div(
|
||||
{
|
||||
className: "animation-target"
|
||||
className: "animation-target",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -154,7 +154,7 @@ class AnimationTarget extends Component {
|
|||
}
|
||||
|
||||
setHighlightedNode(isHighlighted ? null : nodeFront);
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -136,12 +136,12 @@ class App extends Component {
|
|||
}
|
||||
),
|
||||
vert: false,
|
||||
})
|
||||
}),
|
||||
]
|
||||
:
|
||||
NoAnimationPanel(
|
||||
{
|
||||
toggleElementPicker
|
||||
toggleElementPicker,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ class KeyframesProgressBar extends PureComponent {
|
|||
}
|
||||
|
||||
const timing = Object.assign({}, animation.state, {
|
||||
iterations: animation.state.iterationCount || Infinity
|
||||
iterations: animation.state.iterationCount || Infinity,
|
||||
});
|
||||
|
||||
this.simulatedAnimation = simulateAnimationForKeyframesProgressBar(timing);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ class NoAnimationPanel extends Component {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: "animation-error-message devtools-sidepanel-no-result"
|
||||
className: "animation-error-message devtools-sidepanel-no-result",
|
||||
},
|
||||
dom.p(
|
||||
null,
|
||||
|
|
@ -44,7 +44,7 @@ class NoAnimationPanel extends Component {
|
|||
onClick: event => {
|
||||
event.stopPropagation();
|
||||
toggleElementPicker();
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
@ -53,7 +53,7 @@ class NoAnimationPanel extends Component {
|
|||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
elementPickerEnabled: state.animations.elementPickerEnabled
|
||||
elementPickerEnabled: state.animations.elementPickerEnabled,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ class TickLabels extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: "tick-labels"
|
||||
className: "tick-labels",
|
||||
},
|
||||
ticks.map(tick =>
|
||||
dom.div(
|
||||
|
|
@ -31,7 +31,7 @@ class TickLabels extends PureComponent {
|
|||
className: "tick-label",
|
||||
style: {
|
||||
marginInlineStart: `${ tick.position }%`,
|
||||
maxWidth: `${ tick.width }px`
|
||||
maxWidth: `${ tick.width }px`,
|
||||
},
|
||||
},
|
||||
tick.label
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@ class TickLines extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: "tick-lines"
|
||||
className: "tick-lines",
|
||||
},
|
||||
ticks.map(tick =>
|
||||
dom.div(
|
||||
{
|
||||
className: "tick-line",
|
||||
style: { marginInlineStart: `${ tick.position }%` }
|
||||
style: { marginInlineStart: `${ tick.position }%` },
|
||||
}
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ class ComputedTimingPath extends TimingPath {
|
|||
|
||||
const { state } = animation;
|
||||
const effectTiming = Object.assign({}, state, {
|
||||
iterations: state.iterationCount ? state.iterationCount : Infinity
|
||||
iterations: state.iterationCount ? state.iterationCount : Infinity,
|
||||
});
|
||||
|
||||
// Create new keyframes for opacity as computed style.
|
||||
|
|
@ -50,7 +50,7 @@ class ComputedTimingPath extends TimingPath {
|
|||
return {
|
||||
opacity: keyframe.offset,
|
||||
offset: keyframe.offset,
|
||||
easing: keyframe.easing
|
||||
easing: keyframe.easing,
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ class ComputedTimingPath extends TimingPath {
|
|||
{
|
||||
className: "animation-computed-timing-path",
|
||||
style: { opacity },
|
||||
transform: `translate(${ offset })`
|
||||
transform: `translate(${ offset })`,
|
||||
},
|
||||
super.renderGraph(state, helper)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ class EffectTimingPath extends TimingPath {
|
|||
|
||||
const { state } = animation;
|
||||
const effectTiming = Object.assign({}, state, {
|
||||
iterations: state.iterationCount ? state.iterationCount : Infinity
|
||||
iterations: state.iterationCount ? state.iterationCount : Infinity,
|
||||
});
|
||||
|
||||
const simulatedAnimation = simulateAnimation(null, effectTiming, false);
|
||||
|
|
@ -64,7 +64,7 @@ class EffectTimingPath extends TimingPath {
|
|||
return dom.g(
|
||||
{
|
||||
className: "animation-effect-timing-path",
|
||||
transform: `translate(${ offset })`
|
||||
transform: `translate(${ offset })`,
|
||||
},
|
||||
super.renderGraph(state, helper)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ class NegativePath extends PureComponent {
|
|||
const { state } = animation;
|
||||
const effectTiming = Object.assign({}, state, {
|
||||
fill: "both",
|
||||
iterations: state.iterationCount ? state.iterationCount : Infinity
|
||||
iterations: state.iterationCount ? state.iterationCount : Infinity,
|
||||
});
|
||||
|
||||
// Create new keyframes for opacity as computed style.
|
||||
|
|
@ -50,7 +50,7 @@ class NegativePath extends PureComponent {
|
|||
return {
|
||||
opacity: keyframe.offset,
|
||||
offset: keyframe.offset,
|
||||
easing: keyframe.easing
|
||||
easing: keyframe.easing,
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ class NegativePath extends PureComponent {
|
|||
return dom.g(
|
||||
{
|
||||
className: this.getClassName(),
|
||||
transform: `translate(${ offset })`
|
||||
transform: `translate(${ offset })`,
|
||||
},
|
||||
this.renderGraph(state, helper)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@ class SummaryGraphPath extends Component {
|
|||
{
|
||||
durationPerPixel,
|
||||
isStateUpdating: false,
|
||||
keyframesList
|
||||
keyframesList,
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ class ColorPath extends ComputedStylePath {
|
|||
|
||||
const g = dom.g(
|
||||
{
|
||||
className: "hint"
|
||||
className: "hint",
|
||||
},
|
||||
dom.title({}, startKeyframe.easing),
|
||||
dom.rect(
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ class ComputedStylePath extends PureComponent {
|
|||
|
||||
const g = dom.g(
|
||||
{
|
||||
className: "hint"
|
||||
className: "hint",
|
||||
},
|
||||
dom.title({}, startKeyframe.easing),
|
||||
dom.path(
|
||||
|
|
@ -163,7 +163,7 @@ class ComputedStylePath extends PureComponent {
|
|||
toPathString(hintSegments),
|
||||
style: {
|
||||
"stroke-width": easingHintStrokeWidth,
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
@ -198,7 +198,7 @@ class ComputedStylePath extends PureComponent {
|
|||
|
||||
return [
|
||||
this.renderPathSegments(segments),
|
||||
this.renderEasingHint(segments)
|
||||
this.renderEasingHint(segments),
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ class KeyframeMarkerList extends PureComponent {
|
|||
|
||||
return dom.ul(
|
||||
{
|
||||
className: "keyframe-marker-list"
|
||||
className: "keyframe-marker-list",
|
||||
},
|
||||
keyframes.map(keyframe => KeyframeMarkerItem({ keyframe }))
|
||||
);
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ class KeyframesGraph extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: `keyframes-graph ${ name }`
|
||||
className: `keyframes-graph ${ name }`,
|
||||
},
|
||||
KeyframesGraphPath(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -64,13 +64,13 @@ const reducers = {
|
|||
|
||||
[UPDATE_ELEMENT_PICKER_ENABLED](state, { elementPickerEnabled }) {
|
||||
return Object.assign({}, state, {
|
||||
elementPickerEnabled
|
||||
elementPickerEnabled,
|
||||
});
|
||||
},
|
||||
|
||||
[UPDATE_HIGHLIGHTED_NODE](state, { highlightedNode }) {
|
||||
return Object.assign({}, state, {
|
||||
highlightedNode
|
||||
highlightedNode,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -85,13 +85,13 @@ const reducers = {
|
|||
|
||||
return Object.assign({}, state, {
|
||||
detailVisibility,
|
||||
selectedAnimation
|
||||
selectedAnimation,
|
||||
});
|
||||
},
|
||||
|
||||
[UPDATE_SIDEBAR_SIZE](state, { sidebarSize }) {
|
||||
return Object.assign({}, state, {
|
||||
sidebarSize
|
||||
sidebarSize,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const TEST_DATA = [
|
|||
expectedStopColors: [
|
||||
{ offset: 0, color: "rgb(255, 0, 0)" },
|
||||
{ offset: 1, color: "rgb(0, 255, 0)" },
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "background-repeat",
|
||||
|
|
@ -97,7 +97,7 @@ const TEST_DATA = [
|
|||
expectedStopColors: [
|
||||
{ offset: 0, color: "rgb(0, 255, 0)" },
|
||||
{ offset: 1, color: "rgb(255, 0, 0)" },
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "background-repeat",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const TEST_DATA = [
|
|||
{ offset: 0, color: "rgb(255, 0, 0)" },
|
||||
{ offset: 0.5, color: "rgb(0, 0, 255)" },
|
||||
{ offset: 1, color: "rgb(0, 255, 0)" },
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "background-repeat",
|
||||
|
|
@ -115,7 +115,7 @@ const TEST_DATA = [
|
|||
{ offset: 0.5, color: "rgb(128, 128, 0)" },
|
||||
{ offset: 0.999, color: "rgb(128, 128, 0)" },
|
||||
{ offset: 1, color: "rgb(0, 255, 0)" },
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "background-repeat",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 96.05 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -34,7 +34,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 75 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -51,7 +51,7 @@ const TEST_DATA = [
|
|||
{ x: 1250000, y: 75 },
|
||||
{ x: 1500000, y: 100 },
|
||||
{ x: 1500000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -63,7 +63,7 @@ const TEST_DATA = [
|
|||
{ x: 250000, y: 75 },
|
||||
{ x: 500000, y: 100 },
|
||||
{ x: 500000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -75,7 +75,7 @@ const TEST_DATA = [
|
|||
{ x: 500000, y: 50 },
|
||||
{ x: 999999, y: 50 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -88,7 +88,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 75 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
expectedEndDelayPath: [
|
||||
{ x: 1000000, y: 0 },
|
||||
|
|
@ -103,7 +103,7 @@ const TEST_DATA = [
|
|||
{ x: 250000, y: 25 },
|
||||
{ x: 500000, y: 50 },
|
||||
{ x: 500000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -116,7 +116,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 75 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
expectedEndDelayPath: [
|
||||
{ x: 1000000, y: 0 },
|
||||
|
|
@ -149,7 +149,7 @@ const TEST_DATA = [
|
|||
{ x: 1750000, y: 75 },
|
||||
{ x: 2000000, y: 100 },
|
||||
{ x: 2000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
isInfinity: true,
|
||||
},
|
||||
|
|
@ -171,7 +171,7 @@ const TEST_DATA = [
|
|||
{ x: 1500000, y: 50 },
|
||||
{ x: 1750000, y: 25 },
|
||||
{ x: 2000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
isInfinity: true,
|
||||
},
|
||||
|
|
@ -193,7 +193,7 @@ const TEST_DATA = [
|
|||
{ x: 1750000, y: 75 },
|
||||
{ x: 2000000, y: 100 },
|
||||
{ x: 2000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
isInfinity: true,
|
||||
},
|
||||
|
|
@ -215,7 +215,7 @@ const TEST_DATA = [
|
|||
{ x: 1500000, y: 50 },
|
||||
{ x: 1750000, y: 25 },
|
||||
{ x: 2000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
isInfinity: true,
|
||||
},
|
||||
|
|
@ -229,7 +229,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 75 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -252,7 +252,7 @@ const TEST_DATA = [
|
|||
{ x: 1250000, y: 25 },
|
||||
{ x: 1500000, y: 50 },
|
||||
{ x: 1500000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -265,7 +265,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 75 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
expectedForwardsPath: [
|
||||
{ x: 1000000, y: 0 },
|
||||
|
|
@ -294,7 +294,7 @@ const TEST_DATA = [
|
|||
{ x: 1250000, y: 25 },
|
||||
{ x: 1500000, y: 50 },
|
||||
{ x: 1500000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
expectedForwardsPath: [
|
||||
{ x: 1500000, y: 0 },
|
||||
|
|
@ -311,7 +311,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 75 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
expectedForwardsPath: [
|
||||
{ x: 1000000, y: 0 },
|
||||
|
|
@ -334,7 +334,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 25 },
|
||||
{ x: 1000000, y: 50 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -347,7 +347,7 @@ const TEST_DATA = [
|
|||
{ x: 750000, y: 75 },
|
||||
{ x: 1000000, y: 100 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -359,7 +359,7 @@ const TEST_DATA = [
|
|||
{ x: 500000, y: 50 },
|
||||
{ x: 999999, y: 50 },
|
||||
{ x: 1000000, y: 0 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -373,7 +373,7 @@ const TEST_DATA = [
|
|||
{ x: 129999, y: 10 },
|
||||
{ x: 130000, y: 13 },
|
||||
{ x: 135000, y: 13.5 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -384,7 +384,7 @@ const TEST_DATA = [
|
|||
{ x: 250000, y: 25 },
|
||||
{ x: 500000, y: 50 },
|
||||
{ x: 999999, y: 50 },
|
||||
]
|
||||
],
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const TEST_DATA = [
|
|||
{ x: 0, y: 100 },
|
||||
{ x: 50000, y: 50 },
|
||||
{ x: 100000, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
],
|
||||
expectedTooltip: "Playback rate: -1",
|
||||
|
|
@ -34,7 +34,7 @@ const TEST_DATA = [
|
|||
{ x: 0, y: 100 },
|
||||
{ x: 50000, y: 50 },
|
||||
{ x: 100000, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
],
|
||||
expectedTooltip: "Playback rate: -2",
|
||||
|
|
@ -49,7 +49,7 @@ const TEST_DATA = [
|
|||
marginInlineStart: "75%",
|
||||
width: "25%",
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
expectedPathList: [
|
||||
{
|
||||
|
|
@ -58,7 +58,7 @@ const TEST_DATA = [
|
|||
{ x: 0, y: 100 },
|
||||
{ x: 50000, y: 50 },
|
||||
{ x: 100000, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
],
|
||||
expectedTooltip: "Playback rate: -1",
|
||||
|
|
@ -72,7 +72,7 @@ const TEST_DATA = [
|
|||
marginInlineStart: "50%",
|
||||
width: "25%",
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
expectedPathList: [
|
||||
{
|
||||
|
|
@ -81,14 +81,14 @@ const TEST_DATA = [
|
|||
{ x: 0, y: 100 },
|
||||
{ x: 50000, y: 50 },
|
||||
{ x: 50000, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: ".animation-negative-delay-path path",
|
||||
path: [
|
||||
{ x: 50000, y: 50 },
|
||||
{ x: 100000, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
],
|
||||
expectedTooltip: "Playback rate: -1",
|
||||
|
|
@ -103,7 +103,7 @@ const TEST_DATA = [
|
|||
marginInlineStart: "25%",
|
||||
width: "25%",
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
expectedPathList: [
|
||||
{
|
||||
|
|
@ -112,7 +112,7 @@ const TEST_DATA = [
|
|||
{ x: 50000, y: 100 },
|
||||
{ x: 100000, y: 50 },
|
||||
{ x: 150000, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
],
|
||||
expectedTooltip: "Playback rate: -1",
|
||||
|
|
@ -127,7 +127,7 @@ const TEST_DATA = [
|
|||
marginInlineStart: "0%",
|
||||
width: "25%",
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
expectedPathList: [
|
||||
{
|
||||
|
|
@ -135,14 +135,14 @@ const TEST_DATA = [
|
|||
path: [
|
||||
{ x: 0, y: 50 },
|
||||
{ x: 50000, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: ".animation-negative-end-delay-path path",
|
||||
path: [
|
||||
{ x: -50000, y: 100 },
|
||||
{ x: 0, y: 0 },
|
||||
]
|
||||
],
|
||||
},
|
||||
],
|
||||
expectedTooltip: "Playback rate: -1",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
const effect = {
|
||||
duration: 100000,
|
||||
fill: "forwards"
|
||||
fill: "forwards",
|
||||
};
|
||||
|
||||
if (effectEasing) {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
createAnimation(
|
||||
"keyframe-easing",
|
||||
[
|
||||
{ opacity: 1, easing: "steps(2)", },
|
||||
{ opacity: 1, easing: "steps(2)" },
|
||||
{ opacity: 0 },
|
||||
]
|
||||
);
|
||||
|
|
@ -58,8 +58,8 @@
|
|||
createAnimation(
|
||||
"both-easing",
|
||||
[
|
||||
{ offset: 0, opacity: 1, easing: "steps(2)", },
|
||||
{ offset: 0, marginLeft: "0px", easing: "steps(1)", },
|
||||
{ offset: 0, opacity: 1, easing: "steps(2)" },
|
||||
{ offset: 0, marginLeft: "0px", easing: "steps(1)" },
|
||||
{ marginLeft: "100px", opacity: 0 },
|
||||
],
|
||||
"steps(10)"
|
||||
|
|
@ -68,9 +68,9 @@
|
|||
createAnimation(
|
||||
"narrow-keyframes",
|
||||
[
|
||||
{ opacity: 0, },
|
||||
{ offset: 0.1, opacity: 1, easing: "steps(1)", },
|
||||
{ offset: 0.13, opacity: 0, },
|
||||
{ opacity: 0 },
|
||||
{ offset: 0.1, opacity: 1, easing: "steps(1)" },
|
||||
{ offset: 0.13, opacity: 0 },
|
||||
]
|
||||
);
|
||||
|
||||
|
|
@ -78,18 +78,18 @@
|
|||
"duplicate-keyframes",
|
||||
[
|
||||
{ opacity: 0 },
|
||||
{ offset: 0.5, opacity: 1, },
|
||||
{ offset: 0.5, opacity: 0, easing: "steps(1)", },
|
||||
{ opacity: 1, },
|
||||
{ offset: 0.5, opacity: 1 },
|
||||
{ offset: 0.5, opacity: 0, easing: "steps(1)" },
|
||||
{ opacity: 1 },
|
||||
]
|
||||
);
|
||||
|
||||
createAnimation(
|
||||
"color-keyframes",
|
||||
[
|
||||
{ color: "red", easing: "ease-in", },
|
||||
{ offset: 0.4, color: "blue", easing: "ease-out", },
|
||||
{ color: "lime", },
|
||||
{ color: "red", easing: "ease-in" },
|
||||
{ offset: 0.4, color: "blue", easing: "ease-out" },
|
||||
{ color: "lime" },
|
||||
]
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
const effect = {
|
||||
duration: 100000,
|
||||
fill: "forwards"
|
||||
fill: "forwards",
|
||||
};
|
||||
|
||||
if (effectEasing) {
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
marginLeft: "0px",
|
||||
opacity: 0,
|
||||
textAlign: "right",
|
||||
transform: "translate(0px)"
|
||||
transform: "translate(0px)",
|
||||
},
|
||||
{
|
||||
backgroundColor: "lime",
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
marginLeft: "100px",
|
||||
opacity: 1,
|
||||
textAlign: "center",
|
||||
transform: "translate(100px)"
|
||||
transform: "translate(100px)",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
marginLeft: "100px",
|
||||
opacity: 1,
|
||||
textAlign: "center",
|
||||
transform: "translate(100px)"
|
||||
transform: "translate(100px)",
|
||||
},
|
||||
{
|
||||
backgroundColor: "red",
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
marginLeft: "0px",
|
||||
opacity: 0,
|
||||
textAlign: "right",
|
||||
transform: "translate(0px)"
|
||||
transform: "translate(0px)",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
marginLeft: "0px",
|
||||
opacity: 0,
|
||||
textAlign: "right",
|
||||
transform: "translate(0px)"
|
||||
transform: "translate(0px)",
|
||||
},
|
||||
{
|
||||
backgroundColor: "blue",
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
marginLeft: "100px",
|
||||
opacity: 1,
|
||||
textAlign: "center",
|
||||
transform: "translate(100px)"
|
||||
transform: "translate(100px)",
|
||||
},
|
||||
{
|
||||
backgroundColor: "lime",
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
marginLeft: "0px",
|
||||
opacity: 0,
|
||||
textAlign: "right",
|
||||
transform: "translate(0px)"
|
||||
transform: "translate(0px)",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
opacity: 0,
|
||||
textAlign: "right",
|
||||
transform: "translate(0px)",
|
||||
easing: "steps(2)"
|
||||
easing: "steps(2)",
|
||||
},
|
||||
{
|
||||
backgroundColor: "lime",
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
marginLeft: "100px",
|
||||
opacity: 1,
|
||||
textAlign: "center",
|
||||
transform: "translate(100px)"
|
||||
transform: "translate(100px)",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
|
@ -140,10 +140,10 @@
|
|||
"steps-effect",
|
||||
[
|
||||
{
|
||||
opacity: 0
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
"steps(2)"
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
opacity: 0,
|
||||
},
|
||||
{
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
},
|
||||
]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -124,12 +124,12 @@
|
|||
{
|
||||
opacity: 1,
|
||||
offset: 0.1,
|
||||
easing: "steps(1)"
|
||||
easing: "steps(1)",
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
offset: 0.13,
|
||||
}
|
||||
},
|
||||
],
|
||||
{},
|
||||
"narrow-keyframes");
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
{
|
||||
offset: 1,
|
||||
opacity: 1,
|
||||
}
|
||||
},
|
||||
],
|
||||
{},
|
||||
"duplicate-offsets");
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
const target = document.getElementById("target");
|
||||
target.animate(
|
||||
{
|
||||
color: ["red", "lime"]
|
||||
color: ["red", "lime"],
|
||||
},
|
||||
{
|
||||
id: "big-delay",
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
target.animate(
|
||||
{
|
||||
opacity: [1, 0]
|
||||
opacity: [1, 0],
|
||||
},
|
||||
{
|
||||
id: "big-end-delay",
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
target.animate(
|
||||
{
|
||||
marginLeft: ["0px", "100px"]
|
||||
marginLeft: ["0px", "100px"],
|
||||
},
|
||||
{
|
||||
id: "negative-big-delay",
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
target.animate(
|
||||
{
|
||||
paddingLeft: ["0px", "100px"]
|
||||
paddingLeft: ["0px", "100px"],
|
||||
},
|
||||
{
|
||||
id: "negative-big-end-delay",
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
target.animate(
|
||||
{
|
||||
backgroundColor: ["lime", "white"]
|
||||
backgroundColor: ["lime", "white"],
|
||||
},
|
||||
{
|
||||
id: "big-iteration-start",
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@
|
|||
const el = document.querySelector(".end-delay");
|
||||
const effect = new KeyframeEffect(el, [
|
||||
{ opacity: 0, offset: 0 },
|
||||
{ opacity: 1, offset: 1 }
|
||||
{ opacity: 1, offset: 1 },
|
||||
], { duration: 1000000, endDelay: 500000, fill: "none" });
|
||||
const animation = new Animation(effect, document.timeline);
|
||||
animation.play();
|
||||
|
|
|
|||
|
|
@ -571,7 +571,7 @@ function _afterDispatchDone(store, type) {
|
|||
},
|
||||
run: (dispatch, getState, action) => {
|
||||
resolve(action);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const KEYFRAMES_TEST_DATA = [
|
|||
{
|
||||
title: "rgb(0, 255, 0)",
|
||||
marginInlineStart: "100%",
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -37,7 +37,7 @@ const KEYFRAMES_TEST_DATA = [
|
|||
{
|
||||
title: "round space",
|
||||
marginInlineStart: "100%",
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -50,7 +50,7 @@ const KEYFRAMES_TEST_DATA = [
|
|||
{
|
||||
title: "20px",
|
||||
marginInlineStart: "100%",
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -63,7 +63,7 @@ const KEYFRAMES_TEST_DATA = [
|
|||
{
|
||||
title: "100px",
|
||||
marginInlineStart: "100%",
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -76,7 +76,7 @@ const KEYFRAMES_TEST_DATA = [
|
|||
{
|
||||
title: "1",
|
||||
marginInlineStart: "100%",
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -89,7 +89,7 @@ const KEYFRAMES_TEST_DATA = [
|
|||
{
|
||||
title: "center",
|
||||
marginInlineStart: "100%",
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -102,7 +102,7 @@ const KEYFRAMES_TEST_DATA = [
|
|||
{
|
||||
title: "translate(100px)",
|
||||
marginInlineStart: "100%",
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -43,6 +43,6 @@ module.exports = {
|
|||
type: UPDATE_OFFSET_PARENT,
|
||||
offsetParent,
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ BoxModel.prototype = {
|
|||
|
||||
const styleEntries = await this.inspector.pageStyle.getApplied(node, {
|
||||
// We don't need styles applied to pseudo elements of the current node.
|
||||
skipPseudo: true
|
||||
skipPseudo: true,
|
||||
});
|
||||
this.elementRules = styleEntries.map(e => e.rule);
|
||||
|
||||
|
|
@ -284,7 +284,7 @@ BoxModel.prototype = {
|
|||
initial: initialValue,
|
||||
contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
|
||||
property: {
|
||||
name: property
|
||||
name: property,
|
||||
},
|
||||
start: self => {
|
||||
self.elt.parentNode.classList.add("boxmodel-editing");
|
||||
|
|
@ -295,7 +295,7 @@ BoxModel.prototype = {
|
|||
}
|
||||
|
||||
const properties = [
|
||||
{ name: property, value: value }
|
||||
{ name: property, value: value },
|
||||
];
|
||||
|
||||
if (property.substring(0, 7) == "border-") {
|
||||
|
|
|
|||
|
|
@ -61,36 +61,36 @@ class BoxModelMain extends PureComponent {
|
|||
[KeyCodes.DOM_VK_DOWN, this.marginLayout],
|
||||
[KeyCodes.DOM_VK_RETURN, this.positionEditable],
|
||||
[KeyCodes.DOM_VK_UP, null],
|
||||
["click", this.positionLayout]
|
||||
["click", this.positionLayout],
|
||||
]),
|
||||
"margin": new Map([
|
||||
[KeyCodes.DOM_VK_ESCAPE, this.marginLayout],
|
||||
[KeyCodes.DOM_VK_DOWN, this.borderLayout],
|
||||
[KeyCodes.DOM_VK_RETURN, this.marginEditable],
|
||||
[KeyCodes.DOM_VK_UP, displayPosition ? this.positionLayout : null],
|
||||
["click", this.marginLayout]
|
||||
["click", this.marginLayout],
|
||||
]),
|
||||
"border": new Map([
|
||||
[KeyCodes.DOM_VK_ESCAPE, this.borderLayout],
|
||||
[KeyCodes.DOM_VK_DOWN, this.paddingLayout],
|
||||
[KeyCodes.DOM_VK_RETURN, this.borderEditable],
|
||||
[KeyCodes.DOM_VK_UP, this.marginLayout],
|
||||
["click", this.borderLayout]
|
||||
["click", this.borderLayout],
|
||||
]),
|
||||
"padding": new Map([
|
||||
[KeyCodes.DOM_VK_ESCAPE, this.paddingLayout],
|
||||
[KeyCodes.DOM_VK_DOWN, isContentBox ? this.contentLayout : null],
|
||||
[KeyCodes.DOM_VK_RETURN, this.paddingEditable],
|
||||
[KeyCodes.DOM_VK_UP, this.borderLayout],
|
||||
["click", this.paddingLayout]
|
||||
["click", this.paddingLayout],
|
||||
]),
|
||||
"content": new Map([
|
||||
[KeyCodes.DOM_VK_ESCAPE, this.contentLayout],
|
||||
[KeyCodes.DOM_VK_DOWN, null],
|
||||
[KeyCodes.DOM_VK_RETURN, this.contentEditable],
|
||||
[KeyCodes.DOM_VK_UP, this.paddingLayout],
|
||||
["click", this.contentLayout]
|
||||
])
|
||||
["click", this.contentLayout],
|
||||
]),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -215,7 +215,7 @@ class BoxModelMain extends PureComponent {
|
|||
*/
|
||||
moveFocus({ target, shiftKey }, level) {
|
||||
const editBoxes = [
|
||||
...this.positionLayout.querySelectorAll(`[data-box="${level}"].boxmodel-editable`)
|
||||
...this.positionLayout.querySelectorAll(`[data-box="${level}"].boxmodel-editable`),
|
||||
];
|
||||
const editingMode = target.tagName === "input";
|
||||
// target.nextSibling is input field
|
||||
|
|
@ -425,7 +425,7 @@ class BoxModelMain extends PureComponent {
|
|||
this.contentEditable = editable;
|
||||
},
|
||||
textContent: width,
|
||||
onShowBoxModelEditor
|
||||
onShowBoxModelEditor,
|
||||
}),
|
||||
dom.span({}, "\u00D7"),
|
||||
BoxModelEditable({
|
||||
|
|
@ -434,7 +434,7 @@ class BoxModelMain extends PureComponent {
|
|||
level,
|
||||
property: "height",
|
||||
textContent: height,
|
||||
onShowBoxModelEditor
|
||||
onShowBoxModelEditor,
|
||||
})
|
||||
)
|
||||
:
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ class BoxModelProperties extends PureComponent {
|
|||
this.props.boxModel.offsetParent) {
|
||||
return {
|
||||
referenceElement: this.props.boxModel.offsetParent,
|
||||
referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent")
|
||||
referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent"),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const {
|
|||
const INITIAL_BOX_MODEL = {
|
||||
geometryEditorEnabled: false,
|
||||
layout: {},
|
||||
offsetParent: null
|
||||
offsetParent: null,
|
||||
};
|
||||
|
||||
const reducers = {
|
||||
|
|
|
|||
|
|
@ -11,142 +11,142 @@
|
|||
var res1 = [
|
||||
{
|
||||
selector: ".boxmodel-element-size",
|
||||
value: "160" + "\u00D7" + "160.117"
|
||||
value: "160" + "\u00D7" + "160.117",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-size > .boxmodel-width",
|
||||
value: "100"
|
||||
value: "100",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-size > .boxmodel-height",
|
||||
value: "100.117"
|
||||
value: "100.117",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-top > span",
|
||||
value: 42
|
||||
value: 42,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-left > span",
|
||||
value: 42
|
||||
value: 42,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
value: 30
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
value: "auto"
|
||||
value: "auto",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
value: 30
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
value: "auto"
|
||||
value: "auto",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
value: 20
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
value: 20
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
value: 20
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
value: 20
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
];
|
||||
|
||||
var res2 = [
|
||||
{
|
||||
selector: ".boxmodel-element-size",
|
||||
value: "190" + "\u00D7" + "210"
|
||||
value: "190" + "\u00D7" + "210",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-size > .boxmodel-width",
|
||||
value: "100"
|
||||
value: "100",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-size > .boxmodel-height",
|
||||
value: "150"
|
||||
value: "150",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-top > span",
|
||||
value: 50
|
||||
value: 50,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-left > span",
|
||||
value: 42
|
||||
value: 42,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
value: 30
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
value: "auto"
|
||||
value: "auto",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
value: 30
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
value: "auto"
|
||||
value: "auto",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
value: 20
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
value: 20
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
value: 20
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
value: 50
|
||||
value: 50,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -21,37 +21,37 @@ const OFFSET_PARENT_SELECTOR = ".computed-property-value-container .objectBox-no
|
|||
const res1 = [
|
||||
{
|
||||
selector: "#absolute_child",
|
||||
offsetParentValue: "div#relative_parent"
|
||||
offsetParentValue: "div#relative_parent",
|
||||
},
|
||||
{
|
||||
selector: "#no_parent",
|
||||
offsetParentValue: "body"
|
||||
offsetParentValue: "body",
|
||||
},
|
||||
{
|
||||
selector: "#relative_parent",
|
||||
offsetParentValue: "body"
|
||||
offsetParentValue: "body",
|
||||
},
|
||||
{
|
||||
selector: "#static",
|
||||
offsetParentValue: null
|
||||
offsetParentValue: null,
|
||||
},
|
||||
{
|
||||
selector: "#fixed",
|
||||
offsetParentValue: null
|
||||
offsetParentValue: null,
|
||||
},
|
||||
];
|
||||
|
||||
const updates = [
|
||||
{
|
||||
selector: "#absolute_child",
|
||||
update: "position: static"
|
||||
update: "position: static",
|
||||
},
|
||||
];
|
||||
|
||||
const res2 = [
|
||||
{
|
||||
selector: "#absolute_child",
|
||||
offsetParentValue: null
|
||||
offsetParentValue: null,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -26,19 +26,19 @@ const TEST_URI = `
|
|||
const res1 = [
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-top > span",
|
||||
value: "auto"
|
||||
value: "auto",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-right > span",
|
||||
value: "auto"
|
||||
value: "auto",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-bottom > span",
|
||||
value: "auto"
|
||||
value: "auto",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-position.boxmodel-left > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -28,54 +28,54 @@ const TEST_URI = `
|
|||
const res1 = [
|
||||
{
|
||||
property: "box-sizing",
|
||||
value: "border-box"
|
||||
value: "border-box",
|
||||
},
|
||||
{
|
||||
property: "display",
|
||||
value: "block"
|
||||
value: "block",
|
||||
},
|
||||
{
|
||||
property: "float",
|
||||
value: "left"
|
||||
value: "left",
|
||||
},
|
||||
{
|
||||
property: "line-height",
|
||||
value: "20px"
|
||||
value: "20px",
|
||||
},
|
||||
{
|
||||
property: "position",
|
||||
value: "relative"
|
||||
value: "relative",
|
||||
},
|
||||
{
|
||||
property: "z-index",
|
||||
value: 2
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const res2 = [
|
||||
{
|
||||
property: "box-sizing",
|
||||
value: "content-box"
|
||||
value: "content-box",
|
||||
},
|
||||
{
|
||||
property: "display",
|
||||
value: "block"
|
||||
value: "block",
|
||||
},
|
||||
{
|
||||
property: "float",
|
||||
value: "right"
|
||||
value: "right",
|
||||
},
|
||||
{
|
||||
property: "line-height",
|
||||
value: "10px"
|
||||
value: "10px",
|
||||
},
|
||||
{
|
||||
property: "position",
|
||||
value: "static"
|
||||
value: "static",
|
||||
},
|
||||
{
|
||||
property: "z-index",
|
||||
value: 5
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -37,63 +37,63 @@ const TEST_URI = `
|
|||
const res1 = [
|
||||
{
|
||||
selector: ".boxmodel-element-size",
|
||||
value: "32" + "\u00D7" + "32"
|
||||
value: "32" + "\u00D7" + "32",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-size > .boxmodel-width",
|
||||
value: "32"
|
||||
value: "32",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-size > .boxmodel-height",
|
||||
value: "32"
|
||||
value: "32",
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
value: 4 // (100 - (10 * 2) - (20 * 2) - 32) / 2
|
||||
value: 4, // (100 - (10 * 2) - (20 * 2) - 32) / 2
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
value: 6
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
value: 4 // (100 - (10 * 2) - (20 * 2) - 32) / 2
|
||||
value: 4, // (100 - (10 * 2) - (20 * 2) - 32) / 2
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
value: 0
|
||||
value: 0,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const TEST_URI = encodeURIComponent([
|
|||
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
|
||||
"margin: 30px auto; }",
|
||||
"</style>",
|
||||
"<div></div>"
|
||||
"<div></div>",
|
||||
].join(""));
|
||||
const LONG_TEXT_ROTATE_LIMIT = 3;
|
||||
|
||||
|
|
|
|||
|
|
@ -28,46 +28,46 @@ const VALUES_TEST_DATA = [{
|
|||
values: [{
|
||||
name: "margin-top",
|
||||
ruleSelector: "#div1",
|
||||
styleSheetLocation: "inline:1"
|
||||
styleSheetLocation: "inline:1",
|
||||
}, {
|
||||
name: "margin-right",
|
||||
ruleSelector: "#div1",
|
||||
styleSheetLocation: "inline:1"
|
||||
styleSheetLocation: "inline:1",
|
||||
}, {
|
||||
name: "margin-bottom",
|
||||
ruleSelector: "#div1",
|
||||
styleSheetLocation: "inline:1"
|
||||
styleSheetLocation: "inline:1",
|
||||
}, {
|
||||
name: "margin-left",
|
||||
ruleSelector: "#div1",
|
||||
styleSheetLocation: "inline:1"
|
||||
}]
|
||||
styleSheetLocation: "inline:1",
|
||||
}],
|
||||
}, {
|
||||
selector: "#div2",
|
||||
values: [{
|
||||
name: "border-bottom-width",
|
||||
ruleSelector: "#div2",
|
||||
styleSheetLocation: "inline:2"
|
||||
}]
|
||||
styleSheetLocation: "inline:2",
|
||||
}],
|
||||
}, {
|
||||
selector: "#div3",
|
||||
values: [{
|
||||
name: "padding-top",
|
||||
ruleSelector: "html, body, #div3",
|
||||
styleSheetLocation: "inline:3"
|
||||
styleSheetLocation: "inline:3",
|
||||
}, {
|
||||
name: "padding-right",
|
||||
ruleSelector: "html, body, #div3",
|
||||
styleSheetLocation: "inline:3"
|
||||
styleSheetLocation: "inline:3",
|
||||
}, {
|
||||
name: "padding-bottom",
|
||||
ruleSelector: "html, body, #div3",
|
||||
styleSheetLocation: "inline:3"
|
||||
styleSheetLocation: "inline:3",
|
||||
}, {
|
||||
name: "padding-left",
|
||||
ruleSelector: "html, body, #div3",
|
||||
styleSheetLocation: "inline:3"
|
||||
}]
|
||||
styleSheetLocation: "inline:3",
|
||||
}],
|
||||
}];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ EditingSession.prototype = {
|
|||
this._inspector = null;
|
||||
this._modifications = null;
|
||||
this._rules = null;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = EditingSession;
|
||||
|
|
|
|||
|
|
@ -749,7 +749,7 @@ HTMLBreadcrumbs.prototype = {
|
|||
this.nodeHierarchy.splice(originalLength, 0, {
|
||||
node,
|
||||
button,
|
||||
currentPrettyPrintText: this.prettyPrintNodeAsText(node)
|
||||
currentPrettyPrintText: this.prettyPrintNodeAsText(node),
|
||||
});
|
||||
}
|
||||
node = node.parentOrHost();
|
||||
|
|
@ -945,5 +945,5 @@ HTMLBreadcrumbs.prototype = {
|
|||
}
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
|
|||
class ChangesApp extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
changes: PropTypes.object.isRequired
|
||||
changes: PropTypes.object.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ class ChangesApp extends PureComponent {
|
|||
return dom.div(
|
||||
{
|
||||
className: "theme-sidebar inspector-tabpanel",
|
||||
id: "sidebar-panel-changes"
|
||||
id: "sidebar-panel-changes",
|
||||
},
|
||||
this.renderDiff(this.props.changes.diff)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ const reducers = {
|
|||
selector: "",
|
||||
tag: null,
|
||||
add: null,
|
||||
remove: null
|
||||
remove: null,
|
||||
};
|
||||
|
||||
data = { ...defaults, ...data };
|
||||
|
|
|
|||
|
|
@ -346,7 +346,7 @@ CssComputedView.prototype = {
|
|||
}
|
||||
return {
|
||||
type: VIEW_NODE_SELECTOR_TYPE,
|
||||
value: selectorText.trim()
|
||||
value: selectorText.trim(),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -378,7 +378,7 @@ CssComputedView.prototype = {
|
|||
isHref)) {
|
||||
value = {
|
||||
property: parent.querySelector(".computed-property-name").firstChild.textContent,
|
||||
value: parent.querySelector(".computed-property-value").textContent
|
||||
value: parent.querySelector(".computed-property-value").textContent,
|
||||
};
|
||||
}
|
||||
if (propertyContent && (classes.contains("computed-other-property-value") ||
|
||||
|
|
@ -386,7 +386,7 @@ CssComputedView.prototype = {
|
|||
const view = propertyContent.previousSibling;
|
||||
value = {
|
||||
property: view.querySelector(".computed-property-name").firstChild.textContent,
|
||||
value: node.textContent
|
||||
value: node.textContent,
|
||||
};
|
||||
}
|
||||
if (classes.contains("computed-font-family")) {
|
||||
|
|
@ -394,13 +394,13 @@ CssComputedView.prototype = {
|
|||
value = {
|
||||
property: parent.querySelector(
|
||||
".computed-property-name").firstChild.textContent,
|
||||
value: node.parentNode.textContent
|
||||
value: node.parentNode.textContent,
|
||||
};
|
||||
} else if (propertyContent) {
|
||||
const view = propertyContent.previousSibling;
|
||||
value = {
|
||||
property: view.querySelector(".computed-property-name").firstChild.textContent,
|
||||
value: node.parentNode.textContent
|
||||
value: node.parentNode.textContent,
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
|
|
@ -460,7 +460,7 @@ CssComputedView.prototype = {
|
|||
this.element.appendChild(fragment);
|
||||
this.noResults.hidden = this.numVisibleProperties > 0;
|
||||
resolve(undefined);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
@ -487,8 +487,8 @@ CssComputedView.prototype = {
|
|||
this.pageStyle.getComputed(this._viewedElement, {
|
||||
filter: this._sourceFilter,
|
||||
onlyMatched: !this.includeBrowserStyles,
|
||||
markMatched: true
|
||||
})
|
||||
markMatched: true,
|
||||
}),
|
||||
]).then(([, computed]) => {
|
||||
if (viewedElement !== this._viewedElement) {
|
||||
return promise.resolve();
|
||||
|
|
@ -538,7 +538,7 @@ CssComputedView.prototype = {
|
|||
|
||||
this.inspector.emit("computed-view-refreshed");
|
||||
resolve(undefined);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
this._refreshProcess.schedule();
|
||||
|
|
@ -794,7 +794,7 @@ CssComputedView.prototype = {
|
|||
this.styleWindow = null;
|
||||
|
||||
this._isDestroyed = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
function PropertyInfo(tree, name) {
|
||||
|
|
@ -809,7 +809,7 @@ PropertyInfo.prototype = {
|
|||
return value;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -952,7 +952,7 @@ PropertyView.prototype = {
|
|||
this.element.setAttribute("tabindex", "0");
|
||||
this.shortcuts = new KeyShortcuts({
|
||||
window: this.tree.styleWindow,
|
||||
target: this.element
|
||||
target: this.element,
|
||||
});
|
||||
this.shortcuts.on("F1", event => {
|
||||
this.mdnLinkClick(event);
|
||||
|
|
@ -1114,7 +1114,7 @@ PropertyView.prototype = {
|
|||
for (const selector of this.matchedSelectorViews) {
|
||||
const p = createChild(frag, "p");
|
||||
const span = createChild(p, "span", {
|
||||
class: "rule-link"
|
||||
class: "rule-link",
|
||||
});
|
||||
const link = createChild(span, "a", {
|
||||
target: "_blank",
|
||||
|
|
@ -1122,28 +1122,28 @@ PropertyView.prototype = {
|
|||
title: selector.href,
|
||||
sourcelocation: selector.source,
|
||||
tabindex: "0",
|
||||
textContent: selector.source
|
||||
textContent: selector.source,
|
||||
});
|
||||
link.addEventListener("click", selector.openStyleEditor);
|
||||
const shortcuts = new KeyShortcuts({
|
||||
window: this.tree.styleWindow,
|
||||
target: link
|
||||
target: link,
|
||||
});
|
||||
shortcuts.on("Return", () => selector.openStyleEditor());
|
||||
|
||||
const status = createChild(p, "span", {
|
||||
dir: "ltr",
|
||||
class: "rule-text theme-fg-color3 " + selector.statusClass,
|
||||
title: selector.statusText
|
||||
title: selector.statusText,
|
||||
});
|
||||
|
||||
createChild(status, "div", {
|
||||
class: "fix-get-selection",
|
||||
textContent: selector.sourceText
|
||||
textContent: selector.sourceText,
|
||||
});
|
||||
|
||||
const valueDiv = createChild(status, "div", {
|
||||
class: "fix-get-selection computed-other-property-value theme-fg-color1"
|
||||
class: "fix-get-selection computed-other-property-value theme-fg-color1",
|
||||
});
|
||||
valueDiv.appendChild(selector.outputFragment);
|
||||
}
|
||||
|
|
@ -1212,7 +1212,7 @@ PropertyView.prototype = {
|
|||
|
||||
this.valueNode.removeEventListener("click", this.onFocus);
|
||||
this.valueNode = null;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1260,7 +1260,7 @@ SelectorView.STATUS_NAMES = [
|
|||
];
|
||||
|
||||
SelectorView.CLASS_NAMES = [
|
||||
"parentmatch", "matched", "bestmatch"
|
||||
"parentmatch", "matched", "bestmatch",
|
||||
];
|
||||
|
||||
SelectorView.prototype = {
|
||||
|
|
@ -1330,7 +1330,7 @@ SelectorView.prototype = {
|
|||
colorClass: "computed-color",
|
||||
urlClass: "theme-link",
|
||||
fontFamilyClass: "computed-font-family",
|
||||
baseURI: this.selectorInfo.rule.href
|
||||
baseURI: this.selectorInfo.rule.href,
|
||||
}
|
||||
);
|
||||
return frag;
|
||||
|
|
@ -1517,7 +1517,7 @@ ComputedViewTool.prototype = {
|
|||
this.computedView.destroy();
|
||||
|
||||
this.computedView = this.document = this.inspector = null;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
exports.CssComputedView = CssComputedView;
|
||||
|
|
|
|||
|
|
@ -39,16 +39,16 @@ async function checkColorCycling(container, view) {
|
|||
|
||||
const tests = [{
|
||||
value: "red",
|
||||
comment: "Color displayed as a color name."
|
||||
comment: "Color displayed as a color name.",
|
||||
}, {
|
||||
value: "#f00",
|
||||
comment: "Color displayed as an authored value."
|
||||
comment: "Color displayed as an authored value.",
|
||||
}, {
|
||||
value: "hsl(0, 100%, 50%)",
|
||||
comment: "Color displayed as an HSL value again."
|
||||
comment: "Color displayed as an HSL value again.",
|
||||
}, {
|
||||
value: "rgb(255, 0, 0)",
|
||||
comment: "Color displayed as an RGB value again."
|
||||
comment: "Color displayed as an RGB value again.",
|
||||
}];
|
||||
|
||||
for (const test of tests) {
|
||||
|
|
@ -64,7 +64,7 @@ async function checkSwatchShiftClick(container, win, expectedValue, comment) {
|
|||
const onUnitChange = swatch.once("unit-change");
|
||||
EventUtils.synthesizeMouseAtCenter(swatch, {
|
||||
type: "mousedown",
|
||||
shiftKey: true
|
||||
shiftKey: true,
|
||||
}, win);
|
||||
// we need to have the mouse up event in order to make sure that the platform
|
||||
// lets go of the last container, and is not waiting for something to happen.
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const {
|
|||
VIEW_NODE_SELECTOR_TYPE,
|
||||
VIEW_NODE_PROPERTY_TYPE,
|
||||
VIEW_NODE_VALUE_TYPE,
|
||||
VIEW_NODE_IMAGE_URL_TYPE
|
||||
VIEW_NODE_IMAGE_URL_TYPE,
|
||||
} = require("devtools/client/inspector/shared/node-types");
|
||||
|
||||
const TEST_URI = `
|
||||
|
|
@ -55,7 +55,7 @@ const TEST_DATA = [
|
|||
},
|
||||
assertNodeInfo: function(nodeInfo) {
|
||||
is(nodeInfo, null);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a useless node",
|
||||
|
|
@ -64,7 +64,7 @@ const TEST_DATA = [
|
|||
},
|
||||
assertNodeInfo: function(nodeInfo) {
|
||||
is(nodeInfo, null);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a property name",
|
||||
|
|
@ -77,7 +77,7 @@ const TEST_DATA = [
|
|||
ok("value" in nodeInfo.value);
|
||||
is(nodeInfo.value.property, "color");
|
||||
is(nodeInfo.value.value, "rgb(255, 0, 0)");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a property value",
|
||||
|
|
@ -90,7 +90,7 @@ const TEST_DATA = [
|
|||
ok("value" in nodeInfo.value);
|
||||
is(nodeInfo.value.property, "color");
|
||||
is(nodeInfo.value.value, "rgb(255, 0, 0)");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing an image url",
|
||||
|
|
@ -106,7 +106,7 @@ const TEST_DATA = [
|
|||
is(nodeInfo.value.value,
|
||||
"url(\"chrome://global/skin/icons/warning-64.png\")");
|
||||
is(nodeInfo.value.url, "chrome://global/skin/icons/warning-64.png");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a matched rule selector (bestmatch)",
|
||||
|
|
@ -117,7 +117,7 @@ const TEST_DATA = [
|
|||
assertNodeInfo: function(nodeInfo) {
|
||||
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
|
||||
is(nodeInfo.value, "div div");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a matched rule selector (matched)",
|
||||
|
|
@ -128,7 +128,7 @@ const TEST_DATA = [
|
|||
assertNodeInfo: function(nodeInfo) {
|
||||
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
|
||||
is(nodeInfo.value, "div");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a matched rule selector (parentmatch)",
|
||||
|
|
@ -139,7 +139,7 @@ const TEST_DATA = [
|
|||
assertNodeInfo: function(nodeInfo) {
|
||||
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
|
||||
is(nodeInfo.value, "body");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a matched rule value",
|
||||
|
|
@ -151,7 +151,7 @@ const TEST_DATA = [
|
|||
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
|
||||
is(nodeInfo.value.property, "color");
|
||||
is(nodeInfo.value.value, "red");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Testing a matched rule stylesheet link",
|
||||
|
|
@ -161,8 +161,8 @@ const TEST_DATA = [
|
|||
},
|
||||
assertNodeInfo: function(nodeInfo) {
|
||||
is(nodeInfo, null);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ async function testCopySome(view) {
|
|||
|
||||
await copySomeTextAndCheckClipboard(view, {
|
||||
start: {prop: 1, offset: 0},
|
||||
end: {prop: 3, offset: 2}
|
||||
end: {prop: 3, offset: 2},
|
||||
}, expectedPattern);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@ createEnum([
|
|||
"EXTENSION_SIDEBAR_PAGE_UPDATE",
|
||||
|
||||
// Remove an extension sidebar from the inspector store.
|
||||
"EXTENSION_SIDEBAR_REMOVE"
|
||||
"EXTENSION_SIDEBAR_REMOVE",
|
||||
|
||||
], module.exports);
|
||||
|
|
|
|||
|
|
@ -55,6 +55,6 @@ module.exports = {
|
|||
type: EXTENSION_SIDEBAR_REMOVE,
|
||||
sidebarId,
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ class ObjectValueGripView extends PureComponent {
|
|||
path: objectValueGrip && objectValueGrip.actor || JSON.stringify(objectValueGrip),
|
||||
contents: {
|
||||
value: objectValueGrip,
|
||||
}
|
||||
},
|
||||
}],
|
||||
createObjectClient: serviceContainer.createObjectClient,
|
||||
releaseActor: serviceContainer.releaseActor,
|
||||
|
|
|
|||
|
|
@ -100,11 +100,11 @@ class ExtensionSidebar {
|
|||
const front = await highlighterUtils.gripToNodeFront(grip);
|
||||
const onInspectorUpdated = this.inspector.once("inspector-updated");
|
||||
const onNodeFrontSet = this.inspector.toolbox.selection.setNodeFront(front, {
|
||||
reason: "inspector-extension-sidebar"
|
||||
reason: "inspector-extension-sidebar",
|
||||
});
|
||||
|
||||
return Promise.all([onNodeFrontSet, onInspectorUpdated]);
|
||||
}
|
||||
},
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const reducers = {
|
|||
[sidebarId]: {
|
||||
viewMode: "object-treeview",
|
||||
object,
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -36,7 +36,7 @@ const reducers = {
|
|||
viewMode: "object-value-grip-view",
|
||||
objectValueGrip,
|
||||
rootTitle,
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ const reducers = {
|
|||
[sidebarId]: {
|
||||
viewMode: "extension-page",
|
||||
iframeURL,
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ add_task(async function setupExtensionSidebar() {
|
|||
background() {
|
||||
// This is just an empty extension used to ensure that the caller extension uuid
|
||||
// actually exists.
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
await extension.startup();
|
||||
|
|
@ -123,7 +123,7 @@ add_task(async function testSidebarSetObjectValueGrip() {
|
|||
|
||||
const evalResult = await inspectedWindowFront.eval(fakeExtCallerInfo, expression, {
|
||||
evalResultAsGrip: true,
|
||||
toolboxConsoleActorID: toolbox.target.form.consoleActor
|
||||
toolboxConsoleActorID: toolbox.target.form.consoleActor,
|
||||
});
|
||||
|
||||
sidebar.setObjectValueGrip(evalResult.valueGrip, "Expected Root Title");
|
||||
|
|
@ -157,7 +157,7 @@ add_task(async function testSidebarDOMNodeHighlighting() {
|
|||
|
||||
const evalResult = await inspectedWindowFront.eval(fakeExtCallerInfo, expression, {
|
||||
evalResultAsGrip: true,
|
||||
toolboxConsoleActorID: toolbox.target.form.consoleActor
|
||||
toolboxConsoleActorID: toolbox.target.form.consoleActor,
|
||||
});
|
||||
|
||||
sidebar.setObjectValueGrip(evalResult.valueGrip);
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ function assertTreeView(panelDoc, expectedContent) {
|
|||
const {
|
||||
expectedTreeTables,
|
||||
expectedStringCells,
|
||||
expectedNumberCells
|
||||
expectedNumberCells,
|
||||
} = expectedContent;
|
||||
|
||||
if (expectedTreeTables) {
|
||||
|
|
|
|||
|
|
@ -40,8 +40,8 @@ class FlexItemSizingOutline extends PureComponent {
|
|||
dom.div({
|
||||
className: "flex-outline-delta",
|
||||
style: {
|
||||
backgroundColor: colorUtils.setAlpha(this.props.color, 0.1)
|
||||
}
|
||||
backgroundColor: colorUtils.setAlpha(this.props.color, 0.1),
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
@ -49,7 +49,7 @@ class FlexItemSizingOutline extends PureComponent {
|
|||
renderFinalOutline(mainFinalSize, mainMaxSize, mainMinSize, isClamped) {
|
||||
return (
|
||||
dom.div({
|
||||
className: "flex-outline-final" + (isClamped ? " clamped" : "")
|
||||
className: "flex-outline-final" + (isClamped ? " clamped" : ""),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
@ -100,7 +100,7 @@ class FlexItemSizingOutline extends PureComponent {
|
|||
// Make mainDeltaSize start from the same point as the other ones so we can compare.
|
||||
let sizes = [
|
||||
{ name: "basis-end", size: mainBaseSize },
|
||||
{ name: "final-end", size: mainFinalSize }
|
||||
{ name: "final-end", size: mainFinalSize },
|
||||
];
|
||||
|
||||
if (mainDeltaSize > 0) {
|
||||
|
|
@ -143,8 +143,8 @@ class FlexItemSizingOutline extends PureComponent {
|
|||
(mainDeltaSize > 0 ? " growing" : " shrinking"),
|
||||
style: {
|
||||
color: this.props.color,
|
||||
gridTemplateColumns
|
||||
}
|
||||
gridTemplateColumns,
|
||||
},
|
||||
},
|
||||
this.renderPoint("basis"),
|
||||
this.renderPoint("final"),
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ class FlexItemSizingProperties extends PureComponent {
|
|||
mainDeltaSize,
|
||||
mainBaseSize,
|
||||
mainFinalSize,
|
||||
lineGrowthState
|
||||
lineGrowthState,
|
||||
} = flexItemSizing;
|
||||
|
||||
// Don't attempt to display anything useful if everything is 0.
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ class Header extends PureComponent {
|
|||
dom.div(
|
||||
{
|
||||
className: "flex-header-content" +
|
||||
(flexItemShown ? " flex-item-shown" : "")
|
||||
(flexItemShown ? " flex-item-shown" : ""),
|
||||
},
|
||||
this.renderFlexContainer(),
|
||||
this.renderFlexItemSelector()
|
||||
|
|
|
|||
|
|
@ -14,19 +14,19 @@ const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
|
|||
const TEST_DATA = [{
|
||||
selector: ".shrinking .item",
|
||||
expectedGridTemplate: "[final-start basis-start] 300fr [final-end delta-start] " +
|
||||
"200fr [basis-end delta-end]"
|
||||
"200fr [basis-end delta-end]",
|
||||
}, {
|
||||
selector: ".shrinking.is-clamped .item",
|
||||
expectedGridTemplate: "[final-start basis-start] 300fr [delta-start] " +
|
||||
"50fr [final-end min] 150fr [basis-end delta-end]"
|
||||
"50fr [final-end min] 150fr [basis-end delta-end]",
|
||||
}, {
|
||||
selector: ".growing .item",
|
||||
expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
|
||||
"100fr [final-end delta-end]"
|
||||
"100fr [final-end delta-end]",
|
||||
}, {
|
||||
selector: ".growing.is-clamped .item",
|
||||
expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
|
||||
"50fr [final-end max] 50fr [delta-end]"
|
||||
"50fr [final-end max] 50fr [delta-end]",
|
||||
}];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@ const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
|
|||
|
||||
const TEST_DATA = [{
|
||||
selector: ".shrinking .item",
|
||||
expectedSections: ["Base Size", "Flexibility", "Final Size"]
|
||||
expectedSections: ["Base Size", "Flexibility", "Final Size"],
|
||||
}, {
|
||||
selector: ".shrinking.is-clamped .item",
|
||||
expectedSections: ["Base Size", "Flexibility", "Minimum Size", "Final Size"]
|
||||
expectedSections: ["Base Size", "Flexibility", "Minimum Size", "Final Size"],
|
||||
}, {
|
||||
selector: ".growing .item",
|
||||
expectedSections: ["Base Size", "Flexibility", "Final Size"]
|
||||
expectedSections: ["Base Size", "Flexibility", "Final Size"],
|
||||
}, {
|
||||
selector: ".growing.is-clamped .item",
|
||||
expectedSections: ["Base Size", "Flexibility", "Maximum Size", "Final Size"]
|
||||
expectedSections: ["Base Size", "Flexibility", "Maximum Size", "Final Size"],
|
||||
}];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ class Font extends PureComponent {
|
|||
|
||||
onFontFaceRuleToggle(event) {
|
||||
this.setState({
|
||||
isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded
|
||||
isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded,
|
||||
});
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,11 +129,11 @@ class FontEditor extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
className: "font-group"
|
||||
className: "font-group",
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
className: "font-family-name"
|
||||
className: "font-family-name",
|
||||
},
|
||||
family),
|
||||
group
|
||||
|
|
@ -188,7 +188,7 @@ class FontEditor extends PureComponent {
|
|||
// Append a "Custom" instance entry which represents the latest manual axes changes.
|
||||
const customInstance = {
|
||||
name: getStr("fontinspector.customInstanceName"),
|
||||
values: this.props.fontEditor.customInstanceValues
|
||||
values: this.props.fontEditor.customInstanceValues,
|
||||
};
|
||||
fontInstances = [ ...fontInstances, customInstance ];
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ class FontEditor extends PureComponent {
|
|||
onChange: (e) => {
|
||||
const instance = fontInstances.find(inst => e.target.value === inst.name);
|
||||
instance && this.props.onInstanceChange(instance.name, instance.values);
|
||||
}
|
||||
},
|
||||
},
|
||||
instanceOptions
|
||||
);
|
||||
|
|
@ -232,11 +232,11 @@ class FontEditor extends PureComponent {
|
|||
renderWarning(warning) {
|
||||
return dom.div(
|
||||
{
|
||||
id: "font-editor"
|
||||
id: "font-editor",
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
className: "devtools-sidepanel-no-result"
|
||||
className: "devtools-sidepanel-no-result",
|
||||
},
|
||||
warning
|
||||
)
|
||||
|
|
@ -265,7 +265,7 @@ class FontEditor extends PureComponent {
|
|||
|
||||
return dom.div(
|
||||
{
|
||||
id: "font-editor"
|
||||
id: "font-editor",
|
||||
},
|
||||
// Always render UI for used fonts.
|
||||
this.renderUsedFonts(fonts),
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ class FontList extends PureComponent {
|
|||
fonts,
|
||||
fontOptions,
|
||||
onPreviewTextChange,
|
||||
onToggleFontHighlight
|
||||
onToggleFontHighlight,
|
||||
} = this.props;
|
||||
|
||||
const { previewText } = fontOptions;
|
||||
|
|
@ -60,7 +60,7 @@ class FontList extends PureComponent {
|
|||
|
||||
const list = dom.ul(
|
||||
{
|
||||
className: "fonts-list"
|
||||
className: "fonts-list",
|
||||
},
|
||||
fonts.map((font, i) => Font({
|
||||
key: i,
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ class FontName extends PureComponent {
|
|||
|
||||
render() {
|
||||
const options = {
|
||||
className: "font-name"
|
||||
className: "font-name",
|
||||
};
|
||||
|
||||
if (Services.prefs.getBoolPref(FONT_HIGHLIGHTER_PREF)) {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ class FontOrigin extends PureComponent {
|
|||
if (!url) {
|
||||
return dom.p(
|
||||
{
|
||||
className: "font-origin system"
|
||||
className: "font-origin system",
|
||||
},
|
||||
getStr("fontinspector.system")
|
||||
);
|
||||
|
|
@ -48,7 +48,7 @@ class FontOrigin extends PureComponent {
|
|||
dom.span(
|
||||
{
|
||||
className: "url",
|
||||
title: url
|
||||
title: url,
|
||||
},
|
||||
url
|
||||
),
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ class FontOverview extends PureComponent {
|
|||
:
|
||||
dom.div(
|
||||
{
|
||||
className: "devtools-sidepanel-no-result"
|
||||
className: "devtools-sidepanel-no-result",
|
||||
},
|
||||
getStr("fontinspector.noFontsUsedOnCurrentElement")
|
||||
);
|
||||
|
|
@ -87,11 +87,11 @@ class FontOverview extends PureComponent {
|
|||
fontOptions,
|
||||
fonts,
|
||||
onPreviewTextChange,
|
||||
onToggleFontHighlight: this.onToggleFontHighlightGlobal
|
||||
onToggleFontHighlight: this.onToggleFontHighlightGlobal,
|
||||
},
|
||||
opened: false
|
||||
}
|
||||
]
|
||||
opened: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ class FontPreviewInput extends PureComponent {
|
|||
this.inputRef = createRef();
|
||||
|
||||
this.state = {
|
||||
value: this.props.previewText
|
||||
value: this.props.previewText,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ class FontPropertyValue extends PureComponent {
|
|||
nameLabel: false,
|
||||
step: 1,
|
||||
unit: null,
|
||||
unitOptions: []
|
||||
unitOptions: [],
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -275,7 +275,7 @@ class FontPropertyValue extends PureComponent {
|
|||
this.setState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
value: null
|
||||
value: null,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -330,7 +330,7 @@ class FontPropertyValue extends PureComponent {
|
|||
this.setState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
interactive: isInteractive
|
||||
interactive: isInteractive,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -355,7 +355,7 @@ class FontPropertyValue extends PureComponent {
|
|||
this.setState((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
value
|
||||
value,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -409,7 +409,7 @@ class FontPropertyValue extends PureComponent {
|
|||
dom.span(
|
||||
{
|
||||
className: "font-control-label-detail",
|
||||
id: `detail-${name}`
|
||||
id: `detail-${name}`,
|
||||
},
|
||||
this.getPropLabel("name")
|
||||
)
|
||||
|
|
@ -480,7 +480,7 @@ class FontPropertyValue extends PureComponent {
|
|||
),
|
||||
dom.div(
|
||||
{
|
||||
className: "font-control-input"
|
||||
className: "font-control-input",
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ class FontStyle extends PureComponent {
|
|||
),
|
||||
dom.div(
|
||||
{
|
||||
className: "font-control-input"
|
||||
className: "font-control-input",
|
||||
},
|
||||
dom.input(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ class FontsApp extends PureComponent {
|
|||
return dom.div(
|
||||
{
|
||||
className: "theme-sidebar inspector-tabpanel",
|
||||
id: "sidebar-panel-fontinspector"
|
||||
id: "sidebar-panel-fontinspector",
|
||||
},
|
||||
fontEditorEnabled && FontEditor({
|
||||
fontEditor,
|
||||
|
|
|
|||
|
|
@ -373,7 +373,7 @@ class FontInspector {
|
|||
"font-size",
|
||||
"font-weight",
|
||||
"font-stretch",
|
||||
"line-height"
|
||||
"line-height",
|
||||
].reduce((acc, property) => {
|
||||
return acc.concat(this.cssProperties.getValues(property));
|
||||
}, []);
|
||||
|
|
@ -842,7 +842,7 @@ class FontInspector {
|
|||
try {
|
||||
// Get computed styles for the selected node, but filter by CSS font properties.
|
||||
this.nodeComputedStyle = await this.pageStyle.getComputed(node, {
|
||||
filterProperties: FONT_PROPERTIES
|
||||
filterProperties: FONT_PROPERTIES,
|
||||
});
|
||||
} catch (e) {
|
||||
// Because getComputed is async, there is a chance the font editor was
|
||||
|
|
@ -919,7 +919,7 @@ class FontInspector {
|
|||
const options = {
|
||||
includePreviews: true,
|
||||
previewText,
|
||||
previewFillStyle: getColor("body-color")
|
||||
previewFillStyle: getColor("body-color"),
|
||||
};
|
||||
|
||||
// Add the includeVariations argument into the option to get font variation data.
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ var openFontInspectorForURL = async function(url) {
|
|||
testActor,
|
||||
toolbox,
|
||||
inspector,
|
||||
view: inspector.fontinspector
|
||||
view: inspector.fontinspector,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -233,7 +233,7 @@ function getPropertyValue(viewDoc, name) {
|
|||
parseFloat(viewDoc.querySelector(selector).value),
|
||||
// Ensure unit dropdown exists before querying its value
|
||||
unit: viewDoc.querySelector(selector + ` ~ .font-value-select`) &&
|
||||
viewDoc.querySelector(selector + ` ~ .font-value-select`).value
|
||||
viewDoc.querySelector(selector + ` ~ .font-value-select`).value,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const font = exports.font = {
|
|||
variationAxes: PropTypes.arrayOf(PropTypes.shape(fontVariationAxis)),
|
||||
|
||||
// The variation instances of the font
|
||||
variationInstances: PropTypes.arrayOf(PropTypes.shape(fontVariationInstance))
|
||||
variationInstances: PropTypes.arrayOf(PropTypes.shape(fontVariationInstance)),
|
||||
};
|
||||
|
||||
exports.fontOptions = {
|
||||
|
|
|
|||
|
|
@ -109,5 +109,5 @@ module.exports = {
|
|||
}
|
||||
|
||||
return Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ class GridOutline extends PureComponent {
|
|||
gridFragmentIndex,
|
||||
rowNumber,
|
||||
columnNumber,
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +167,7 @@ class GridOutline extends PureComponent {
|
|||
dom.span(
|
||||
{
|
||||
className: "grid-outline-text-icon",
|
||||
title: getStr("layout.cannotShowGridOutline.title")
|
||||
title: getStr("layout.cannotShowGridOutline.title"),
|
||||
}
|
||||
),
|
||||
getStr("layout.cannotShowGridOutline")
|
||||
|
|
@ -290,7 +290,7 @@ class GridOutline extends PureComponent {
|
|||
{
|
||||
id: "grid-outline-group",
|
||||
className: "grid-outline-group",
|
||||
style: { color }
|
||||
style: { color },
|
||||
},
|
||||
this.renderGrid(grid)
|
||||
)
|
||||
|
|
@ -305,7 +305,7 @@ class GridOutline extends PureComponent {
|
|||
x: 0,
|
||||
y: 0,
|
||||
width: borderWidth,
|
||||
height: borderHeight
|
||||
height: borderHeight,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const GRID_COLORS = [
|
|||
"#B5007F",
|
||||
"#058B00",
|
||||
"#A47F00",
|
||||
"#005A71"
|
||||
"#005A71",
|
||||
];
|
||||
|
||||
class GridInspector {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const Services = require("Services");
|
|||
const {
|
||||
UPDATE_SHOW_GRID_AREAS,
|
||||
UPDATE_SHOW_GRID_LINE_NUMBERS,
|
||||
UPDATE_SHOW_INFINITE_LINES
|
||||
UPDATE_SHOW_INFINITE_LINES,
|
||||
} = require("../actions/index");
|
||||
|
||||
const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ add_task(async function() {
|
|||
callback: () => {
|
||||
inspector.reflowTracker.untrackReflows(listener, listener.callback);
|
||||
resolve();
|
||||
}
|
||||
},
|
||||
};
|
||||
inspector.reflowTracker.trackReflows(listener, listener.callback);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,65 +8,65 @@ const { compareFragmentsGeometry } = require("devtools/client/inspector/grids/ut
|
|||
const TESTS = [{
|
||||
desc: "No fragments",
|
||||
grids: [[], []],
|
||||
expected: true
|
||||
expected: true,
|
||||
}, {
|
||||
desc: "Different number of fragments",
|
||||
grids: [
|
||||
[{}, {}, {}],
|
||||
[{}, {}]
|
||||
[{}, {}],
|
||||
],
|
||||
expected: false
|
||||
expected: false,
|
||||
}, {
|
||||
desc: "Different number of columns",
|
||||
grids: [
|
||||
[{cols: {lines: [{}, {}]}, rows: {lines: []}}],
|
||||
[{cols: {lines: [{}]}, rows: {lines: []}}]
|
||||
[{cols: {lines: [{}]}, rows: {lines: []}}],
|
||||
],
|
||||
expected: false
|
||||
expected: false,
|
||||
}, {
|
||||
desc: "Different number of rows",
|
||||
grids: [
|
||||
[{cols: {lines: [{}, {}]}, rows: {lines: [{}]}}],
|
||||
[{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}]
|
||||
[{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}],
|
||||
],
|
||||
expected: false
|
||||
expected: false,
|
||||
}, {
|
||||
desc: "Different number of rows and columns",
|
||||
grids: [
|
||||
[{cols: {lines: [{}]}, rows: {lines: [{}]}}],
|
||||
[{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}]
|
||||
[{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}],
|
||||
],
|
||||
expected: false
|
||||
expected: false,
|
||||
}, {
|
||||
desc: "Different column sizes",
|
||||
grids: [
|
||||
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: []}}],
|
||||
[{cols: {lines: [{start: 0}, {start: 1000}]}, rows: {lines: []}}]
|
||||
[{cols: {lines: [{start: 0}, {start: 1000}]}, rows: {lines: []}}],
|
||||
],
|
||||
expected: false
|
||||
expected: false,
|
||||
}, {
|
||||
desc: "Different row sizes",
|
||||
grids: [
|
||||
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: -100}]}}],
|
||||
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: 0}]}}]
|
||||
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: 0}]}}],
|
||||
],
|
||||
expected: false
|
||||
expected: false,
|
||||
}, {
|
||||
desc: "Different row and column sizes",
|
||||
grids: [
|
||||
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: -100}]}}],
|
||||
[{cols: {lines: [{start: 0}, {start: 505}]}, rows: {lines: [{start: 0}]}}]
|
||||
[{cols: {lines: [{start: 0}, {start: 505}]}, rows: {lines: [{start: 0}]}}],
|
||||
],
|
||||
expected: false
|
||||
expected: false,
|
||||
}, {
|
||||
desc: "Complete structure, same fragments",
|
||||
grids: [
|
||||
[{cols: {lines: [{start: 0}, {start: 100.3}, {start: 200.6}]},
|
||||
rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}],
|
||||
[{cols: {lines: [{start: 0}, {start: 100.3}, {start: 200.6}]},
|
||||
rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}]
|
||||
rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}],
|
||||
],
|
||||
expected: true
|
||||
expected: true,
|
||||
}];
|
||||
|
||||
function run_test() {
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ InspectorSearch.prototype = {
|
|||
this.searchBox.value = "";
|
||||
this.searchClearButton.hidden = true;
|
||||
this.emit("search-cleared");
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -427,7 +427,7 @@ SelectorAutocompleter.prototype = {
|
|||
|
||||
const item = {
|
||||
preLabel: query,
|
||||
label: value
|
||||
label: value,
|
||||
};
|
||||
|
||||
// In case the query's state is tag and the item's state is id or class
|
||||
|
|
@ -533,5 +533,5 @@ SelectorAutocompleter.prototype = {
|
|||
// the autoSelect item has been selected.
|
||||
return this._showPopup(result.suggestions, state);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ Inspector.prototype = {
|
|||
await Promise.all([
|
||||
this._getCssProperties(),
|
||||
this._getPageStyle(),
|
||||
this._getDefaultSelection()
|
||||
this._getDefaultSelection(),
|
||||
]);
|
||||
|
||||
return this._deferredOpen();
|
||||
|
|
@ -571,7 +571,7 @@ Inspector.prototype = {
|
|||
splitterSize: 1,
|
||||
endPanelControl: true,
|
||||
startPanel: this.InspectorTabPanel({
|
||||
id: "inspector-main-content"
|
||||
id: "inspector-main-content",
|
||||
}),
|
||||
endPanel: this.InspectorSplitBox({
|
||||
initialWidth: splitSidebarWidth,
|
||||
|
|
@ -580,10 +580,10 @@ Inspector.prototype = {
|
|||
splitterSize: this.is3PaneModeEnabled ? 1 : 0,
|
||||
endPanelControl: this.is3PaneModeEnabled,
|
||||
startPanel: this.InspectorTabPanel({
|
||||
id: "inspector-rules-container"
|
||||
id: "inspector-rules-container",
|
||||
}),
|
||||
endPanel: this.InspectorTabPanel({
|
||||
id: "inspector-sidebar-container"
|
||||
id: "inspector-sidebar-container",
|
||||
}),
|
||||
ref: splitbox => {
|
||||
this.sidebarSplitBox = splitbox;
|
||||
|
|
@ -868,7 +868,7 @@ Inspector.prototype = {
|
|||
collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideThreePaneMode"),
|
||||
expandPaneTitle: INSPECTOR_L10N.getStr("inspector.showThreePaneMode"),
|
||||
onClick: this.onSidebarToggle,
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
this.sidebar = new ToolSidebar(sidebar, this, "inspector", options);
|
||||
|
|
@ -876,7 +876,7 @@ Inspector.prototype = {
|
|||
|
||||
const ruleSideBar = this.panelDoc.getElementById("inspector-rules-sidebar");
|
||||
this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, "inspector", {
|
||||
hideTabstripe: true
|
||||
hideTabstripe: true,
|
||||
});
|
||||
|
||||
// defaultTab may also be an empty string or a tab id that doesn't exist anymore
|
||||
|
|
@ -901,7 +901,7 @@ Inspector.prototype = {
|
|||
{
|
||||
props: {
|
||||
id: layoutId,
|
||||
title: layoutTitle
|
||||
title: layoutTitle,
|
||||
},
|
||||
panel: () => {
|
||||
if (!this.layoutview) {
|
||||
|
|
@ -911,7 +911,7 @@ Inspector.prototype = {
|
|||
}
|
||||
|
||||
return this.layoutview.provider;
|
||||
}
|
||||
},
|
||||
},
|
||||
defaultTab == layoutId);
|
||||
|
||||
|
|
@ -929,14 +929,14 @@ Inspector.prototype = {
|
|||
{
|
||||
props: {
|
||||
id: animationId,
|
||||
title: animationTitle
|
||||
title: animationTitle,
|
||||
},
|
||||
panel: () => {
|
||||
const AnimationInspector =
|
||||
this.browserRequire("devtools/client/inspector/animation/animation");
|
||||
this.animationinspector = new AnimationInspector(this, this.panelWin);
|
||||
return this.animationinspector.provider;
|
||||
}
|
||||
},
|
||||
},
|
||||
defaultTab == animationId);
|
||||
|
||||
|
|
@ -950,7 +950,7 @@ Inspector.prototype = {
|
|||
{
|
||||
props: {
|
||||
id: fontId,
|
||||
title: fontTitle
|
||||
title: fontTitle,
|
||||
},
|
||||
panel: () => {
|
||||
if (!this.fontinspector) {
|
||||
|
|
@ -960,7 +960,7 @@ Inspector.prototype = {
|
|||
}
|
||||
|
||||
return this.fontinspector.provider;
|
||||
}
|
||||
},
|
||||
},
|
||||
defaultTab == fontId);
|
||||
|
||||
|
|
@ -975,7 +975,7 @@ Inspector.prototype = {
|
|||
{
|
||||
props: {
|
||||
id: changesId,
|
||||
title: changesTitle
|
||||
title: changesTitle,
|
||||
},
|
||||
panel: () => {
|
||||
if (!this.changesView) {
|
||||
|
|
@ -985,7 +985,7 @@ Inspector.prototype = {
|
|||
}
|
||||
|
||||
return this.changesView.provider;
|
||||
}
|
||||
},
|
||||
},
|
||||
defaultTab == changesId);
|
||||
}
|
||||
|
|
@ -1200,7 +1200,7 @@ Inspector.prototype = {
|
|||
if (this._highlighters) {
|
||||
await Promise.all([
|
||||
this.highlighters.restoreFlexboxState(),
|
||||
this.highlighters.restoreGridState()
|
||||
this.highlighters.restoreGridState(),
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
@ -1241,7 +1241,7 @@ Inspector.prototype = {
|
|||
|
||||
this._selectionCssSelector = {
|
||||
selector: cssSelector,
|
||||
url: this._target.url
|
||||
url: this._target.url,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -1503,7 +1503,7 @@ Inspector.prototype = {
|
|||
this._panelDestroyer = promise.all([
|
||||
markupDestroyer,
|
||||
sidebarDestroyer,
|
||||
ruleViewSideBarDestroyer
|
||||
ruleViewSideBarDestroyer,
|
||||
]);
|
||||
|
||||
return this._panelDestroyer;
|
||||
|
|
@ -1722,7 +1722,7 @@ Inspector.prototype = {
|
|||
id: "node-menu-showaccessibilityproperties",
|
||||
label: INSPECTOR_L10N.getStr("inspectorShowAccessibilityProperties.label"),
|
||||
click: () => this.showAccessibilityProperties(),
|
||||
disabled: true
|
||||
disabled: true,
|
||||
});
|
||||
// Only attempt to determine if a11y props menu item needs to be enabled iff
|
||||
// AccessibilityFront is enabled.
|
||||
|
|
@ -2339,7 +2339,7 @@ Inspector.prototype = {
|
|||
const args = {
|
||||
file: true,
|
||||
selector: this.selectionCssSelector,
|
||||
clipboard: clipboardEnabled
|
||||
clipboard: clipboardEnabled,
|
||||
};
|
||||
const screenshotFront = this.target.getFront("screenshot");
|
||||
const screenshot = await screenshotFront.capture(args);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const { div, span } = dom;
|
|||
class Accordion extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
items: PropTypes.array
|
||||
items: PropTypes.array,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ class Accordion extends PureComponent {
|
|||
|
||||
this.state = {
|
||||
opened: props.items.map(item => item.opened),
|
||||
created: []
|
||||
created: [],
|
||||
};
|
||||
|
||||
this.handleHeaderClick = this.handleHeaderClick.bind(this);
|
||||
|
|
@ -77,7 +77,7 @@ class Accordion extends PureComponent {
|
|||
(created[i] || opened[i]) ?
|
||||
div(
|
||||
{ className: "_content",
|
||||
style: { display: opened[i] ? "block" : "none" }
|
||||
style: { display: opened[i] ? "block" : "none" },
|
||||
},
|
||||
createElement(item.component, item.componentProps || {})
|
||||
) :
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ class LayoutApp extends PureComponent {
|
|||
onToggled: () => {
|
||||
const opened = Services.prefs.getBoolPref(GRID_OPENED_PREF);
|
||||
Services.prefs.setBoolPref(GRID_OPENED_PREF, !opened);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
component: BoxModel,
|
||||
|
|
@ -94,7 +94,7 @@ class LayoutApp extends PureComponent {
|
|||
onToggled: () => {
|
||||
const opened = Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF);
|
||||
Services.prefs.setBoolPref(BOXMODEL_OPENED_PREF, !opened);
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -112,7 +112,7 @@ class LayoutApp extends PureComponent {
|
|||
onToggled: () => {
|
||||
const opened = Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
|
||||
Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// If the current selected node is both a flex container and flex item. Render
|
||||
|
|
@ -133,7 +133,7 @@ class LayoutApp extends PureComponent {
|
|||
onToggled: () => {
|
||||
const opened = Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
|
||||
Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -644,7 +644,7 @@ MarkupView.prototype = {
|
|||
"inspector-open",
|
||||
"navigateaway",
|
||||
"nodeselected",
|
||||
"test"
|
||||
"test",
|
||||
];
|
||||
|
||||
const isHighlight = this._isContainerSelected(this._hoveredContainer);
|
||||
|
|
@ -717,7 +717,7 @@ MarkupView.prototype = {
|
|||
// If the user selected an element with the browser context menu.
|
||||
"browser-context-menu",
|
||||
// If the user added a new node by clicking in the inspector toolbar.
|
||||
"node-inserted"
|
||||
"node-inserted",
|
||||
];
|
||||
|
||||
// If the user performed an action with a keyboard, move keyboard focus to
|
||||
|
|
@ -1578,7 +1578,7 @@ MarkupView.prototype = {
|
|||
this.telemetry.recordEvent("edit_html", "inspector", null, {
|
||||
"made_changes": commit,
|
||||
"time_open": end - start,
|
||||
"session_id": this.toolbox.sessionId
|
||||
"session_id": this.toolbox.sessionId,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -1890,7 +1890,7 @@ MarkupView.prototype = {
|
|||
|
||||
return this.walker.children(container.node, {
|
||||
maxNodes: maxChildren,
|
||||
center: centered
|
||||
center: centered,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -2067,7 +2067,7 @@ MarkupView.prototype = {
|
|||
}
|
||||
|
||||
return {parent, nextSibling};
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const TESTS = [
|
|||
activedescendant: "body.tagLine",
|
||||
key: "VK_LEFT",
|
||||
options: { },
|
||||
waitFor: "collapsed"
|
||||
waitFor: "collapsed",
|
||||
},
|
||||
{
|
||||
desc: "Expand body container",
|
||||
|
|
@ -38,7 +38,7 @@ const TESTS = [
|
|||
activedescendant: "body.tagLine",
|
||||
key: "VK_RIGHT",
|
||||
options: { },
|
||||
waitFor: "expanded"
|
||||
waitFor: "expanded",
|
||||
},
|
||||
{
|
||||
desc: "Select header container",
|
||||
|
|
@ -46,7 +46,7 @@ const TESTS = [
|
|||
activedescendant: "header.tagLine",
|
||||
key: "VK_DOWN",
|
||||
options: { },
|
||||
waitFor: "inspector-updated"
|
||||
waitFor: "inspector-updated",
|
||||
},
|
||||
{
|
||||
desc: "Expand header container",
|
||||
|
|
@ -54,7 +54,7 @@ const TESTS = [
|
|||
activedescendant: "header.tagLine",
|
||||
key: "VK_RIGHT",
|
||||
options: { },
|
||||
waitFor: "expanded"
|
||||
waitFor: "expanded",
|
||||
},
|
||||
{
|
||||
desc: "Select text container",
|
||||
|
|
@ -62,7 +62,7 @@ const TESTS = [
|
|||
activedescendant: "container-0.tagLine",
|
||||
key: "VK_DOWN",
|
||||
options: { },
|
||||
waitFor: "inspector-updated"
|
||||
waitFor: "inspector-updated",
|
||||
},
|
||||
{
|
||||
desc: "Select header container again",
|
||||
|
|
@ -70,7 +70,7 @@ const TESTS = [
|
|||
activedescendant: "header.tagLine",
|
||||
key: "VK_UP",
|
||||
options: { },
|
||||
waitFor: "inspector-updated"
|
||||
waitFor: "inspector-updated",
|
||||
},
|
||||
{
|
||||
desc: "Collapse header container",
|
||||
|
|
@ -78,84 +78,84 @@ const TESTS = [
|
|||
activedescendant: "header.tagLine",
|
||||
key: "VK_LEFT",
|
||||
options: { },
|
||||
waitFor: "collapsed"
|
||||
waitFor: "collapsed",
|
||||
},
|
||||
{
|
||||
desc: "Focus on header container tag",
|
||||
focused: "header.focusableElms.0",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_RETURN",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Remove focus from header container tag",
|
||||
focused: "root.elt",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_ESCAPE",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Focus on header container tag again",
|
||||
focused: "header.focusableElms.0",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_SPACE",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Focus on header id attribute",
|
||||
focused: "header.focusableElms.1",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Focus on header class attribute",
|
||||
focused: "header.focusableElms.2",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Focus on header new attribute",
|
||||
focused: "header.focusableElms.3",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Circle back and focus on header tag again",
|
||||
focused: "header.focusableElms.0",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Circle back and focus on header new attribute again",
|
||||
focused: "header.focusableElms.3",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { shiftKey: true }
|
||||
options: { shiftKey: true },
|
||||
},
|
||||
{
|
||||
desc: "Tab back and focus on header class attribute",
|
||||
focused: "header.focusableElms.2",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { shiftKey: true }
|
||||
options: { shiftKey: true },
|
||||
},
|
||||
{
|
||||
desc: "Tab back and focus on header id attribute",
|
||||
focused: "header.focusableElms.1",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { shiftKey: true }
|
||||
options: { shiftKey: true },
|
||||
},
|
||||
{
|
||||
desc: "Tab back and focus on header tag",
|
||||
focused: "header.focusableElms.0",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { shiftKey: true }
|
||||
options: { shiftKey: true },
|
||||
},
|
||||
{
|
||||
desc: "Expand header container, ensure that focus is still on header tag",
|
||||
|
|
@ -163,70 +163,70 @@ const TESTS = [
|
|||
activedescendant: "header.tagLine",
|
||||
key: "VK_RIGHT",
|
||||
options: { },
|
||||
waitFor: "expanded"
|
||||
waitFor: "expanded",
|
||||
},
|
||||
{
|
||||
desc: "Activate header tag editor",
|
||||
focused: "header.editor.tag.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_RETURN",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Activate header id attribute editor",
|
||||
focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Deselect text in header id attribute editor",
|
||||
focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Activate header class attribute editor",
|
||||
focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Deselect text in header class attribute editor",
|
||||
focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Activate header new attribute editor",
|
||||
focused: "header.editor.newAttr.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Circle back and activate header tag editor again",
|
||||
focused: "header.editor.tag.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Circle back and activate header new attribute editor again",
|
||||
focused: "header.editor.newAttr.inplaceEditor.input",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { shiftKey: true }
|
||||
options: { shiftKey: true },
|
||||
},
|
||||
{
|
||||
desc: "Exit edit mode and keep focus on header new attribute",
|
||||
focused: "header.focusableElms.3",
|
||||
activedescendant: "header.tagLine",
|
||||
key: "VK_ESCAPE",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Move the selection to body and reset focus to container tree",
|
||||
|
|
@ -234,7 +234,7 @@ const TESTS = [
|
|||
activedescendant: "body.tagLine",
|
||||
key: "VK_UP",
|
||||
options: { },
|
||||
waitFor: "inspector-updated"
|
||||
waitFor: "inspector-updated",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -32,49 +32,49 @@ const TESTS = [
|
|||
activedescendant: "div.tagLine",
|
||||
key: "VK_DOWN",
|
||||
options: { },
|
||||
waitFor: "inspector-updated"
|
||||
waitFor: "inspector-updated",
|
||||
},
|
||||
{
|
||||
desc: "Focus on header tag",
|
||||
focused: "div.focusableElms.0",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "VK_RETURN",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Activate header tag editor",
|
||||
focused: "div.editor.tag.inplaceEditor.input",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "VK_RETURN",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Activate header id attribute editor",
|
||||
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Deselect text in header id attribute editor",
|
||||
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Move the cursor to the left",
|
||||
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "VK_LEFT",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Modify the attribute",
|
||||
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "A",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Commit the attribute change",
|
||||
|
|
@ -82,21 +82,21 @@ const TESTS = [
|
|||
activedescendant: "div.tagLine",
|
||||
key: "VK_RETURN",
|
||||
options: { },
|
||||
waitFor: "inspector-updated"
|
||||
waitFor: "inspector-updated",
|
||||
},
|
||||
{
|
||||
desc: "Tab and focus on header class attribute",
|
||||
focused: "div.focusableElms.2",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
{
|
||||
desc: "Tab and focus on header new attribute node",
|
||||
focused: "div.focusableElms.3",
|
||||
activedescendant: "div.tagLine",
|
||||
key: "VK_TAB",
|
||||
options: { }
|
||||
options: { },
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const TEST_DATA = [
|
|||
["VK_RIGHT", "style=\"display: inherit; color :chartreuse !important; ",
|
||||
55, 55, false],
|
||||
["VK_RETURN", "style=\"display: inherit; color :chartreuse !important;\"",
|
||||
-1, -1, false]
|
||||
-1, -1, false],
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const TEST_DATA_DOUBLE = [
|
|||
["t", "style=\"color:beige\" dat", 23, 23, false],
|
||||
["a", "style=\"color:beige\" data", 24, 24, false],
|
||||
["VK_RETURN", "style=\"color:beige\"",
|
||||
-1, -1, false]
|
||||
-1, -1, false],
|
||||
];
|
||||
|
||||
// Check that single quote attribute is also supported
|
||||
|
|
@ -64,7 +64,7 @@ const TEST_DATA_SINGLE = [
|
|||
["t", "style='color:beige' dat", 23, 23, false],
|
||||
["a", "style='color:beige' data", 24, 24, false],
|
||||
["VK_RETURN", "style=\"color:beige\"",
|
||||
-1, -1, false]
|
||||
-1, -1, false],
|
||||
];
|
||||
|
||||
// Check that autocompletion is still enabled after using url('1)
|
||||
|
|
@ -94,7 +94,7 @@ const TEST_DATA_INNER = [
|
|||
["VK_RIGHT", "style=\"background:url('1'); color", 33, 33, false],
|
||||
[":", "style=\"background:url('1'); color:aliceblue", 34, 43, true],
|
||||
["b", "style=\"background:url('1'); color:beige", 35, 39, true],
|
||||
["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false]
|
||||
["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false],
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const TEST_DATA = [
|
|||
[":", "style=\"color:beige;padding:inherit;\"", 27, 34, true],
|
||||
["0", "style=\"color:beige;padding:0;\"", 28, 28, false],
|
||||
["VK_RETURN", "style=\"color:beige;padding:0;\"",
|
||||
-1, -1, false]
|
||||
-1, -1, false],
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const TEST_DATA = [
|
|||
selector: "#grid",
|
||||
before: {
|
||||
textContent: "grid",
|
||||
visible: true
|
||||
visible: true,
|
||||
},
|
||||
changeStyle: async function(testActor) {
|
||||
await testActor.eval(`
|
||||
|
|
@ -42,14 +42,14 @@ const TEST_DATA = [
|
|||
`);
|
||||
},
|
||||
after: {
|
||||
visible: false
|
||||
}
|
||||
visible: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Reusing the 'grid' node, updating the display to 'grid again",
|
||||
selector: "#grid",
|
||||
before: {
|
||||
visible: false
|
||||
visible: false,
|
||||
},
|
||||
changeStyle: async function(testActor) {
|
||||
await testActor.eval(`
|
||||
|
|
@ -59,14 +59,14 @@ const TEST_DATA = [
|
|||
},
|
||||
after: {
|
||||
textContent: "grid",
|
||||
visible: true
|
||||
}
|
||||
visible: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Showing a 'grid' node by changing its style property",
|
||||
selector: "#block",
|
||||
before: {
|
||||
visible: false
|
||||
visible: false,
|
||||
},
|
||||
changeStyle: async function(testActor) {
|
||||
await testActor.eval(`
|
||||
|
|
@ -76,14 +76,14 @@ const TEST_DATA = [
|
|||
},
|
||||
after: {
|
||||
textContent: "grid",
|
||||
visible: true
|
||||
}
|
||||
visible: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
desc: "Showing a 'flex' node by removing its hidden attribute",
|
||||
selector: "#flex",
|
||||
before: {
|
||||
visible: false
|
||||
visible: false,
|
||||
},
|
||||
changeStyle: async function(testActor) {
|
||||
await testActor.eval(`
|
||||
|
|
@ -92,9 +92,9 @@ const TEST_DATA = [
|
|||
},
|
||||
after: {
|
||||
textContent: "flex",
|
||||
visible: true
|
||||
}
|
||||
}
|
||||
visible: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ add_task(async function() {
|
|||
markup._onMouseMove({
|
||||
preventDefault: () => {},
|
||||
target: markup.doc.body,
|
||||
pageY: viewHeight + markup.doc.defaultView.scrollY
|
||||
pageY: viewHeight + markup.doc.defaultView.scrollY,
|
||||
});
|
||||
|
||||
const bottomScrollPos = await waitForScrollStop(markup.doc);
|
||||
|
|
@ -37,7 +37,7 @@ add_task(async function() {
|
|||
markup._onMouseMove({
|
||||
preventDefault: () => {},
|
||||
target: markup.doc.body,
|
||||
pageY: markup.doc.defaultView.scrollY
|
||||
pageY: markup.doc.defaultView.scrollY,
|
||||
});
|
||||
|
||||
const topScrollPos = await waitForScrollStop(markup.doc);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ add_task(async function() {
|
|||
markup._onMouseMove({
|
||||
preventDefault: () => {},
|
||||
target: markup.doc.body,
|
||||
pageY: viewHeight + markup.doc.defaultView.scrollY
|
||||
pageY: viewHeight + markup.doc.defaultView.scrollY,
|
||||
});
|
||||
|
||||
const bottomScrollPos = await waitForScrollStop(markup.doc);
|
||||
|
|
@ -35,7 +35,7 @@ add_task(async function() {
|
|||
markup._onMouseMove({
|
||||
preventDefault: () => {},
|
||||
target: markup.doc.body,
|
||||
pageY: markup.doc.defaultView.scrollY
|
||||
pageY: markup.doc.defaultView.scrollY,
|
||||
});
|
||||
|
||||
const topScrollPos = await waitForScrollStop(markup.doc);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const TEST_DATA = [
|
|||
// Getting the comment node.
|
||||
return getContainerForNodeFront(nodes[1], inspector);
|
||||
},
|
||||
draggable: true
|
||||
draggable: true,
|
||||
},
|
||||
{
|
||||
node: async function(inspector) {
|
||||
|
|
@ -37,8 +37,8 @@ const TEST_DATA = [
|
|||
// Getting the ::before pseudo element.
|
||||
return getContainerForNodeFront(nodes[0], inspector);
|
||||
},
|
||||
draggable: false
|
||||
}
|
||||
draggable: false,
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL,
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM0"
|
||||
"DOM0",
|
||||
],
|
||||
handler: "function onload(event) {\n" +
|
||||
" init();\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#container",
|
||||
|
|
@ -37,16 +37,16 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":45",
|
||||
attributes: [
|
||||
"Capturing",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function mouseoverHandler(event) {\n" +
|
||||
" if (event.target.id !== \"container\") {\n" +
|
||||
" let output = document.getElementById(\"output\");\n" +
|
||||
" output.textContent = event.target.textContent;\n" +
|
||||
" }\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#multiple",
|
||||
|
|
@ -56,32 +56,32 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":52",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function clickHandler(event) {\n" +
|
||||
" let output = document.getElementById(\"output\");\n" +
|
||||
" output.textContent = \"click\";\n" +
|
||||
"}"
|
||||
"}",
|
||||
},
|
||||
{
|
||||
type: "mouseup",
|
||||
filename: TEST_URL + ":57",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function mouseupHandler(event) {\n" +
|
||||
" let output = document.getElementById(\"output\");\n" +
|
||||
" output.textContent = \"mouseup\";\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
// #noevents tests check that dynamically added events are properly displayed
|
||||
// in the markupview
|
||||
{
|
||||
selector: "#noevents",
|
||||
expected: []
|
||||
expected: [],
|
||||
},
|
||||
{
|
||||
selector: "#noevents",
|
||||
|
|
@ -96,13 +96,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":72",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function noeventsClickHandler(event) {\n" +
|
||||
" alert(\"noevents has an event listener\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#noevents",
|
||||
|
|
@ -112,7 +112,7 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
"window.wrappedJSObject.removeNoeventsClickHandler();");
|
||||
await nodeMutated;
|
||||
},
|
||||
expected: []
|
||||
expected: [],
|
||||
},
|
||||
{
|
||||
selector: "#DOM0",
|
||||
|
|
@ -122,13 +122,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL,
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM0"
|
||||
"DOM0",
|
||||
],
|
||||
handler: "function onclick(event) {\n" +
|
||||
" alert('DOM0')\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#handleevent",
|
||||
|
|
@ -138,14 +138,14 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":67",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function(blah) {\n" +
|
||||
" alert(\"handleEvent\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
}
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
|
|
@ -21,44 +21,44 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":39",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "() => {\n" +
|
||||
" alert(\"Fat arrow without params!\");\n" +
|
||||
"}"
|
||||
"}",
|
||||
},
|
||||
{
|
||||
type: "click",
|
||||
filename: TEST_URL + ":43",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "event => {\n" +
|
||||
" alert(\"Fat arrow with 1 param!\");\n" +
|
||||
"}"
|
||||
"}",
|
||||
},
|
||||
{
|
||||
type: "click",
|
||||
filename: TEST_URL + ":47",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "(event, foo, bar) => {\n" +
|
||||
" alert(\"Fat arrow with 3 params!\");\n" +
|
||||
"}"
|
||||
"}",
|
||||
},
|
||||
{
|
||||
type: "click",
|
||||
filename: TEST_URL + ":51",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "b => b"
|
||||
}
|
||||
]
|
||||
handler: "b => b",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#bound",
|
||||
|
|
@ -68,13 +68,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":62",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function(event) {\n" +
|
||||
" alert(\"Bound event\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#boundhe",
|
||||
|
|
@ -84,13 +84,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":85",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function() {\n" +
|
||||
" alert(\"boundHandleEvent\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#comment-inline",
|
||||
|
|
@ -100,13 +100,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":91",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function functionProceededByInlineComment() {\n" +
|
||||
" alert(\"comment-inline\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#comment-streaming",
|
||||
|
|
@ -116,13 +116,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":96",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function functionProceededByStreamingComment() {\n" +
|
||||
" alert(\"comment-streaming\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#anon-object-method",
|
||||
|
|
@ -132,13 +132,13 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":71",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function() {\n" +
|
||||
" alert(\"obj.anonObjectMethod\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: "#object-method",
|
||||
|
|
@ -148,14 +148,14 @@ const TEST_DATA = [ // eslint-disable-line
|
|||
filename: TEST_URL + ":75",
|
||||
attributes: [
|
||||
"Bubbling",
|
||||
"DOM2"
|
||||
"DOM2",
|
||||
],
|
||||
handler: "function kay() {\n" +
|
||||
" alert(\"obj.objectMethod\");\n" +
|
||||
"}"
|
||||
}
|
||||
]
|
||||
}
|
||||
"}",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче