RN: Fix Element Inspector w/ Negative Margins

Summary:
There is a bug with the React Native element inspector when the inspected element has negative margins because negative margins actually subtract from the content width and height. This fixes the bug.

@public

Reviewed By: TheSavior

Differential Revision: D8607389

fbshipit-source-id: 2cea0d9160b5437fe775b2ba25373072bafd70b9

Libraries/Inspector/ElementBox.js

@@ -10,38 +10,51 @@
 
 'use strict';
 
+const BorderBox = require('BorderBox');
 const React = require('React');
-const View = require('View');
 const StyleSheet = require('StyleSheet');
-const BorderBox = require('BorderBox');
-const resolveBoxStyle = require('resolveBoxStyle');
+const View = require('View');
 
 const flattenStyle = require('flattenStyle');
+const resolveBoxStyle = require('resolveBoxStyle');
 
 class ElementBox extends React.Component<$FlowFixMeProps> {
   render() {
     const style = flattenStyle(this.props.style) || {};
     const margin = resolveBoxStyle('margin', style);
     const padding = resolveBoxStyle('padding', style);
-    let 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,
-      };
-    }
-    let contentStyle = {
+
+    const frameStyle = {...this.props.frame};
+    const 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,
-      };
+
+    if (margin != null) {
+      frameStyle.top -= margin.top;
+      frameStyle.left -= margin.left;
+      frameStyle.height += margin.top + margin.bottom;
+      frameStyle.width += margin.left + margin.right;
+
+      if (margin.top < 0) {
+        contentStyle.height += margin.top;
+      }
+      if (margin.bottom < 0) {
+        contentStyle.height += margin.bottom;
+      }
+      if (margin.left < 0) {
+        contentStyle.width += margin.left;
+      }
+      if (margin.right < 0) {
+        contentStyle.width += margin.right;
+      }
     }
+
+    if (padding != null) {
+      contentStyle.width -= padding.left + padding.right;
+      contentStyle.height -= padding.top + padding.bottom;
+    }
+
     return (
       <View style={[styles.frame, frameStyle]} pointerEvents="none">
         <BorderBox box={margin} style={styles.margin}>
@@ -59,13 +72,13 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   content: {
-    backgroundColor: 'rgba(200, 230, 255, 0.8)',
+    backgroundColor: 'rgba(200, 230, 255, 0.8)', // blue
   },
   padding: {
-    borderColor: 'rgba(77, 255, 0, 0.3)',
+    borderColor: 'rgba(77, 255, 0, 0.3)', // green
   },
   margin: {
-    borderColor: 'rgba(255, 132, 0, 0.3)',
+    borderColor: 'rgba(255, 132, 0, 0.3)', // orange
   },
 });