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.
<rdar://problem/26541953>
(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.
(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?
(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.
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.
Created attachment 306645 [details] Patch
Created attachment 306646 [details] [Image] Before/After
Comment on attachment 306645 [details] Patch Nice! r=me
Comment on attachment 306645 [details] Patch Clearing flags on attachment: 306645 Committed r215192: <http://trac.webkit.org/changeset/215192>
All reviewed patches have been landed. Closing bug.