Fix TinyMCE statusbar styling

[azaozz]

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.

Before and after:

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?

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.

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).

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).

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.

Seems this will be handled upstream.

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?

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.