Backed out 2 changesets (bug 1343167) for mass failures in browser_inspector_textbox-menu.js
authorPhil Ringnalda <philringnalda@gmail.com>
Thu, 06 Apr 2017 21:01:43 -0700
changeset 351647 10ea10d9993c9701e5525928257a589dea2c05d8
parent 351646 1518ee478393cbc6ee150b47ce7f673249439d8b
child 351701 ee04556f7cbb7b4e0f0fa0352c08cd94e67d11de
child 351787 a3ca04f6379c153f9106cfb6a0a1d5b461039356
push id31617
push userphilringnalda@gmail.com
push dateFri, 07 Apr 2017 04:01:55 +0000
treeherdermozilla-central@10ea10d9993c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1343167
milestone55.0a1
backs out6aa495cd990886c310b01386d8b02a17d5603890
98d4fa0f8bf8bfe924dbc747c04c6867e00ddd57
first release with
nightly linux32
10ea10d9993c / 55.0a1 / 20170407100252 / files
nightly linux64
10ea10d9993c / 55.0a1 / 20170407100252 / files
nightly mac
10ea10d9993c / 55.0a1 / 20170407030233 / files
nightly win32
10ea10d9993c / 55.0a1 / 20170407030233 / files
nightly win64
10ea10d9993c / 55.0a1 / 20170407030233 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Backed out 2 changesets (bug 1343167) for mass failures in browser_inspector_textbox-menu.js Backed out changeset 6aa495cd9908 (bug 1343167) Backed out changeset 98d4fa0f8bf8 (bug 1343167)
devtools/client/inspector/boxmodel/components/BoxModel.js
devtools/client/inspector/boxmodel/components/BoxModelEditable.js
devtools/client/inspector/boxmodel/components/BoxModelMain.js
devtools/client/inspector/boxmodel/test/browser.ini
devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
devtools/client/inspector/inspector.xhtml
devtools/client/themes/boxmodel.css
--- a/devtools/client/inspector/boxmodel/components/BoxModel.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModel.js
@@ -25,52 +25,35 @@ module.exports = createClass({
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
     onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGeometryEditor: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
-  onKeyDown(event) {
-    let { target } = event;
-
-    if (target == this.boxModelContainer) {
-      this.boxModelMain.onKeyDown(event);
-    }
-  },
-
   render() {
     let {
       boxModel,
       setSelectedNode,
       showBoxModelProperties,
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onToggleGeometryEditor,
     } = this.props;
 
     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,
         onShowBoxModelHighlighterForNode,
       }),
       BoxModelInfo({
         boxModel,
         onToggleGeometryEditor,
--- a/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
@@ -12,41 +12,37 @@ const LONG_TEXT_ROTATE_LIMIT = 3;
 
 module.exports = createClass({
 
   displayName: "BoxModelEditable",
 
   propTypes: {
     box: PropTypes.string.isRequired,
     direction: PropTypes.string,
-    focusable: PropTypes.bool.isRequired,
-    level: PropTypes.string.isRequired,
     property: PropTypes.string.isRequired,
     textContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   componentDidMount() {
     let { property, onShowBoxModelEditor } = this.props;
 
     editableItem({
-      element: this.boxModelEditable,
+      element: this.refs.span,
     }, (element, event) => {
       onShowBoxModelEditor(element, event, property);
     });
   },
 
   render() {
     let {
       box,
       direction,
-      focusable,
-      level,
       property,
       textContent,
     } = this.props;
 
     let rotate = direction &&
                  (direction == "left" || direction == "right") &&
                  box !== "position" &&
                  textContent.toString().length > LONG_TEXT_ROTATE_LIMIT;
@@ -56,20 +52,17 @@ module.exports = createClass({
         className: `boxmodel-${box}
                     ${direction ? " boxmodel-" + direction : "boxmodel-" + property}
                     ${rotate ? " boxmodel-rotate" : ""}`,
       },
       dom.span(
         {
           className: "boxmodel-editable",
           "data-box": box,
-          tabIndex: box === level && focusable ? 0 : -1,
           title: property,
-          ref: span => {
-            this.boxModelEditable = span;
-          },
+          ref: "span",
         },
         textContent
       )
     );
   },
 
 });
--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -1,23 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 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);
 
 const Types = require("../types");
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
@@ -26,110 +23,30 @@ const SHARED_STRINGS_URI = "devtools/cli
 const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
 
 module.exports = createClass({
 
   displayName: "BoxModelMain",
 
   propTypes: {
     boxModel: PropTypes.shape(Types.boxModel).isRequired,
-    boxModelContainer: PropTypes.object.isRequired,
     setSelectedNode: PropTypes.func.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
     onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
   },
 
   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;
 
     if (property == undefined) {
       return "-";
     }
 
     property -= parseFloat(layout["border-top-width"]) +
@@ -196,73 +113,22 @@ module.exports = createClass({
     } else {
       value = parsedValue;
     }
 
     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.
-    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
-   *         The NodeFront for which we want to create a grip-like object.
-   * @return {Object} a grip-like object that can be used with Reps.
+   * @params  {NodeFront} nodeFront
+   *          The NodeFront for which we want to create a grip-like object.
+   * @returns {Object} a grip-like object that can be used with Reps.
    */
   translateNodeFrontToGrip(nodeFront) {
     let {
       attributes
     } = nodeFront;
 
     // The main difference between NodeFront and grips is that attributes are treated as
     // a map in grips and as an array in NodeFronts.
@@ -309,105 +175,16 @@ module.exports = createClass({
 
     this.props.onShowBoxModelHighlighter({
       region,
       showOnly: region,
       onlyRegionArea: true,
     });
   },
 
-  /**
-   * 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,
       setSelectedNode,
       onShowBoxModelEditor,
     } = this.props;
     let { layout, offsetParent } = boxModel;
     let { height, width, position } = layout;
@@ -419,56 +196,47 @@ module.exports = createClass({
     let borderBottom = this.getBorderOrPaddingValue("border-bottom-width");
     let borderLeft = this.getBorderOrPaddingValue("border-left-width");
 
     let paddingTop = this.getBorderOrPaddingValue("padding-top");
     let paddingRight = this.getBorderOrPaddingValue("padding-right");
     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");
     let positionLeft = this.getPositionValue("left");
 
     let marginTop = this.getMarginValue("margin-top", "top");
     let marginRight = this.getMarginValue("margin-right", "right");
     let marginBottom = this.getMarginValue("margin-bottom", "bottom");
     let marginLeft = this.getMarginValue("margin-left", "left");
 
     height = this.getHeightValue(height);
     width = this.getWidthValue(width);
 
-    let { activeDescendant: level, focusable } = this.state;
-
     let contentBox = layout["box-sizing"] == "content-box" ?
       dom.p(
         {
           className: "boxmodel-size",
         },
         BoxModelEditable({
           box: "content",
-          focusable,
-          level,
           property: "width",
-          ref: editable => {
-            this.contentEditable = editable;
-          },
           textContent: width,
           onShowBoxModelEditor
         }),
         dom.span(
           {},
           "\u00D7"
         ),
         BoxModelEditable({
           box: "content",
-          focusable,
-          level,
           property: "height",
           textContent: height,
           onShowBoxModelEditor
         })
       )
       :
       dom.p(
         {
@@ -480,22 +248,16 @@ module.exports = createClass({
           },
           SHARED_L10N.getFormatStr("dimensions", width, height)
         )
       );
 
     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,
       },
       displayOffsetParent ?
         dom.span(
           {
             className: "boxmodel-offset-parent",
             "data-box": "offset-parent",
@@ -534,230 +296,174 @@ module.exports = createClass({
           },
           BOXMODEL_L10N.getStr("boxmodel.margin")
         ),
         dom.div(
           {
             className: "boxmodel-margins",
             "data-box": "margin",
             title: BOXMODEL_L10N.getStr("boxmodel.margin"),
-            ref: div => {
-              this.marginLayout = div;
-            },
           },
           dom.span(
             {
               className: "boxmodel-legend",
               "data-box": "border",
               title: BOXMODEL_L10N.getStr("boxmodel.border"),
             },
             BOXMODEL_L10N.getStr("boxmodel.border")
           ),
           dom.div(
             {
               className: "boxmodel-borders",
               "data-box": "border",
               title: BOXMODEL_L10N.getStr("boxmodel.border"),
-              ref: div => {
-                this.borderLayout = div;
-              },
             },
             dom.span(
               {
                 className: "boxmodel-legend",
                 "data-box": "padding",
                 title: BOXMODEL_L10N.getStr("boxmodel.padding"),
               },
               BOXMODEL_L10N.getStr("boxmodel.padding")
             ),
             dom.div(
               {
                 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;
-                },
               })
             )
           )
         )
       ),
       displayPosition ?
         BoxModelEditable({
           box: "position",
           direction: "top",
-          focusable,
-          level,
           property: "position-top",
-          ref: editable => {
-            this.positionEditable = editable;
-          },
           textContent: positionTop,
           onShowBoxModelEditor,
         })
         :
         null,
       displayPosition ?
         BoxModelEditable({
           box: "position",
           direction: "right",
-          focusable,
-          level,
           property: "position-right",
           textContent: positionRight,
           onShowBoxModelEditor,
         })
         :
         null,
       displayPosition ?
         BoxModelEditable({
           box: "position",
           direction: "bottom",
-          focusable,
-          level,
           property: "position-bottom",
           textContent: positionBottom,
           onShowBoxModelEditor,
         })
         :
         null,
       displayPosition ?
         BoxModelEditable({
           box: "position",
           direction: "left",
-          focusable,
-          level,
           property: "position-left",
           textContent: positionLeft,
           onShowBoxModelEditor,
         })
         :
         null,
       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,
       }),
       BoxModelEditable({
         box: "margin",
         direction: "bottom",
-        focusable,
-        level,
         property: "margin-bottom",
         textContent: marginBottom,
         onShowBoxModelEditor,
       }),
       BoxModelEditable({
         box: "margin",
         direction: "left",
-        focusable,
-        level,
         property: "margin-left",
         textContent: marginLeft,
         onShowBoxModelEditor,
       }),
       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,
       }),
       BoxModelEditable({
         box: "border",
         direction: "bottom",
-        focusable,
-        level,
         property: "border-bottom-width",
         textContent: borderBottom,
         onShowBoxModelEditor,
       }),
       BoxModelEditable({
         box: "border",
         direction: "left",
-        focusable,
-        level,
         property: "border-left-width",
         textContent: borderLeft,
         onShowBoxModelEditor,
       }),
       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,
       }),
       BoxModelEditable({
         box: "padding",
         direction: "bottom",
-        focusable,
-        level,
         property: "padding-bottom",
         textContent: paddingBottom,
         onShowBoxModelEditor,
       }),
       BoxModelEditable({
         box: "padding",
         direction: "left",
-        focusable,
-        level,
         property: "padding-left",
         textContent: paddingLeft,
         onShowBoxModelEditor,
       }),
       contentBox
     );
   },
 
--- a/devtools/client/inspector/boxmodel/test/browser.ini
+++ b/devtools/client/inspector/boxmodel/test/browser.ini
@@ -17,16 +17,17 @@ support-files =
 # [browser_boxmodel_editablemodel_allproperties.js]
 # Disabled for too many intermittent failures (bug 1009322)
 [browser_boxmodel_editablemodel_bluronclick.js]
 [browser_boxmodel_editablemodel_border.js]
 [browser_boxmodel_editablemodel_pseudo.js]
 [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]
 [browser_boxmodel_pseudo-element.js]
 [browser_boxmodel_rotate-labels-on-sides.js]
 [browser_boxmodel_sync.js]
 [browser_boxmodel_tooltips.js]
 skip-if = true # Bug 1336198
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
@@ -23,98 +23,81 @@ add_task(function* () {
   yield testInitialFocus(inspector, view);
   yield testChangingLevels(inspector, view);
   yield testTabbingWrapAround(inspector, view);
   yield testChangingLevelsByClicking(inspector, view);
 });
 
 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`)];
 
   EventUtils.synthesizeKey("VK_ESCAPE", {});
   editBoxes[3].focus();
   EventUtils.synthesizeKey("VK_TAB", {});
   is(editBoxes[0], viewdoc.activeElement, "Top edit box should have focus.");
 
   editBoxes[0].focus();
   EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
   is(editBoxes[3], viewdoc.activeElement, "Left edit box should have focus.");
 }
 
 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.");
   });
 }
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -130,17 +130,17 @@
                       type="checkbox"
                       class="includebrowserstyles"/>
           <label id="browser-style-checkbox-label" for="browser-style-checkbox"
                         data-localization="content=inspector.browserStyles.label"></label>
         </div>
 
         <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">
             </div>
 
             <div id="computedview-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
           </div>
         </div>
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -2,16 +2,20 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/ */
 
 /**
  * This is the stylesheet of the Box Model view implemented in the layout panel.
  */
 
 .boxmodel-container {
+  /* The view will grow bigger as the window gets resized, until 400px */
+  max-width: 400px;
+  margin: 0px auto;
+  padding: 0;
   overflow: auto;
 }
 
 /* Header */
 
 .boxmodel-header,
 .boxmodel-info {
   display: flex;
@@ -24,21 +28,19 @@
 }
 
 /* Main: contains the box-model regions */
 
 .boxmodel-main {
   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 {
   margin: 25px;
   /* The regions are semi-transparent, so the white background is partly
      visible */
   background-color: white;
 }