Add [hidden] rule to cr-elements :root stylesheet

ui/webui/resources/cr_elements/shared_vars_css.html

Index: ui/webui/resources/cr_elements/shared_vars_css.html
diff --git a/ui/webui/resources/cr_elements/shared_vars_css.html b/ui/webui/resources/cr_elements/shared_vars_css.html
index dceff2a6f51ecad120ccdfab787e658b72069049..d02608200fc9507b6694205941440f3a68976c28 100644
--- a/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -9,4 +9,14 @@
     --cr-focused-item-color: var(--google-grey-300);
     --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
   }
+
+  /*
+   * Because everyone assumes [hidden] overrides {display: foo}.
+   * TODO(michaelpg): Rename to shared_global_css.html and import only from
+   * entry points (md_foo.html and tests). Eventually find alternative solution
+   * to this deprecated /deep/ selector (crbug.com/498405).
+   */

[Dan Beam, 2016/08/10 16:16:36]

nit:

/* Everybody seems to love useless lines.
 * They make comments so spacious. */
 ^                                 ^^

[michaelpg, 2016/08/10 16:27:56]

okay, that's our CSS style, but i have no love for useless lines... it's just
how we do multiline comments everywhere else.

[Dan Beam, 2016/08/10 16:29:24]

no, it's not.  if you show me all the other places we do this, I'll gladly clean
them up for you to fix your (and probably others') incorrect interpretation.

+  :root /deep/ [hidden] {

[Dan Beam, 2016/08/10 16:16:36]

why do we need the /deep/ though?

also, why is this in a _vars_ file?

[michaelpg, 2016/08/10 16:27:56]

see description
see TODO (rationale: this file sets :root styles, not solely variables, it
should be renamed as such)

[dschuyler, 2016/08/10 18:58:26]

It was named root and got renamed to vars. Please see
Stevenjb@ before changing it.

The name was changed because the intent of the file
was to contain only vars (so he/we felt that root
was no longer the best name for it).

How about moving this to the settings.html file?

+    display: none !important;
+  }
 </style>