If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Phone book Entries are Unreadable

RESOLVED FIXED

Status

Webtools
Phonebook
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: damons, Assigned: wenzel)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

6 years ago
Created attachment 589245 [details]
Screen shot showing impossible to read phone book entry.

The font colors are the same as the background making phone book entries impossible to read.  See attached schreen shot.

Comment 1

6 years ago
This should be a Desk top support or IT issue.  My screen also looks different than yours.  Wondering if this could just be a quick IT fix?

Getting Desk top involved..

Karen
I think this is a nightly thing.  It's been like this for a few weeks (confirmed on other user's browsers also).
Looking at comment 2, and glancing at the CSS involved, bug 497995 might be relevant.
So... can we make the CSS more graceful or is it just a bug w/ layout in nightlies?
The border image spec changed, and we updated our implementation.  Phonebook needs to update its CSS.
Alright, we'll take a look -- thanks Kyle.
Lookin at the CSS I'm seeing:

  .vcard .header {
    border-image: url(../img/vcard_header_bg.png) 0 132 0 16 repeat stretch;
    -moz-border-image: url(../img/vcard_header_bg.png) 0 132 0 16 repeat stretch;
    -webkit-border-image: url(../img/vcard_header_bg.png) 0 132 0 16 repeat stretch;
    border-width: 0 132px 0 16px;
    height: 45px;
    position: relative;
    }

  .vcard .body {
    border-image: url(../img/vcard_body_bg.png) 0 16 0 16 repeat repeat;
    -moz-border-image: url(../img/vcard_body_bg.png) 0 16 0 16 repeat repeat;
    -webkit-border-image: url(../img/vcard_body_bg.png) 0 16 0 16 repeat repeat;
    border-width: 0 16px;
    color: #343434;
    font-size: 0.875em;
    line-height: 1.3;
    overflow: auto;
    padding: 1em 0.5em;
    }

I read the spec on MDN:
https://developer.mozilla.org/en/CSS/border-image

I'm trying to figure out what to tweak to fix the image repeat in the center body because I'm not too up to date on what changed -- so next I'll try to read through bug 497995 and figure out what to change in .vcard border-image styles.
Hmm, that looks fine.  It might be something else, of course.  Try a nightly on either side of that bug landing to see?
In 12.0a1 (2012-01-18) if I add fill after the slice then it does preserve the middle image, but now the outer borders are bad and the header is not rounded.  I'll update to today's and see if it changes.
Ok, in both cases the border-image-slice part of border-image does not have the fill keyword, which should precede the border-image-repeat values.  That causes the middle of the image to not be repeated.

For both .vcard .body and .vcard .header there is no border-style defined.  My theory is that pre-patch the default may have been different or it didn't affect the visibility of -moz-border-image.

In addition to adding the 'fill' part of border-image-slice, each class needs to have 'border-style: solid;' added so the the border shows up at all.  Without it, there is no border and nothing is displayed.
Created attachment 590162 [details] [diff] [review]
fixes for missing borders/backgrounds
Assignee: karen → morgamic
Status: NEW → ASSIGNED
Attachment #590162 - Flags: review?(thepotch)
Attachment #590162 - Flags: feedback?(khuey)
Group: mozilla-corporation-confidential
Component: Facilities Management → Phonebook
Product: Mozilla Corporation → Webtools
QA Contact: facilities-mgmt → phonebook
Duplicate of this bug: 714941
Isn't the addition of 'fill' going to break this on all the browsers that don't support that keyword?  (It's right for the unprefixed version, though.)  And wouldn't it be better to declare a background-color so you have good fallback for when border-image isn't supported, which would also fix this?
(Assignee)

Comment 14

6 years ago
Comment on attachment 590162 [details] [diff] [review]
fixes for missing borders/backgrounds

r-ing this based on dbaron's comment. I have a quite similar patch in a second.
Attachment #590162 - Flags: review-
(Assignee)

Comment 15

6 years ago
Created attachment 591038 [details] [diff] [review]
border-image fun, part 2

I tried adding a background color, but that would poke out of the box on the sides as the image is half-transparent. What I ended up doing now is, "fill" for the unprefixed version, and a duplicate -moz prefixed line, one with, one without "fill". The "fill" one will be ignored in Firefox 4 (thus using the previous declaration), and in Nightly, it'll overwrite the declaration without fill.

I tested this and it works in Fx4, Nightly, Safari, and Chrome.
Attachment #590162 - Attachment is obsolete: true
Attachment #590162 - Flags: review?(thepotch)
Attachment #590162 - Flags: feedback?(khuey)
Attachment #591038 - Flags: review?(dbaron)
Attachment #591038 - Flags: feedback?(morgamic)
(Assignee)

Comment 16

6 years ago
Comment on attachment 591038 [details] [diff] [review]
border-image fun, part 2

All right, I got code review from Rik in #webdev. I'll move the unprefixed version to the bottom of the bunch, then I'll land it.
Attachment #591038 - Flags: review?(dbaron)
Attachment #591038 - Flags: feedback?(morgamic)
(Assignee)

Comment 17

6 years ago
Committed to r100303. I'll file an IT bug to get this pushed.
Assignee: morgamic → fwenzel
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
(Assignee)

Updated

6 years ago
Blocks: 720656
Yep, r100303 looks good to me.
(Assignee)

Comment 19

6 years ago
Thanks!
Sweet!  Thanks guys.
You need to log in before you can comment on or make changes to this bug.