Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 10 users
Status: Fixed
Owner:
Closed: Oct 9
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: ----



Sign in to add a comment
Improve look and feel of chrome://flags
Project Member Reported by edwardjung@chromium.org, Jun 23 2016 Back to list
chrome://flags could do with an overhaul:

+ Use shared CSS for webUI (chrome://resources/css/chrome_shared.css)
+ Make it mobile friendly. Make it touch friendly.
+ Make it more accessible, grey on grey text has poor contrast.

For inspiration, I did build a prototype of a suggested update a couple of years ago, pre material. 

 
Status: Available
Attaching screenshot
Screen Shot 2016-06-23 at 11.21.36.png
386 KB View Download
Comment 2 by vabr@chromium.org, Jun 23 2016
Cc: -vabr@chromium.org
Comment 3 by vnalu...@gmail.com, Jun 25 2016
Thanks for filing, Edward. I'm taking into account your bullet points, but just to be clear: are you looking for this redesign to be material, or be similar to your screenshot, or whatever I come up with?
I would aim to be material. However this isn't a normal user facing page so would be open to your suggestions for what would work best.

Probably be good to do static designs / HTML mocks first so that they can be refined before implementation.
Components: UI
Project Member Comment 6 by sheriffbot@chromium.org, Aug 11
Labels: Hotlist-Recharge-Cold
Status: Untriaged
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: -edwardjung@chromium.org
Labels: -Hotlist-Recharge-Cold
Owner: edwardjung@chromium.org
Status: Assigned
Cc: maxwalker@chromium.org
Status: started
Designs prototyped, ready for implementation. 
Attached video of the new flags page.
flags-redesign.mov
3.0 MB Download
Screen Shot 2017-10-02 at 11.07.39.png
320 KB View Download
Screenshot on mobile.
Screen Shot 2017-10-02 at 11.31.08.png
150 KB View Download
I still don't know if "Default" refers to "Enable" or "Disable" when it's the selected option in a preference.  Why can't "Default" be killed off?
#11, the default can differ between different users or profiles for testing purposes. We're not supposed to know what the default state is. Flags aren't meant to be preferences or advanced settings.
Are we intentionally killing the WARNING text at the top?

I don't see it in the new screenshots. What's the reason for removing it?
No, the warning text is there when the page loads. It hides when you search. The screen shots show the state post search. 

Attached a new screenshot showing the the start state.
Screen Shot 2017-10-05 at 18.40.04.png
375 KB View Download
Project Member Comment 15 by bugdroid1@chromium.org, Oct 6
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e08766ea8fe70ad0fcd967351063e6b3b32f82b0

commit e08766ea8fe70ad0fcd967351063e6b3b32f82b0
Author: Edward Jung <edwardjung@chromium.org>
Date: Fri Oct 06 16:05:31 2017

Redesign of the chrome://flags page

+ Improve responsive design for mobile devices. Larger touch targets.
+ Simplified the warning blurb.
+ Add in page flag search for better filtering, significantly better
search experience on mobile devices.
+ Add tab interface separating Available and Unavailable flags.
+ Uses updated modern colour scheme and typography.
+ Display Chrome version number on the page.

Bug:  622640 
Change-Id: I55f1739ab12c4d28c7ace0f234fabb30577abf21
Reviewed-on: https://chromium-review.googlesource.com/693256
Reviewed-by: Alexei Svitkine <asvitkine@chromium.org>
Reviewed-by: Colin Blundell <blundell@chromium.org>
Reviewed-by: Bernhard Bauer <bauerb@chromium.org>
Reviewed-by: Eugene But <eugenebut@chromium.org>
Commit-Queue: Edward Jung <edwardjung@chromium.org>
Cr-Commit-Position: refs/heads/master@{#507085}
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/chrome/browser/ui/webui/flags_ui.cc
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/components/flags_ui/flags_ui_constants.cc
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/components/flags_ui/flags_ui_constants.h
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/components/flags_ui/resources/flags.css
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/components/flags_ui/resources/flags.html
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/components/flags_ui/resources/flags.js
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/components/flags_ui_strings.grdp
[modify] https://crrev.com/e08766ea8fe70ad0fcd967351063e6b3b32f82b0/ios/chrome/browser/ui/webui/flags_ui.cc

Hi edwardjung@: Today I noticed the change in Canary - great - thank you!

There is one issue that I noticed: Before changing a flag you can maximize the description by double-clicking on the it. But after changing the flag, the "Restart Now" bar appears at the bottom of the page and now it is no longer possible to maximize the description. A screencast is attached. Should I file a separate report for it?

Thanks for looking into it.
refreshed_chrome::flags_bug.mov
4.2 MB Download
One more comment: Some elements receive a focus ring when you click on them. A screenshot is attached. Thanks.
Bildschirmfoto 2017-10-07 um 21.13.08.png
24.3 KB View Download
Thanks for the comments. I'll file a bug for the text clicking.

The focus ring is normal behaviour for buttons which all those shown in the screenshot are.
Status: Fixed
There are a few bugs being reported which I'm looking at now.
Hello edwardjung@: Thank you for your feedback. Regarding the focus ring: Normally these kind of focus rings appear only, when you use the Tab-Key and not clicking on them. This must also be extra activated in the Chrome settings (Web Content section: Pressing TAB on a webpage...). Thanks for looking into it. 
The buttons which have custom styling result in the focus outline being enabled when activated (See the restart button on pre redesigned flags page for example). I'll look to making the outlines more attractive but they are important for accessibility.
Great, thank you very much.

Sign in to add a comment