зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset 94720e6beec3 (bug 1343167) for still failing browser_inspector_textbox-menu.js too often
CLOSED TREE
This commit is contained in:
Phil Ringnalda
Родитель
b35f2c4c2b
Коммит
92aeb9b04c
|
|
@ -183,10 +183,6 @@ BoxModel.prototype = {
|
|||
* Hides the box-model highlighter on the currently selected element.
|
||||
*/
|
||||
onHideBoxModelHighlighter() {
|
||||
if (!this.inspector) {
|
||||
return;
|
||||
}
|
||||
|
||||
let toolbox = this.inspector.toolbox;
|
||||
toolbox.highlighterUtils.unhighlight();
|
||||
},
|
||||
|
|
@ -309,10 +305,6 @@ BoxModel.prototype = {
|
|||
return;
|
||||
}
|
||||
|
||||
if (!this.inspector) {
|
||||
return;
|
||||
}
|
||||
|
||||
let node = this.inspector.selection.nodeFront;
|
||||
this.inspector.pageStyle.getLayout(node, {
|
||||
autoMargins: true,
|
||||
|
|
@ -332,10 +324,6 @@ BoxModel.prototype = {
|
|||
* Options passed to the highlighter actor.
|
||||
*/
|
||||
onShowBoxModelHighlighter(options = {}) {
|
||||
if (!this.inspector) {
|
||||
return;
|
||||
}
|
||||
|
||||
let toolbox = this.inspector.toolbox;
|
||||
let nodeFront = this.inspector.selection.nodeFront;
|
||||
|
||||
|
|
|
|||
|
|
@ -30,14 +30,6 @@ module.exports = createClass({
|
|||
|
||||
mixins: [ addons.PureRenderMixin ],
|
||||
|
||||
onKeyDown(event) {
|
||||
let { target } = event;
|
||||
|
||||
if (target == this.boxModelContainer) {
|
||||
this.boxModelMain.onKeyDown(event);
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
let {
|
||||
boxModel,
|
||||
|
|
@ -53,19 +45,10 @@ module.exports = createClass({
|
|||
return dom.div(
|
||||
{
|
||||
className: "boxmodel-container",
|
||||
tabIndex: 0,
|
||||
ref: div => {
|
||||
this.boxModelContainer = div;
|
||||
},
|
||||
onKeyDown: this.onKeyDown,
|
||||
},
|
||||
BoxModelMain({
|
||||
boxModel,
|
||||
boxModelContainer: this.boxModelContainer,
|
||||
setSelectedNode,
|
||||
ref: boxModelMain => {
|
||||
this.boxModelMain = boxModelMain;
|
||||
},
|
||||
onHideBoxModelHighlighter,
|
||||
onShowBoxModelEditor,
|
||||
onShowBoxModelHighlighter,
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@ module.exports = createClass({
|
|||
propTypes: {
|
||||
box: PropTypes.string.isRequired,
|
||||
direction: PropTypes.string,
|
||||
focusable: PropTypes.bool.isRequired,
|
||||
level: PropTypes.string,
|
||||
property: PropTypes.string.isRequired,
|
||||
textContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||
onShowBoxModelEditor: PropTypes.func.isRequired,
|
||||
|
|
@ -30,7 +28,7 @@ module.exports = createClass({
|
|||
let { property, onShowBoxModelEditor } = this.props;
|
||||
|
||||
editableItem({
|
||||
element: this.boxModelEditable,
|
||||
element: this.refs.span,
|
||||
}, (element, event) => {
|
||||
onShowBoxModelEditor(element, event, property);
|
||||
});
|
||||
|
|
@ -40,8 +38,6 @@ module.exports = createClass({
|
|||
let {
|
||||
box,
|
||||
direction,
|
||||
focusable,
|
||||
level,
|
||||
property,
|
||||
textContent,
|
||||
} = this.props;
|
||||
|
|
@ -61,11 +57,8 @@ module.exports = createClass({
|
|||
{
|
||||
className: "boxmodel-editable",
|
||||
"data-box": box,
|
||||
tabIndex: box === level && focusable ? 0 : -1,
|
||||
title: property,
|
||||
ref: span => {
|
||||
this.boxModelEditable = span;
|
||||
},
|
||||
ref: "span",
|
||||
},
|
||||
textContent
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,13 +6,10 @@
|
|||
|
||||
const { addons, createClass, createFactory, DOM: dom, PropTypes } =
|
||||
require("devtools/client/shared/vendor/react");
|
||||
const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
|
||||
const { KeyCodes } = require("devtools/client/shared/keycodes");
|
||||
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
|
||||
const BoxModelEditable = createFactory(require("./BoxModelEditable"));
|
||||
|
||||
// Reps
|
||||
const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
|
||||
const Rep = createFactory(REPS.Rep);
|
||||
|
|
@ -31,7 +28,6 @@ module.exports = createClass({
|
|||
|
||||
propTypes: {
|
||||
boxModel: PropTypes.shape(Types.boxModel).isRequired,
|
||||
boxModelContainer: PropTypes.object,
|
||||
setSelectedNode: PropTypes.func.isRequired,
|
||||
onHideBoxModelHighlighter: PropTypes.func.isRequired,
|
||||
onShowBoxModelEditor: PropTypes.func.isRequired,
|
||||
|
|
@ -41,90 +37,11 @@ module.exports = createClass({
|
|||
|
||||
mixins: [ addons.PureRenderMixin ],
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
activeDescendant: null,
|
||||
focusable: false,
|
||||
};
|
||||
},
|
||||
|
||||
componentDidUpdate() {
|
||||
let displayPosition = this.getDisplayPosition();
|
||||
let isContentBox = this.getContextBox();
|
||||
|
||||
this.layouts = {
|
||||
"position": new Map([
|
||||
[KeyCodes.DOM_VK_ESCAPE, this.positionLayout],
|
||||
[KeyCodes.DOM_VK_DOWN, this.marginLayout],
|
||||
[KeyCodes.DOM_VK_RETURN, this.positionEditable],
|
||||
[KeyCodes.DOM_VK_UP, null],
|
||||
["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]
|
||||
]),
|
||||
"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]
|
||||
]),
|
||||
"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]
|
||||
]),
|
||||
"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]
|
||||
])
|
||||
};
|
||||
},
|
||||
|
||||
getAriaActiveDescendant() {
|
||||
let { activeDescendant } = this.state;
|
||||
|
||||
if (!activeDescendant) {
|
||||
let displayPosition = this.getDisplayPosition();
|
||||
let nextLayout = displayPosition ? this.positionLayout : this.marginLayout;
|
||||
activeDescendant = nextLayout.getAttribute("data-box");
|
||||
this.setAriaActive(nextLayout);
|
||||
}
|
||||
|
||||
return activeDescendant;
|
||||
},
|
||||
|
||||
getBorderOrPaddingValue(property) {
|
||||
let { layout } = this.props.boxModel;
|
||||
return layout[property] ? parseFloat(layout[property]) : "-";
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the layout box sizing is context box and false otherwise.
|
||||
*/
|
||||
getContextBox() {
|
||||
let { layout } = this.props.boxModel;
|
||||
return layout["box-sizing"] == "content-box";
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the position is displayed and false otherwise.
|
||||
*/
|
||||
getDisplayPosition() {
|
||||
let { layout } = this.props.boxModel;
|
||||
return layout.position && layout.position != "static";
|
||||
},
|
||||
|
||||
getHeightValue(property) {
|
||||
let { layout } = this.props.boxModel;
|
||||
|
||||
|
|
@ -200,67 +117,13 @@ module.exports = createClass({
|
|||
return value;
|
||||
},
|
||||
|
||||
/**
|
||||
* Move the focus to the next/previous editable element of the current layout.
|
||||
*
|
||||
* @param {Element} target
|
||||
* Node to be observed
|
||||
* @param {Boolean} shiftKey
|
||||
* Determines if shiftKey was pressed
|
||||
* @param {String} level
|
||||
* Current active layout
|
||||
*/
|
||||
moveFocus: function ({ target, shiftKey }, level) {
|
||||
let editBoxes = [
|
||||
...findDOMNode(this).querySelectorAll(`[data-box="${level}"].boxmodel-editable`)
|
||||
];
|
||||
let editingMode = target.tagName === "input";
|
||||
// target.nextSibling is input field
|
||||
let position = editingMode ? editBoxes.indexOf(target.nextSibling)
|
||||
: editBoxes.indexOf(target);
|
||||
|
||||
if (position === editBoxes.length - 1 && !shiftKey) {
|
||||
position = 0;
|
||||
} else if (position === 0 && shiftKey) {
|
||||
position = editBoxes.length - 1;
|
||||
} else {
|
||||
shiftKey ? position-- : position++;
|
||||
}
|
||||
|
||||
let editBox = editBoxes[position];
|
||||
editBox.focus();
|
||||
|
||||
if (editingMode) {
|
||||
editBox.click();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Active aria-level set to current layout.
|
||||
*
|
||||
* @param {Element} nextLayout
|
||||
* Element of next layout that user has navigated to
|
||||
*/
|
||||
setAriaActive(nextLayout) {
|
||||
let { boxModelContainer } = this.props;
|
||||
|
||||
// We set this attribute for testing purposes.
|
||||
if (boxModelContainer) {
|
||||
boxModelContainer.setAttribute("activedescendant", nextLayout.className);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
activeDescendant: nextLayout.getAttribute("data-box"),
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
|
||||
* translate nodeFront to a grip-like object that can be used with an ElementNode rep.
|
||||
*
|
||||
* @param {NodeFront} nodeFront
|
||||
* @params {NodeFront} nodeFront
|
||||
* The NodeFront for which we want to create a grip-like object.
|
||||
* @return {Object} a grip-like object that can be used with Reps.
|
||||
* @returns {Object} a grip-like object that can be used with Reps.
|
||||
*/
|
||||
translateNodeFrontToGrip(nodeFront) {
|
||||
let {
|
||||
|
|
@ -317,95 +180,6 @@ module.exports = createClass({
|
|||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle keyboard navigation and focus for box model layouts.
|
||||
*
|
||||
* Updates active layout on arrow key navigation
|
||||
* Focuses next layout's editboxes on enter key
|
||||
* Unfocuses current layout's editboxes when active layout changes
|
||||
* Controls tabbing between editBoxes
|
||||
*
|
||||
* @param {Event} event
|
||||
* The event triggered by a keypress on the box model
|
||||
*/
|
||||
onKeyDown(event) {
|
||||
let { target, keyCode } = event;
|
||||
let isEditable = target._editable || target.editor;
|
||||
|
||||
let level = this.getAriaActiveDescendant();
|
||||
let editingMode = target.tagName === "input";
|
||||
|
||||
switch (keyCode) {
|
||||
case KeyCodes.DOM_VK_RETURN:
|
||||
if (!isEditable) {
|
||||
this.setState({ focusable: true });
|
||||
let editableBox = this.layouts[level].get(keyCode);
|
||||
if (editableBox) {
|
||||
editableBox.boxModelEditable.focus();
|
||||
}
|
||||
}
|
||||
break;
|
||||
case KeyCodes.DOM_VK_DOWN:
|
||||
case KeyCodes.DOM_VK_UP:
|
||||
if (!editingMode) {
|
||||
event.preventDefault();
|
||||
this.setState({ focusable: false });
|
||||
|
||||
let nextLayout = this.layouts[level].get(keyCode);
|
||||
this.setAriaActive(nextLayout);
|
||||
|
||||
if (target && target._editable) {
|
||||
target.blur();
|
||||
}
|
||||
|
||||
this.props.boxModelContainer.focus();
|
||||
}
|
||||
break;
|
||||
case KeyCodes.DOM_VK_TAB:
|
||||
if (isEditable) {
|
||||
event.preventDefault();
|
||||
this.moveFocus(event, level);
|
||||
}
|
||||
break;
|
||||
case KeyCodes.DOM_VK_ESCAPE:
|
||||
if (target._editable) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.setState({ focusable: false });
|
||||
this.props.boxModelContainer.focus();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update aria-active on mouse click.
|
||||
*
|
||||
* @param {Event} event
|
||||
* The event triggered by a mouse click on the box model
|
||||
*/
|
||||
onLevelClick(event) {
|
||||
let { target } = event;
|
||||
let displayPosition = this.getDisplayPosition();
|
||||
let isContentBox = this.getContextBox();
|
||||
|
||||
// Avoid switching the aria active descendant to the position or content layout
|
||||
// if those are not editable.
|
||||
if ((!displayPosition && target == this.positionLayout) ||
|
||||
(!isContentBox && target == this.contentLayout)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let nextLayout = this.layouts[target.getAttribute("data-box")].get("click");
|
||||
this.setAriaActive(nextLayout);
|
||||
|
||||
if (target && target._editable) {
|
||||
target.blur();
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
let {
|
||||
boxModel,
|
||||
|
|
@ -414,7 +188,6 @@ module.exports = createClass({
|
|||
} = this.props;
|
||||
let { layout, offsetParent } = boxModel;
|
||||
let { height, width, position } = layout;
|
||||
let { activeDescendant: level, focusable } = this.state;
|
||||
|
||||
let displayOffsetParent = offsetParent && layout.position === "absolute";
|
||||
|
||||
|
|
@ -428,7 +201,7 @@ module.exports = createClass({
|
|||
let paddingBottom = this.getBorderOrPaddingValue("padding-bottom");
|
||||
let paddingLeft = this.getBorderOrPaddingValue("padding-left");
|
||||
|
||||
let displayPosition = this.getDisplayPosition();
|
||||
let displayPosition = layout.position && layout.position != "static";
|
||||
let positionTop = this.getPositionValue("top");
|
||||
let positionRight = this.getPositionValue("right");
|
||||
let positionBottom = this.getPositionValue("bottom");
|
||||
|
|
@ -449,12 +222,7 @@ module.exports = createClass({
|
|||
},
|
||||
BoxModelEditable({
|
||||
box: "content",
|
||||
focusable,
|
||||
level,
|
||||
property: "width",
|
||||
ref: editable => {
|
||||
this.contentEditable = editable;
|
||||
},
|
||||
textContent: width,
|
||||
onShowBoxModelEditor
|
||||
}),
|
||||
|
|
@ -464,8 +232,6 @@ module.exports = createClass({
|
|||
),
|
||||
BoxModelEditable({
|
||||
box: "content",
|
||||
focusable,
|
||||
level,
|
||||
property: "height",
|
||||
textContent: height,
|
||||
onShowBoxModelEditor
|
||||
|
|
@ -487,12 +253,6 @@ module.exports = createClass({
|
|||
return dom.div(
|
||||
{
|
||||
className: "boxmodel-main",
|
||||
"data-box": "position",
|
||||
ref: div => {
|
||||
this.positionLayout = div;
|
||||
},
|
||||
onClick: this.onLevelClick,
|
||||
onKeyDown: this.onKeyDown,
|
||||
onMouseOver: this.onHighlightMouseOver,
|
||||
onMouseOut: this.props.onHideBoxModelHighlighter,
|
||||
},
|
||||
|
|
@ -541,9 +301,6 @@ module.exports = createClass({
|
|||
className: "boxmodel-margins",
|
||||
"data-box": "margin",
|
||||
title: BOXMODEL_L10N.getStr("boxmodel.margin"),
|
||||
ref: div => {
|
||||
this.marginLayout = div;
|
||||
},
|
||||
},
|
||||
dom.span(
|
||||
{
|
||||
|
|
@ -558,9 +315,6 @@ module.exports = createClass({
|
|||
className: "boxmodel-borders",
|
||||
"data-box": "border",
|
||||
title: BOXMODEL_L10N.getStr("boxmodel.border"),
|
||||
ref: div => {
|
||||
this.borderLayout = div;
|
||||
},
|
||||
},
|
||||
dom.span(
|
||||
{
|
||||
|
|
@ -575,17 +329,11 @@ module.exports = createClass({
|
|||
className: "boxmodel-paddings",
|
||||
"data-box": "padding",
|
||||
title: BOXMODEL_L10N.getStr("boxmodel.padding"),
|
||||
ref: div => {
|
||||
this.paddingLayout = div;
|
||||
},
|
||||
},
|
||||
dom.div({
|
||||
className: "boxmodel-contents",
|
||||
"data-box": "content",
|
||||
title: BOXMODEL_L10N.getStr("boxmodel.content"),
|
||||
ref: div => {
|
||||
this.contentLayout = div;
|
||||
},
|
||||
})
|
||||
)
|
||||
)
|
||||
|
|
@ -595,12 +343,7 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "position",
|
||||
direction: "top",
|
||||
focusable,
|
||||
level,
|
||||
property: "position-top",
|
||||
ref: editable => {
|
||||
this.positionEditable = editable;
|
||||
},
|
||||
textContent: positionTop,
|
||||
onShowBoxModelEditor,
|
||||
})
|
||||
|
|
@ -610,8 +353,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "position",
|
||||
direction: "right",
|
||||
focusable,
|
||||
level,
|
||||
property: "position-right",
|
||||
textContent: positionRight,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -622,8 +363,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "position",
|
||||
direction: "bottom",
|
||||
focusable,
|
||||
level,
|
||||
property: "position-bottom",
|
||||
textContent: positionBottom,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -634,8 +373,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "position",
|
||||
direction: "left",
|
||||
focusable,
|
||||
level,
|
||||
property: "position-left",
|
||||
textContent: positionLeft,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -645,20 +382,13 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "margin",
|
||||
direction: "top",
|
||||
focusable,
|
||||
level,
|
||||
property: "margin-top",
|
||||
ref: editable => {
|
||||
this.marginEditable = editable;
|
||||
},
|
||||
textContent: marginTop,
|
||||
onShowBoxModelEditor,
|
||||
}),
|
||||
BoxModelEditable({
|
||||
box: "margin",
|
||||
direction: "right",
|
||||
focusable,
|
||||
level,
|
||||
property: "margin-right",
|
||||
textContent: marginRight,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -666,8 +396,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "margin",
|
||||
direction: "bottom",
|
||||
focusable,
|
||||
level,
|
||||
property: "margin-bottom",
|
||||
textContent: marginBottom,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -675,8 +403,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "margin",
|
||||
direction: "left",
|
||||
focusable,
|
||||
level,
|
||||
property: "margin-left",
|
||||
textContent: marginLeft,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -684,20 +410,13 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "border",
|
||||
direction: "top",
|
||||
focusable,
|
||||
level,
|
||||
property: "border-top-width",
|
||||
ref: editable => {
|
||||
this.borderEditable = editable;
|
||||
},
|
||||
textContent: borderTop,
|
||||
onShowBoxModelEditor,
|
||||
}),
|
||||
BoxModelEditable({
|
||||
box: "border",
|
||||
direction: "right",
|
||||
focusable,
|
||||
level,
|
||||
property: "border-right-width",
|
||||
textContent: borderRight,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -705,8 +424,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "border",
|
||||
direction: "bottom",
|
||||
focusable,
|
||||
level,
|
||||
property: "border-bottom-width",
|
||||
textContent: borderBottom,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -714,8 +431,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "border",
|
||||
direction: "left",
|
||||
focusable,
|
||||
level,
|
||||
property: "border-left-width",
|
||||
textContent: borderLeft,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -723,20 +438,13 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "padding",
|
||||
direction: "top",
|
||||
focusable,
|
||||
level,
|
||||
property: "padding-top",
|
||||
ref: editable => {
|
||||
this.paddingEditable = editable;
|
||||
},
|
||||
textContent: paddingTop,
|
||||
onShowBoxModelEditor,
|
||||
}),
|
||||
BoxModelEditable({
|
||||
box: "padding",
|
||||
direction: "right",
|
||||
focusable,
|
||||
level,
|
||||
property: "padding-right",
|
||||
textContent: paddingRight,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -744,8 +452,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "padding",
|
||||
direction: "bottom",
|
||||
focusable,
|
||||
level,
|
||||
property: "padding-bottom",
|
||||
textContent: paddingBottom,
|
||||
onShowBoxModelEditor,
|
||||
|
|
@ -753,8 +459,6 @@ module.exports = createClass({
|
|||
BoxModelEditable({
|
||||
box: "padding",
|
||||
direction: "left",
|
||||
focusable,
|
||||
level,
|
||||
property: "padding-left",
|
||||
textContent: paddingLeft,
|
||||
onShowBoxModelEditor,
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ support-files =
|
|||
[browser_boxmodel_editablemodel_stylerules.js]
|
||||
[browser_boxmodel_guides.js]
|
||||
[browser_boxmodel_navigation.js]
|
||||
skip-if = true # Bug 1336198
|
||||
[browser_boxmodel_offsetparent.js]
|
||||
[browser_boxmodel_positions.js]
|
||||
[browser_boxmodel_properties.js]
|
||||
|
|
|
|||
|
|
@ -28,65 +28,49 @@ add_task(function* () {
|
|||
|
||||
function* testInitialFocus(inspector, view) {
|
||||
info("Test that the focus is on margin layout.");
|
||||
let viewdoc = view.document;
|
||||
let boxmodel = viewdoc.querySelector(".boxmodel-container");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-main",
|
||||
"Should be set to the position layout.");
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-margins",
|
||||
"Should be set to the margin layout.");
|
||||
}
|
||||
|
||||
function* testChangingLevels(inspector, view) {
|
||||
info("Test that using arrow keys updates level.");
|
||||
let viewdoc = view.document;
|
||||
let boxmodel = viewdoc.querySelector(".boxmodel-container");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {});
|
||||
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-margins",
|
||||
"Should be set to the margin layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-borders",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-borders",
|
||||
"Should be set to the border layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-paddings",
|
||||
"Should be set to the padding layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-contents",
|
||||
"Should be set to the content layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-paddings",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-padding",
|
||||
"Should be set to the padding layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-borders",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-borders",
|
||||
"Should be set to the border layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-margins",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-margins",
|
||||
"Should be set to the margin layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", {});
|
||||
is(boxmodel.getAttribute("activedescendant"), "boxmodel-main",
|
||||
"Should be set to the position layout.");
|
||||
}
|
||||
|
||||
function* testTabbingWrapAround(inspector, view) {
|
||||
info("Test that using arrow keys updates level.");
|
||||
let viewdoc = view.document;
|
||||
let boxmodel = viewdoc.querySelector(".boxmodel-container");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
|
||||
let editLevel = boxmodel.getAttribute("activedescendant");
|
||||
let dataLevel = viewdoc.querySelector(`.${editLevel}`).getAttribute("data-box");
|
||||
let editLevel = boxmodel.getAttribute("aria-activedescendant");
|
||||
let dataLevel = viewdoc.getElementById(editLevel).getAttribute("data-box");
|
||||
let editBoxes = [...viewdoc.querySelectorAll(
|
||||
`[data-box="${dataLevel}"].boxmodel-editable`)];
|
||||
|
||||
|
|
@ -102,19 +86,18 @@ function* testTabbingWrapAround(inspector, view) {
|
|||
|
||||
function* testChangingLevelsByClicking(inspector, view) {
|
||||
info("Test that clicking on levels updates level.");
|
||||
let viewdoc = view.document;
|
||||
let boxmodel = viewdoc.querySelector(".boxmodel-container");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
|
||||
let marginLayout = viewdoc.querySelector(".boxmodel-margins");
|
||||
let borderLayout = viewdoc.querySelector(".boxmodel-borders");
|
||||
let paddingLayout = viewdoc.querySelector(".boxmodel-paddings");
|
||||
let contentLayout = viewdoc.querySelector(".boxmodel-contents");
|
||||
let layouts = [contentLayout, paddingLayout, borderLayout, marginLayout];
|
||||
let marginLayout = viewdoc.getElementById("boxmodel-margins");
|
||||
let borderLayout = viewdoc.getElementById("boxmodel-borders");
|
||||
let paddingLayout = viewdoc.getElementById("boxmodel-padding");
|
||||
let layouts = [paddingLayout, borderLayout, marginLayout];
|
||||
|
||||
layouts.forEach(layout => {
|
||||
layout.click();
|
||||
is(boxmodel.getAttribute("activedescendant"), layout.className,
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), layout.id,
|
||||
"Should be set to" + layout.getAttribute("data-box") + "layout.");
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
|
||||
<div id="computedview-container">
|
||||
<div id="computedview-container-focusable" tabindex="-1">
|
||||
<div id="boxmodel-wrapper">
|
||||
<div id="boxmodel-wrapper" tabindex="0">
|
||||
</div>
|
||||
|
||||
<div id="propertyContainer" class="theme-separator" tabindex="0" dir="ltr">
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
*/
|
||||
|
||||
.boxmodel-container {
|
||||
/* The view will grow bigger as the window gets resized, until 400px */
|
||||
max-width: 400px;
|
||||
margin: 0px auto;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -29,11 +33,9 @@
|
|||
position: relative;
|
||||
color: var(--theme-selection-color);
|
||||
/* Make sure there is some space between the window's edges and the regions */
|
||||
margin: 14px auto;
|
||||
margin: 14px 14px 4px 14px;
|
||||
width: calc(100% - 2 * 14px);
|
||||
min-width: 240px;
|
||||
/* The view will grow bigger as the window gets resized, until 400px */
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.boxmodel-box {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче