Currently Theme Developer inserts spans to do its magic. Although it works, it causes some problems: #777246: User permissions page is broken #1031080: Value for '- None -' in term reference field is not rendered #1102766: Theme developer breaks views grouping #1084202: Interferes with date_repeat #1044870: Theme developer breaks drupal_set_message #775574: Theme Developer changes views, Grouping field title repeats #1025380: Admin module's menu doesn't work

So people are requesting ways to easily disable theme developer or enable it only for some users: #699020: Option to disable devel_themer for user 1 #1185920: disable themer for admin interface? #1088176: Stop it from admin pages #767462: add an options to switch off the themer #321352: Theme Developer per User

A possible solution is to use comments #425716: Use comments instead of spans to markup theme calls

Alternatively we could insert spans (or divs) smartly and reuse existing html as much as possible. This is the approach i've taken and i've attached a small proof of concept patch that will limit the use of spans as much as possible. It will look to see if the resulting html of a hook has a 'root tag'. e.g: <div>Hi everyone.. other html here</div>. In this case it will add the thmr attribute directly to the div. If a root element isn't found it falls back to the original span-method.

P.S. The comments approach looks like a great approach to solving this issue. But i only just came across it when writing this. I'm going to look into it when i have some spare time.

Comments

kenneth.venken’s picture

StatusFileSize
new4.56 KB

Ok, so it seems that the comments solution still needs some work to support outlines and parent elements.
I've improved my method and it should be ready to be used. It supports outlines and parent elements.

Every hook returns some sort of html. Master branch just wraps this html in span tags. This causes some layouts to break because it conflicts with the css selectors and possible span css defined in the theme. My method parses the html and adds thmr keys to the top level elements.

For example, lets say a hook returns:

<h2>this is a <strong>title</strong></h2>
<p> paragraph </p>
Just some text

This code contains three top level elements; The H2, p and the text "Just some text".

What my method does, is insert the thmr="thmr_#" attribute to the two top level tags and will wrap the text element in a span. So the result would be

<h2 thmr="thmr_3">this is a <strong>title</strong></h2>
<p thmr="thmr_3> paragraph </p>
<span thmr="thmr_3">Just some text</span>

As you can see, insertion of spans is kept to an absolute minimum. Most of all, it won't interfere with existing css selectors. I've also added some span css to devel_themer to make sure the inserted spans are always display:inline so the layout isn't changed.

Feel free to improve the code however you want.

kenneth.venken’s picture

StatusFileSize
new4.51 KB

The previous patch still contains some debugging code. Use this patch

kenneth.venken’s picture

Status: Needs work » Needs review
kenneth.venken’s picture

Assigned: kenneth.venken » Unassigned
kenneth.venken’s picture

Category: feature » bug
kenneth.venken’s picture

StatusFileSize
new4.91 KB

i just fixed bugs #1129526: "template called" does not mention the page template and #1031080: Value for '- None -' in term reference field is not rendered. They are also present in this code, so here's a patch without them.

khiminrm’s picture

Subscribe

afeijo’s picture

Status: Needs review » Reviewed & tested by the community

#2 works!! You saved me :)

kenneth.venken’s picture

StatusFileSize
new6.69 KB
new6.32 KB

Ok, so one final adjustment. It is possible that two different thmr attributes are added to the same tag. These patches will fix that and will merge the keys into one thmr attribute: e.g:

<div thmr="thmr_#parent# thmr_#child#"> 
in stead of
<div thmr="thmr_#parent#" thmr="thmr_#child#">

I've added two patches, one without the extra bugfixes as described in #6, one with.

effulgentsia’s picture

Status: Reviewed & tested by the community » Needs work

Thanks, Kenneth. I really appreciate you stepping in and giving this module some love. Some feedback about the smaller patch in #9:

Firstly, check out http://drupal.org/project/dreditor. If you install that, you get "Review" buttons (well, links that look like buttons) appearing next to patches on d.o. issue comments, that when you click, opens a neat patch review tool. One of the things it does is highlight in red any whitespace that doesn't conform to Drupal coding standards (e.g., tabs instead of spaces and trailing whitespace). You have several of those in the patch. Please fix them.

+++ b/devel_themer.css
@@ -1,3 +1,9 @@
+span.k.e.n.t.h.v[thmr] {
+	display:inline;
+	padding:0;
+	margin:0;
+}
+
...
+++ b/devel_themer.module
@@ -184,6 +184,118 @@ function devel_themer_module_implements_alter(&$implementations, $hook) {
+          $this->tree[$cur][0] = "<span thmr='$key' class='k e n t h v'>{$current[0]}</span>";

I think this is overkill, and maybe best left to follow-up issues as specific use-cases come up. I wonder if we could just start with a single class ("devel-themer-wrapper" ?), which would already be better than what the module has currently, and then see where that's insufficient.

+++ b/devel_themer.module
@@ -184,6 +184,118 @@ function devel_themer_module_implements_alter(&$implementations, $hook) {
+class devel_themer_html {

I didn't review the implementation in detail yet. Is there no existing GPL implementation of this functionality that we can use rather than something custom? Maybe there isn't, but if there is, I think it would be good to leverage something that's already been thoroughly tested and is being maintained.

It is possible that two different thmr attributes are added to the same tag.

Can you give some examples of when this happens (any examples from core only, or only with certain contrib modules/themes)? I'd like to make sure people can test these situations in different browsers, and share their results.

I'd also like to see more feedback here from others (@afeijo: thanks for yours, but can you state what browser(s) you tried this on), so I asked for that in #425716-15: Use comments instead of spans to markup theme calls.

kenneth.venken’s picture

Status: Needs work » Needs review
StatusFileSize
new5.68 KB

So i installed dreditor and tidied up my patch. I also rebased it against the current version.

I think this is overkill, and maybe best left to follow-up issues as specific use-cases come up. I wonder if we could just start with a single class ("devel-themer-wrapper" ?), which would already be better than what the module has currently, and then see where that's insufficient.

It probably is. Changed it in the new patch.

I didn't review the implementation in detail yet. Is there no existing GPL implementation of this functionality that we can use rather than something custom? Maybe there isn't, but if there is, I think it would be good to leverage something that's already been thoroughly tested and is being maintained.

I did a quick google search and found some implementations (html5lib, PHP Document Object Model,...) but didn't find a simple one that can handle html fragments. Using an existing library, we would still need to write code that adds the keys only to toplevel elements. We would get the parsing of html to a tree for free but that's currently about 20 loc. And how many bugs can there be in 20 loc :).

Can you give some examples of when this happens (any examples from core only, or only with certain contrib modules/themes)? I'd like to make sure people can test these situations in different browsers, and share their results.

The rss icon on the localhost/node page for example (bartik theme). It has an a-wrapper that will get two thmr keys assigned to it.

<a class="feed-icon" title="Subscribe to Devel_themer development RSS" href="/devel_themer/?q=rss.xml" thmr="thmr_1 thmr_3">
lucascaro’s picture

just fyi, I got this error:
# patch < html_fix_revised_0.patch
patching file devel_themer.css
patching file devel_themer.js
patching file devel_themer.module
Hunk #2 FAILED at 318.
Hunk #3 succeeded at 372 (offset -10 lines).
1 out of 3 hunks FAILED -- saving rejects to file devel_themer.module.rej

kenneth.venken’s picture

No problems here. I've tested it with the latest version and the patch applies fine:

Either

:~$ cd ~/devel_themer
:~/devel_themer$ git apply ~/html_fix_revised_0.patch

or

:~$ cd ~/devel_themer
:~/devel_themer$ patch < ~/html_fix_revised_0.patch 
patching file devel_themer.css
patching file devel_themer.js
patching file devel_themer.module

will do.

kenneth.venken’s picture

StatusFileSize
new915 bytes

And how many bugs can there be in 20 loc.

It seems at least two. Patch attached, should be applied after #11.

kenneth.venken’s picture

StatusFileSize
new5.75 KB

This patch combines the patches in #11 and #14.

tribsel’s picture

#16 worked for me, thanks

Fidelix’s picture

Status: Needs review » Reviewed & tested by the community

#15 Worked for me on the context module page.

matglas86’s picture

It works great. Way better than it was.

dr0bz’s picture

#15 is not working with the current version:

patching file devel_themer.css
patching file devel_themer.module
Hunk #2 FAILED at 317.
Hunk #3 succeeded at 393 (offset 11 lines).
1 out of 3 hunks FAILED -- saving rejects to file devel_themer.module.rej

I'm trying this patch to get vertical tabs working according to this issue.
Could you look into it?

lucascaro’s picture

awesome!
devel_themer 7.x-1.x-dev does not work out of the box (with my zen child theme) but using this patch (#15) it does so I think this should get into dev as soon as possible.
thanks!

kenneth.venken’s picture

Status: Reviewed & tested by the community » Needs review
StatusFileSize
new4.51 KB

Improved version. The simplehtmldom module (http://drupal.org/project/simplehtmldom) is used to insert the markers.

n4rc1ssus’s picture

Priority: Major » Minor

I've tried all the patches in succession and when the pop-up dialog opens it still pushes everything off of the shortcut bar (hidden or not). The buttons themselves still work but with my theme's background color you can't even see them to find them unless you happen to hover over them.

beanluc’s picture

Status: Needs review » Reviewed & tested by the community

RTBC for me. Module works exactly as expected, with the patch from #22, in several different themes, including core, contrib and custom ones.

beanluc’s picture

Priority: Minor » Major

"Minor" would be the appropriate status for an issue describing the effects *after* n4rc1ssus applied the patch (see #23), but, the impact without the patch at all is still major. That's the appropriate status for the current issue.

jrsinclair’s picture

I've tested #22 and it makes the module usable again. Thank you.

knalstaaf’s picture

Is there a final patch that does all of the above?

I've applied some now (started with the last one) but things still aren't working for me. The toggle div doesn't even appear in the code (themer-toggle).

It does work if the Views Slideshow is disabled though.

beanluc’s picture

Patch #22 should be all you need.

knalstaaf’s picture

That's the very first one I had applied, to no avail (from which I started applying the earlier ones).

I disabled the slideshow for a while and got what I needed.

beanluc’s picture

I'm not involved with the development, maintenance or support of this module, but, it almost certainly would be of help to those who are if you were to describe what "doesn't work" looks like.

Does nothing at all?

Yields broken website?

Generates error messages?

Isn't installable?

Something else?

Under what conditions: With core themes, contrib themes or your custom theme?

For what it's worth, I also use Views Slideshow, and didn't have a problem.

knalstaaf’s picture

Status: Needs review » Reviewed & tested by the community

The only thing that's happening, or not happening, is the checkbox appearing on the left bottom. It's there in the admin theme (Seven), but not in the custom theme (Omega theme).

Other modules being actively used on those pages: Language switcher dropdown, Featured content.

itaine’s picture

#22 needs to be re-rolled. Its no longer applies cleanly to 7-x-1.x-dev.

beanluc’s picture

Status: Reviewed & tested by the community » Needs work

Needs work, according to #32.

beanluc’s picture

Status: Needs work » Needs review
StatusFileSize
new5.04 KB
kenneth.venken’s picture

Status: Reviewed & tested by the community » Fixed

I've commit the patch in #34 to 7.x-1.x.
I feel confident it will improve the useability of theme developer although it probably needs more real world testing.

itaine’s picture

Getting the following after trying to pull down drush dl devel_themer:

File devel_themer-7.x-1.x-dev.tar.gz is corrupt (wrong md5 checksum).

However, pulled down nicely via git clone, but after enabling I get a http error 500.

kenneth.venken’s picture

I can't reproduce your problems. I can download with drush dl devel_themer after which drush en devel_themer will correctly download and enable the simplehtmldom module.

I've also manually verified the md5 checksum:

kenneth@laptop:~$ md5sum devel_themer-7.x-1.x-dev.tar.gz 
2aa18e0e67ce7227784a95ef8b84d8a7  /home/kenneth/devel_themer-7.x-1.x-dev.tar.gz
kenneth@laptop:~$ md5sum devel_themer-7.x-1.x-dev.zip 
45dde8765ce888d7dbbeca3421949aec  /home/kenneth/devel_themer-7.x-1.x-dev.zip

Could you perhaps post the output of your drush commands or try to manually download, verify checksum and enable the module? Make sure to also install the simplehtmldom module.

itaine’s picture

Works like a charm! Don't know what went wrong the first time around.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

more info about new method

held69’s picture

Issue summary: View changes

Using latest (dev) version but i am still not seeing a theme info checkbox.

tested on:
bartik
garland
corporate clean

finally got this to work with 7.x-1.12 simplehtmldom instead of 7.x-2.0/7.x-2.x-dev