840859 - Show external style styles

Status: RESOLVED DUPLICATE of bug 722506

(DevTools :: Style Editor, defect)

Description

[arky [:arky]]

Please show external style styles that are included with '@import url()' CSS rules. It would help debugging CSS problems. 

Alternatively you can make the rule into click-able hyperlink.

Testcase:

1. Go to https://blog.mozilla.org/theden/
2. Select an element in the page and right click to choose inspect element  
3. Navigate to Style editor and select 'wp-content/themes/OneMozilla-Den/style.css' style sheet 
4. Note this style sheet has only 6 rules and inherit from  @import url("../OneMozilla/style.css"). There is no easy way to open this top level style sheet in developer tools.

Expected behaviour: 

 Show wp-content/themes/OneMozilla/style.css in Style editor 
[or]

Make the @import url("../OneMozilla/style.css") into click hyperlink that opens the style style in the editor

Comment 1

[Bruno Heridet [:Delapouite]]

Somehow related but may deserved its own bug : when two style-sheets have the same name but are located in two different directories, it's hard to differentiate them in the sidebar.

Here's the corresponding XUL part :
http://dxr.mozilla.org/mozilla-central/source/browser/devtools/styleeditor/styleeditor.xul#107


      <li id="splitview-tpl-summary-stylesheet" tabindex="0">
        <xul:label class="stylesheet-enabled" tabindex="0"
          tooltiptext="&visibilityToggle.tooltip;"
          accesskey="&saveButton.accesskey;"></xul:label>
        <hgroup class="stylesheet-info">
          <h1><a class="stylesheet-name" tabindex="0"><xul:label crop="start"/></a></h1>
          <div class="stylesheet-more">
            <h3 class="stylesheet-title"></h3>
            <h3 class="stylesheet-rule-count"></h3>
            <h3 class="stylesheet-error-message"></h3>
            <xul:spacer/>
            <h3><xul:label class="stylesheet-saveButton"
                  tooltiptext="&saveButton.tooltip;"
                  accesskey="&saveButton.accesskey;">&saveButton.label;</xul:label></h3>
          </div>
        </hgroup>
      </li>


The link in <h1> could have a title attribute with the full path.