Update WebUI buttons for MD Refresh |
||||||||||||||||||||
Issue descriptionSpec at https://docs.google.com/presentation/d/1kXbnGrFln4CapA0bavU5zjZLALqeD4aQikVVKSJ0zFg/edit#slide=id.g321c13f39e_0_101, (visible by @google accounts).
,
Apr 12 2018
,
Apr 17 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6da8cdce810f0b9cf331a7191f43a40aaeda1279 commit 6da8cdce810f0b9cf331a7191f43a40aaeda1279 Author: dpapad <dpapad@chromium.org> Date: Tue Apr 17 02:59:21 2018 WebUI: Remove unnecessary usage of paper-button CSS mixins. Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I982e24b7234617b111e7adfa3c0f83356722ec8d Reviewed-on: https://chromium-review.googlesource.com/1013280 Reviewed-by: Hector Carmona <hcarmona@chromium.org> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#551209} [modify] https://crrev.com/6da8cdce810f0b9cf331a7191f43a40aaeda1279/chrome/browser/resources/settings/basic_page/basic_page.html [modify] https://crrev.com/6da8cdce810f0b9cf331a7191f43a40aaeda1279/chrome/browser/resources/settings/settings_shared_css.html [modify] https://crrev.com/6da8cdce810f0b9cf331a7191f43a40aaeda1279/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html [modify] https://crrev.com/6da8cdce810f0b9cf331a7191f43a40aaeda1279/ui/webui/resources/cr_elements/paper_button_style_css.html
,
Apr 17 2018
WIP CL https://chromium-review.googlesource.com/c/chromium/src/+/1013330
,
Apr 23 2018
- corner radius: 4px Primary button - disabled bg-color:#F1F3F4 - disabled font color: #80868B - focus-ring color: #1A73E8, 40% Secondary button - hover bg-color: #4285F4,4% - hover border-color: #D2E3FC - border-color: #DADCE0 - width: 1px - focus-ring color:#1A73E8, 40% - disabled font color:#80868B
,
Apr 24 2018
dpapad@ I was looking at the spec and on slides #33 and #34 it does say "button pressed" and "hairline button pressed" needs elevation. namratakannan@ can you verify?
,
Apr 24 2018
,
Apr 24 2018
@namratakanan: Also I could not find any specification for the ripple color for both primary and secondary buttons.
,
Apr 25 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/bf799ef89ce47640211ce7e949e196762a104130 commit bf799ef89ce47640211ce7e949e196762a104130 Author: dpapad <dpapad@chromium.org> Date: Wed Apr 25 00:13:30 2018 WebUI MD Refresh: Update paper-button styling up to spec. - Move some styles from shared_style_css.html to paper_button_style_css.html. - Update paper-button styles per latest spec. - Collapse previously different types of buttons "primary" and "action" into a single button type. Note this change is intentionally changing the shared styling for buttons. If a certain WebUI page needs a different pre-MD refresh style, should be updated individually to override (hopefully there are no such cases though). Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I8558db8ffd121ad09b100f8ba6ab4d843022f73f Reviewed-on: https://chromium-review.googlesource.com/1013330 Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Scott Chen <scottchen@chromium.org> Cr-Commit-Position: refs/heads/master@{#553382} [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/change_password_page/change_password_page.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/downloads_page/smb_shares_page.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/incompatible_applications_page/incompatible_application_item.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/internet_page/internet_detail_page.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/internet_page/internet_detail_page.js [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/people_page/people_page.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/printing_page/cups_printers.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/settings_menu/settings_menu.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/chrome/browser/resources/settings/settings_shared_css.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/ui/webui/resources/cr_elements/paper_button_style_css.html [modify] https://crrev.com/bf799ef89ce47640211ce7e949e196762a104130/ui/webui/resources/cr_elements/shared_style_css.html
,
Apr 25 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7 commit 4f4e1e835ee90718ccffb9c2d15efd95d96d45f7 Author: Reid Kleckner <rnk@chromium.org> Date: Wed Apr 25 16:32:15 2018 Revert "WebUI MD Refresh: Update paper-button styling up to spec." This reverts commit bf799ef89ce47640211ce7e949e196762a104130. Reason for revert: Breaks CrSettingsIncompatibleApplicationsPageTest test in official builds. Google internal failing bot: https://uberchromegw.corp.google.com/i/official.desktop.continuous/builders/win%20trunk/builds/83282 Externally visible Clang ToT official bot: https://ci.chromium.org/buildbot/chromium.clang/ToTWin64/1359 Original change's description: > WebUI MD Refresh: Update paper-button styling up to spec. > > - Move some styles from shared_style_css.html to paper_button_style_css.html. > - Update paper-button styles per latest spec. > - Collapse previously different types of buttons "primary" and "action" into a > single button type. > > Note this change is intentionally changing the shared styling for buttons. If a > certain WebUI page needs a different pre-MD refresh style, should be updated > individually to override (hopefully there are no such cases though). > > Bug: 832173 > Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation > Change-Id: I8558db8ffd121ad09b100f8ba6ab4d843022f73f > Reviewed-on: https://chromium-review.googlesource.com/1013330 > Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> > Reviewed-by: Scott Chen <scottchen@chromium.org> > Cr-Commit-Position: refs/heads/master@{#553382} TBR=dpapad@chromium.org,scottchen@chromium.org Change-Id: I0489c01e20af79b61db0e9ce1fdc2f292c178c98 No-Presubmit: true No-Tree-Checks: true No-Try: true Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Reviewed-on: https://chromium-review.googlesource.com/1028371 Reviewed-by: Reid Kleckner <rnk@chromium.org> Commit-Queue: Reid Kleckner <rnk@chromium.org> Cr-Commit-Position: refs/heads/master@{#553600} [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/change_password_page/change_password_page.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/downloads_page/smb_shares_page.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/incompatible_applications_page/incompatible_application_item.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/internet_page/internet_detail_page.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/internet_page/internet_detail_page.js [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/people_page/people_page.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/printing_page/cups_printers.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/settings_menu/settings_menu.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/chrome/browser/resources/settings/settings_shared_css.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/ui/webui/resources/cr_elements/paper_button_style_css.html [modify] https://crrev.com/4f4e1e835ee90718ccffb9c2d15efd95d96d45f7/ui/webui/resources/cr_elements/shared_style_css.html
,
Apr 25 2018
Original CL was reverted, because of some official bot test failures. Fixed them at https://chromium-review.googlesource.com/c/chromium/src/+/1028478/.
,
Apr 25 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388 commit 5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388 Author: dpapad <dpapad@chromium.org> Date: Wed Apr 25 19:04:11 2018 [Reland] WebUI MD Refresh: Update paper-button styling up to spec. - Move some styles from shared_style_css.html to paper_button_style_css.html. - Update paper-button styles per latest spec. - Collapse previously different types of buttons "primary" and "action" into a single button type. Note this change is intentionally changing the shared styling for buttons. If a certain WebUI page needs a different pre-MD refresh style, should be updated individually to override (hopefully there are no such cases though). Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: If083bf3ad1d60623300bb9e584ae9179e815ef7d Reviewed-on: https://chromium-review.googlesource.com/1028478 Reviewed-by: Scott Chen <scottchen@chromium.org> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#553689} [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/change_password_page/change_password_page.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/downloads_page/smb_shares_page.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/incompatible_applications_page/incompatible_application_item.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/internet_page/internet_detail_page.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/internet_page/internet_detail_page.js [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/people_page/people_page.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/printing_page/cups_printers.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/settings_menu/settings_menu.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/browser/resources/settings/settings_shared_css.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/chrome/test/data/webui/settings/incompatible_applications_page_test.js [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/ui/webui/resources/cr_elements/paper_button_style_css.html [modify] https://crrev.com/5e7b602ba3cf5aca330fc1bf3ac92fbc29e8c388/ui/webui/resources/cr_elements/shared_style_css.html
,
Apr 26 2018
,
Apr 26 2018
,
Apr 26 2018
,
Apr 26 2018
,
Apr 26 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/f701cb25f1c31037a185f1a5b767156c2d6e0254 commit f701cb25f1c31037a185f1a5b767156c2d6e0254 Author: dpapad <dpapad@chromium.org> Date: Thu Apr 26 23:57:28 2018 WebUI MD Refresh: Restore button size to 13px, respect font prefs. Bug: 837190 , 832173 , 837137 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I185bf0e3c4e0a4bdb3a15d4288c60c91bed1221b Reviewed-on: https://chromium-review.googlesource.com/1030881 Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Scott Chen <scottchen@chromium.org> Cr-Commit-Position: refs/heads/master@{#554197} [modify] https://crrev.com/f701cb25f1c31037a185f1a5b767156c2d6e0254/ui/webui/resources/cr_elements/paper_button_style_css.html
,
Apr 27 2018
Elevation: Yup. Only for pressed state. Ripple color: For Primary button, ripple color is #ffffff,32% For secondary(hairline) button, ripple color is #1a73e8,10% Also we are building icons buttons as well right? This is used by Chrome OS OOBE.
,
May 1 2018
,
May 2 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c0f34fbc93cc949bcf8c959b9d21b15cb83c8080 commit c0f34fbc93cc949bcf8c959b9d21b15cb83c8080 Author: dpapad <dpapad@chromium.org> Date: Wed May 02 00:42:50 2018 WebUI MD Refresh: Adhere to latest button spec clarifications. - Fix font-weight of focused state. - For non primary buttons, display a border and focus ring at the same time. - Adjust focus ring width to 2px. - Adjust paper-ripple color. Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I4966b1dd627993ec304192db3fabde4c805df88a Reviewed-on: https://chromium-review.googlesource.com/1036791 Reviewed-by: Scott Chen <scottchen@chromium.org> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#555256} [modify] https://crrev.com/c0f34fbc93cc949bcf8c959b9d21b15cb83c8080/ui/webui/resources/cr_elements/paper_button_style_css.html
,
May 5 2018
,
May 7 2018
,
May 10 2018
Update height of button to 32 px Update pressed states for primary and hairline buttons No hover state for primary buttons
,
May 10 2018
,
May 11 2018
,
May 11 2018
,
May 12 2018
,
May 12 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/d30fa167b5e4019d8b61b3a82591281f6e8e0bf2 commit d30fa167b5e4019d8b61b3a82591281f6e8e0bf2 Author: dpapad <dpapad@chromium.org> Date: Sat May 12 00:51:21 2018 WebUI MD Refresh: Adjust separator height/margin and button height. - Changing button and separator height to 32px. - Changing separator margin to 16px. - Removing obsolete logic to use a negative margin for non primary buttons. It is obsolete since both types of buttons now have a border and they can use the same amount of margin. Bug: 841858 , 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I1b3bf0d5a7f6b4e81bc5e25a16b422a54487214b Reviewed-on: https://chromium-review.googlesource.com/1054552 Reviewed-by: Scott Chen <scottchen@chromium.org> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#558075} [modify] https://crrev.com/d30fa167b5e4019d8b61b3a82591281f6e8e0bf2/chrome/browser/resources/settings/appearance_page/appearance_page.html [modify] https://crrev.com/d30fa167b5e4019d8b61b3a82591281f6e8e0bf2/chrome/browser/resources/settings/controls/controlled_button.html [modify] https://crrev.com/d30fa167b5e4019d8b61b3a82591281f6e8e0bf2/chrome/browser/resources/settings/settings_shared_css.html [modify] https://crrev.com/d30fa167b5e4019d8b61b3a82591281f6e8e0bf2/ui/webui/resources/cr_elements/paper_button_style_css.html
,
May 12 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6e93fd00d2b8dbdbe257689925278af9ad7dce3b commit 6e93fd00d2b8dbdbe257689925278af9ad7dce3b Author: dpapad <dpapad@chromium.org> Date: Sat May 12 03:37:13 2018 Settings MD Refresh: Remove negative right button margin, no longer necassary. The negative margin was used because the buttons did not have a border or background, and wanted to align the end of the button's text with the other items on adjacent lines. Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I7d1368c839e5732dd88cbc3bb453846ecb289509 Reviewed-on: https://chromium-review.googlesource.com/1055817 Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Scott Chen <scottchen@chromium.org> Cr-Commit-Position: refs/heads/master@{#558107} [modify] https://crrev.com/6e93fd00d2b8dbdbe257689925278af9ad7dce3b/chrome/browser/resources/settings/appearance_page/appearance_page.html [modify] https://crrev.com/6e93fd00d2b8dbdbe257689925278af9ad7dce3b/chrome/browser/resources/settings/controls/controlled_button.html [modify] https://crrev.com/6e93fd00d2b8dbdbe257689925278af9ad7dce3b/chrome/browser/resources/settings/settings_shared_css.html
,
May 15 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/79746302abca36409dc3eccc84a3c13046c13d0f commit 79746302abca36409dc3eccc84a3c13046c13d0f Author: dpapad <dpapad@chromium.org> Date: Tue May 15 02:29:06 2018 WebUI MD Refresh: Update buttons ripple colors to spec. Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: Id3e2fc972d95d213b3ee8ffa8517cdf0edead69c Reviewed-on: https://chromium-review.googlesource.com/1058588 Reviewed-by: Scott Chen <scottchen@chromium.org> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#558590} [modify] https://crrev.com/79746302abca36409dc3eccc84a3c13046c13d0f/ui/webui/resources/cr_elements/paper_button_style_css.html
,
May 15 2018
Hover state for filled buttons: 1. Color: 0.8 opacity 2. Elevation: 0 1px 1px 0px rgba(66, 133, 244, 0.54) 0 1px 3px 1px rgba(66, 133, 244, 0.30) Pressed state for filled buttons: Elevation: 0 1px 2px 0px rgba(66, 133, 244, 0.54) 0 3px 6px 2px rgba(66, 133, 244, 0.30) Pressed state for hairline button: Elevation 0 1px 2px 0px rgba (60, 64, 67, 0.30) 0 3px 6px 2px rgba (60, 64, 67, 0.15)
,
May 15 2018
FYI the change for hover state on filled (aka action) buttons is at [1]. Per offline discussion, 0.8 opacity seemed to make the button too white, so it was changed to 0.9. Moreover the bax shadow (elevation) color seems to be using too high opacity, see attached video. [1] https://chromium-review.googlesource.com/c/chromium/src/+/1060554
,
May 16 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/94efac399fb2942d093e5d66bea2c6105a69b6f1 commit 94efac399fb2942d093e5d66bea2c6105a69b6f1 Author: dpapad <dpapad@chromium.org> Date: Wed May 16 20:54:10 2018 WebUI MD Refresh: Implement hover state for action buttons. - Add hover background color. - Add hover box shadow effect. Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I89eb5bb9c9b088ad85fbf5d22dd3735392d1ecd8 Reviewed-on: https://chromium-review.googlesource.com/1060554 Reviewed-by: Scott Chen <scottchen@chromium.org> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#559278} [modify] https://crrev.com/94efac399fb2942d093e5d66bea2c6105a69b6f1/ui/webui/resources/cr_elements/paper_button_style_css.html
,
May 17 2018
1. You are right about the elevation. Can we reduced the opacity of the box shadow? 0 1px *2px* 0px rgba(66, 133, 244, *0.30*) 0 1px 3px 1px rgba(66, 133, 244, *0.15*) 2. Can we also add the elevation for pressed state of hairline button?
,
May 17 2018
,
May 17 2018
,
May 18 2018
Pressed state for the filled button: 0 1px 2px 0px rgba(66, 133, 244, 0.30) 0 3px 6px 2px rgba(66, 133, 244, 0.15)
,
May 19 2018
,
May 19 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c7ce55e99416c9ad57c580f677b8ded24d09b0ab commit c7ce55e99416c9ad57c580f677b8ded24d09b0ab Author: dpapad <dpapad@chromium.org> Date: Sat May 19 01:38:05 2018 WebUI MD Refresh: Update button hover and pressed states up to spec. Bug: 832173 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I5ddefc63684ad5fb5d2dff9e1da0a241404c0ac4 Reviewed-on: https://chromium-review.googlesource.com/1066736 Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Scott Chen <scottchen@chromium.org> Cr-Commit-Position: refs/heads/master@{#560138} [modify] https://crrev.com/c7ce55e99416c9ad57c580f677b8ded24d09b0ab/ui/webui/resources/cr_elements/paper_button_style_css.html
,
May 21 2018
Tested the issue using #68.0.3436.0 on Mac 10.13.3, Win 10 and Linux Debian Rodete as per the steps mentioned below. Steps: 1. Launched Browser 2. Navigated to chrome://settings/importData 3. Observe the Overlay @dpapad: Please find the below screenshot and help us in verifying the fix. Thanks!!
,
May 22 2018
Marking this as Fixed, since all dependent bugs have been addressed. If there are more surfaces missing the new styling, let's file new bugs. @sandeepkumars: The buttons look MD Refreshed, therefore it is verified. |
||||||||||||||||||||
►
Sign in to add a comment |
||||||||||||||||||||
Comment 1 by dpa...@chromium.org
, Apr 12 2018