Bug 167641 – Web Inspector: Placeholder text is clipped in the 'Enter Class Name' field at the bottom of Rules style sidebar in some localizations

• Component: Web Inspector
• Status: RESOLVED FIXED

[Blaze Burg]

Created attachment 300217 [details]
The issue

The layout here is very narrow and hard to read in a lot of languages. I attached one example. We could try making the box wider. I think in the long-term, the class toggle/adder UI should go alongside forced pseudoclasses at the top, not at the bottom.

This affects over half of our localizations for Safari.

[Blaze Burg]

<rdar://problem/26541953>

[Matt Baker]

(In reply to comment #0)
> Created attachment 300217 [details]
> The issue
> 
> The layout here is very narrow and hard to read in a lot of languages. I
> attached one example. We could try making the box wider. I think in the
> long-term, the class toggle/adder UI should go alongside forced
> pseudoclasses at the top, not at the bottom.

Agree.

[Devin Rousso]

(In reply to comment #0)
> The layout here is very narrow and hard to read in a lot of languages. I
> attached one example. We could try making the box wider. I think in the
> long-term, the class toggle/adder UI should go alongside forced
> pseudoclasses at the top, not at the bottom.

Do you imagine it being always shown, but only revealed on scroll (similar to how the pseudo-classes are right now)?  If so, would this be above or below the pseudo-classes?  If not, should there still be a button somewhere to enable the listing of classes?

[Blaze Burg]

(In reply to comment #3)
> (In reply to comment #0)
> > The layout here is very narrow and hard to read in a lot of languages. I
> > attached one example. We could try making the box wider. I think in the
> > long-term, the class toggle/adder UI should go alongside forced
> > pseudoclasses at the top, not at the bottom.
> 
> Do you imagine it being always shown, but only revealed on scroll (similar
> to how the pseudo-classes are right now)?  If so, would this be above or
> below the pseudo-classes?  If not, should there still be a button somewhere
> to enable the listing of classes?

I imagine a section called Element Overrides with a scope bar-type thing that just shows two options that can be multiply selected. When the appropriate bar item is selected we show the pseudo overrides or the class toggle section below.

Element Overrides [:pseudo] [.class]
------------------------------------
[ ] :hover         [ ] :active
...
------------------------------------
[ Add new class ]
[ ] class1 [ ] class2 ....
------------------------------------

... rest of the rules ...

This is fairly similar to what Chrome does except our filters always go on the bottom, and it's possible to see both override sections expanded at the same time.

[Nikita Vasilyev]

I think the add new class input field should span the entire width of the sidebar. Not only it creates issues with localization, it's just too small for many class names.

[Nikita Vasilyev]

Created attachment 306645 [details]
Patch

[Nikita Vasilyev]

Created attachment 306646 [details]
[Image] Before/After

[Joseph Pecoraro]

Comment on attachment 306645 [details]
Patch

Nice! r=me

[WebKit Commit Bot]

Comment on attachment 306645 [details]
Patch

Clearing flags on attachment: 306645

Committed r215192: <http://trac.webkit.org/changeset/215192>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.