Issue #1939090 by 2ndmile, hefox, Cottser, shanethehat, steveoliver, jenlampton, mr.baileys, derheap: Convert theme_tablesort_indicator() to Twig.

Task

Use Twig instead of PHPTemplate

Remaining

n/a

Profiling data

=== 8.x..8.x compared (519fe4bc90ab9..519fe53eaaaf2):

ct  : 130,464|130,464|0|0.0%
wt  : 646,158|644,671|-1,487|-0.2%
cpu : 640,039|640,041|2|0.0%
mu  : 15,265,824|15,265,824|0|0.0%
pmu : 15,571,320|15,571,320|0|0.0%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519fe4bc90ab9&...

=== 8.x..1939090-twig-sort-indicator compared (519fe4bc90ab9..519fe58959c26):

ct  : 130,464|130,550|86|0.1%
wt  : 646,158|646,620|462|0.1%
cpu : 640,039|640,040|1|0.0%
mu  : 15,265,824|15,327,384|61,560|0.4%
pmu : 15,571,320|15,650,000|78,680|0.5%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519fe4bc90ab9&...

Testing steps

Navigate to admin/appearance and set Stark as the admin theme.

Compare markup before and after applying the patch:
Navigate to admin/content, the tablesort indicator is in the "Updated" column header by default.

Related

#1885560: [meta] Convert everything in theme.inc to Twig
#1757550: [Meta] Convert core theme functions to Twig templates
#1973418: Remove tablesort-indicator.html.twig, use CSS instead

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

hefox’s picture

FileSize
1.99 KB
hefox’s picture

FileSize
1.99 KB

new line at end of file

hefox’s picture

Status: Active » Needs review
joelpittet’s picture

Status: Needs review » Needs work

@hefox, nice work!

We may not really need a twig template for this one. Possibly:
keep your preprocess and replace:
theme('image', ...)
with
array('#theme' => 'image', ...)

Delete the twig file and the 'template' from the theme_hook.

That would be closer to ideal for me... but at the vary least we need to drop the theme() calls from this one. What do you think about dropping the twig file?

hefox’s picture

Status: Needs work » Needs review
FileSize
1.17 KB

I admit I was feeling rather silly making a .html.twig with just '{{ image }}' in it.

How about this? Less work for when seven needs to change just the uri

joelpittet’s picture

@hefox, hell yeah! I would have not thought to use 'theme_hook_suggestions', does that have some benefits you would think over '#theme' => 'image'?

Not saying it's wrong, just haven't seen it used in the conversions yet, so I am curious, maybe I should be doing that as well in some cases.

hefox’s picture

Truefully, I haven't used 7/8 enough to say which is better. Did a dsm to see what was in $variables, saw that, and figured I'd try it and it worked XD

steveoliver’s picture

Let's see if this passes If so, it's what I'd do. Not sure about the t calls here.

hefox’s picture

I don't think there is any tests that test if the tablesort icon correctly shows

It doesn't show as far as I can see http://gyazo.com/ef2a4867b9e90694b83697e3d98511cb ; also tried it with '#theme' = 'image'. No error messages. I don't know how the details of how the theme system works in 7/8, but I suspect it's too late to do that in a preprocess cause it's theme( and not render(.

I also tried 'image' => array('#theme' ... but didn't work.

steveoliver’s picture

#9, yeah, you're probably right. In that case, your #5 looks pretty good.

star-szr’s picture

Status: Needs review » Needs work
Issue tags: +Needs manual testing

Can we please get some before/after screenshots testing #5?

mrf’s picture

Here is the before after for #5

Before:
Before

After:
After

hefox’s picture

Status: Needs work » Needs review

It's changed colours (look closely) as the override is needed in the seven theme #1938848: seven.theme - Convert PHPTemplate templates to Twig

star-szr’s picture

Assigned: Unassigned » star-szr
Status: Needs review » Needs work

This doesn't work when applied along with #1939068-26: Convert theme_image() to Twig, I'm hacking away at it.

star-szr’s picture

Assigned: star-szr » Unassigned

After playing around with this, I think we should just go ahead and create tablesort-indicator.html.twig, no matter how basic – with the assumption that it will be removed/consolidated afterwards.

The hacks to make a preprocess function output through a different theme hook are not pretty, and I don't like the idea of the output from template_preprocess_tablesort_indicator() being output through image.html.twig, even temporarily. Too confusing. If I call theme('tablesort_indicator') I'd like to be able to assume there actually is a tablesort-indicator.html.twig that can be overridden. I don't want to have to find template_preprocess_tablesort_indicator() and see in the docs that it's a special case :)

function template_preprocess_tablesort_indicator(&$variables) {
  …
  // Render this output through the image theme function or template.
  $variables['theme_hook_suggestion'] = 'image';
  // If the preprocess function exists, run our variables through it.
  if (function_exists('template_preprocess_image')) {
    template_preprocess_image($variables);
  }
}

So let's go ahead and create the template file with {{ image }} in it, please :)

star-szr’s picture

Issue tags: +Novice

Tagging as a Novice task to bring over this conversion from the sandbox.

I recommend taking a look at @c4rl's screencast: http://www.youtube.com/watch?v=HS4yKJjrb2E

If you'd like to work on this, please assign the issue to yourself. If you get stuck, drop by #drupal-twig on IRC or post your questions here. Thanks!

shanethehat’s picture

Assigned: Unassigned » shanethehat
shanethehat’s picture

Assigned: shanethehat » Unassigned
Status: Needs work » Needs review
FileSize
2.68 KB
2.56 KB
star-szr’s picture

Status: Needs review » Needs work

Looks good so far, thanks @shanethehat! We'll also need to remove theme_tablesort_indicator() and update drupal_common_theme() in theme.inc to add the 'template' key for the template we are adding.

Two small documentation nitpicks:

+++ b/core/includes/theme.incundefined
@@ -2255,20 +2255,34 @@ function theme_table($variables) {
+ * Prepare variables for tablesort indicator templates.
...
+ * Default template: tablesort-indicator.html.twig

"Prepares" instead of "Prepare" per #1913208: [policy] Standardize template preprocess function documentation, and add a period after .html.twig for the Default template.

+++ b/core/includes/theme.incundefined
@@ -2255,20 +2255,34 @@ function theme_table($variables) {
+ * @todo This is currently just a copy of image.html.twig

+++ b/core/modules/system/templates/tablesort-indicator.html.twigundefined
@@ -0,0 +1,18 @@
+{# @todo This is currently just a copy of image.html.twig #}

Let's change these to refer to our consolidation issue, something like this (would need to be wrapped and formatted per http://drupal.org/node/1354#todo):

@todo Remove this and consolidate with 'image', see http://drupal.org/node/1804614.

Also, in the preprocess function we need a line just containing * between the @params and this @todo.

2ndmile’s picture

Assigned: Unassigned » 2ndmile

I'll take it.

2ndmile’s picture

Issue summary: View changes

Add testing steps

2ndmile’s picture

Status: Needs work » Needs review
FileSize
1.68 KB
2.89 KB

Changes from #19 implemented. Does the @todo in the tablesort-indicator.html.twig also need to conform to the 80 character limit? If not, please review.

star-szr’s picture

Status: Needs review » Needs work

Ignore what I said about removing theme_tablesort_indicator() in #19, sorry about that :)

+++ b/core/includes/theme.incundefined
@@ -2255,14 +2255,16 @@ function theme_table($variables) {
+ * ¶
+ * @todo Remove this and consolidate with 'image',
+ *   see http://drupal.org/node/1804614.

Trailing whitespace just before the @todo in preprocess, please remove per http://drupal.org/coding-standards#indenting.

The @todo should be wrapped and indented like this (nicely done), but 'see' can go on the first line.

2ndmile’s picture

Status: Needs work » Needs review
FileSize
699 bytes
2.89 KB

Changes from #22 implemented.

2ndmile’s picture

Wrapped comment in tablesort-indicator.html.twig. Please review.

thedavidmeister’s picture

Status: Needs review » Needs work

Nitpick but, trailing whitespace was reintroduced in #24.

First line of:

+{# 
+  @todo Remove this and consolidate with 'image', see
2ndmile’s picture

Whitespace removed per #25. (What a newb, this 2ndMile guy...gees)

thedavidmeister’s picture

#26, I know I'm being picky, sorry!

+ * - src: URL to ascending or descending image.
+ * - attributes: Image attributes. Includes: width, height, alt, title.

The template uses attributes.src which is not documented here. Each property of attributes should be described on an indented new line - there's nothing official around that yet but pretty much all the other patches are doing that so it's kind of becoming a de facto standard.

star-szr’s picture

I agree we should document src, but I'm not sure we need to describe all the other attributes in detail. In this case, let's just expand on 'src', and leave the rest of the attributes as an "inline" list if we can.

It looks like the 'src' variable doc in the template file is incorrect, that should be 'uri'.

+++ b/core/includes/theme.incundefined
@@ -2255,20 +2255,36 @@ function theme_table($variables) {
+    $variables['uri'] = 'core/misc/arrow-asc.png';
...
+    $variables['uri'] = 'core/misc/arrow-desc.png';
...
+  // Build the attributes to the indicator image.
+  $attributes = array(
+    'width' => 13,
+    'height' => 13,
+    'src' => file_create_url($variables['uri']),
+    'alt' => $alt_title,
+    'title' => $alt_title,
+  );
+  $variables['attributes'] = new Attribute($attributes);
2ndmile’s picture

Status: Needs work » Needs review
FileSize
721 bytes
2.95 KB

Let me know if this is correct.

star-szr’s picture

Status: Needs review » Needs work

@2ndmile that looks pretty good to me but as per http://drupal.org/node/1354#lists the sub-list would need to be preceded by a colon (every list needs to be preceded by a colon). After looking at it I was thinking maybe we should just document each one on its own line - but #1939068: Convert theme_image() to Twig doesn't document any sub-attributes either.

I vote we use the same variable docs as image.html.twig #1939068: Convert theme_image() to Twig and use <img{{attributes}} /> instead of <img src="{{ attributes.src }}"{{ attributes }} /> because the template is essentially a copy of image.html.twig.

2ndmile’s picture

Status: Needs work » Needs review
FileSize
908 bytes
2.85 KB

Implemented #30

star-szr’s picture

Assigned: 2ndmile » star-szr

This is looking good, I will verify the markup once more but this look RTBC to me. Thanks @2ndmile :)

star-szr’s picture

Assigned: star-szr » Unassigned
Issue tags: -Novice, -Needs manual testing
FileSize
559 bytes
2.89 KB

Tweaked to add the 'typeof' attribute that was previously added via rdf_preprocess_image(), and moved the order of the attributes to match the current markup.

Before:
<img typeof="foaf:Image" src="http://d8.dev/core/misc/arrow-asc.png" width="13" height="13" alt="sort ascending" title="sort ascending" />

#31:
<img width="13" height="13" src="http://d8.dev/core/misc/arrow-asc.png" alt="sort ascending" title="sort ascending" />

This patch:
<img typeof="foaf:Image" src="http://d8.dev/core/misc/arrow-asc.png" width="13" height="13" alt="sort ascending" title="sort ascending" />

RTBC in my opinion but will leave it for someone else to review the code and docs once more.

star-szr’s picture

FileSize
721 bytes
2.89 KB

And since 'attributes' is the main variable now, let's move it up in the list.

star-szr’s picture

Issue summary: View changes

added meta

jenlampton’s picture

Issue summary: View changes

rm snad

jenlampton’s picture

wow, this looks really great. I almost marked it RTBC but found one small gramatical error, so decided to reroll. While in there I also added a link to a new issue I created specifically to remove this sucker. bwahahahaha!

thedavidmeister’s picture

Assigned: Unassigned » thedavidmeister

I added #1973418: Remove tablesort-indicator.html.twig, use CSS instead as an "after commit" issue on #1757550: [Meta] Convert core theme functions to Twig templates.

I'm going to review this now, hopefully mark it RTBC :)

thedavidmeister’s picture

Nitpick: Not even sure if it justifies a re-roll before RTBC considering we're planning to remove the whole template but:

+ */
+  @todo Remove this template and consolidate with 'image' as per
+  http://drupal.org/node/1973418
+#}

Shouldn't the @todo be in it's own comment or part of the @file block? it seems awkward to have it "floating" just below the */

About to manually test the markup...

thedavidmeister’s picture

Status: Needs review » Reviewed & tested by the community

Here's my manual check of the markup, confirming #33 but for patch #35:

before (link to ascending):

<img typeof="foaf:Image" src="http://localhost:8888/d8raw/core/misc/arrow-asc.png" width="13" height="13" alt="sort ascending" title="sort ascending" />

after (link to ascending):

<img typeof="foaf:Image" src="http://localhost:8888/d8html/core/misc/arrow-asc.png" width="13" height="13" alt="sort ascending" title="sort ascending" />

before (link to descending):

<img typeof="foaf:Image" src="http://localhost:8888/d8raw/core/misc/arrow-desc.png" width="13" height="13" alt="sort descending" title="sort descending" />

after (link to descending):

<img typeof="foaf:Image" src="http://localhost:8888/d8html/core/misc/arrow-desc.png" width="13" height="13" alt="sort descending" title="sort descending" />

shanethehat’s picture

Doesn't the change introduced in #33 enforce an RDF attribute even when the RDF module is disabled? I thought it would be preferable to pass a render array using #theme => image to the template, so that any registered image theme hooks would still be applied. If I'm wrong, please correct me because it will impact the work I'm done on #1898420: image.module - Convert theme_ functions to Twig.

star-szr’s picture

Status: Reviewed & tested by the community » Needs work

No, you're absolutely right @shanethehat. Didn't think of that.

shanethehat’s picture

Status: Needs work » Needs review
FileSize
2.83 KB
1.84 KB

Fixes the question from #39, and adds spaceless tags to ensure no trailing spaces after an inline element.

star-szr’s picture

Issue tags: +Needs manual testing

Code looks good, thanks @shanethehat! Can we get one more manual test (markup comparison) please? Testing steps are up in the issue summary.

thedavidmeister’s picture

yeah I'll do it.

thedavidmeister’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs manual testing

Just checking the "after" HTML since the "before" HTML is already in #38:

<img typeof="foaf:Image" src="http://localhost:8888/d8raw/core/misc/arrow-asc.png" width="13" height="13" alt="sort ascending" title="sort ascending" />

<img typeof="foaf:Image" src="http://localhost:8888/d8raw/core/misc/arrow-desc.png" width="13" height="13" alt="sort descending" title="sort descending" />

thedavidmeister’s picture

Assigned: thedavidmeister » Unassigned
star-szr’s picture

FileSize
1.08 KB
2.62 KB

Just removing consolidation todos - see #1757550-38: [Meta] Convert core theme functions to Twig templates for reasoning.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +needs profiling
mr.baileys’s picture

Assigned: Unassigned » mr.baileys

I'll profile this one.

mr.baileys’s picture

Assigned: mr.baileys » Unassigned
Issue tags: -needs profiling

Finished profiling:

=== 8.x..8.x compared (519fd0873c1d7..519fd0d6038b3):

ct  : 124,821|124,821|0|0.0%
wt  : 621,279|621,348|69|0.0%
cpu : 616,039|616,039|0|0.0%
mu  : 14,840,488|14,840,488|0|0.0%
pmu : 15,176,552|15,176,552|0|0.0%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519fd0873c1d7&...

=== 8.x..1939090-twig-sort-indicator compared (519fd0873c1d7..519fd13122e91):

ct  : 124,821|124,847|26|0.0%
wt  : 621,279|620,227|-1,052|-0.2%
cpu : 616,039|616,038|-1|-0.0%
mu  : 14,840,488|14,828,400|-12,088|-0.1%
pmu : 15,176,552|15,177,448|896|0.0%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519fd0873c1d7&...

mr.baileys’s picture

Status: Needs work » Reviewed & tested by the community

Since this was RTBC prior to the profiling request, and since profiling shows a slight performance improvement, I'm going to go ahead and set this back to RTBC.

mr.baileys’s picture

Status: Reviewed & tested by the community » Needs work

Hold on. I double-checked this patch by enabling twig_debug, and the template is not showing up. Trying to figure out what's happening...

mr.baileys’s picture

Status: Needs work » Needs review

Ok, my first profiling runs used Seven, where the tablesort indicator is overriden, and the twig template file is not used. I re-ran the numbers, this time using Stark and making sure that the tablesort-indicator.html.twig template is used:

=== 8.x..8.x compared (519fe4bc90ab9..519fe53eaaaf2):

ct  : 130,464|130,464|0|0.0%
wt  : 646,158|644,671|-1,487|-0.2%
cpu : 640,039|640,041|2|0.0%
mu  : 15,265,824|15,265,824|0|0.0%
pmu : 15,571,320|15,571,320|0|0.0%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519fe4bc90ab9&...

Run 519fe4bc90ab9 uploaded successfully for drupal-perf-mrbaileys.
Run 519fe58959c26 uploaded successfully for drupal-perf-mrbaileys.
=== 8.x..1939090-twig-sort-indicator compared (519fe4bc90ab9..519fe58959c26):

ct  : 130,464|130,550|86|0.1%
wt  : 646,158|646,620|462|0.1%
cpu : 640,039|640,040|1|0.0%
mu  : 15,265,824|15,327,384|61,560|0.4%
pmu : 15,571,320|15,650,000|78,680|0.5%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519fe4bc90ab9&...

joelpittet’s picture

Status: Needs review » Reviewed & tested by the community

Great work @mr.baileys thanks for profiling this!
Seems to be within the margin of error.

star-szr’s picture

Issue tags: -Twig

#46: 1939090-46.patch queued for re-testing.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 1939090-46.patch, failed testing.

star-szr’s picture

Status: Needs work » Needs review
Issue tags: +Twig

#46: 1939090-46.patch queued for re-testing.

star-szr’s picture

Status: Needs review » Reviewed & tested by the community

Back to RTBC per #53. Was just making sure this still applied.

star-szr’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Novice, +Needs reroll

No longer applies, needs a quick reroll.

derheap’s picture

Assigned: Unassigned » derheap

Trying reroll.

derheap’s picture

Assigned: derheap » Unassigned
Status: Needs work » Needs review
FileSize
2.63 KB
star-szr’s picture

Issue tags: -Novice, -Needs reroll

Reroll looks good, thanks @derheap!

Status: Needs review » Needs work
Issue tags: -Twig

The last submitted patch, 1939090-60.patch, failed testing.

star-szr’s picture

Status: Needs work » Needs review
Issue tags: +Twig

#60: 1939090-60.patch queued for re-testing.

star-szr’s picture

Issue summary: View changes

related

star-szr’s picture

Issue summary: View changes

Add commit message and profiling data

star-szr’s picture

Status: Needs review » Reviewed & tested by the community

Back to RTBC. Added the profiling data and a commit message to the issue summary.

Also did one more round of manual testing with and without RDF enabled and this is still looking good. Thanks everyone!

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 9ee90ca and pushed to 8.x. Thanks!

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

Anonymous’s picture

Issue summary: View changes

Add something in remaining