Closed
Bug 1391646
Opened 7 years ago
Closed 7 years ago
Remove remaining round corners in preferences search bar
Categories
(Firefox :: Settings UI, enhancement, P1)
Firefox
Settings UI
Tracking
()
VERIFIED
FIXED
Firefox 57
Tracking | Status | |
---|---|---|
firefox57 | --- | verified |
People
(Reporter: phlsa, Assigned: rickychien)
References
(Blocks 1 open bug)
Details
(Whiteboard: [photon-preference])
Attachments
(2 files)
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
Updated•7 years ago
|
Whiteboard: [photon-preference][triage]
Assignee | ||
Updated•7 years ago
|
Assignee: nobody → rchien
Status: NEW → ASSIGNED
Flags: qe-verify+
Priority: -- → P1
QA Contact: hani.yacoub
Comment hidden (mozreview-request) |
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.
Comment hidden (mozreview-request) |
Comment hidden (mozreview-request) |
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.
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.
Attachment #8899320 -
Flags: review?(jaws) → review-
Updated•7 years ago
|
Whiteboard: [photon-preference][triage] → [photon-preference]
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.
Comment hidden (mozreview-request) |
Updated•7 years ago
|
Target Milestone: --- → Firefox 57
Comment hidden (mozreview-request) |
Comment hidden (mozreview-request) |
Updated•7 years ago
|
Attachment #8899320 -
Flags: review?(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...
Comment hidden (mozreview-request) |
Comment hidden (mozreview-request) |
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)
Attachment #8899320 -
Flags: review?(timdream) → review-
Comment hidden (mozreview-request) |
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.
Comment hidden (mozreview-request) |
Assignee | ||
Comment 19•7 years ago
|
||
Patch has updated. Here you go!
Updated•7 years ago
|
Attachment #8899320 -
Flags: review?(timdream) → review+
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
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
Comment 22•7 years ago
|
||
bugherder |
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
QA Whiteboard: [bugday-20170823]
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.
Flags: needinfo?(rchien)
Assignee | ||
Comment 25•7 years ago
|
||
Good catch! I'm going to file a bug for this. Thanks
Flags: needinfo?(rchien)
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.
Status: RESOLVED → VERIFIED
You need to log in
before you can comment on or make changes to this bug.
Description
•