YellowLabTools/front/src/views/rule.html

<div ng-include="'views/resultSubHeader.html'"></div>
<div class="rule board">
    <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>

    <div ng-if="rule" class="ruleTable">
        <div class="left">
            <h2>{{rule.policy.label}}</h2>
            <grade score="rule.score" class="score"></grade>
            <div>{{rule.score}}/100</div>
        </div>
        <div class="right">
            <h3>Value: {{rule.value}}</h3>
            <div ng-bind-html="rule.policy.message" class="message"></div>
        </div>
    </div>
    <div ng-if="rule.abnormal" class="warning">
        <h3>Warning</h3>
        <p>This rule reached the abnormality threshold, which means there is a real problem you should care about.</p>
    </div>
    <div class="offenders" ng-if="rule.policy.hasOffenders">
        <h3><ng-pluralize count="rule.offendersObj.count" when="{'0': 'No offenders', 'one': '1 offender', 'other': '{} offenders'}"></ng-pluralize></h3>

        <div ng-if="rule.offendersObj.list" class="offendersTable">
            <div ng-repeat="offender in rule.offendersObj.list track by $index">
                <div ng-if="offender.parseError">
                    {{offender.parseError}}
                </div>
                <div ng-if="!offender.parseError">

                    <div ng-if="policyName === 'DOMidDuplicated'">
                        <b>{{offender.id}}</b>: {{offender.occurrences}} occurrences
                    </div>

                    <div ng-if="policyName === 'DOMinserts'">
                        <dom-element-button obj="offender.insertedElement"></dom-element-button> appended to <dom-element-button obj="offender.receiverElement"></dom-element-button>
                    </div>
                    
                    <div ng-if="policyName === 'DOMqueriesWithoutResults'">
                        <b>{{offender.query}}</b> (in <dom-element-button obj="offender.context"></dom-element-button>) using {{offender.fn}}
                    </div>

                    <div ng-if="policyName === 'DOMqueriesAvoidable'">
                        <b>{{offender.query}}</b> (in <dom-element-button obj="offender.context"></dom-element-button>) using {{offender.fn}}: <b>{{offender.count}} queries</b>
                    </div>

                    <div ng-if="policyName === 'eventsBound'">
                        <b>{{offender.eventName}}</b> bound to <dom-element-button obj="offender.element"></dom-element-button>
                    </div>

                    <div ng-if="policyName === 'jsErrors'">
                        <b>{{offender.error}}</b>
                        <div class="offenderButton" ng-if="offender.backtrace.length == 0">no backtrace</div>
                        <div class="offenderButton opens" ng-if="offender.backtrace.length > 0">
                            backtrace
                            <div class="backtrace">
                                <div ng-repeat="obj in offender.backtrace track by $index">
                                    <span ng-if="obj.functionName">{{obj.functionName}}()</span>
                                    <url-link url="obj.file" max-length="60"></url-link>
                                    line {{obj.line}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div ng-if="policyName === 'cssParsingErrors'">
                        <b>{{offender.error}}</b>
                        <file-and-line file="offender.file" line="offender.line" column="offender.column"></file-and-line>
                        <span ng-if="offender.file">(<a href="http://jigsaw.w3.org/css-validator/validator?profile=css3&usermedium=all&warning=no&uri={{offender.file | encodeURIComponent}}" target="_blank">Check on the W3C validator</a>)</span>
                    </div>

                    <div ng-if="policyName === 'cssComplexSelectors' || policyName === 'cssComplexSelectorsByAttribute' || policyName === 'cssImports' || policyName === 'cssUniversalSelectors' || policyName === 'cssRedundantBodySelectors' || policyName === 'cssRedundantChildNodesSelectors'">
                        <span ng-if="offender.bolded" ng-bind-html="offender.bolded"></span>
                        <b ng-if="!offender.bolded">{{offender.css}}</b>
                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                    </div>

                    <div ng-if="policyName === 'cssDuplicatedSelectors'">
                        {{offender.rule}} (<b>x{{offender.occurrences}}</b>)
                    </div>

                    <div ng-if="policyName === 'cssDuplicatedProperties'">
                        Property <b>{{offender.property}}</b> duplicated in <b>{{offender.rule}} { }</b>
                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                    </div>

                    <div ng-if="policyName === 'cssEmptyRules'">
                        <b>{{offender.css}} { }</b>
                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                    </div>

                    <div ng-if="policyName === 'cssExpressions'">
                        {{offender.rule}} {{ '{' + offender.property}}: <b>expression(</b>{{offender.expression}}<b>)</b>}
                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                    </div>

                    <div ng-if="policyName === 'cssImportants'">
                        {{offender.rule}} {{ '{' + offender.property}}: {{offender.value}} <b>!important</b>}
                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                    </div>

                    <div ng-if="policyName === 'cssOldIEFixes'">
                        <span ng-if="offender.browser"><b>{{offender.browser}} fix:</b></span>
                        <span ng-bind-html="offender.bolded"></span>
                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                    </div>

                    <div ng-if="policyName === 'cssOldPropertyPrefixes'">
                        {{offender.rule}} {<b>{{offender.property}}</b>: {{offender.value + '}' }}
                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                    </div>

                    <div ng-if="policyName === 'requests' || policyName === 'htmlCount' || policyName === 'jsCount' || policyName === 'cssCount' || policyName === 'imageCount' || policyName === 'webfontCount' || policyName === 'videoCount' || policyName === 'jsonCount' || policyName === 'otherCount' || policyName === 'smallJsFiles' || policyName === 'smallCssFiles' || policyName === 'smallImages'">
                        <url-link url="offender.file" max-length="100"></url-link>
                        <span ng-if="offender.size || offender.size === 0">({{offender.size}} kB)</span>
                    </div>

                    <div ng-if="policyName === 'notFound' || policyName === 'closedConnections' || policyName === 'multipleRequests' || policyName === 'cachingDisabled' || policyName === 'cachingNotSpecified'">
                        <url-link url="offender" max-length="100"></url-link>
                    </div>

                    <div ng-if="policyName === 'cachingTooShort'">
                        <url-link url="offender.file" max-length="100"></url-link>
                        cached for <b>{{offender.ttlWithUnit}} {{offender.unit}}</b>
                    </div>

                    <div ng-if="policyName === 'domains'">
                        <b>{{offender.domain}}</b>
                        (<ng-pluralize count="offender.requests" when="{'one':'1 request','other':'{} requests'}"></ng-pluralize>)
                    </div>

                    <div ng-if="policyName === 'globalVariables' || policyName === 'jQueryVersionsLoaded'">
                        {{offender}}
                    </div>

                </div>
            </div>
        </div>


        <div ng-if="!rule.offendersObj.list" class="offendersHtml">
            
            <div ng-if="policyName === 'DOMelementMaxDepth'">
                <dom-tree tree="rule.offendersObj.tree"></dom-tree>
            </div>

        </div>

    </div>
    <div ng-if="!rule && rule !== null" class="notFound">
        <h2>404</h2>
        Rule "{{policyName}}"" not found
    </div>

    <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
</div>