New issue
Advanced search Search tips

Issue 849857 link

Starred by 5 users

Issue metadata

Status: Fixed
Owner:
Closed: Jul 12
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

WebUI MD Refresh: Typography tweaks

Project Member Reported by dpa...@chromium.org, Jun 5 2018

Issue description

Per bettes@, the following represents the different types of text in WebUI. All text (excluding text within other controls like buttons, text inputs) should fall under one of these categories.

Page title - 16 500 white
Subpage title - 14 500 757575
Section title (in chrome://history) - 13 500 212121
Section title (h2 in settings) - 13 500 757575
Primary - 13 400 212121
Secondary - 13 400 757575
Table header - 13 500 757575

Where the right hand side above is formatted as
Size Weight Color

 

Comment 1 by aee@chromium.org, Jun 5 2018

Owner: aee@chromium.org
Status: Started (was: Available)
Expanding on the expected constants in the spec. Unless specified, the text size and weight remains the same. 

Primary - GG900
Secondary - GG700

----

Page title: letter-spacing: .25px
Subpage title: GG700
Section title: card titles in settings (h2), time stamps in History, time stamps in downloads(h3), "Chrome apps" in extensions (h2)

    font-size: 123%; (same as h1)
    padding-bottom: 4px;
    padding-top: 8px;
    letter-spacing: .25px;
    font-weight: 400

*new* Subpage section title: GG900 (see subpage_section attachment)
Table header: GG600/#80868B (see subpage_section attachment)

 
section_title_settings_today.png
605 KB View Download
section_title_settings_expected.png
602 KB View Download
section_title_downlods.png
639 KB View Download
section_title_extensions.png
810 KB View Download
subpage_section.png
31.5 KB View Download

Comment 3 by aee@chromium.org, Jun 7 2018

Status: Assigned (was: Started)

Comment 4 by bettes@chromium.org, Jun 13 2018

Cc: namratakannan@chromium.org

Comment 5 by aee@chromium.org, Jun 15 2018

Status: Started (was: Assigned)

Comment 6 by aee@chromium.org, Jun 19 2018

Screenshots for https://chromium-review.googlesource.com/c/chromium/src/+/1102189
Screen Shot 2018-06-19 at 11.16.10 AM.png
358 KB View Download
Screen Shot 2018-06-19 at 11.19.10 AM.png
242 KB View Download
Screen Shot 2018-06-19 at 11.19.59 AM.png
190 KB View Download
Screen Shot 2018-06-19 at 11.25.18 AM.png
250 KB View Download
Project Member

Comment 7 by bugdroid1@chromium.org, Jun 20 2018

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

commit dbd89b4cfc4611481959c71ba23affe0bf0d9d1a
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Wed Jun 20 18:58:38 2018

WebUI: typography style refresh

Bug:  849857 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ia153c02e3f88c27a430c50cc85b2f3906f1b9c32
Reviewed-on: https://chromium-review.googlesource.com/1102189
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568958}
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_bookmarks/shared_vars.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_downloads/item.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_extensions/item.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_extensions/item_list.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_history/history.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_history/history_item.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_history/shared_vars.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/md_user_manager/shared_styles.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/pdf/elements/shared-vars.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/settings/settings_page/settings_section.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/settings/settings_page/settings_subpage.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/chrome/browser/resources/settings/settings_shared_css.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
[modify] https://crrev.com/dbd89b4cfc4611481959c71ba23affe0bf0d9d1a/ui/webui/resources/cr_elements/shared_vars_css.html

Comment 8 by aee@chromium.org, Jun 20 2018

Status: Fixed (was: Started)
namratakannan@: I made the assumption that all cr-dialog titles should be google-grey-900, and only the body text without other controls or overriding styles will be google-grey-700.

The assumption is correct.
In addition would want to update the text style for 
1. Section title such as Settings (Default search engine, People) to 14px, 
   GG900 Roboto Normal
2. Subpage section title such as Saved passwords in Manage passwords etc to Roboto 
   Medium, 13px, GG700
3. Table header GG700 Roboto Regular 13px







Subpage_expected.png
112 KB View Download
Subpage section_table header_expected.png
41.9 KB View Download

Comment 10 by aee@chromium.org, Jun 25 2018

Status: Assigned (was: Fixed)

Comment 11 by aee@chromium.org, Jun 26 2018

Status: Started (was: Assigned)
In repsonse to comment#8, it seems that this change regresses the text color within other controls that reside within a cr-dialog. See attached screenshots.

Notice the dropdown color, cr-input color, and cr-checkbox primary label colors.
md_select.png
29.7 KB View Download
cbd.png
111 KB View Download
credit_card.png
11.8 KB View Download
1. The color of the input text (dropdown, textbox) is gg900
2. COlor of labels for checkboxes is gg900
3. And description/secondary text is gg700.
Project Member

Comment 14 by bugdroid1@chromium.org, Jun 28 2018

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

commit ce241814b79dcdcf8a955b18ec7b6f202c4c9e93
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Thu Jun 28 23:53:05 2018

WebUI: font style changes for section titles and column headers

Bug:  849857 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I2bdac0e55708bc7461041365ac736ad2c5bc7bc1
Reviewed-on: https://chromium-review.googlesource.com/1114204
Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#571331}
[modify] https://crrev.com/ce241814b79dcdcf8a955b18ec7b6f202c4c9e93/chrome/browser/resources/settings/settings_page/settings_section.html
[modify] https://crrev.com/ce241814b79dcdcf8a955b18ec7b6f202c4c9e93/chrome/browser/resources/settings/settings_shared_css.html

Comment 15 by aee@chromium.org, Jun 29 2018

namratakannan@: on the clear browser history dialog, the tab that is not selected has a color paper-grey-600. Does that need to be changed?

Screenshots for https://chromium-review.googlesource.com/c/chromium/src/+/1120681.
import_bookmarks_dialog.png
19.3 KB View Download
clear_browser_dialog.png
30.9 KB View Download
add_cc_dialog.png
12.9 KB View Download
Cc: aee@chromium.org
 Issue 859515  has been merged into this issue.
Cc: steve...@chromium.org ajha@chromium.org
 Issue 859035  has been merged into this issue.

Comment 18 Deleted

Screenshot of PDF viewer dropdown with GG900 text.
pdf_viewer_dropdown.png
186 KB View Download
File manager and gallery inputs with white text.
search_input_white_text.png
41.9 KB View Download
filename_input_white_text.png
29.7 KB View Download
Project Member

Comment 21 by bugdroid1@chromium.org, Jul 2

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

commit 5811aa08e60ba5ac7622f029163213cfbdb682f7
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Mon Jul 02 23:38:17 2018

WebUI: fix the primary/secondary text color

Bug:  849857 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I9a3cbdede42367d8295aacffda69d3965379e942
Reviewed-on: https://chromium-review.googlesource.com/1121336
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#572043}
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_bookmarks/app.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_bookmarks/command_manager.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_bookmarks/dnd_chip.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_bookmarks/folder_node.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_bookmarks/item.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_bookmarks/shared_style.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_bookmarks/shared_vars.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_history/history_item.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_history/shared_style.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_history/shared_vars.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_history/synced_device_card.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_history/synced_device_manager.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_user_manager/create_profile.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_user_manager/error_dialog.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_user_manager/shared_styles.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_user_manager/user_manager.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/md_user_manager/user_manager_tutorial.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/pdf/elements/shared-vars.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/settings/settings_shared_css.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/chrome/browser/resources/settings/settings_vars_css.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/ui/webui/resources/cr_components/chromeos/network/network_config_select.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html
[modify] https://crrev.com/5811aa08e60ba5ac7622f029163213cfbdb682f7/ui/webui/resources/cr_elements/shared_vars_css.html

Cc: sgabr...@chromium.org
+sgabriel for signoff on file manager screenshots.

Are these before or after screenshots?
Those are after screenshots showing no change to the UI for file manager and gallery.
Downloads section title needs to be updated.

Current downloads.png
51.6 KB View Download
Desired.png
120 KB View Download
Screenshot for https://chromium-review.googlesource.com/c/chromium/src/+/1124925.
downloads_date.png
29.4 KB View Download
Cc: nyerramilli@chromium.org rbasuvula@chromium.org
 Issue 859786  has been merged into this issue.
Cc: markchang@chromium.org
Project Member

Comment 29 by bugdroid1@chromium.org, Jul 9

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

commit 6d7c5dec72764f1e04108074c6cf75ae0fc542ad
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Mon Jul 09 22:10:35 2018

Downloads WebUI: update date text style

Bug:  849857 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I8b9db90d117d0877c70e1b30b6af1e56cea46535
Reviewed-on: https://chromium-review.googlesource.com/1124925
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#573476}
[modify] https://crrev.com/6d7c5dec72764f1e04108074c6cf75ae0fc542ad/chrome/browser/resources/md_downloads/item.html

We found that the extension detail page has the wrong text colors. I'll look to see what other pages need to be added and provide an updated list here.
Project Member

Comment 31 by bugdroid1@chromium.org, Jul 12

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

commit 0ceaa55ab4070c9fc1bce4a599d62362576b1322
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Thu Jul 12 19:47:17 2018

WebUI: update text to use primary/secondary colors for style refresh

Bug:  849857 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ia64cd1565af8f50a4af8b5c08f82d9a13df00acf
Reviewed-on: https://chromium-review.googlesource.com/1133959
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#574682}
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/md_downloads/item.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/md_extensions/detail_view.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/md_extensions/error_page.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/md_extensions/manager.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/device_page/storage.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/internet_page/network_summary_item.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/settings_page/settings_subpage_search.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/settings_shared_css.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/chrome/browser/resources/settings/site_settings/zoom_levels.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.html
[modify] https://crrev.com/0ceaa55ab4070c9fc1bce4a599d62362576b1322/ui/webui/resources/cr_elements/paper_tabs_style_css.html

Status: Fixed (was: Started)

Sign in to add a comment