Last Comment Bug 672465 - The -moz-force-broken-image-icon no longer works
: The -moz-force-broken-image-icon no longer works
Status: RESOLVED WORKSFORME
:
Product: Core
Classification: Components
Component: Layout: Images (show other bugs)
: 2.0 Branch
: All Other
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2011-07-19 03:08 PDT by Dan Dascalescu
Modified: 2013-10-01 18:44 PDT (History)
6 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Testcase (305 bytes, text/html)
2011-07-19 10:46 PDT, Boris Zbarsky [:bz]
no flags Details
Screenshot showing how userChrome.css is parsed, but the broken image icon isn't displayed (30.33 KB, image/png)
2011-07-19 10:58 PDT, Dan Dascalescu
no flags Details

Description Dan Dascalescu 2011-07-19 03:08:03 PDT
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Build ID: 20110413222027

Steps to reproduce:

For easing web development, I want to display an image placeholder for missing images, just as IE does.

As recommended in many places online[1][2], I've added the following rule to userChrome.css:
/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken{
    -moz-force-broken-image-icon:1;
    width:24px;
    height:24px;
  }
}

[1]: http://stackoverflow.com/questions/303718/firefox-browser-how-to-display-non-existing-images-the-way-ie-opera-does/6744791#6744791
[2]: https://developer.mozilla.org/en/CSS/-moz-force-broken-image-icon


Actual results:

After restarting Firefox, rendering a piece of HTML like "foo<img src='bogus'>bar" shows nothing between "foo" and "bar".


Expected results:

There should have been an image placeholder between "foo" and "bar".

Possibly related: issue 333954 comment 8.
Comment 1 Jeremy Morton 2011-07-19 03:12:24 PDT
Ugh.  What does Mozilla have against broken image placeholders?  :-)  They should be enabled by default, let alone working.
Comment 2 Boris Zbarsky [:bz] 2011-07-19 10:45:43 PDT
> They should be enabled by default

If the placeholder is shown, then the alt text is NOT shown (or rather only as much as fits in the image area is shown; that would be 24px by 24px above).  So no, by default we want to show the alt text, not the placeholder.  We could show a placeholder in _addition_ to the inline alt text, and there are open bugs on that.  But that's not what the current code is set up to do.

That said, I can't reproduce this issue.  I'll attach a testcase in a second that shows it working just fine.  Are you sure you edited the right userChrome.css?
Comment 3 Boris Zbarsky [:bz] 2011-07-19 10:46:25 PDT
Created attachment 546825 [details]
Testcase
Comment 4 Jeremy Morton 2011-07-19 10:55:46 PDT
(In reply to comment #2)
> > They should be enabled by default
> 
> We could show a placeholder in _addition_ to the inline alt
> text

Or show the placeholder when there's no ALT text, or it's empty.
Comment 5 Dan Dascalescu 2011-07-19 10:58:45 PDT
Created attachment 546831 [details]
Screenshot showing how userChrome.css is parsed, but the broken image icon isn't displayed

I do see the broken image in your test case, but the HTML contains the CSS rule.

If there is no CSS rule for broken images *in* the HTML, then Firefox doesn't display the broken image icon.

I'm sure I got the right userChrome.css because the URL bar looks as expected:
/* Give the Awesome Bar a ridiculous font size so 
   it's obvious that userChrome.css is parsed */
#urlbar {
  font-size: 32px;
}

/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file), url-prefix(https) {
  img#x:-moz-broken {
    -moz-force-broken-image-icon: 1;
    width: 24px;
    height: 24px;
  }
}

The web page from the screenshot is http://gavtaylor.co.uk/blog/enable-broken-image-placeholders-in-firefox
Comment 6 Boris Zbarsky [:bz] 2011-07-19 11:21:46 PDT
> Or show the placeholder when there's no ALT tex

Perhaps, but in many cases the right behavior for images with no alt text (which are therefore just decorative) is to not show anything if the image can't be loaded, since showing the placeholder sort of defeats the purpose (looks uglier).  In any case, this has nothing to do with this bug.

Dan, wait.  You're changing user_Chrome_.css.  That applies to the UI, not to web pages.  You want userContent.css if you want to style webpages.  Sounds like everything is working as it should.  ;)
Comment 7 Dan Dascalescu 2011-07-19 11:46:16 PDT
Thanks Boris, I had the wrong file indeed.

Note: the "img#x:-moz-broken" selector from your test case doesn't work, but the "img:-moz-broken" one does. This code in userContent.css does the trick:

/*
 * Show image placeholders
 */
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken{
    -moz-force-broken-image-icon:1;
    width: 24px;
    height: 24px;
  }
}

Question: if image dimensions are specified in the document, can the placeholder be automatically sized to fit them?
Comment 8 Boris Zbarsky [:bz] 2011-07-19 11:53:16 PDT
> Note: the "img#x:-moz-broken" selector from your test case doesn't work,

I just needed the "#x" to only select one of the two images (the one with id="x").

> if image dimensions are specified in the document, can the placeholder be
> automatically sized to fit them?

If image dimensions are specified in the document, then the placeholder box will be that size.  The placeholder image will not be; the remaining space in the box, if any, will be used for as much of the alt text as we can fit in.
Comment 9 X3 2013-06-09 07:29:11 PDT
Nothing works with firefox >=3.6.14 so what are people that work with images suppose to do.

Firefox is the ONLY browser and I mean the only one who refuses to show a placeholder for broken images, in forums for e.g a user has no control over alt tags or width height attributes

This is NOT resolved.
Comment 10 SmoothPorcupine Pirate 2013-10-01 15:33:03 PDT
Agree with comment #9, although I'm not sure this is the right place for this gripe...

(In reply to Boris Zbarsky [:bz] from comment #6)
> > Or show the placeholder when there's no ALT tex
> 
> Perhaps, but in many cases the right behavior for images with no alt text
> (which are therefore just decorative)

(That)'s a hell of an assumption to be making. Bugs me that I have to select where I expect an image to be (in the cases where I can detect such a thing has happened...) and View Selection Source to get the URL.
Comment 11 Daniel Holbert [:dholbert] 2013-10-01 16:06:47 PDT
A few facts:
 (A) Comment 9 and 10 are not about this bug. (This bug was filed for a tweak to a .css file not doing what the reporter expected; he was tweaking the wrong file, and when he realized that, he resolved this as WORKSFORME.)

 (B) RE Comment 9 and 10: the broken image icon *should* already be displayed if the "alt" attribute is unset. (And if "alt" is set, you'll instead see the alt text.)

 (C) If alt happens to be set to the empty string, then yes, the empty string will be displayed. (The idea that this might be reasonable is the "hell of an assumption" that bz was making in comment 6.)

 (D) If you really don't like (C), you can work around it locally using the "Stylish" addon, with a user style that looks like this:
  img[alt=""] { -moz-force-broken-image-icon: 1 }
which will force the display of the icon for images with an empty alt-text attribute. (Add additional lines with alt=" ", alt="  ", etc. if you're worried about a site with just blank spaces in its alt text.)
Comment 12 SmoothPorcupine Pirate 2013-10-01 16:10:56 PDT
Thanks, I had managed to figure all that out since my last comment. Apologies.

I now have a few webmasters to enlist gripes with though...
Comment 13 Masatoshi Kimura [:emk] 2013-10-01 18:44:36 PDT
(In reply to Daniel Holbert [:dholbert] from comment #11)
>  (B) RE Comment 9 and 10: the broken image icon *should* already be
> displayed if the "alt" attribute is unset.

Only in quirks mode.

Note You need to log in before you can comment on or make changes to this bug.