Style selects in the Settings Tray

Tested the patch:
* Bug: The test seems to fail because it expects a constant, not a number ? (In this case 200)
* Bug: IE Edge shows the default browser arrow, resulting in 2 arrows (the default and custom ones). See screenshot
* Note: In Chrome now the item shows focused styles (without the patch, there is no visual styles for focused select form). So the patch improves the a11y of the select form.

I created a new patch, that:
Wrong fix: * Adds the CSS_AGGREGATE_AFTER_THEME constant in the interface ( I guess it's the right place? #2807785: Move global constants from *.module files into interfaces
* Adds a new rule to override the default appareance of the selct form for IE11. "appareance:none" doesn't work. The solution is based on ::-ms-expand See http://stackoverflow.com/questions/20163079/remove-select-arrow-on-ie

Forget about the comments of test failing. The yml file doesn't need to be touched

I'm seeing this with the latest patch in simplytest:

- The proposed design seems to use a darker gray
- Font size of the values in the select list seems (too) small

Mhh.. I'm confused. Actually I didn't change any CSS in your patch. Just the fact that I re-rolled the patch on latest code might have "adapted" the patch?. Next time I will upload a interdiff to see better

I was using Firefox indeed.

The "font-size:initial" rule didn't help. After searching around, and finding other people with the same problem, I arrived to the conclusion that is impossible to alter the font-size of the select options in Firefox and Chrome. For example, try to make "font-size:30px", it won't be applied.

IE is a different case. You can specify "font-size:30px" to the select options in IE and it will work. But IE doesn't support the CSS3 "font-size:initial" property, any version of IE.

So.. I think the best we can do, it's to remove the font-size:initial rule, and let the browser apply his default font-size, without trying to manipulate it. What do you think?

Tested in Firefox/Chrome in OSx. IE 11 in Win 8.1 virtual machine

I think there was no problem at all, Yoroy said the font "seems" small. But actually, I think the screenshot he shows, it's the default Firefox size for select options and you can't change it with CSS. We can't fix it.

If Yoroy, or someone else can confirm my findings, we can move forward, and remove the "font-size" attribute from the patch.

@corbacho I've tested applying bigger font size for select options and the font-size is changing in Firefox and Chrome hence working fine for me. Just to make it more clear i've also attached screenshots for the same.

Also, I've tested your #9 patch and it is working fine for me i couldn't find the font size small for select option. For the reference I've attached the screenshots for this as well.

Also, attached screenshots for before applying any patch just to make a check with font-size. Removed the "font-size" attribute and attaching a patch for this as well.

The test failures from #25 are from an unrelated problem. The test are now passing for the issue.

I see what happened.

#23 did not create the new file core/misc/icons/787878/chevron-down.svg that was in #19
Could easily just been "git add core/modules/outside" which would not have included "core/misc".

Just be clear this new file was intentional in #19, correct? none the existing *-down.svg files worked.

This patch combines #23 with chevron-down.svg from #19.

Retesting. Weird error

21:23:36 An error was encountered while attempting to write https://www.drupal.org/files/issues/2802457-30.patch to /var/lib/drupalci/web/jenkins-default-280861
21:23:36 Execution Error
21:23:36 Error encountered while executing job build step setup:fetch

I applied the patch #34 but getting errors. Please see the screenshot attached.

@Vidushi Mehta thanks for checking on this issue.

The patch applies for me. It looks like from your error message that you have some of the new files that this patch creates already in your working directory.

Have you applied this patch before? Make sure your git status is clean. If your git status is clean and you are still running into this problem it may mean that you are ignoring untrack files.

Whoops actually does not need re-roll

@tedbow thank you for making me correct. I've applied the patch #34 again and tested on mac for missing down arrow icon and it's working fine. Find the attached screenshots for ff, chrome and safari.

applied #34 on simplytest.me.
certainly the images from 38 are accurate -- there is no styling to select at this time.

i appreciate the original style inspiration: but is a heavy attempt to alter a form element that most browsers (expect IE) don't like being styled with using a JS replacement [ie: http://selectric.js.org]

i think in the least the patch should make the select element {width:100%} to visually level the flow of elements as seen with (editing menus) with the 'initial visibility level' and 'number to level to display' -- treat all selects to fill the line width.

theming selects (radios and checkboxes) is always full of challenges.

Changing to new settings_tray.module component. @drpal thanks for script help! :)

Needs reroll at least for changes in #2803375: Rename Outside-in module to "Settings Tray" for real

Also we should figure out if this is still needed because #2826722: Add a 'fence' around settings tray with aggressive CSS reset. may have fixed this

Re-rolled.

Correct filename from "off_canvas.selects.css" to "off-canvas.selects.css".

@Jo Fitzgerald thanks for the re-roll!

This is problem with existing patch not the re-roll, there are a bunch of CSS changes that are unrelated to select boxes. These either need to be removed or it is no be clearer what this issue is about.

Removed CSS changes unrelated to select boxes. Attached are screenshots from Firefox, Chrome, and Safari showing the select boxes.

@starshaped thanks for removing the unrelated CSS!

1. I noticed in the Menu block. The "Initial Visibility level" select in the unpatched version it is always on the next line from the label
   

   while in the patched version it is always on the same line
   

   I tried to resize the tray and it always stayed this way.

   Is this intentional?

2. From the issue summary

   Selects will be grey with white arrow and 2p corner radius in all browsers.

   But from #13 that look like it was taken out of the patch intentionally.

   I have another patch that creates both a dark and a light theme for the tray so I pulled the dark styles out of this patch.

   I don't think we are going to be doing the light and dark theme any more.

   So we either need to update the IS or if we want add the grey back in.

3. For me the Firefox image in #48 still looks wrong. But maybe this not possible in FF. Not sure

Do we still want this?

@Wim Leers Can you elaborate your question. Not getting the point.