eruda/src/Elements/Elements.hbs

{{#if parents}}
    <ul class="eruda-parents">
        {{#each parents}}
            <li>
                <div class="eruda-parent" data-idx="{{idx}}">{{{text}}}</div>
                <span class="eruda-icon-chevron-right"></span>
            </li>
        {{/each}}
    </ul>
{{/if}}
<div class="eruda-breadcrumb">
    {{{name}}}
</div>
{{#if children}}
    <ul class="eruda-children">
        {{#each children}}
            <li class="eruda-child {{#if isCmt}}eruda-green{{/if}} {{#if isEl}}eruda-active-effect{{/if}}" data-idx="{{idx}}">{{{text}}}</li>
        {{/each}}
    </ul>
{{/if}}
<div class="eruda-attributes eruda-section">
    <h2>Attributes</h2>
    <div class="eruda-table-wrapper">
        <table>
            <tbody>
            {{#if attributes}}
                {{#each attributes}}
                    <tr>
                        <td>{{name}}</td>
                        <td>{{{value}}}</td>
                    </tr>
                {{/each}}
            {{else}}
                <tr>
                    <td>Empty</td>
                </tr>
            {{/if}}
            </tbody>
        </table>
    </div>
</div>
{{#if styles}}
    <div class="eruda-styles eruda-section">
        <h2>Styles</h2>
        <div class="eruda-style-wrapper">
            {{#each styles}}
                <div class="eruda-style-rules">
                    <div>{{selectorText}} {</div>
                    {{#each style}}
                        <div class="eruda-rule">
                            <span>{{@key}}</span>: {{{.}}};
                        </div>
                    {{/each}}
                    <div>}</div>
                </div>
            {{/each}}
        </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>
        <div class="eruda-listener-wrapper">
            {{#each listeners}}
               <div class="eruda-listener">
                   <div class="eruda-listener-type">{{@key}}</div>
                   <ul class="eruda-listener-content">
                       {{#each .}}
                           <li class="{{#if useCapture}}eruda-capture{{/if}}">{{listenerStr}}</li>
                       {{/each}}
                   </ul>
               </div>
            {{/each}}
        </div>
    </div>
{{/if}}