886229 - Style text, select and multi-select boxes, and submit Search buttons

Status: RESOLVED FIXED

(bugzilla.mozilla.org Graveyard :: Sandstone/Mozilla Skin, defect)

Description

[Bram Pitoyo [:bram]]

Attachment: global.css

Drop-down menus (non-multiple input elements) are not styled yet because they can cause visual scaling bugs.

Most of these changes are apparent on the advanced search and enter bug interface.

When landing patch, please check #quicksearch_top, #quicksearch_main. When viewed online, I wasn’t able to see the search loupe icon, but this could due to the fact that not all images were downloaded to my machine.

Comment 1

[:glob ✱]

this looks great, however there's a few minor issues:
 - <button>s aren't styled
 - disabled buttons/submits look identical to enabled ones
 - the vertical spacing of the 'search' button at the top of the advanced search form is different from the vertical spacing of the 'search' button in the header

we use <button>s on the guided bug entry form:
  https://bugzilla.mozilla.org/enter_bug.cgi?format=guided

Comment 2

[Bram Pitoyo [:bram]]

Attachment: global.css

What’s new in this version:
* Styled <button> elements
* Commit button is colored blue (but not a big deal if it’s green)
* Added style for [disabled] state
* Added style for :hover, too
* Search button in the header has the same text size as the rest of the buttons

Comment 3

[David Lawrence [:dkl]]

(In reply to Bram Pitoyo [:bram] from comment #2)
> Created attachment 767033 [details]
> global.css
> 
> What’s new in this version:
> * Styled <button> elements

The "Find similar issues" buttons on the Guided Bug page are still un-styled.

> * Commit button is colored blue (but not a big deal if it’s green)

I think they should be the same color, no? With this new changes, if you go to the standard enter_bug.cgi page, the Submit button is bigger and green and the "bookmark as template" button is blue.

> * Added style for :hover, too

Do you mean hover of the buttons? I do not see any change when hovering the blue buttons, but I see change for the green ones.

Thanks
dkl

Comment 4

[Bram Pitoyo [:bram]]

(In reply to David Lawrence [:dkl] from comment #3)

Hi David. I rechecked and was able to see the changes in my machine. I am guessing that it has to do with filename naming issue: my file was called ‘global_002.css’, because the way I edit was by saving the file using the File menu (as a result, Firefox sees multiple ‘global.css’ files and decided to save _001, _002 and so on).

Perhaps renaming the file and putting it in the correct directory might fix the problem?

Comment 5

[:glob ✱]

Comment on attachment 767033 [details]
global.css

this works and looks good to me; thanks!

Comment 6

[:glob ✱]

Committing to: bzr+ssh://[e-mail]/bmo/4.2/
modified skins/contrib/Mozilla/global.css
Committed revision 8863.

Comment 7

[:glob ✱]

this change made textareas lose the monospace font, which is undesirable.

updated:

Committing to: bzr+ssh://[e-mail]/bmo/4.2/
modified skins/contrib/Mozilla/global.css
Committed revision 8869.

Comment 8

[Bram Pitoyo [:bram]]

Good catch. We do want to leave the comment text fields in monospace. Is there any other text field that needs to be kept this way?

Comment 9

[Bram Pitoyo [:bram]]

Attachment: global.css

Styling all generic <input> elements causes input[type=file] and input[type=button] to look like textboxes. Added specific type=button styling instead.

The change is most apparent on enter_bug.cgi. Whereas the “Show advanced fields”, “Add an attachment” and “Choose File” are surrounded by white boxes that looks like a text box before the CSS change, now they’re shaped like proper blue buttons (in the first two instances) and a file picker (in the last instance).

Comment 10

[Bram Pitoyo [:bram]]

Reopened for a small input[type] CSS fix.

Comment 11

[David Lawrence [:dkl]]

(In reply to Bram Pitoyo [:bram] from comment #9)
> Created attachment 773725 [details]
> global.css
> 
> Styling all generic <input> elements causes input[type=file] and
> input[type=button] to look like textboxes. Added specific type=button
> styling instead.
> 
> The change is most apparent on enter_bug.cgi. Whereas the “Show advanced
> fields”, “Add an attachment” and “Choose File” are surrounded by white boxes
> that looks like a text box before the CSS change, now they’re shaped like
> proper blue buttons (in the first two instances) and a file picker (in the
> last instance).

Would it be possible to make the blue buttons not quite so large? They look huge when surrounded by normal labels and other text. I would argue that some of the buttons should not be buttons at all such as adding flags and attachments in enter_bug.cgi. Maybe simply a link instead of a rotating arrow? Also personally I don't think the Submit button should be substantially larger than the others. It could just be the same size.

Thanks
dkl

Comment 12

[Bram Pitoyo [:bram]]

Attachment: global.css

(In reply to David Lawrence [:dkl] from comment #11)
> Would it be possible to make the blue buttons not quite so large? They look
> huge when surrounded by normal labels and other text.
> […] I don't think the Submit button should be
> substantially larger than the others. It could just be the same size.

Yes. Attached is the CSS correction to this. I have reduced the text size on every button as well as its padding values, so they look more in line with the surrounding text.

I have also made the submit button the same size as the rest. I’m not sure why it was sized differently in the first place. Perhaps it was a design artifact?


> some of the buttons should not be buttons at all such as adding flags and
> attachments in enter_bug.cgi. Maybe simply a link instead of a rotating
> arrow?

Good point. To do this, we’d have to make the change in the codebase (namely, changing the <button> and <input> elements to plain old <a>. Styling buttons like a link via CSS is certainly possible, but would involve targeting very specific elements.

If you ask me, I would personally prefer changing the page elements themselves, but in case doing this is very hard, we could probably tweak on CSS.

Comment 13

[David Lawrence [:dkl]]

(In reply to Bram Pitoyo [:bram] from comment #12) 
> Yes. Attached is the CSS correction to this. I have reduced the text size on
> every button as well as its padding values, so they look more in line with
> the surrounding text.
> 
> I have also made the submit button the same size as the rest. I’m not sure
> why it was sized differently in the first place. Perhaps it was a design
> artifact?

Sorry to nit-pick but we may need to increase the buttons back up slightly as they are not smaller that the text area they are next to. Ideally if they can be the same height that would be great. Attaching screenshot to illustrate what I mean. Again, sorry to nit.

> > some of the buttons should not be buttons at all such as adding flags and
> > attachments in enter_bug.cgi. Maybe simply a link instead of a rotating
> > arrow?
> 
> Good point. To do this, we’d have to make the change in the codebase
> (namely, changing the <button> and <input> elements to plain old <a>.
> Styling buttons like a link via CSS is certainly possible, but would involve
> targeting very specific elements.
> 
> If you ask me, I would personally prefer changing the page elements
> themselves, but in case doing this is very hard, we could probably tweak on
> CSS.

We are fine with that where necessary so I don't see an issue. Certain pages such as enter_bug.cgi and others are already pretty chopped up from their upstream counterparts so we definitely are not against it.

dkl

Comment 14

[David Lawrence [:dkl]]

Attachment: screenshot showing small button next to text area

Comment 15

[Bram Pitoyo [:bram]]

Attachment: global.css

> […] we may need to increase the buttons back up slightly as
> they are not smaller that the text area they are next to […]

That was my concern, as well, in making the button size too small for the textboxes, we’d then have to worry about vertically aligning them. The new CSS fixes this problem.

Comment 16

[David Lawrence [:dkl]]

Attachment: Screenshot from 2013-07-25 16:39:47.png

Most buttons look fine now except for the commit buttons on the enter_bug.cgi and show_bug.cgi pages. I am attaching screenshots to illustrate the issue. Looks like 

show_bug.cgi:
<input id="commit_top" type="submit" value="Save Changes"></input>

enter_bug.cgi:
<input id="commit" type="submit" value="Submit Bug"></input>

Looks the offending CSS in skins/contrib/Mozilla/global.css is:

#commit, #commit_top {
    height: 48px;
    line-height: 48px;
    padding: 0px 24px;
}

dkl

Comment 17

[David Lawrence [:dkl]]

Attachment: Screenshot from 2013-07-25 16:39:12.png

Comment 18

[Bram Pitoyo [:bram]]

Attachment: Enter bug - advanced fields

Comment 19

[Bram Pitoyo [:bram]]

Attachment: Show bug - comment form

Comment 20

[Bram Pitoyo [:bram]]

(In reply to David Lawrence [:dkl] from comment #16)
> Most buttons look fine now except for the commit buttons on the
> enter_bug.cgi and show_bug.cgi pages. I am attaching screenshots to
> illustrate the issue.

Hi David,

I have no idea what went wrong in your page. The css that I submitted on attachment 775394 [details] didn’t contain the "height: 48px;" value, so all the button throughout the site should have the same size.

On comment 18 and comment 19, you can see what buttons look like when I deployed the CSS on my test pages.

Comment 21

[David Lawrence [:dkl]]

Ok. I was not using the latest version and it also was not in the current production code. I have committed your recent fixes so we can again close this out and work on the other remaining issues.

dkl

Comment 22

[David Lawrence [:dkl]]

And this time I close :)