visualize padding and margin in inspector

Summary:
This shows margin and padding visually when inspecting an element.

@public

Test Plan:
Go to the "UIExplorer", to the <View> page. Open the inspector, and start
selecting things. Padding and margin should be indicated. (Padding in dark
blue and margin in orange).

Libraries/ReactIOS/InspectorOverlay/BorderBox.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BorderBox
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var View = require('View');
+
+class BorderBox extends React.Component {
+  render() {
+    var box = this.props.box;
+    if (!box) {
+      return this.props.children;
+    }
+    var style = {
+      borderTopWidth: box.top,
+      borderBottomWidth: box.bottom,
+      borderLeftWidth: box.left,
+      borderRightWidth: box.right,
+    };
+    return (
+      <View style={[style, this.props.style]}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+module.exports = BorderBox;
+

Libraries/ReactIOS/InspectorOverlay/ElementBox.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ElementBox
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var View = require('View');
+var StyleSheet = require('StyleSheet');
+var BorderBox = require('BorderBox');
+var resolveBoxStyle = require('resolveBoxStyle');
+
+var flattenStyle = require('flattenStyle');
+
+class ElementBox extends React.Component {
+  render() {
+    var style = flattenStyle(this.props.style) || {};
+    var margin = resolveBoxStyle('margin', style);
+    var padding = resolveBoxStyle('padding', style);
+    var frameStyle = this.props.frame;
+    if (margin) {
+      frameStyle = {
+        top: frameStyle.top - margin.top,
+        left: frameStyle.left - margin.left,
+        height: frameStyle.height + margin.top + margin.bottom,
+        width: frameStyle.width + margin.left + margin.right,
+      };
+    }
+    var contentStyle = {
+      width: this.props.frame.width,
+      height: this.props.frame.height,
+    };
+    if (padding) {
+      contentStyle = {
+        width: contentStyle.width - padding.left - padding.right,
+        height: contentStyle.height - padding.top - padding.bottom,
+      };
+    }
+    return (
+      <View style={[styles.frame, frameStyle]} pointerEvents="none">
+        <BorderBox box={margin} style={styles.margin}>
+          <BorderBox box={padding} style={styles.padding}>
+            <View style={[styles.content, contentStyle]} />
+          </BorderBox>
+        </BorderBox>
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  frame: {
+    position: 'absolute',
+  },
+  content: {
+    backgroundColor: 'rgba(0, 0, 255, 0.1)',
+  },
+  padding: {
+    borderColor: 'rgba(182, 217, 167, 0.3)',
+  },
+  margin: {
+    borderColor: 'rgba(248, 194, 136, 0.3)',
+  },
+});
+
+module.exports = ElementBox;
+

Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js

@@ -17,6 +17,7 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var UIManager = require('NativeModules').UIManager;
 var View = require('View');
+var ElementBox = require('ElementBox');
 
 var InspectorOverlay = React.createClass({
   getInitialState: function() {
@@ -34,9 +35,11 @@ var InspectorOverlay = React.createClass({
       (nativeViewTag, left, top, width, height) => {
         var instance = Inspector.findInstanceByNativeTag(this.props.rootTag, nativeViewTag);
         var hierarchy = Inspector.getOwnerHierarchy(instance);
+        var publicInstance = instance.getPublicInstance();
         this.setState({
           hierarchy,
-          frame: {left, top, width, height}
+          frame: {left, top, width, height},
+          style: publicInstance.props ? publicInstance.props.style : {},
         });
       }
     );
@@ -59,7 +62,7 @@ var InspectorOverlay = React.createClass({
         ? 'flex-start'
         : 'flex-end';
 
-      content.push(<View pointerEvents="none" style={[styles.frame, this.state.frame]} />);
+      content.push(<ElementBox frame={this.state.frame} style={this.state.style} />);
       content.push(<ElementProperties hierarchy={this.state.hierarchy} />);
     }
     return (
@@ -97,10 +100,6 @@ var styles = StyleSheet.create({
     right: 0,
     bottom: 0,
   },
-  frame: {
-    position: 'absolute',
-    backgroundColor: 'rgba(155,155,255,0.3)',
-  },
   info: {
     backgroundColor: 'rgba(0, 0, 0, 0.7)',
     padding: 10,

Libraries/ReactIOS/resolveBoxStyle.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule resolveBoxStyle
+ * @flow
+ */
+'use strict';
+
+/**
+ * Resolve a style property into it's component parts, e.g.
+ *
+ * resolveProperties('margin', {margin: 5, marginBottom: 10})
+ * ->
+ * {top: 5, left: 5, right: 5, bottom: 10}
+ *
+ * If none are set, returns false.
+ */
+function resolveBoxStyle(prefix: String, style: Object): ?Object {
+  var res = {};
+  var subs = ['top', 'left', 'bottom', 'right'];
+  var set = false;
+  if (style[prefix]) {
+    subs.forEach(sub => {
+      res[sub] = style[prefix];
+    });
+    set = true;
+  }
+  if (style[prefix + 'Vertical']) {
+    res.top = res.bottom = style[prefix + 'Vertical'];
+    set = true;
+  }
+  if (style[prefix + 'Horizontal']) {
+    res.left = res.right = style[prefix + 'Horizontal'];
+    set = true;
+  }
+  subs.forEach(sub => {
+    var val = style[prefix + capFirst(sub)];
+    if (val) {
+      res[sub] = val;
+    }
+    if (res[sub]) {
+      set = true;
+    }
+  });
+  if (!set) {
+    return;
+  }
+  return res;
+}
+
+function capFirst(text) {
+  return text[0].toUpperCase() + text.slice(1);
+}
+
+module.exports = resolveBoxStyle;
+