<commit_before>/* See license.txt for terms of usage */

define([
    "firebug/lib/object",
    "firebug/firebug",
    "firebug/lib/domplate",
    "firebug/lib/locale",
    "firebug/lib/events",
    "firebug/lib/css",
    "firebug/lib/dom",
    "firebug/lib/xml",
    "firebug/lib/url",
    "firebug/lib/array",
    "firebug/js/sourceLink",
    "firebug/chrome/menu",
    "firebug/lib/options",
    "firebug/lib/string",
    "firebug/lib/persist",
    "firebug/css/cssModule",
    "firebug/css/cssReps"
],
function(Obj, Firebug, Domplate, Locale, Events, Css, Dom, Xml, Url, Arr, SourceLink, Menu,
    Options, Str, Persist, CSSModule, CSSInfoTip) {

with (Domplate) {

//********************************************************************************************* //
// Constants

const Cu = Components.utils;

const statusClasses = ["cssUnmatched", "cssParentMatch", "cssOverridden", "cssBestMatch"];

try
{
    Cu.import("resource:///modules/devtools/CssLogic.jsm");
}
catch (err)
{
    if (FBTrace.DBG_ERRORS)
        FBTrace.sysout("cssComputedPanel: EXCEPTION CssLogic is not available!");
}

// ********************************************************************************************* //
// CSS Computed panel (HTML side panel)

function CSSComputedPanel() {}

CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
{
    template: domplate(
    {
        computedStylesTag:
            DIV({"class": "a11yCSSView", role: "list", "aria-label":
                Locale.$STR("aria.labels.computed styles")}),

        groupedStylesTag:
            FOR("group", "$groups",
                DIV({"class": "computedStylesGroup", $opened: "$group.opened", role: "list",
                        $hidden: "$group.props|hasNoStyles", _repObject: "$group"},
                    H1({"class": "cssComputedHeader groupHeader focusRow", role: "listitem"},
                        DIV({"class": "twisty", role: "presentation"}),
                        SPAN({"class": "cssComputedLabel"}, "$group.title")
                    ),
                    TAG("$stylesTag", {props: "$group.props"})
                )
            ),

        stylesTag:
            TABLE({"class": "computedStyleTable", role: "list"},
                TBODY({role: "presentation"},
                    FOR("prop", "$props",
                        TR({"class": "focusRow computedStyleRow computedStyle",
                                $opened: "$prop.opened", role: "listitem",
                                $hasSelectors: "$prop|hasSelectors", _repObject: "$prop"},
                            TD({"class": "stylePropName", role: "presentation"},
                                "$prop.property"
                            ),
                            TD({role: "presentation"},
                                SPAN({"class": "stylePropValue"}, "$prop.value|formatValue"))
                        ),
                        TR({"class": "focusRow computedStyleRow matchedSelectors", _repObject: "$prop"},
                            TD({colspan: 2},
                                TAG("$selectorsTag", {prop: "$prop"})
                            )
                        )
                    )
                )
            ),

        selectorsTag:
            TABLE({"class": "matchedSelectorsTable", role: "list"},
                TBODY({role: "presentation"},
                    FOR("selector", "$prop.matchedSelectors",
                        TR({"class": "focusRow computedStyleRow styleSelector "+
                            "$selector.status|getStatusClass", role: "listitem",
                                _repObject: "$selector"},
                            TD({"class": "selectorName", role: "presentation"},
                                "$selector.selector.text"),
                            TD({role: "presentation"},
                                SPAN({"class": "stylePropValue"}, "$selector.value|formatValue")),
                            TD({"class": "styleSourceLink", role: "presentation"},
                                TAG(FirebugReps.SourceLink.tag, {object: "$selector|getSourceLink"})
                            )
                        )
                    )
                )
            ),

        getStatusClass: function(status)
        {
            return statusClasses[status];
        },

        hasNoStyles: function(props)
        {
            return props.length == 0;
        },

        hasSelectors: function(prop)
        {
            return prop.matchedRuleCount != 0;
        },

        getSourceLink: function(selector)
        {
            var href = selector.href.href || selector.href;
            var line = selector.ruleLine;
            var rule = selector.selector._cssRule._domRule;

            var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
            var sourceLink = line != -1 ? new SourceLink.SourceLink(href, line, "css",
                rule, instance) : null;

            return sourceLink;
        },

        formatValue: function(value)
        {
            if (Options.get("colorDisplay") == "hex")
                value = Css.rgbToHex(value);
            else if (Options.get("colorDisplay") == "hsl")
                value = Css.rgbToHSL(value);

            // Add a zero-width space after a comma to allow line breaking
            return value.replace(/,/g, ",\u200B");
        }
    }),

    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //

    updateComputedView: function(element)
    {
        // The current selection can be null.
        if (!element)
            return;

        var doc = element.ownerDocument;<commit_msg>Issue 5879 (Crop long CSS values in Computed side panel) http://code.google.com/p/fbug/issues/detail?id=5879<commit_after>/* See license.txt for terms of usage */

define([
    "firebug/lib/object",
    "firebug/firebug",
    "firebug/lib/domplate",
    "firebug/lib/locale",
    "firebug/lib/events",
    "firebug/lib/css",
    "firebug/lib/dom",
    "firebug/lib/xml",
    "firebug/lib/url",
    "firebug/lib/array",
    "firebug/js/sourceLink",
    "firebug/chrome/menu",
    "firebug/lib/options",
    "firebug/lib/string",
    "firebug/lib/persist",
    "firebug/css/cssModule",
    "firebug/css/cssReps"
],
function(Obj, Firebug, Domplate, Locale, Events, Css, Dom, Xml, Url, Arr, SourceLink, Menu,
    Options, Str, Persist, CSSModule, CSSInfoTip) {

with (Domplate) {

//********************************************************************************************* //
// Constants

const Cu = Components.utils;

const statusClasses = ["cssUnmatched", "cssParentMatch", "cssOverridden", "cssBestMatch"];

try
{
    Cu.import("resource:///modules/devtools/CssLogic.jsm");
}
catch (err)
{
    if (FBTrace.DBG_ERRORS)
        FBTrace.sysout("cssComputedPanel: EXCEPTION CssLogic is not available!");
}

// ********************************************************************************************* //
// CSS Computed panel (HTML side panel)

function CSSComputedPanel() {}

CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
{
    template: domplate(
    {
        computedStylesTag:
            DIV({"class": "a11yCSSView", role: "list", "aria-label":
                Locale.$STR("aria.labels.computed styles")}),

        groupedStylesTag:
            FOR("group", "$groups",
                DIV({"class": "computedStylesGroup", $opened: "$group.opened", role: "list",
                        $hidden: "$group.props|hasNoStyles", _repObject: "$group"},
                    H1({"class": "cssComputedHeader groupHeader focusRow", role: "listitem"},
                        DIV({"class": "twisty", role: "presentation"}),
                        SPAN({"class": "cssComputedLabel"}, "$group.title")
                    ),
                    TAG("$stylesTag", {props: "$group.props"})
                )
            ),

        stylesTag:
            TABLE({"class": "computedStyleTable", role: "list"},
                TBODY({role: "presentation"},
                    FOR("prop", "$props",
                        TR({"class": "focusRow computedStyleRow computedStyle",
                                $opened: "$prop.opened", role: "listitem",
                                $hasSelectors: "$prop|hasSelectors", _repObject: "$prop"},
                            TD({"class": "stylePropName", role: "presentation"},
                                "$prop.property"
                            ),
                            TD({role: "presentation"},
                                SPAN({"class": "stylePropValue"}, "$prop.value|formatValue"))
                        ),
                        TR({"class": "focusRow computedStyleRow matchedSelectors", _repObject: "$prop"},
                            TD({colspan: 2},
                                TAG("$selectorsTag", {prop: "$prop"})
                            )
                        )
                    )
                )
            ),

        selectorsTag:
            TABLE({"class": "matchedSelectorsTable", role: "list"},
                TBODY({role: "presentation"},
                    FOR("selector", "$prop.matchedSelectors",
                        TR({"class": "focusRow computedStyleRow styleSelector "+
                            "$selector.status|getStatusClass", role: "listitem",
                                _repObject: "$selector"},
                            TD({"class": "selectorName", role: "presentation"},
                                "$selector.selector.text"),
                            TD({role: "presentation"},
                                SPAN({"class": "stylePropValue"}, "$selector.value|formatValue")),
                            TD({"class": "styleSourceLink", role: "presentation"},
                                TAG(FirebugReps.SourceLink.tag, {object: "$selector|getSourceLink"})
                            )
                        )
                    )
                )
            ),

        getStatusClass: function(status)
        {
            return statusClasses[status];
        },

        hasNoStyles: function(props)
        {
            return props.length == 0;
        },

        hasSelectors: function(prop)
        {
            return prop.matchedRuleCount != 0;
        },

        getSourceLink: function(selector)
        {
            var href = selector.href.href || selector.href;
            var line = selector.ruleLine;
            var rule = selector.selector._cssRule._domRule;

            var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
            var sourceLink = line != -1 ? new SourceLink.SourceLink(href, line, "css",
                rule, instance) : null;

            return sourceLink;
        },

        formatValue: function(value)
        {
            if (Options.get("colorDisplay") == "hex")
                value = Css.rgbToHex(value);
            else if (Options.get("colorDisplay") == "hsl")
                value = Css.rgbToHSL(value);

            var limit = Options.get("stringCropLength");
            if (limit > 0)
                value = Str.cropString(value, limit);

            // Add a zero-width space after a comma to allow line breaking
            return value.replace(/,/g, ",\u200B");
        }
    }),

    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //

    updateComputedView: function(element)
    {
        // The current selection can be null.
        if (!element)
            return;

        var doc = element.ownerDocument;
{'fraction_non_alphanumeric': 0.16997582872928177, 'fraction_numerical': 0.0025034530386740333, 'mean_word_length': 1.6534585432890518, 'pattern_counts': {'":': 32, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 14, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3425620', 'n_tokens_mistral': 3201, 'n_tokens_neox': 3014, 'n_words': 568}