Remove remaining round corners in preferences search bar

VERIFIED FIXED in Firefox 57

Status

()

enhancement
P1
normal
VERIFIED FIXED
2 years ago
2 years ago

People

(Reporter: phlsa, Assigned: rickychien)

Tracking

(Blocks 1 bug)

unspecified
Firefox 57
Points:
---
Dependency tree / graph
Bug Flags:
qe-verify +

Firefox Tracking Flags

(firefox57 verified)

Details

(Whiteboard: [photon-preference])

Attachments

(2 attachments)

The search bar in preferences currently has round corners on the left side and square corners on the right side. (https://cl.ly/1K0w1l0B2003)

Let's make them all square, which is what's in the spec
https://mozilla.invisionapp.com/d/main#/console/10781996/244683138/preview
Whiteboard: [photon-preference][triage]
Assignee: nobody → rchien
Status: NEW → ASSIGNED
Flags: qe-verify+
Priority: -- → P1
QA Contact: hani.yacoub
Comment on attachment 8899320 [details]
Bug 1391646 - Make preferences search bar border become square

https://reviewboard.mozilla.org/r/170540/#review175720

Stealing...

::: toolkit/themes/shared/in-content/common.inc.css:485
(Diff revision 1)
>    padding-right: 10px;
>    padding-left: 10px;
>  }
>  
> +xul|textbox[type="search"] {
> +  border-radius: 0;

You should just remove http://searchfox.org/mozilla-central/rev/b258e6864ee3e809d40982bc5d0d5aff66a20780/toolkit/themes/shared/in-content/common.inc.css#754 instead.
According to spec at https://mozilla.invisionapp.com/share/X8BGCX9PD#/screens/232122128, only the top right search bar will apply the square corner style rather than round corner. Other components such as button, menulist and textbox (like searchbar in Applications section) will stay as it is with round corner style.

I've updated my patch to apply the square corner on top right search bar and also fixed some of those unaligned components to be consistent.
Comment on attachment 8899320 [details]
Bug 1391646 - Make preferences search bar border become square

https://reviewboard.mozilla.org/r/170540/#review175944

::: browser/themes/shared/incontentprefs/preferences.inc.css:529
(Diff revision 3)
>    margin-inline-start: 0;
>    margin-bottom: 0;
>  }
>  
> +#fxaChangeDeviceName {
> +  border-radius: 2px;

This should still have border-radius on the top-right and bottom-right (in LTR) so that the textbox fits nicely against the button.
Attachment #8899320 - Flags: review?(jaws) → review-
Whiteboard: [photon-preference][triage] → [photon-preference]
Comment on attachment 8899320 [details]
Bug 1391646 - Make preferences search bar border become square

https://reviewboard.mozilla.org/r/170540/#review175944

> This should still have border-radius on the top-right and bottom-right (in LTR) so that the textbox fits nicely against the button.

No, this button is all round by original design and it doesn't stick to the left textbox like filefield #downloadFolder in downloads section. After clicking on it, you can see it replaces by "Cancel" and "Save" buttons and both of them are round style as well.
Target Milestone: --- → Firefox 57
Blocks: 1357306
Attachment #8899320 - Flags: review?(mconley)
Redirecting to timdream since I think he's got more context here.

Though I'm a bit worried about updating the common CSS file when we're just trying to update about:preferences...
Comment on attachment 8899320 [details]
Bug 1391646 - Make preferences search bar border become square

https://reviewboard.mozilla.org/r/170540/#review177332

::: commit-message-7dddb:2
(Diff revision 8)
> +Bug 1391646 - Remove remaining round corners in preferences search bar r?timdream
> +

I am a bit confused by what you want to achieve, and what's your approach. I supposed you could try to use comment message body to elaborate (and leave future engineers some breadcrumb in the log), instead of just a single line commit description.

::: browser/themes/shared/incontentprefs/preferences.inc.css:107
(Diff revision 8)
>    min-width: 145px;
>    margin: 2px 0;
>  }
>  
> +#searchInput {
> +  border-radius: 0;

This change is legit because we want the search input to have no rounded corners.

::: browser/themes/shared/incontentprefs/preferences.inc.css:531
(Diff revision 8)
>    margin-inline-start: 0;
>    margin-bottom: 0;
>  }
>  
> +#fxaChangeDeviceName {
> +  border-radius: 2px;

See below

::: toolkit/themes/shared/in-content/common.inc.css:766
(Diff revision 8)
>    padding-inline-start: 36px;
>  }
>  
> -xul|textbox:-moz-locale-dir(rtl),
>  xul|*.fileFieldLabel:-moz-locale-dir(rtl),
>  xul|textbox + xul|button:-moz-locale-dir(ltr),

I believe `#fxaChangeDeviceName` is affected by this selector. If (and the `ltr` one). If you removed `xul|textbox:-moz-locale-dir(rtl)` selector, you should remove this in pair I think? With this change you no longer need to overwrite style with `#fxaChangeDeviceName` selector.

(and yes we still need to keep the `fileField` selectors)
Attachment #8899320 - Flags: review?(timdream) → review-
Duplicate of this bug: 1393446
Comment on attachment 8899320 [details]
Bug 1391646 - Make preferences search bar border become square

https://reviewboard.mozilla.org/r/170540/#review177332

> I believe `#fxaChangeDeviceName` is affected by this selector. If (and the `ltr` one). If you removed `xul|textbox:-moz-locale-dir(rtl)` selector, you should remove this in pair I think? With this change you no longer need to overwrite style with `#fxaChangeDeviceName` selector.
> 
> (and yes we still need to keep the `fileField` selectors)

#fxaChangeDeviceName button is actually affected by `xul|textbox + xul|button:-moz-locale-dir(rtl)` selector rather than `xul|textbox:-moz-locale-dir(ltr)`.

`xul|textbox:-moz-locale-dir(ltr)` will affect to the #fxaSyncComputerName textbox which should be styled with round border as well as the fxaChangeDeviceName button.
Patch has updated. Here you go!
Attachment #8899320 - Flags: review?(timdream) → review+
Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/5503809c794a
Make preferences search bar border become square r=timdream
https://hg.mozilla.org/mozilla-central/rev/5503809c794a
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
I have reproduced this bug with Nightly 57.0a1 (2017-08-18) on Windows 8.1, 64 Bit!

This bug's fix is verified on Latest Nightly 57.0a1.

Build ID :  20170827100428
User Agent : Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
QA Whiteboard: [bugday-20170823]
Posted image round corners.png
After checking the corners of the search bar, I found that the table under "Applications" section with content types and the table under one-click search engines both have square corners but in the spec it indicates that it must have round corners.

Should we log a new bug for this or it is intended?

Thanks.
Flags: needinfo?(rchien)
Good catch! I'm going to file a bug for this. Thanks
Flags: needinfo?(rchien)
Build ID: 20170828100127
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Verified as fixed on Firefox Nightly 57.0a1 on Windows 10 x 64, Mac OS X 10.12 and Ubuntu 16.04 x64.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.