Page MenuHomePhabricator
Create Task
Maniphest T221624

Regression: Edit summary has no border
Closed, ResolvedPublic3 Story PointsBug
Actions

Description

The edit summary box in the mobile editor has no border.

Expected:

Actual:

Developer notes

Looks like this broke in I8c34646b7ba13a26facbb69684e65109870d27a1. The problem is the styling of inputs in the talk overlay is inconsistent with the editor. The talk overlay puts a bottom border on the panel that contains the input, but the panel only contains one element - the input and the border is on the input.

We should reconsider the relationship between panels and inputs and how they are styled. Possible the talk overlay would benefit from not being wrapped in a panel, or panel's should only remove the border of inputs if there is only a single child e.g. input:first-child:last-child

QA Steps

Test editor overlay

  1. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain
  2. Click the edit icon
  3. Type something in the edit box and click the blue "Next" button
  4. Ensure that there is a border now around the "How did you improve the page?" textarea (this ticket has a screenshot of the expected border)

Test Talk Overlay

  1. Login to https://en.m.wikipedia.beta.wmflabs.org (you won't be able to access talk overlay without being logged in)
  2. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain#/talk/new
  3. Ensure that the visual styles of the form elements "Subject" and "What is on your mind" are the same as on production (e.g. https://en.m.wikipedia.org/wiki/Tree#/talk/new). There should be no visible changes to those elements with the work done in this ticket.

QA Results

ACStatusDetails
1✅T221624#5215642
2✅T221624#5215642

Event Timeline

kostajh triaged this task as High priority.Apr 23 2019, 1:24 PM
kostajh created this task.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 23 2019, 1:24 PM
kostajh changed the subtype of this task from "Task" to "Bug Report".Apr 23 2019, 1:24 PM
Jdlrobson renamed this task from Fix overlay borders to Regression: Edit summary has no border.Apr 23 2019, 1:29 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from To Triage to Upcoming on the Readers-Web-Backlog board.
Niedzielski set the point value for this task to 3.Apr 24 2019, 4:25 PM
Niedzielski added a subscriber: Niedzielski.

We pointed this at a medium because we're not sure on the best approach. Maybe we can distinguish between page content and UI in the panel styles.

gerritbot added a comment.Apr 29 2019, 8:50 PM

Change 507202 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Consolidate the styling of inputs/textareas across Overlays

https://gerrit.wikimedia.org/r/507202

gerritbot added a comment.Apr 29 2019, 9:38 PM

Change 507208 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/MinervaNeue@master] Change TalkSectionAddOverlay browser test textarea selector

https://gerrit.wikimedia.org/r/507208

gerritbot added a comment.Apr 29 2019, 9:38 PM

Change 507209 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/MinervaNeue@master] Remove textarea selector from Overlay.less

https://gerrit.wikimedia.org/r/507209

gerritbot added a comment.May 1 2019, 9:57 PM

Change 507208 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Change TalkSectionAddOverlay browser test's textarea selector

https://gerrit.wikimedia.org/r/507208

nray added a subscriber: alexhollender.EditedMay 3 2019, 5:44 PM

@alexhollender I've been trying to consolidate some of the styling of form elements in our overlays for this ticket. I had some questions regarding the styling of our talk overlay when users add new discussions (https://en.m.wikipedia.org/wiki/Barack_Obama#/talk/new).

The form elements on this overlay are stacked and do not have any space between them. The unfocused elements have a grey border on the top/bottom but no border on the left/right:

When focused, elements have a blue border on all sides:

My questions are:

  1. Should we keep the elements stacked like this (no space between them)? It's okay if that is necessary, but it is unique styling that only the Talk Overlay uses right now. If it's not necessary, I'd love to remove those unique styling rules from our CSS.
  1. When unfocused, should the element's grey border still be on top/bottom and absent on the left/right?
  1. When focused, should the element's blue border be on all sides (top/bottom/left/right) or should it only be on the top/bottom (this is probably influenced by #2's answer).
  1. Are there any other styling changes you'd like to make to these form elements?
gerritbot added a comment.May 22 2019, 3:08 AM

Change 511799 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] 🐛 Add border back to edit overlay summary textarea

https://gerrit.wikimedia.org/r/511799

gerritbot added a comment.May 22 2019, 3:10 AM

Change 507202 abandoned by Nray:
Consolidate the styling of inputs/textareas across Overlays

Reason:
am opting to go for a simpler solution in I572350a201fbc859bb41a4ef2ce5d8875e164ba5 to address the immediate solution. Will create a new ticket to address all of the different selectors use to style form elements in overlays

https://gerrit.wikimedia.org/r/507202

gerritbot added a comment.May 23 2019, 12:23 PM

Change 511799 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] 🐛 Bug: Add border back to edit overlay summary textarea

https://gerrit.wikimedia.org/r/511799

nray reassigned this task from nray to Edtadros.May 23 2019, 4:14 PM
nray updated the task description. (Show Details)
nray moved this task from Needs Code Review to Needs QA on the Readers-Web-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q4) board.
nray added a subscriber: nray.
Edtadros reassigned this task from Edtadros to ovasileva.May 28 2019, 1:27 AM
Edtadros moved this task from Needs QA to Ready for Signoff on the Readers-Web-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q4) board.
Edtadros added a subscriber: Edtadros.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA Steps

✅ AC1: Test editor overlay

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain
Click the edit icon
Type something in the edit box and click the blue "Next" button
Ensure that there is a border now around the "How did you improve the page?" textarea (this ticket has a screenshot of the expected border)

✅ AC2: Test Talk Overlay

Login to https://en.m.wikipedia.beta.wmflabs.org (you won't be able to access talk overlay without being logged in)
Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain#/talk/new
Ensure that the visual styles of the form elements "Subject" and "What is on your mind" are the same as on production (e.g. https://en.m.wikipedia.org/wiki/Tree#/talk/new). There should be no visible changes to those elements with the work done in this ticket.

BetaProduction
Edtadros updated the task description. (Show Details)May 28 2019, 1:28 AM
ovasileva closed this task as Resolved.May 28 2019, 9:01 AM

All done.

gerritbot added a comment.May 31 2019, 3:37 PM

Change 507209 abandoned by Nray:
Remove textarea selector from Overlay.less

Reason:
in favor of I572350a201fbc859bb41a4ef2ce5d8875e164ba5

https://gerrit.wikimedia.org/r/507209

Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL