The default bug view has changed. See this FAQ.

Make the Highlighter Toolbar look like faaborg's design on OS X

VERIFIED FIXED in Firefox 9

Status

()

Firefox
Developer Tools
P2
normal
VERIFIED FIXED
6 years ago
6 years ago

People

(Reporter: rc, Assigned: paul)

Tracking

unspecified
Firefox 9
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [minotaur][fixed-in-fx-team])

Attachments

(3 attachments, 3 obsolete attachments)

(Reporter)

Description

6 years ago
The highlighter toolbar should have the white on-black styling designed by Alex Faaborg on OS X.

see: http://people.mozilla.com/~faaborg/files/projects/webDeveloper/web%20developer%20toolbar%20i1.png
(Reporter)

Updated

6 years ago
Whiteboard: [minotaur][best: 1d; likely: 3d: worst: 1w]

Updated

6 years ago
Priority: -- → P2

Updated

6 years ago
Assignee: nobody → paul
Created attachment 556597 [details]
Toolbar Design Specs - i01
(Assignee)

Comment 2

6 years ago
Questions:
- the border-top of the toolbars is transparent (.65), what is supposed to be behind this border? The content page? The toolbar? 
- What if the breadcrumbs bar is hidden? Should we keep the dark border-top?
- Is it ok to use an image for the ">" shape betweens the buttons? Or it is better to use a 45deg-rotated block element?
(Assignee)

Comment 3

6 years ago
Replying to my own questions,

(In reply to Paul Rouget [:paul] from comment #2)
> Questions:
> - the border-top of the toolbars is transparent (.65), what is supposed to
> be behind this border? The content page? The toolbar?

The toolbar of course :)

> - What if the breadcrumbs bar is hidden? Should we keep the dark border-top?

Yes. But this will only happen when we will have the developer toolbar, so not a problem here.

> - Is it ok to use an image for the ">" shape betweens the buttons? Or it is
> better to use a 45deg-rotated block element?

Using a 45deg-rotated block element works, but the CSS code is very ugly.
Stephen, do you think you can provide an image where the right part is transparent?
I would need 2 version of it, when the element is selected, and when it's not selected.
Created attachment 556968 [details]
Toolbar Design Specs - i02
Attachment #556597 - Attachment is obsolete: true
(Assignee)

Comment 5

6 years ago
Created attachment 557177 [details] [diff] [review]
patch v1
Attachment #557177 - Flags: review?(rcampbell)
(Assignee)

Comment 6

6 years ago
Attachment #557177 [details] [diff] is only for the toolbar and the buttons inside. No breadcrumbs or layout changes included.
(Assignee)

Comment 7

6 years ago
Created attachment 557180 [details]
Screenshot (v1)
Comment on attachment 557177 [details] [diff] [review]
patch v1

>+#inspector-toolbar {

>+  padding-left: 6px;

this doesn't look RTL-ready

>+#inspector-inspect-toolbutton,
>+#inspector-tools > toolbarbutton {

>+  margin: 3px 10px 3px 0;

this doesn't look RTL-ready either

>+  border-radius: 3px;

use @toolbarbuttonCornerRadius@

>+  font-size: 12px;

Where does this number come from? Can you use a relative unit?

>+#inspector-inspect-toolbutton:not([checked="true"]):hover:active,
>+#inspector-tools > toolbarbutton:not([checked="true"]):hover:active {

nit: remove ="true"

>+  border: 1px solid hsla(210,8%,5%,.6);

use border-color

>+#inspector-inspect-toolbutton[checked="true"],
>+#inspector-tools > toolbarbutton[checked="true"] {

nit: remove ="true"

>+  border: 1px solid hsla(210,8%,5%,.6);

border-color again

>+  color: hsl(208,100%,60%)!important;

Why !important?

>+#inspector-inspect-toolbutton[checked="true"]:hover:active,
>+#inspector-tools > toolbarbutton[checked="true"]:hover:active {

nit: remove ="true"
Attachment #557177 - Flags: review?(rcampbell) → review-
(Assignee)

Updated

6 years ago
Blocks: 672006
(Assignee)

Updated

6 years ago
Status: NEW → ASSIGNED
(Assignee)

Comment 9

6 years ago
(In reply to Dão Gottwald [:dao] from comment #8)
> >+  color: hsl(208,100%,60%)!important;
> 
> Why !important?

Because of this:
http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/pinstripe/global/toolbarbutton.css#79
(Assignee)

Comment 10

6 years ago
Created attachment 557482 [details] [diff] [review]
patch v1.1

Addressed Dao's comments. Removed some useless properties.
Attachment #557180 - Attachment is obsolete: true
Attachment #557482 - Flags: review?(dao)
Comment on attachment 557482 [details] [diff] [review]
patch v1.1

>+#inspector-inspect-toolbutton[checked],
>+#inspector-tools > toolbarbutton[checked] {
>+  color: hsl(208,100%,60%)!important;

nit: please add a space before !important
Attachment #557482 - Flags: review?(dao) → review+

Updated

6 years ago
Attachment #557177 - Attachment is obsolete: true
(Assignee)

Comment 12

6 years ago
Created attachment 557484 [details] [diff] [review]
[checked-in] patch v1.2

Thank you Dao.
(Assignee)

Updated

6 years ago
Whiteboard: [minotaur][best: 1d; likely: 3d: worst: 1w] → [minotaur][land-in-fx-team]
(Reporter)

Updated

6 years ago
Whiteboard: [minotaur][land-in-fx-team] → [minotaur][fixed-in-fx-team]
(Reporter)

Comment 13

6 years ago
Comment on attachment 557484 [details] [diff] [review]
[checked-in] patch v1.2

http://hg.mozilla.org/integration/fx-team/rev/cefb66e24059
Attachment #557484 - Attachment description: patch v1.2 → [in-fx-team] patch v1.2
(Reporter)

Updated

6 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 9
(Reporter)

Comment 14

6 years ago
Comment on attachment 557484 [details] [diff] [review]
[checked-in] patch v1.2

http://hg.mozilla.org/mozilla-central/rev/cefb66e24059
Attachment #557484 - Attachment description: [in-fx-team] patch v1.2 → [checked-in] patch v1.2

Comment 15

6 years ago
Verified Fixed using Build identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:10.0a1) Gecko/20111020 Firefox/10.0a1.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.