New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 840527 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 1
Type: Bug

Blocking:
issue 831852
issue 843701



Sign in to add a comment

Update WebUI radio buttons for MD Refresh

Project Member Reported by scottchen@chromium.org, May 7 2018

Issue description

Labels: OS-Chrome OS-Linux OS-Mac OS-Windows

Comment 2 by dpa...@chromium.org, May 11 2018

Labels: M-68

Comment 3 by dpa...@chromium.org, May 11 2018

Labels: -Pri-2 Pri-1

Comment 4 by dpa...@chromium.org, May 12 2018

Labels: Proj-MaterialDesign-Refresh-WebUI
Project Member

Comment 5 by bugdroid1@chromium.org, May 15 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2b507cfd47700a502de991e5918e5736e6d86b1e

commit 2b507cfd47700a502de991e5918e5736e6d86b1e
Author: Scott Chen <scottchen@chromium.org>
Date: Tue May 15 05:43:29 2018

WebUI[MD-refresh]: create cr-radio-button to match spec.

This CL creates a new cr-radio-button element with the MD-refresh spec.
This CL also replaces all paper-radio-button within Settings with
cr-radio-button.

Most of the cr-radio-button's functionalities and styles are encapsulated
in separate files in a shared location, so that the controlled-radio-button
element in settings can reuse them.

There will be a follow-up CL to then replace all of paper-radio-button's
usage outside of Settings.

Bug:  840527 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I4fc47fa0b8186b5d6ef0a3b678cc68bbc58a8e3d
Reviewed-on: https://chromium-review.googlesource.com/1053299
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#558620}
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/about_page/channel_switcher_dialog.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/controls/BUILD.gn
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/controls/controlled_radio_button.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/controls/controlled_radio_button.js
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/controls/settings_radio_group.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/device_page/pointers.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/people_page/lock_screen.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/people_page/sync_page.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/settings_shared_css.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/browser/resources/settings/settings_vars_css.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/test/data/webui/cr_elements/cr_elements_browsertest.js
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/test/data/webui/cr_elements/cr_radio_button_test.js
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/test/data/webui/settings/about_page_tests.js
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/test/data/webui/settings/device_page_tests.js
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/test/data/webui/settings/people_page_sync_page_test.js
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/chrome/test/data/webui/settings/quick_unlock_authenticate_browsertest_chromeos.js
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/BUILD.gn
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/compiled_resources2.gyp
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_radio_button/BUILD.gn
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_radio_button/compiled_resources2.gyp
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.html
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.js
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.html
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js
[add] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/shared_style_css.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements/shared_vars_css.html
[modify] https://crrev.com/2b507cfd47700a502de991e5918e5736e6d86b1e/ui/webui/resources/cr_elements_resources.grdp

Blocking: 843701
Project Member

Comment 7 by bugdroid1@chromium.org, May 16 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4b6987d03b6fb71b0edd05b996da72c3913f5052

commit 4b6987d03b6fb71b0edd05b996da72c3913f5052
Author: Scott Chen <scottchen@chromium.org>
Date: Wed May 16 20:00:24 2018

WebUI: prevent selection when opening link within cr-radio-button.

The device page was doing quite a lot of work to prevent link-clicking
from selecting a radio-button. This CL moves the responsibility to
cr-radio-button.

Also cleans up key-event handling within cr-radio-button a bit.

Bug:  840527 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I86701cd53e1a6794d8661c5ef66ac9d2e0d4f81a
Reviewed-on: https://chromium-review.googlesource.com/1060164
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#559245}
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/chrome/browser/resources/settings/device_page/pointers.html
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/chrome/browser/resources/settings/device_page/pointers.js
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/chrome/test/data/webui/cr_elements/cr_radio_button_test.js
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/chrome/test/data/webui/settings/device_page_tests.js
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/ui/webui/resources/cr_elements/cr_radio_button/BUILD.gn
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/ui/webui/resources/cr_elements/cr_radio_button/compiled_resources2.gyp
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.html
[modify] https://crrev.com/4b6987d03b6fb71b0edd05b996da72c3913f5052/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js

Project Member

Comment 8 by bugdroid1@chromium.org, May 16 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c2180752618c65eb4909760bf1d8bb3f3b9fd9da

commit c2180752618c65eb4909760bf1d8bb3f3b9fd9da
Author: Scott Chen <scottchen@chromium.org>
Date: Wed May 16 23:56:16 2018

WebUI[MD refresh]: style cr-radio-button closer to paper-radio-button

A min-height was only supposed to apply within settings, so this CL
moves that back.

Even after that though, the cr-radio-button would have a forced 40px
height due to how disc-wrapper and ripples were styled. This CL adjusts
the styling such that the circle only takes up 16x16 space in the layout,
and instead the ripple is absolutely positioned and out of the layout.

Note that settings has styling to override min-height and padding
of cr-radio-buttons, so visuals before and after this CL is unchanged, but
this will make replacing paper-radio-button with cr-radio-button
outside of settings easier.

Bug:  840527 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Idc7d52cd8ced581bd81ac682cadf97ae4948fb55
Reviewed-on: https://chromium-review.googlesource.com/1060517
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#559341}
[modify] https://crrev.com/c2180752618c65eb4909760bf1d8bb3f3b9fd9da/chrome/browser/resources/settings/settings_shared_css.html
[modify] https://crrev.com/c2180752618c65eb4909760bf1d8bb3f3b9fd9da/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

Project Member

Comment 9 by bugdroid1@chromium.org, May 17 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/6bacda2f89b3243144a79fdc6393f9f69ae212c9

commit 6bacda2f89b3243144a79fdc6393f9f69ae212c9
Author: Scott Chen <scottchen@chromium.org>
Date: Thu May 17 21:43:59 2018

WebUI[MD-refresh]: Replace all paper-radio-buttons with cr-radio-buttons

Bug:  840527 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I875b076e2519c197c36206b1692b650aeacb22b5
Reviewed-on: https://chromium-review.googlesource.com/1059866
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#559688}
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/chromeos/emulator/audio_settings.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/chromeos/emulator/battery_settings.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/chromeos/emulator/bluetooth_settings.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/chromeos/emulator/shared_styles.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/chromeos/login/enrollment_license_card.css
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/chromeos/login/enrollment_license_card.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation_app.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/chrome/browser/resources/signin/signin_shared_css.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html
[modify] https://crrev.com/6bacda2f89b3243144a79fdc6393f9f69ae212c9/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

Status: Fixed (was: Started)
Labels: Needs-Feedback
Tested on latest Canary #68.0.3434.0 using Windows 10 and observed the behavior of the buttons as provided in the screenshot attached.
scottchen@ -- Could you please look into the screenshot and let us know whether the fix is as expected as the UI is almost similar to the earlier builds. So that we can add TE-Verified labels.

Thanks!
840527.png
290 KB View Download

Sign in to add a comment