(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo Reporter
	Description • 7 years ago

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

	Tim Guan-tin Chien [:timdream] (please needinfo)
	Comment 2 • 7 years ago
mozreview-review

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.

	Ricky Chien [:rickychien] (inactive) Assignee
	Comment 5 • 7 years ago

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.

	Jared Wein [:jaws] (please needinfo? me)
	Comment 6 • 7 years ago
mozreview-review

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.

	Ricky Chien [:rickychien] (inactive) Assignee
	Comment 7 • 7 years ago
mozreview-review-reply

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.

	Mike Conley (:mconley) (:⚙️)
	Comment 11 • 7 years ago

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...

	Tim Guan-tin Chien [:timdream] (please needinfo)
	Comment 14 • 7 years ago
mozreview-review

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)

	Ricky Chien [:rickychien] (inactive) Assignee
	Comment 17 • 7 years ago
mozreview-review-reply

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.

	Ricky Chien [:rickychien] (inactive) Assignee
	Comment 19 • 7 years ago

Patch has updated. Here you go!

	Tim Guan-tin Chien [:timdream] (please needinfo)
	Comment 20 • 7 years ago
mozreview-review

Comment on attachment 8899320 [details]
Bug 1391646 - Make preferences search bar border become square

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

	Pulsebot
	Comment 21 • 7 years ago

Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/5503809c794a
Make preferences search bar border become square r=timdream

	Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)
	Comment 22 • 7 years ago
bugherder

https://hg.mozilla.org/mozilla-central/rev/5503809c794a

	Azmina
	Comment 23 • 7 years ago

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

	Hani Yacoub, Desktop QA
	Comment 24 • 7 years ago

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.

	Ricky Chien [:rickychien] (inactive) Assignee
	Comment 25 • 7 years ago

Good catch! I'm going to file a bug for this. Thanks

	Hani Yacoub, Desktop QA
	Comment 26 • 7 years ago

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.