Closed Bug 1543288 Opened 5 years ago Closed 5 years ago

Visual refresh for Rules toolbar (related to Print media type emulation)

Categories

(DevTools :: Inspector: Rules, enhancement, P3)

enhancement

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: victoria, Assigned: gl)

References

(Blocks 1 open bug)

Details

Attachments

(5 files)

Mockup: https://mozilla.invisionapp.com/share/5HRGNOZEB6G

Phase 1:

  • New print icon (will be attached to this bug soon).
  • Print icon should be shown at smaller 12x12 size.
  • Add icon should also be at 12x12.
  • Different ordering for visual balance.
  • Replacing hover icon with :hov.
  • Bolder font weight for both :hov and .cls buttons, 11px size.

Phase 2:

  • Match the new minimalist filter field from Console and Network.

Related:

  • Markup view toolbar should also match the minimal filter field, and needs the Add button to be moved to the right. There'll be a separate bug for this.
See Also: → 1534984
Attached image image.png

Re: New print icon: On second thought, I'm not able to make a good dog-eared icon that looks better than the Reader icon at this tiny 12x12 size. I think we should continue on with the Reader icon for now.

Priority: -- → P3
Attached image Print icon tests.png

Possible designs for the print icon:
https://www.figma.com/file/I4qteSdrFDFwjQOT1myBjUFv/Print-Styles-icon

  • Big size = 14x16 pixels
  • Smaller size = 12x14 pixels

Victoria preferred the bottom left one, so here it is as SVG:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill">
  <path d="M2 4a3 3 0 0 1 3-3h4.17a3 3 0 0 1 2.12.88l1.83 1.83A3 3 0 0 1 14 5.83V12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V4zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V5.83a1 1 0 0 0-.3-.7L9.89 3.28a1 1 0 0 0-.7-.29H5z"/>
  <path d="M6 10.5c0-.28.22-.5.5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zM6 8.5c0-.28.22-.5.5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zM6 6.5c0-.28.22-.5.5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zM9 4.5V3h1v1.5c0 .28.22.5.5.5H12v1h-1.5A1.5 1.5 0 0 1 9 4.5z"/>
</svg>

So awesome. Thank you Florens!

See Also: → 1544082

This is great. Thank you both for providing the mockups and icons for this!

Assignee: nobody → gl
Status: NEW → ASSIGNED

While it looks pretty in your mockups, I feel with section headers as first item in the rules view it feels a bit off. In the screenshot attached you can see this with the pseudo-elements section.

Or maybe it's the 3rd pane tab bar that's feeling wrong? the network panel has a full width white toolbar, and that works well. So in screen 2 you can see what it would look like for the inspector.

Flags: needinfo?(victoria)

I see what you mean. I do like the visual difference between the two types of toolbars: input-dominated toolbars with buttons which deal with the content below, vs simpler navigational toolbars that change the whole view.

Am I correct in thinking the 'Psudeo-elements' and 'This Element' headings aren't commonly shown? I think that's the main situation that looks awkward right now. I'm not too bothered by this in particular, however, because the multiple rows stacked on top of each other looks messy anyway. The right pane toolbar on top of the Flexbox heading looks bad too.

My suggestion is to move forward with this bug, and in the meantime I'm working to make these section/accordion headings less necessary, or less heavy-looking in the future. E.g. my proposed unified layout panel wouldn't have gray section headings.

Flags: needinfo?(victoria)

Makes sense.

Not sure how common pseudo-elements are. The few sites I tested while testing the patch were full of them. But yea, didn't mean to make this a blocker, just wanted to say it looks ... "untidy" 😅

Yep, I appreciate you bringing this up! I looked at a bunch of sites myself and only found pseudo-elements when I had browser styles turned on. I feel like I should understand this better - is browser styles the main situation in which there is a pseudo elements section? Is that section always grayed-out?

Blocks: 1545243

Personally I find that the white-background toolbars never work; they end up sandwiched between rows of grey-background toolbars, accordion headers and/or table headers, and end up looking like very small content areas.

It's been bothering me in Network, I keep signaling it as an issue and getting told that it's the intended look, then forgetting it's intended and reporting it again. :P But maybe that's just me.

Is the intent to differentiate panel toolbars from the topmost (toolbox) tab bar?

Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/854896d598c1
Update the Print icon and Add rules button position. r=mtigley

There are two issues with this patch:

  1. The add.svg icon has 2px strokes when rendered at is original 16px. If we render it at a 14px background-size, it will be blurry on all resolutions and especially on 1x displays. If we want a smaller icon, we should rework the SVG rather than resize it with CSS. Open question: should all the "+" icons become smaller across all panels, or just this one? If all icons, we need to update add.svg. If only this one, we probably need to add a separate add-small.svg file and use that.

  2. The updated "simulate print" icon I provided is drawn as a 14px-tall icon on a 16x16 canvas (for consistency with other icons and default icon sizes). It should be rendered with the default size, not with background-size:14px, which will make it blurry on all screens and especially on 1x displays.

I see! Perhaps we should keep this issue open until the above are resolved? Feel free to remove the leave-open flag if we should do this in another bug.

  1. I'm under the impression this was just for the inspector toolbar. Victoria would be better to answer this.

  2. Thank you explaining this. I did not know this!

Flags: needinfo?(victoria)
Keywords: leave-open

(In reply to Florens Verschelde :fvsch from comment #11)

Personally I find that the white-background toolbars never work; they end up sandwiched between rows of grey-background toolbars, accordion headers and/or table headers, and end up looking like very small content areas.

It's been bothering me in Network, I keep signaling it as an issue and getting told that it's the intended look, then forgetting it's intended and reporting it again. :P But maybe that's just me.

Is the intent to differentiate panel toolbars from the topmost (toolbox) tab bar?

Do you mean that you find it hard to quickly find the input field in these toolbars? Or is something confusing about the buttons in these toolbars?

I liked it for expanding the input area and cutting down on extra horizontal/vertical lines, and the white background signals that it's a search field to me. I'm open to ways to improve it however.

I think we can close this bug and keep discussing this in a new bug.

Flags: needinfo?(victoria)
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Keywords: leave-open
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: