Bug 1343167 - Add navigation for the box model's position, padding, b…

…order, margin and content layout. r=jdescottes
dothq · Apr 6, 2017 · ea4f15c · ea4f15c
1 parent 85e118a
commit ea4f15c
Show file tree

Hide file tree

Showing 8 changed files with 380 additions and 34 deletions.
diff --git a/devtools/client/inspector/boxmodel/box-model.js b/devtools/client/inspector/boxmodel/box-model.js
@@ -183,6 +183,10 @@ 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();
   },
@@ -305,6 +309,10 @@ BoxModel.prototype = {
           return;
         }
 
+        if (!this.inspector) {
+          return;
+        }
+
         let node = this.inspector.selection.nodeFront;
         this.inspector.pageStyle.getLayout(node, {
           autoMargins: true,
@@ -324,6 +332,10 @@ 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;
 

diff --git a/devtools/client/inspector/boxmodel/components/BoxModel.js b/devtools/client/inspector/boxmodel/components/BoxModel.js
@@ -30,6 +30,14 @@ module.exports = createClass({
 
   mixins: [ addons.PureRenderMixin ],
 
+  onKeyDown(event) {
+    let { target } = event;
+
+    if (target == this.boxModelContainer) {
+      this.boxModelMain.onKeyDown(event);
+    }
+  },
+
   render() {
     let {
       boxModel,
@@ -45,10 +53,19 @@ 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,

diff --git a/devtools/client/inspector/boxmodel/components/BoxModelEditable.js b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
@@ -17,6 +17,8 @@ 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,
@@ -28,7 +30,7 @@ module.exports = createClass({
     let { property, onShowBoxModelEditor } = this.props;
 
     editableItem({
-      element: this.refs.span,
+      element: this.boxModelEditable,
     }, (element, event) => {
       onShowBoxModelEditor(element, event, property);
     });
@@ -38,6 +40,8 @@ module.exports = createClass({
     let {
       box,
       direction,
+      focusable,
+      level,
       property,
       textContent,
     } = this.props;
@@ -57,8 +61,11 @@ module.exports = createClass({
         {
           className: "boxmodel-editable",
           "data-box": box,
+          tabIndex: box === level && focusable ? 0 : -1,
           title: property,
-          ref: "span",
+          ref: span => {
+            this.boxModelEditable = span;
+          },
         },
         textContent
       )