Merge lp:~jtv/lazr-js/bug-427263-3 into lp:lazr-js

[Jeroen T. Vermeulen]

[Jeroen T. Vermeulen (jtv)]

= Bug 427263 =

This is a bug that's been bothering us for far too long. The inline editor's edit button doesn't always show up on Konqueror.

It used not to show up in Konqueror at all. In a previous attempt at a fix, I set an empty "content" attribute for the button's :link and :visited pseudo-classes. The browser should ignore these, but Konqueror doesn't. It didn't matter that the content string was empty, even if Konqueror actually obeyed that attribute, since text-wise the button really is empty. We're using a sprite so it's the background that matters.

What _did_ matter is that Konqueror still doesn't seem to render the button in some cases if the content string is empty. So I made it non-empty. It now contains a zero-width, minimally-invasive Unicode character. Other browsers will ignore it; but even in Konqueror it looks good now.

Tested with Arora 0.10.1; Chromium 5.0.320.0; Epiphany 2.28.0; Firefox 3.5.7; Galeon 2.0.7; and Konqueror 4.3.2.

Jeroen

[lp:~jtv/lazr-js/bug-427263-3]

168. By Jeroen T. Vermeulen on 2010-02-09

Oops, confused prototype for actual solution.

[Graham Binns (gmb)]

review: Approve (code)

=== modified file 'src-js/lazrjs/inlineedit/assets/editor-core.css'
--- src-js/lazrjs/inlineedit/assets/editor-core.css	2009-11-18 11:00:32 +0000
+++ src-js/lazrjs/inlineedit/assets/editor-core.css	2010-02-09 16:52:14 +0000
@@ -17,9 +17,21 @@
 
 /* Konqueror doesn't render the multiline editor's button if there's
  * no apparent content in it (the sprite we use is a background image).
- * This bit of CSS is meaningless, but tricks Konqueror into rendering
- * the button.
+ * This bit of CSS is meaningless; it sets the edit link's content to
+ * a zero-width non-joiner (an invisible, odorless Unicode character).
+ *
+ * Browsers should ignore the content attribute for :link and :visited
+ * pseudo-classes, but Konqueror doesn't.  Setting non-empty text
+ * content here tricks it into rendering the button.  
+ *
+ * Other things we tried instead of this hack:
+ *  - Insert an HTML comment in the <a>.  No effect.
+ *  - Insert a &nbsp; in the <a>.  No effect.
+ *  - Insert whitespace in the <a>.  No effect.
+ *  - Insert a span or div in the <a>.  No effect.
+ *  - Use a regular <img> tag instead of a sprite.  Ugly in all browsers.
+ *  - Set the content to ".".  Ugly in Konqueror.
  */
 .yui-editable_text-trigger:link, .yui-editable_text-trigger:visited {
-    content: "";
+    content: "\200c";
 }