Re-skinning Trac 1.0

[nacin]

As part of a datacenter migration, Trac was updated to 1.0, which has a new UI featuring rounded corners, gradients, drop shadows; and fieldsets with rounded corners, gradients, and drop shadows.

Let's update ​http://wordpress.org/style/trac/wp-trac.css?2 to replace all of the ugly and to fix some of our custom styling broken with the upgrade.

We went from Trac 0.12.4 to 1.0. Here's a diff of the relevant CSS/JS/images: ​http://trac.edgewall.org/changeset?old_path=%2Ftags%2Ftrac-0.12.4%2Ftrac%2Fhtdocs&old=11784&new_path=%2Ftags%2Ftrac-1.0%2Ftrac%2Fhtdocs&new=11784

[SergeyBiryukov]

Some bugs with the new UI:

1. Can't mark a tickets as duplicates, the text input does not appear.
2. The top menu buttons have wrong text color on hover: 24165.top-menu-hover.png​.
3. Missing field labels are barely visible, the contrast seems too low: 24165.missing-fields-color.png​ (I guess they're intentionally de-emphasized, but the contrast could be a bit higher).
4. Inline button labels seem blurry and misaligned: 24165.inline-buttons.png​ (Firefox 20, Windows). Removing text-shadow and fixed height appears to fix that: 24165.inline-buttons.after.png​.

[SergeyBiryukov]

Apparently anyone is able to set milestone now: #24174.

[SergeyBiryukov]

Getting a Trac internal error when trying to mark a ticket as a duplicate: 24165.internal-error.png​.

[SergeyBiryukov]

If you add a keyword from the dropdown and then remove it, it doesn't become available in the dropdown again, so you can only add it back using the "manual" text input.

[RDall]

I'd suggest that on the https://core.trac.wordpress.org/milestone/3.6 page on roadmap.css we set #stats to float: left;

#stats {
    float: left;
}

So on a wide screen the "Ticket status" is not wildly off to the right…  

See screenshot: 
​http://cl.ly/image/2C241G3a203B

[DrewAPicture]

A couple of seconds after you start typing a comment, all of the comment author gravatars disappear.

[nacin]

Things that have been fixed:

• Marking tickets as a duplicate. First, the plugin wasn't installed. Second, the plugin needed to be updated for 1.0.
• Milestone and priority are again blocked for those who are not bug gardeners. (Same situation - plugin was not installed.)

[nacin]

• .diff files have been appearing in a different style, while .patch files have been normal. dd32 and I tracked this to ​http://trac.edgewall.org/changeset/11319. An update to Trac 1.0.1 (pending) will fix this.

[nacin]

Replying to DrewAPicture:

A couple of seconds after you start typing a comment, all of the comment author gravatars disappear.

I really have no idea what the hell Trac is thinking here. Basically, the XHR request *RELOADS THE ENTIRE PAGE*. And does so in a way that does not load our own template customizations. It's like a comment preview on a Twenty Ten child theme replacing the *entire page* with Twenty Ten.

So, fun times. We may just turn off the comment previews, I guess. I'd wager that they annoy people more than help.

[DrewAPicture]

Replying to nacin:

Replying to DrewAPicture:

A couple of seconds after you start typing a comment, all of the comment author gravatars disappear.

I really have no idea what the hell Trac is thinking here. Basically, the XHR request *RELOADS THE ENTIRE PAGE*.

I think it's their solution to the "this ticket has been changed" message, so they reload the page after you start typing to make sure you don't lose your comment.

[sabreuse]

Replying to nacin:

I really have no idea what the hell Trac is thinking here. Basically, the XHR request *RELOADS THE ENTIRE PAGE*. And does so in a way that does not load our own template customizations. It's like a comment preview on a Twenty Ten child theme replacing the *entire page* with Twenty Ten.

So, fun times. We may just turn off the comment previews, I guess. I'd wager that they annoy people more than help.

Ugh. I use and appreciate comment previews because I'm apparently incapable of formatting a comment without having to go back and fix it three times. But I'd rather train myself to hit the manual preview button than support something that idiotic.

[nacin]

Since the previews in 1.0 handle a lot of things (new comments, conflicting changes, etc.), I'm not going to disable them. I will, though, look into why our custom template isn't applying.

"Attachments" is again expanded by default again.

I removed a ton of box shadows and overly rounded corners.

If you add a keyword from the dropdown and then remove it, it doesn't become available in the dropdown again, so you can only add it back using the "manual" text input.

If someone can figure this out (I haven't looked yet), you can submit a patch and upload it here. ​Here's the file in version control.

[nacin]

Replying to nacin:

It's like a comment preview on a Twenty Ten child theme replacing the *entire page* with Twenty Ten.

I have to take this back. It's definitely more clever than that. Trac does do a partial template load (it did not appear that way as it POST'd to itself and returned a sizable chunk of HTML). This breaks because our global template customization file is not loaded during this partial load.

I'm working around it.

[nacin]

Gravatars are back for ticket previews. I wouldn't mind a design that makes the gravatars and author names a bit bigger, and gives a little more whitespace between comments.

[DrewAPicture]

Replying to nacin:

Gravatars are back for ticket previews. I wouldn't mind a design that makes the gravatars and author names a bit bigger, and gives a little more whitespace between comments.

What about something like this (traception):

I increased gravatars to 30px, added bottom margin, bumped the names to 101% and spaced the buttons apart a bit. Also, some of the changes are in tickets.css, is that versioned somewhere?

[nacin]

Replying to DrewAPicture:

I increased gravatars to 30px, added bottom margin, bumped the names to 101% and spaced the buttons apart a bit. Also, some of the changes are in tickets.css, is that versioned somewhere?

That's a core Trac file. Everything we do needs to be an override in wp-trac.css.

[DrewAPicture]

24165.patch​ should cover everything from comment:20

[DrewAPicture]

spacing, gravatars, buttons

[rmccue]

I see we now have the full .org header. The main ticket area (#content.ticket) seems a little too squashed as-is, I think it'd be a bit better if it was the same width as the header (930px).

Also, the login items seem a little cramped up in the banner. IMO they'd look better opposite #ctxtnav on the left.

[SergeyBiryukov]

Replying to nacin:

If you add a keyword from the dropdown and then remove it, it doesn't become available in the dropdown again, so you can only add it back using the "manual" text input.

If someone can figure this out (I haven't looked yet), you can submit a patch and upload it here. ​Here's the file in version control.

24165.keywords.patch​ should fix that.

[nacin]

Replying to rmccue:

I see we now have the full .org header. The main ticket area (#content.ticket) seems a little too squashed as-is, I think it'd be a bit better if it was the same width as the header (930px).

It's actually a bit wider than it was (which was also Trac's default width), because I bumped up the font size a bit. However, the new font is a bit narrower. The end result is we're already at 120-130 characters per line, give or take. So I'd rather not eat up any more space. If things feel squashed, maybe we can adjust padding/whitespace etc.

Also, the login items seem a little cramped up in the banner. IMO they'd look better opposite #ctxtnav on the left.

Probably — between Trac and WP.org, there's a lot of navigation. But, I'm trying to achieve consistency with login items being in that location across multiple sites. See also ​http://wordpress.org/support/ (where many might be coming from), ​http://translate.wordpress.org/, etc. Let's let this ride for now.

[bpetty]

It looks like we break out of max-width for many of the reports, but we still don't for ​custom queries or any reports based on custom queries (like ​report 46). Can we get that fixed?

[SergeyBiryukov]

color: 3333 in [38/meta] looks like a typo.

[nacin]

Replying to bpetty:

It looks like we break out of max-width for many of the reports, but we still don't for ​custom queries or any reports based on custom queries (like ​report 46). Can we get that fixed?

I actually had it set up to "break out" on a few other pages: query, browser, attachments (uploaded patches), and changesets. See ​31/meta. ocean90 convinced me it wasn't needed for code. That left /query. It occurred to me that queries were almost always custom by a user, and probably wouldn't need an absolute ton of room. Report 46 happens to be the only non-SQL report we have. I'm happy to add them back for queries if that is what the consensus is.

Sergey: Fixing.

[SergeyBiryukov]

The font used for changeset descriptions in blame mode is too small: 24165.blame.png​.

Also, the white space on the left and right makes the changeset window too narrow and results in horizontal scrolling. It would probably look better if the main source code area filled up the whole screen.

[nacin]

Fixed blame styling (font size and overflow) in ​[meta43].

[SergeyBiryukov]

Trying to squeeze Trac into 944px doesn't seem to work neither for reports (24165.report-width.png​) nor for source browser (24165.browse-source-width.png​). It also only leaves about 550px for blame mode, which makes the code with longer lines less readable (24165.blame-width.png​, 24165.blame-width.2.png​).

[nacin]

Replying to SergeyBiryukov:

Trying to squeeze Trac into 944px doesn't seem to work neither for reports (24165.report-width.png​) nor for source browser (24165.browse-source-width.png​). It also only leaves about 550px for blame mode, which makes the code with longer lines less readable (24165.blame-width.png​, 24165.blame-width.2.png​).

Reports were supposed to be full width, see ​[meta44] (broken by ​[meta43]). In ​[meta45] I made it so blame changesets are auto width, which is significantly more room if you have space.

I'm not concerned about the browse-source width for now, as it's only over by 50-150 pixels during my testing. We could change the browser directory view to be 1100px, let's say, but that would then affect viewing files too, and then that kind of spirals into attachments, etc. If we can't view our code in a 960px wide window, there are larger issues.

[RDall]

iPhone view of Trac

[RDall]

I am not sure if this has been covered yet. But the mobile view of Trac is somewhat broken in the new version of Trac.

Just though I'd add a screenshot for what it is worth :-)

[helen]

Replying to RDall:

Yeah... should probably kill that so long as the header isn't also responsive.

[nacin]

Going to mark this as fixed. Any issues can be opened up on ​http://meta.trac.wordpress.org/ under the Trac component.

The responsiveness of the header is ​#meta53.