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

[Jeroen T. Vermeulen]

CSS-based fix for Konqueror problem with multiline inline-editor button.

[Jeroen T. Vermeulen (jtv)]

= Bug 427263, 2nd attempt =

This is about Konqueror not rendering the edit button for the multiline inline editor. The problem is that the button contains only a sprite (which is implemented as a background image), nothing else—and Konqueror doesn't bother rendering an <a> tag with no real content.

My previous solution was to insert a zero-width non-joiner. But that approach requires parallel fixes in lazr-js and Launchpad, with the latter fix breaking lots of tests. The breakage can be fixed, but it makes all those tests a lot uglier.

This new fix is pure CSS. Turns out Konqueror does render the <a> tag if I apply an empty content attribute to its :link and :visited pseudoclasses.

As far as I can tell, the content attribute is ignored in these pseudoclasses: http://www.w3schools.com/CSS/pr_gen_content.asp (and a quick check in Firefox concurs).

If some browser should fail to ignore it, and either it lets the content attribute override the tag's dimensions or we want something else than a sprite in the tag, then we may have to go looking for a new trick. I tested in Arora, Chromium, Firefox, Galeon, and Konqueror; most Internet Explorer versions apparently don't support the content attribute in the first place, so it's not likely to cause problems there either.

Jeroen

[Michael Nelson (michael.nelson)]

> = Bug 427263, 2nd attempt =
>

[snip]

> This new fix is pure CSS. Turns out Konqueror does render the <a> tag if I
> apply an empty content attribute to its :link and :visited pseudoclasses.

Nice!

>
> As far as I can tell, the content attribute is ignored in these pseudoclasses:
> http://www.w3schools.com/CSS/pr_gen_content.asp (and a quick check in Firefox
> concurs).

Changing the css to content: "randomtext" seems to show that it's *not* ignored in konqueror (at least, not on 4.3 on my machine here), but it works perfectly with the empty content.

>
> If some browser should fail to ignore it, and either it lets the content
> attribute override the tag's dimensions or we want something else than a
> sprite in the tag, then we may have to go looking for a new trick. I tested
> in Arora, Chromium, Firefox, Galeon, and Konqueror; most Internet Explorer
> versions apparently don't support the content attribute in the first place, so
> it's not likely to cause problems there either.

It would be worth checking this in IE8 (which apparently does support content when a valid DOCTYPE is set?).

Great find Jeroen!

>
>
> Jeroen

review: Approve (code)

[Jeroen T. Vermeulen (jtv)]

> Changing the css to content: "randomtext" seems to show that it's *not*
> ignored in konqueror (at least, not on 4.3 on my machine here), but it works
> perfectly with the empty content.

How ironic. I don't see this behaviour with Arora, Chromium, Firefox, Galeon, IE6, IE7, or Safari. So as far as I can make out, only the browser that we need this workaround for assigns any meaning to it at all.

Note that that does leave out IE8. It's not on our EC2 instance! I'm trying to get volunteers to help me verify.

[Jeroen T. Vermeulen (jtv)]

> > Changing the css to content: "randomtext" seems to show that it's *not*
> > ignored in konqueror (at least, not on 4.3 on my machine here), but it works
> > perfectly with the empty content.
>
> How ironic. I don't see this behaviour with Arora, Chromium, Firefox, Galeon,
> IE6, IE7, or Safari. So as far as I can make out, only the browser that we
> need this workaround for assigns any meaning to it at all.
>
> Note that that does leave out IE8. It's not on our EC2 instance! I'm trying
> to get volunteers to help me verify.

I just got confirmation (thanks urbanape!) that the button still shows up normally in IE8. Landing.

=== modified file 'examples/inlineeditor/index.html'
--- examples/inlineeditor/index.html	2009-11-13 23:59:22 +0000
+++ examples/inlineeditor/index.html	2009-11-18 11:20:27 +0000
@@ -50,7 +50,7 @@
   <div id="multi-text-editor">
     <div class="clearfix">
       <div class="edit-controls">
-        <a href="#edit" class="yui-editable_text-trigger edit">&zwnj;</a>
+        <a href="#edit" class="yui-editable_text-trigger edit"></a>
       </div>
     <h2>Description</h2>
     </div>
@@ -70,7 +70,7 @@
   <div id="multi-text-editor">
     <div class="clearfix">
       <div class="edit-controls">
-        <a href="#edit" class="yui-editable_text-trigger edit">&zwnj;</a>
+        <a href="#edit" class="yui-editable_text-trigger edit"></a>
       </div>
     <h2>Description</h2>
     </div>

=== modified file 'src-js/lazrjs/inlineedit/assets/editor-core.css'
--- src-js/lazrjs/inlineedit/assets/editor-core.css	2009-02-06 19:56:58 +0000
+++ src-js/lazrjs/inlineedit/assets/editor-core.css	2009-11-18 11:20:27 +0000
@@ -14,3 +14,12 @@
     color: inherit;
     font: inherit;
 }
+
+/* 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.
+ */
+.yui-editable_text-trigger:link, .yui-editable_text-trigger:visited {
+    content: "";
+}