898059 - black boxing eyeballs are too big

Status: RESOLVED FIXED

(DevTools :: Debugger, defect)

Description

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

We should make them smaller.

Comment 1

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: blackbox.png

Thank you shorlander.

Comment 2

[Victor Porof [:vporof][:vp]]

Is a new asset really needed for this? Why can't the size simply be specified in css?

Comment 3

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: v1

Can't reuse because (AFAIK, and I'd love to be wrong here) we can't scale background images in CSS.

Comment 4

[Victor Porof [:vporof][:vp]]

Comment on attachment 787741 [details] [diff] [review]
v1

Review of attachment 787741 [details] [diff] [review]:
-----------------------------------------------------------------

Am I missing anything? Just changing the width/height of the container and setting background-size to 100% should be enough! Ask me again for review if what I'm saying is stupid.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Comment 5

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: v2

I'm embarrassed to admit that this is the first time I have heard about background-size. Wow.

Comment 6

[Victor Porof [:vporof][:vp]]

Comment on attachment 788456 [details] [diff] [review]
v2

Review of attachment 788456 [details] [diff] [review]:
-----------------------------------------------------------------

r+ with the changes below.

::: browser/themes/linux/devtools/debugger.css
@@ +19,5 @@
>  
>  .side-menu-widget-item-checkbox {
>   -moz-appearance: none;
>    padding: 0;
> +  margin: 4px -4px -4px 4px;

This looks bad on RTL, use -moz-margin-start/end here.

@@ +24,2 @@
>    opacity: 0;
> +  transition: opacity .15s ease 0s;

Why the transition changes? Might want to split them out into a separate patch (not necessarily a different bug).

::: browser/themes/linux/devtools/widgets.css
@@ +352,5 @@
>  }
>  
>  .side-menu-widget-item-other {
>    background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65);
> +  -moz-margin-start: -14px;

Now that I think about it, this right here is very leaky css. If you're not using checkboxes then any other extra content that you might add will be shifted to the left, potentially making it invisible.

Move this margin declaration in debugger.css.

Comment 7

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

https://hg.mozilla.org/integration/fx-team/rev/8750c23b7195

Comment 8

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/8750c23b7195