Compatibility/Meetings/2017-09-work-week

From MozillaWiki
Jump to: navigation, search

webcompat Taipei Work Week

This was a mini work week to make progress on Milestones issue. September 4th - 8th, 2017. Attendees: Eric, Karl, Mike We also worked on -webkit-appearance and a couple more issues. Eric scribed most of it.


-webkit-appearance: whatever

Bug 1352238 is almost done, what is the recommendation from our team to Jet/the layout team? https://bugzilla.mozilla.org/show_bug.cgi?id=1352238

There are interactions with CSS/HTML that we need to understand, for example background-image, for example: 

Values        Chrome       Edge
none          33.8%          27.3%
button       14.3%          22.6%
textfield     4.2%            4.3%
checkbox  0.292%        0.3%
menulist-button 0.142%   0.148%
menulist    0.115%        0.13%
radio          0.108%       0.118%
caret          0.062%       0.061%
initial          0.029%       0.028%
inherit        0.026%       0.027%
listbox       0.01%         0.012%

Issue: explicit width on a input gets stretched out (to test if reproduces in new native fennec widget)

Issue: how do we deal with pages that are serving different -moz-/-webkit appearance values to deal with implementation quirks/differences?

examples:

Opinion: We don't care about unprefixed appearance. Let's let the CSSWG solve that problem. (And appearance: none is used in a lot of places because we told devs to do that).

Existing test pages to work from:

TODO: Map out history of implementation attempts in Gecko.

  • Random Fact: Apple supports -apple-pay-button value: https://codepen.io/anon/pen/JyzyBK
  • elements: input(all types) select textarea div span button meter img
  • values: -webkit-appearance
  • background stuffs: image, none, etc (for select case)
    for el in elements:
      for val in values:
        el.style = "-webkit-appearance: {val}"

List of form elements: <button>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.

Codepen for the testing code https://codepen.io/webcompat/pen/qXvPBm

Mike's version: https://miketaylr.com/bzla/webkit-appearance.html

Some preliminary tests in Chrome 63 DESKTOP:

  • button
  • border changes the background
  • webkit-appearance: none and webkit-appearance:button focus/active style are different (we may don't care)
  • initial, inherit likes none (visually)
  • checkbox, radio, menulist, menulist-button draws a widget, you can't activate them.
  • square-button has a square-button style
  • caret: flat design with no activity at all. textfield same behavior with a square border.
  • div
  • square-button, button clickable button
  • checkbox, radio, menulist, menulist-button UI widget. checkbox, radio affects text layout
  • img
  • nothing different (Careful width and height have influences on some of the widgets.)
  • input.type=button -you always get a button except for checkbox and radio
  • menulist, menulist-button are empty. Maybe artifacts.
  • input.type=checkbox
  • only checkbox and radio, does something interesting. none makes it disappear.
  • it shows when it has a width.
  • input.type=color
  • always there with different border/background
  • input.type=date
  • different style for border/background, except for radio/checkbox widgets. Everything else is functional.
  • same for datetime-local
  • same for month
  • input.type=email -different style for border/background
  • input.type=file
  • all functional even checkbox and radio.
  • input.type=image -subtle size differences
  • input.type=password, number
  • all functional, just background, border different
  • input.type=radio
  • only checkbox, radio are drawn. Checkbok doesn't looks like checkbox nor radio
  • input.type=range
  • range widget is drawn in all of them and is functional.
  • input.type=reset
  • always a button except for checkbox, radio
  • input.type=search
  • input.type=submit
  • always there but checkbox, radio
  • same as tel, text, time, url, week.
  • meter
  • draws the widget, except for none, initial, inherit
  • output
  • similar to div
  • progress
  • weird… all useless.

The only difference on Edge mobile.

  • There's no effect for button, div, image, it doesn't understand anything.
  • webkit-appearance: none on checkbox, radio suppresses the widget as well as initial, inherit
  • They don't support textfield.

On Safari 10.0 iOS 10.3.3 (to check again in 9 days after new release of iOS)

  • Quite different from Safari Desktop at first sight.

Milestones Issues

TODO:

  • Simplify code status-*
  • Track number of issues
  • Free the label space for other use
  • Issue open milestone: needstriage, needsdiagnosis, needscontact, contactready, sitewait
  • Issue close milestone: wontfix, incomplete, invalid, fixed, duplicate, worksforme

Detail:

  • Create issue->belong to one milestone (needstriage)
  • Tests (Py + JS)
  • API backend (Py)
  • Webhooks (Py)
  • Backbone (JS)
  • Templates (CSS + HTML)
  • Create a branch for milestone works
  • Pull request against milestone branch

Issues:

  • Keep milestone non-compat (close them all)
  • Milestone !== for closed status, so we will have multiple closed milestones
  • Close + move milestone in one click
  • Cleaning status of issue with 2 status, no status
  • Create milestone on test-repo, do the same thing on that first
  • Move issues with label status to their own milestone without removing status-*
  • Add milestone tests (keep labels for now, maybe remove status testing?)

Meeting followup for -webkit-appearance.

  • Quick recap from miketaylr
  • Stand version is not compatible with prefixed version for now. Maybe -moz/-webkit-appearance have different behaviors.
  • More detail of implementing -webkit-appearance https://bugzilla.mozilla.org/show_bug.cgi?id=1368555
  • Most common case: customize select, none to wipe everything, customize input range, etc
Retrieved from "https://wiki.mozilla.org/index.php?title=Compatibility/Meetings/2017-09-work-week&oldid=1182427"