Make WordPress Core

Opened 12 years ago

Closed 9 years ago

#21605 closed defect (bug) (worksforme)

Fix TinyMCE statusbar styling

Reported by: azaozz's profile azaozz Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords: has-patch
Focuses: Cc:

Description

When the breadcrumb links in the TinyMCE statusbar (at the bottom) are too long (many nested elements with long class names), the statusbar pushes the width of the editor and breaks the layout.

Attachments (5)

editor.dev.css.patch (1.7 KB) - added by azaozz 12 years ago.
after.png (3.1 KB) - added by azaozz 12 years ago.
before.png (16.5 KB) - added by azaozz 12 years ago.
21605-2.patch (1.5 KB) - added by azaozz 12 years ago.
21605.patch (949 bytes) - added by iseulde 10 years ago.

Download all attachments as: .zip

Change History (17)

#1 @azaozz
12 years ago

Before and after:



#2 @nacin
12 years ago

What if we just got rid of the "Path" line? If you're really interested in the HTML, switch over to the Text editor, otherwise, is it actually necessary?

@azaozz
12 years ago

@azaozz
12 years ago

#3 follow-up: @helenyhou
12 years ago

User-type question: is there any way it could truncate the beginning instead of the end? I think the end of the path is way more important than the beginning. Should probably also indicate the truncation somehow (ellipsis or some such), if it's not an enormous pain.

Or, get rid of it. I guess. It is actually rather useful information, though.

#4 in reply to: ↑ 3 @azaozz
12 years ago

Replying to nacin:

It's breadcrumbs for the selected element, comes quite handy in some cases, but not sure how many people actually use it. Also the editor resize "handle" is there, will see if it can be moved out.

Replying to helenyhou:

User-type question: is there any way it could truncate the beginning instead of the end?

The patch hides the end with css, can try to hide the beginning, won't be that clean though.

Or, get rid of it. I guess. It is actually rather useful information, though.

Yeah, it's useful for selecting the parents of the current element (like in Firebug and friends).

@azaozz
12 years ago

#5 @azaozz
12 years ago

21605-2.patch removes the breadcrumbs and keeps the resize handle (only on the main editor on Edit Post screen. Other instances of TinyMCE would have it enabled as default).

#6 @azaozz
12 years ago

Another possibility to shorten the element path (breadcrumbs) display would be to show only the first css class on each element, same as in Firebug and the browser HTML inspection tools. Will make a patch and send it to the TinyMCE team.

#7 follow-up: @azaozz
11 years ago

  • Milestone 3.5 deleted
  • Resolution set to worksforme
  • Status changed from new to closed

Seems this will be handled upstream.

#8 in reply to: ↑ 7 ; follow-up: @nacin
11 years ago

  • Milestone set to Awaiting Review
  • Resolution worksforme deleted
  • Status changed from closed to reopened

Replying to azaozz:

Seems this will be handled upstream.

In what way? Do you have a link?

If we keep path, then it should truncate the beginning not the end.

But, I'd rather just get rid of path — perhaps unless SCRIPT_DEBUG. It is useful for debugging but is it really necessary to expose otherwise?

#9 in reply to: ↑ 8 @azaozz
11 years ago

Replying to nacin:

But, I'd rather just get rid of path...

We've had the path since adding TinyMCE. It is an "advanced" feature but also the only way to select the outer element when several blocks are nested. For example:

<table><tr><td>
  <div>
    <p>Some text</p>
  </div>
</td></tr></table>

The bug described in this ticket seems to be extremely rare. It happens only when several block are nested and each has multiple long-ish class names. I've triggered it while testing/working on the prototype code for the TinyMCE Views but never seen it in a normal post.

Best way to fix this would be to do it with css, however it can only truncate the end of the string, not the beginning. Another option would be not to show the class names or to show only the first when there are several.

Last edited 11 years ago by azaozz (previous) (diff)

@iseulde
10 years ago

#10 @iseulde
10 years ago

  • Keywords has-patch added

+1 for removing the path. Plugins can easily add it back.

In 3.9, and TinyMCE 4.0, the classes are not shown, so it's very difficult to reproduce this.
In any case, the font size should be adjusted. For the path it's 14px, while for the word count it's 12px. I added a patch which also aligns it with the word count.

To remove the path, we just need to add 'status bar' => false, to the settings, and check this to calculate the height of the editor.

#11 @iseulde
9 years ago

Related: #29806.

#12 @iseulde
9 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from reopened to closed

Unlikely to happen now, as it just displays the nodeName, and if it does happen, it wraps to another line.

Note: See TracTickets for help on using tickets.