Closed Bug 1585621 Opened 5 years ago Closed 5 years ago

Netmonitor blocking - improve visibility for the Request blocking path add (light theme)

Categories

(DevTools :: Netmonitor, enhancement, P3)

71 Branch
enhancement

Tracking

(firefox70 unaffected, firefox71 affected)

RESOLVED DUPLICATE of bug 1589961
Tracking Status
firefox70 --- unaffected
firefox71 --- affected

People

(Reporter: cfogel, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Affected versions

  • 71.0a1 (2019-09-29)

Affected platforms

  • all available;

Steps to reproduce
devtools.netmonitor.features.requestBlocking set on true

  1. Launch Firefox, access any webpage, open the DevTools inspector - Network tab;
  2. Enable the Request blocking pane;
  3. [for comparison] Toggle between the light and dark themes.

Enhancement suggestions

  • add a separator line bellow (probably this would make the most sense);
  • the input area for "Block resource when URL contains should have the background-color changed to a darker shade of gray to make it more visible;
  • move the box at the bottom of the section;

Actual result

  • swapping between light and dark theme makes obvious the difference in between their visibility if the list is empty;

Regression range

  • not a regression, only visible after implementation of bug 1580728;

Additional notes

  • attached screenshot with the issue;

Thanks for the report!

@Florens, WDYT?

Honza

Flags: needinfo?(florens)
Priority: -- → P3

I think a bottom border is what makes the most sense with our current design.

Looking at our text input styles, we use transparent backgrounds, show borders when focused only, and rely on the container's borders (or toolbar's borders) and other subtle indicators like small icons (12px medium gray, instead of the bigger 16px dark gray icons used in buttons), placeholder text and small vertical separators (in toolbars).

So let's add a bottom border, and if it proves too subtle we can maybe think about adding an icon in the text input's left padding. (If so, we may want to do that in Debugger's right sidebar too.)

I've implemented the bottom border, and a few other CSS fixes, in bug 1589961.

Flags: needinfo?(florens)

@fvsch:

I've implemented the bottom border, and a few other CSS fixes, in bug 1589961.

Is this bug completed based on your comment?

Flags: needinfo?(florens)

I think so, if we find that added border makes the text input easier to identify.
Let's dupe against 1589961 which just landed.

Cristian, if you think the fix in bug 1589961 (see attached video there) is not enough, feel free to reopen.

Status: NEW → RESOLVED
Closed: 5 years ago
Flags: needinfo?(florens)
Resolution: --- → DUPLICATE

Yep, the bottom border helps out allot.

You need to log in before you can comment on or make changes to this bug.