Add: Elements box model chart

src/Elements/Elements.hbs

@@ -39,31 +39,6 @@
         </table>
     </div>
 </div>
-{{#if computedStyle}}
-    <div class="eruda-computed-style eruda-section">
-        <h2 class="eruda-toggle-all-computed-style eruda-active-effect">Computed Style
-            <div class="eruda-btn">
-                {{#if rmDefComputedStyle}}
-                    <span class="eruda-icon-compress"></span>
-                {{else}}
-                    <span class="eruda-icon-expand"></span>
-                {{/if}}
-            </div>
-        </h2>
-        <div class="eruda-table-wrapper">
-            <table>
-                <tbody>
-                {{#each computedStyle}}
-                    <tr>
-                        <td class="eruda-key">{{@key}}</td>
-                        <td>{{{.}}}</td>
-                    </tr>
-                {{/each}}
-                </tbody>
-            </table>
-        </div>
-    </div>
-{{/if}}
 {{#if styles}}
     <div class="eruda-styles eruda-section">
         <h2>Styles</h2>
@@ -82,6 +57,52 @@
         </div>
     </div>
 {{/if}}
+{{#if computedStyle}}
+    <div class="eruda-computed-style eruda-section">
+        <h2 class="eruda-toggle-all-computed-style eruda-active-effect">Computed Style
+            <div class="eruda-btn">
+                {{#if rmDefComputedStyle}}
+                    <span class="eruda-icon-compress"></span>
+                {{else}}
+                    <span class="eruda-icon-expand"></span>
+                {{/if}}
+            </div>
+        </h2>
+        <div class="eruda-box-model">
+            {{#if boxModel.position}}<div class="eruda-position">
+                <div class="eruda-label">position</div><div class="eruda-top">{{boxModel.position.top}}</div><br><div class="eruda-left">{{boxModel.position.left}}</div>{{/if}}{{!
+                }}<div class="eruda-margin">
+                    <div class="eruda-label">margin</div><div class="eruda-top">{{boxModel.margin.top}}</div><br><div class="eruda-left">{{boxModel.margin.left}}</div>{{!
+                    }}<div class="eruda-border">
+                        <div class="eruda-label">border</div><div class="eruda-top">{{boxModel.border.top}}</div><br><div class="eruda-left">{{boxModel.border.left}}</div>{{!
+                        }}<div class="eruda-padding">
+                            <div class="eruda-label">padding</div><div class="eruda-top">{{boxModel.padding.top}}</div><br><div class="eruda-left">{{boxModel.padding.left}}</div>{{!
+                            }}<div class="eruda-content">
+                                <span>{{boxModel.content.width}}</span> × <span>{{boxModel.content.height}}</span>
+                            </div>{{!
+                            }}<div class="eruda-right">{{boxModel.padding.right}}</div><br><div class="eruda-bottom">{{boxModel.padding.bottom}}</div>{{!
+                            }}</div>{{!
+                        }}<div class="eruda-right">{{boxModel.border.right}}</div><br><div class="eruda-bottom">{{boxModel.border.bottom}}</div>{{!
+                    }}</div>{{!
+                    }}<div class="eruda-right">{{boxModel.margin.right}}</div><br><div class="eruda-bottom">{{boxModel.margin.bottom}}</div>{{!
+                }}</div>{{!
+                }}{{#if boxModel.position}}<div class="eruda-right">{{boxModel.position.right}}</div><br><div class="eruda-bottom">{{boxModel.position.bottom}}</div>{{!
+            }}</div>{{/if}}
+        </div>
+        <div class="eruda-table-wrapper">
+            <table>
+                <tbody>
+                {{#each computedStyle}}
+                    <tr>
+                        <td class="eruda-key">{{@key}}</td>
+                        <td>{{{.}}}</td>
+                    </tr>
+                {{/each}}
+                </tbody>
+            </table>
+        </div>
+    </div>
+{{/if}}
 {{#if listeners}}
     <div class="eruda-listeners eruda-section">
         <h2>Event Listeners</h2>

src/Elements/Elements.js

@@ -19,7 +19,10 @@ import {
     startWith,
     isFn,
     isBool,
-    safeGet
+    safeGet,
+    pxToNum,
+    isNaN,
+    isNum
 } from '../lib/util';
 
 export default class Elements extends Tool
@@ -289,6 +292,37 @@ export default class Elements extends Tool
         if (needNoStyle(tagName)) return ret;
 
         let computedStyle = cssStore.getComputedStyle();
+
+        function getBoxModelValue(type) 
+        {
+            let keys = ['top', 'left', 'right', 'bottom'];
+            if (type !== 'position') keys = map(keys, key => `${type}-${key}`);
+            if (type === 'border') keys = map(keys, key => `${key}-width`);
+
+            return {
+                top: boxModelValue(computedStyle[keys[0]], type),
+                left: boxModelValue(computedStyle[keys[1]], type),
+                right: boxModelValue(computedStyle[keys[2]], type),
+                bottom: boxModelValue(computedStyle[keys[3]], type)
+            };
+        }
+
+        let boxModel = {
+            margin: getBoxModelValue('margin'),
+            border: getBoxModelValue('border'),
+            padding: getBoxModelValue('padding'),
+            content: {
+                width: boxModelValue(computedStyle['width']),
+                height: boxModelValue(computedStyle['height'])
+            }
+        };
+
+        if (computedStyle['position'] !== 'static') 
+        {
+            boxModel.position = getBoxModelValue('position');
+        }
+        ret.boxModel = boxModel;
+
         if (this._rmDefComputedStyle) computedStyle = rmDefComputedStyle(computedStyle);
         ret.rmDefComputedStyle = this._rmDefComputedStyle;
         processStyleRules(computedStyle);
@@ -577,3 +611,17 @@ function rmEvent(el, type, listener, useCapture = false)
 let getWinEventProto = () => safeGet(window, 'EventTarget.prototype') || window.Node.prototype;
 
 let wrapLink = link => `<a href="${link}" target="_blank">${link}</a>`;
+
+function boxModelValue(val, type) 
+{
+    if (isNum(val)) return val;
+
+    if (!isStr(val)) return '‒';
+
+    let ret = pxToNum(val);
+    if (isNaN(ret)) return val;
+
+    if (type === 'position') return ret;
+
+    return ret === 0 ? '‒' : ret;
+}

src/Elements/Elements.scss

@@ -122,9 +122,58 @@
             border: 1px solid $gray-dark;
             display: inline-block;
         }
+        .box-model {
+            @include overflow-auto(x);
+            background: #fff;
+            font-size: $font-size-s;
+            padding: $padding;
+            text-align: center;
+            white-space: nowrap;
+            border-bottom: 1px solid $gray-light;
+            .label {
+                position: absolute;
+                margin-left: 3px;
+                padding: 0 2px;
+            }
+            .top, .left, .right, .bottom {
+                display: inline-block;
+            }
+            .left, .right {
+                vertical-align: middle;
+            }
+            .position, .margin, .border, .padding, .content {
+                position: relative;
+                background: #fff;
+                display: inline-block;
+                text-align: center;
+                vertical-align: middle;
+                padding: 3px;
+                margin: 3px;
+            }
+            .position {
+                border: 1px grey dotted;
+            }
+            .margin {
+                border: 1px dashed;
+                background: rgba(246, 178, 107, 0.66);
+            }
+            .border {
+                border: 1px #000 solid;
+                background: rgba(255, 229, 153, 0.66);
+            }
+            .padding {
+                border: 1px grey dashed;
+                background: rgba(147, 196, 125, 0.55);
+            }
+            .content {
+                border: 1px grey solid;
+                min-width: 100px;
+                background: rgba(111, 168, 220, 0.66);
+            }
+        }
         .computed-style {
             background: #fff;
-            font-size: 12px;
+            font-size: $font-size-s;
             a {
                 color: $blue;
             }