Making firebug's Style Side Panel aware of less css & Sass debug info #45

Open
wants to merge 4 commits into
from
@@ -1448,14 +1448,52 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
getSourceLink: function(target, rule)
{
var element = rule.parentStyleSheet.ownerNode;
+ var line = getRuleLine(rule);
+ var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var href = rule.parentStyleSheet.href; // Null means inline
// http://code.google.com/p/fbug/issues/detail?id=452
if (!href)
href = element.ownerDocument.location.href;
+
+ // if this is a less/sass file
+ var sFileType = (href.indexOf('.less') !== -1) ? 'less' :
+ (href.indexOf('.sass') !== -1) ? 'sass' : null;
+ if (sFileType) {
+ var oDoc = Css.getDocumentForStyleSheet(rule.parentStyleSheet),
+ oStyleSheet = oDoc ? oDoc.styleSheets[instance] : null;
+
+ if(oStyleSheet && this.context.sourceCache) {
+ // a counter for the current line index
+ var iLineIndex = line-1;
+ // handle to the css doc, type = array of text strings per line
+ var arrCss = this.context.sourceCache.load(oStyleSheet.href);
+ // dotLess format: /* /path/css-file.less:L123 */ sass format: /* line 20, sass/_reset.sass */
+ var regEx = (sFileType === 'less') ? /\/\* ([^:]*):L(\d*) \*\// :
+ (sFileType === 'sass') ? /\/\* line (\d*), ([^ ]*) \*\// :
+ null;
+
+ // prevent index out of bounds and stop looking after 5 lines
+ while(iLineIndex >= 0 && line - iLineIndex < 5) {
+ if (regEx.test(arrCss[iLineIndex])) {
+ // update the file and line numbers for both less and Sass style comments
+ var arrMatch = arrCss[iLineIndex].match(regEx);
+
+ if (sFileType === 'less') {
+ href = arrMatch[1];
+ line = arrMatch[2];
+ }
+ else if (sFileType === 'sass') {
+ href = arrMatch[2];
+ line = arrMatch[1];
+ }
+ break;
+ }
+ iLineIndex -= 1;
+ }
+ }
+ }
- var line = getRuleLine(rule);
- var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var sourceLink = new SourceLink.SourceLink(href, line, "css", rule, instance);
return sourceLink;
@@ -1375,14 +1375,52 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
getSourceLink: function(target, rule)
{
var element = rule.parentStyleSheet.ownerNode;
+ var line = getRuleLine(rule);
+ var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var href = rule.parentStyleSheet.href; // Null means inline
// http://code.google.com/p/fbug/issues/detail?id=452
if (!href)
href = element.ownerDocument.location.href;
+
+ // if this is a less/sass file
+ var sFileType = (href.indexOf('.less') !== -1) ? 'less' :
+ (href.indexOf('.sass') !== -1) ? 'sass' : null;
+ if (sFileType) {
+ var oDoc = Css.getDocumentForStyleSheet(rule.parentStyleSheet),
+ oStyleSheet = oDoc ? oDoc.styleSheets[instance] : null;
+
+ if(oStyleSheet && this.context.sourceCache) {
+ // a counter for the current line index
+ var iLineIndex = line-1;
+ // handle to the css doc, type = array of text strings per line
+ var arrCss = this.context.sourceCache.load(oStyleSheet.href);
+ // dotLess format: /* /path/css-file.less:L123 */ sass format: /* line 20, sass/_reset.sass */
+ var regEx = (sFileType === 'less') ? /\/\* ([^:]*):L(\d*) \*\// :
+ (sFileType === 'sass') ? /\/\* line (\d*), ([^ ]*) \*\// :
+ null;
+
+ // prevent index out of bounds and stop looking after 5 lines
+ while(iLineIndex >= 0 && line - iLineIndex < 5) {
+ if (regEx.test(arrCss[iLineIndex])) {
+ // update the file and line numbers for both less and Sass style comments
+ var arrMatch = arrCss[iLineIndex].match(regEx);
+
+ if (sFileType === 'less') {
+ href = arrMatch[1];
+ line = arrMatch[2];
+ }
+ else if (sFileType === 'sass') {
+ href = arrMatch[2];
+ line = arrMatch[1];
+ }
+ break;
+ }
+ iLineIndex -= 1;
+ }
+ }
+ }
- var line = getRuleLine(rule);
- var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var sourceLink = new SourceLink.SourceLink(href, line, "css", rule, instance);
return sourceLink;