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

Issue 622640 link

Starred by 10 users

Issue metadata

Status: Fixed
Last visit > 30 days ago
Closed: Oct 2017
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: ----

Sign in to add a comment

Improve look and feel of chrome://flags

Project Member Reported by, Jun 23 2016

Issue description

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 (was: Assigned)
Attaching screenshot
Screen Shot 2016-06-23 at 11.21.36.png
386 KB View Download

Comment 2 by, Jun 23 2016


Comment 3 by, 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, Aug 11 2017

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
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 - Your friendly Sheriffbot
Labels: -Hotlist-Recharge-Cold
Status: Assigned (was: Untriaged)
Status: started (was: Assigned)
Designs prototyped, ready for implementation. 
Attached video of the new flags page.
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, Oct 6 2017

The following revision refers to this bug:

commit e08766ea8fe70ad0fcd967351063e6b3b32f82b0
Author: Edward Jung <>
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-by: Alexei Svitkine <>
Reviewed-by: Colin Blundell <>
Reviewed-by: Bernhard Bauer <>
Reviewed-by: Eugene But <>
Commit-Queue: Edward Jung <>
Cr-Commit-Position: refs/heads/master@{#507085}

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.
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 (was: Started)
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.

The First Meaningful Paint for the new chrome://flags is quite slow for such a simple page - 500ms on a 4GHz i7 PC.
Profiling shows most of the time is spent in jstemplate library that creates all the DOM nodes at once.

I wonder should I file a new bug in case someone gets interested in enhancing the performance?
Could be as trivial as throttling the job in say 50ms chunks via setTimeout.
Or as advanced as switching to Polymer with its lazy load lists.
34.1 KB View Download
I agree with the above.
Flags needs another overhaul.


On Mon, Dec 17, 2018, 6:45 AM wox… via monorail < wrote:
Re:#23 feel free to file a bug for performance issues, there might be takers. 

Sign in to add a comment