Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

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

Open
wants to merge 4 commits into from

2 participants

James Carpenter Jan Odvarko
James Carpenter

With the increasing popularity of CSS coding frameworks like less & Sass, the CSS wilderness is a changing. At its simplest level, these frameworks offer bundling of files (many CSS files into 1) to limit HTTP requests for more responsive online applications.

This causes a serious headache for developers when using firebug, as it is reporting the file name and line number in the bundled file (Note: This is accurate from the client side perspective, but it makes development difficult). On the server side however, the actual rule could be in one of many files, and even when the file name is correct, the line line numbers are inaccurate due to the server side importing of the other CSS files.

However, these frameworks provide an option to output a /* CSS Comment */ including the original line number and file name where the rule is declared, removing the confusion.

This pull request simply sniffs for a .less or .sass file and parses the comment if it finds one. Else, it doesn't touch anything. The footprint for this code update is very small and I attempted to use the existing source cache to make this a near zero-impact addition to an already amazing plugin.

I have seen a fair number of requests for this functionality, and someone even put together a Sass plugin but the less side of the world has been without a good solution. I hope this helps both sides.

http://www.lesscss.org/
http://www.dotlesscss.org/
http://sass-lang.com/

James Carpenter

Just finished a quick refactor to comply with the coding practices:
https://getfirebug.com/wiki/index.php/Firebug_Coding_Style

Jan Odvarko
Owner

Nice work James!

Related thread:
http://groups.google.com/group/firebug/browse_thread/thread/14300179d9587a89/d6c2fae58346ca1f

  • Could we have an issue report for this feature
  • The initial implementation should be done as Firebug extension
  • We also need a simple test case that can be used for testing (should be part of the issue report)

Honza

James Carpenter

For anyone following this pull request.

The issue report is located at:
http://code.google.com/p/fbug/issues/detail?id=5961

The fireless extension is located at:
https://github.com/janodvarko/fireless
with my fork located at:
https://github.com/jc4rp3nt3r/fireless

James Carpenter

The initial Alpha release of the plugin is ready:
https://github.com/jc4rp3nt3r/fireless

I provided a compiled XPI file for ease of install.

So far, this plugin has only been tested against dotLess, the .NET port of the {less} framework.

I hope to do a little research against the ports in other languages to see if what I have so far will work or not. If anyone has a Ruby or PHP version of {less} installed and available with the debug settings turned on, that would help me get this plugin up to speed faster.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
42  extension/content/firebug/css/cssPanel.js
@@ -1448,14 +1448,52 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
1448 1448
     getSourceLink: function(target, rule)
1449 1449
     {
1450 1450
         var element = rule.parentStyleSheet.ownerNode;
  1451
+        var line = getRuleLine(rule);
  1452
+        var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
1451 1453
         var href = rule.parentStyleSheet.href;  // Null means inline
1452 1454
 
1453 1455
         // http://code.google.com/p/fbug/issues/detail?id=452
1454 1456
         if (!href)
1455 1457
             href = element.ownerDocument.location.href;
  1458
+        
  1459
+        // if this is a less/sass file
  1460
+        var sFileType = (href.indexOf('.less') !== -1) ? 'less' :
  1461
+                        (href.indexOf('.sass') !== -1) ? 'sass' : null;
  1462
+        if (sFileType) {                                                        
  1463
+            var oDoc = Css.getDocumentForStyleSheet(rule.parentStyleSheet),
  1464
+                oStyleSheet = oDoc ? oDoc.styleSheets[instance] : null;
  1465
+            
  1466
+            if(oStyleSheet && this.context.sourceCache) {
  1467
+                // a counter for the current line index
  1468
+                var iLineIndex = line-1;
  1469
+                // handle to the css doc, type = array of text strings per line
  1470
+                var arrCss = this.context.sourceCache.load(oStyleSheet.href);
  1471
+                // dotLess format: /* /path/css-file.less:L123 */ sass format:  /* line 20, sass/_reset.sass */
  1472
+                var regEx = (sFileType === 'less') ? /\/\* ([^:]*):L(\d*) \*\// :
  1473
+                            (sFileType === 'sass') ? /\/\* line (\d*), ([^ ]*) \*\// :
  1474
+                            null;
  1475
+                
  1476
+                // prevent index out of bounds and stop looking after 5 lines
  1477
+                while(iLineIndex >= 0 && line - iLineIndex < 5) {
  1478
+                    if (regEx.test(arrCss[iLineIndex])) {
  1479
+                        // update the file and line numbers for both less and Sass style comments
  1480
+                        var arrMatch = arrCss[iLineIndex].match(regEx);
  1481
+                        
  1482
+                        if (sFileType === 'less') {
  1483
+                            href = arrMatch[1];
  1484
+                            line = arrMatch[2];
  1485
+                        }
  1486
+                        else if (sFileType === 'sass') {
  1487
+                            href = arrMatch[2];
  1488
+                            line = arrMatch[1];
  1489
+                        }
  1490
+                        break;   
  1491
+                    }
  1492
+                    iLineIndex -= 1;
  1493
+                }
  1494
+            }
  1495
+        }
1456 1496
 
1457  
-        var line = getRuleLine(rule);
1458  
-        var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
1459 1497
         var sourceLink = new SourceLink.SourceLink(href, line, "css", rule, instance);
1460 1498
 
1461 1499
         return sourceLink;
42  trace/FBTrace/chrome/firebug/content/css/cssPanel.js
@@ -1375,14 +1375,52 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
1375 1375
     getSourceLink: function(target, rule)
1376 1376
     {
1377 1377
         var element = rule.parentStyleSheet.ownerNode;
  1378
+        var line = getRuleLine(rule);
  1379
+        var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
1378 1380
         var href = rule.parentStyleSheet.href;  // Null means inline
1379 1381
 
1380 1382
         // http://code.google.com/p/fbug/issues/detail?id=452
1381 1383
         if (!href)
1382 1384
             href = element.ownerDocument.location.href;
  1385
+        
  1386
+        // if this is a less/sass file
  1387
+        var sFileType = (href.indexOf('.less') !== -1) ? 'less' :
  1388
+                        (href.indexOf('.sass') !== -1) ? 'sass' : null;
  1389
+        if (sFileType) {                                                        
  1390
+            var oDoc = Css.getDocumentForStyleSheet(rule.parentStyleSheet),
  1391
+                oStyleSheet = oDoc ? oDoc.styleSheets[instance] : null;
  1392
+            
  1393
+            if(oStyleSheet && this.context.sourceCache) {
  1394
+                // a counter for the current line index
  1395
+                var iLineIndex = line-1;
  1396
+                // handle to the css doc, type = array of text strings per line
  1397
+                var arrCss = this.context.sourceCache.load(oStyleSheet.href);
  1398
+                // dotLess format: /* /path/css-file.less:L123 */ sass format:  /* line 20, sass/_reset.sass */
  1399
+                var regEx = (sFileType === 'less') ? /\/\* ([^:]*):L(\d*) \*\// :
  1400
+                            (sFileType === 'sass') ? /\/\* line (\d*), ([^ ]*) \*\// :
  1401
+                            null;
  1402
+                
  1403
+                // prevent index out of bounds and stop looking after 5 lines
  1404
+                while(iLineIndex >= 0 && line - iLineIndex < 5) {
  1405
+                    if (regEx.test(arrCss[iLineIndex])) {
  1406
+                        // update the file and line numbers for both less and Sass style comments
  1407
+                        var arrMatch = arrCss[iLineIndex].match(regEx);
  1408
+                        
  1409
+                        if (sFileType === 'less') {
  1410
+                            href = arrMatch[1];
  1411
+                            line = arrMatch[2];
  1412
+                        }
  1413
+                        else if (sFileType === 'sass') {
  1414
+                            href = arrMatch[2];
  1415
+                            line = arrMatch[1];
  1416
+                        }
  1417
+                        break;   
  1418
+                    }
  1419
+                    iLineIndex -= 1;
  1420
+                }
  1421
+            }
  1422
+        }
1383 1423
 
1384  
-        var line = getRuleLine(rule);
1385  
-        var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
1386 1424
         var sourceLink = new SourceLink.SourceLink(href, line, "css", rule, instance);
1387 1425
 
1388 1426
         return sourceLink;
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.