Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-3969

Status ball images should have transparent background

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Trivial Trivial
    • core
    • None
    • Platform: All, OS: All

      I use the Emotional Hudson plugin, which shows the image of Hudson as a
      background of the build history. However, the status balls don't have a
      transparent background, which makes the whole thing look a bit ugly.
      Just cosmetics...

        1. wrong_status_ball.png
          wrong_status_ball.png
          13 kB
        2. screenshot2.png
          screenshot2.png
          2 kB
        3. screenshot.png
          screenshot.png
          16 kB

          [JENKINS-3969] Status ball images should have transparent background

          cristalp created issue -

          cristalp added a comment -

          Created an attachment (id=764)
          Screenshot of build history

          cristalp added a comment - Created an attachment (id=764) Screenshot of build history

          The main reason those icons are not transparent is because of the bug in IE6 about handling semi-transparent PNGs.

          Looking at http://en.wikipedia.org/wiki/Usage_share_of_web_browsers , IE6 still seems to be about 20% of the web, so we probably need to continue to support it.

          One suggestion was to look at user-agent and send different images.

          Kohsuke Kawaguchi added a comment - The main reason those icons are not transparent is because of the bug in IE6 about handling semi-transparent PNGs. Looking at http://en.wikipedia.org/wiki/Usage_share_of_web_browsers , IE6 still seems to be about 20% of the web, so we probably need to continue to support it. One suggestion was to look at user-agent and send different images.

          cliffano added a comment -

          How about using workarounds like http://www.twinhelix.com/css/iepngfix/ (javascript) or http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/ (css).
          I think it's better to have a single set of images, and 'enable' the transparency in IE6 by injecting IE6 specific js/css, though it is still a hacky workaround.

          p.s. I'm guessing the IE6 browser share for Hudson users would be much lower than 20% .

          cliffano added a comment - How about using workarounds like http://www.twinhelix.com/css/iepngfix/ (javascript) or http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/ (css). I think it's better to have a single set of images, and 'enable' the transparency in IE6 by injecting IE6 specific js/css, though it is still a hacky workaround. p.s. I'm guessing the IE6 browser share for Hudson users would be much lower than 20% .

          jieryn added a comment -

          I don't think we should do any javascript or css tricks to bypass this deficiency of IE6. Instead, it would be easier if we could have some sort of user agent detection in the jelly and choose an appropriate image. For example, all icons would have a _ie6 version without the transparent background.

          We've got some heavy weight javascript libraries which detect user agents, but we could even create some sort of custom /lib/ua with some utilities for user agents. Then it would be quite trivial to write the appropriate jelly which enables transparent icons for modern browsers.

          jieryn added a comment - I don't think we should do any javascript or css tricks to bypass this deficiency of IE6. Instead, it would be easier if we could have some sort of user agent detection in the jelly and choose an appropriate image. For example, all icons would have a _ie6 version without the transparent background. We've got some heavy weight javascript libraries which detect user agents, but we could even create some sort of custom /lib/ua with some utilities for user agents. Then it would be quite trivial to write the appropriate jelly which enables transparent icons for modern browsers.

          Ulli Hafner added a comment -

          Hmm, actually I don't understand comment #2, all ball images are GIF images. Can't IE 6 handle that GIF images?

          Ulli Hafner added a comment - Hmm, actually I don't understand comment #2 , all ball images are GIF images. Can't IE 6 handle that GIF images?

          cristalp added a comment -

          Another screenshot

          cristalp added a comment - Another screenshot
          cristalp made changes -
          Attachment New: screenshot2.png [ 19772 ]

          cristalp added a comment -

          Actually, this is neither an IE6 nor a PNG problem. As Ulli commented: The ball images are GIFs, and the problem occurs also in Firefox (see the second screenshot).

          The CSS mouseover doesn't show in IE7 (in my case), so I can't check it there.

          I'm sorry, but I can't check whether the background really is transparent in that GIF, since I don't have the required software installed at work.

          cristalp added a comment - Actually, this is neither an IE6 nor a PNG problem. As Ulli commented: The ball images are GIFs, and the problem occurs also in Firefox (see the second screenshot). The CSS mouseover doesn't show in IE7 (in my case), so I can't check it there. I'm sorry, but I can't check whether the background really is transparent in that GIF, since I don't have the required software installed at work.

          Ulli Hafner added a comment -

          The background is not transparent, it is white (#fefefe). I already converted the balls to gif images with transparent color but then saw the comments in this issue and decided to not check in the changes.

          Ulli Hafner added a comment - The background is not transparent, it is white (#fefefe). I already converted the balls to gif images with transparent color but then saw the comments in this issue and decided to not check in the changes.

            drulli Ulli Hafner
            cristalp cristalp
            Votes:
            2 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved: