4 small things about template search that would skyrocket style development for XF2

[CyberAP]

Source maps
With the move to LESS the final CSS output lost the connection between input and output. You can no longer search for exact selectors in XF2. That's where source maps come in handy. More importantly, Less.php already supports them, so it shouldn't be that big of a deal getting a source map output. Additionally, that would make it possible to use things like Emmet LiveStyle, unleashing the full potential of Designer Mode in XF2.

Line anchors
In order to properly utilize source maps we have to scroll editor viewport to the exact line that source map is pointing to. So search results should not only point to the template, but also to the first matched line. What a great opportunity to make this for any template, not only LESS. Typical search algorithm would transform from this:

enter query → find result → enter query in the CodeMirror searchbox → search again​

To this:

enter query → find result → done​

Search relevance
With the newly enabled source mappings it would require some changes on the information representation in the search results view. First of all, we would finally be able to see how many results were found in the template, that only would decrease the efforts to get the desired result. Secondly, we could differentiate between exact matches and mappings. Quick mockup:



Rebind search shortcuts to CodeMirror ones
Pretty self explanatory, default browser shortcuts like F3, Ctrl+F, Ctrl+G make no sense in the template editor, since they don't work within codemirror editor. Small change, but would eliminate the need to always focus CodeMirror window first before doing the search.

 

[Kirby]

Absoluteley great suggestions that would make Styling (and Add-on devlopment to some extend) significantly easier.

It would be interesing to know which issues the XF devs came about, as according to PHP source comments, enabling source maps seems to have already been considered but not (yet) done?

 

[Mike]

Performance was unusable when I tried enabling them previously. I'd have to try again though to double check exactly how big of an issue it was. It may have even crashed PHP.

 

[Kirby]

Ack, the performance is catastrophic.

Another problem seems to be includes which are performed before Lessphp takes over, so the resulting line numbers are not really usable.

 

[Kirby]

I've played aorund a bit with source maps and the results are very encouraging:

• Extended XF\Template\Templater::includeTemplate to return a less import (instead of rendered template) for less/css templates
  This is necessary to get correct mappings for the inluded sub-templates
• Extended XF\CssRenderer:getLessParser to enable sourceMap
• Extended XF\CssRenderer:getLessPrepend to return a less import for setup.less instead of rendered template
  This is necessary to get correct mappings for stuff defined in setup.less
• Added a code event listener on app_final_output to split the css.php calls so that each call processes only one template
• Extended XF\CssRenderer:handlesLessImport to prepare the code for less parsing
  Without this XF style variables, etc. would not be available causing less parse errors
  I've also changed to code to not use a random filename but the real template filename so the inspector does actually show useful information

This gives LessPHP a lot smaller files to parse and map and thus results in a significant performance boost when source map is enabled; in fact it doesn't feel much slower than without it.