MD Settings: actually hide subpage and open-in-new indicators when inactive

chrome/browser/resources/settings/settings_shared_css.html

Index: chrome/browser/resources/settings/settings_shared_css.html
diff --git a/chrome/browser/resources/settings/settings_shared_css.html b/chrome/browser/resources/settings/settings_shared_css.html
index 50002a165ada72a80e33259f5732c08587ae87b7..dffacf018d14546b3b146a9b90518a5184ad77a0 100644
--- a/chrome/browser/resources/settings/settings_shared_css.html
+++ b/chrome/browser/resources/settings/settings_shared_css.html
@@ -26,14 +26,26 @@
         transform: scaleX(-1);  /* Flip on the X axis (aka mirror). */
       }
 
-      [actionable] button[is='paper-icon-button-light'].subpage-arrow {
+      button[is='paper-icon-button-light'].subpage-arrow {
         background-image: url(images/arrow_right.svg);
       }
 
-      [actionable] button[is='paper-icon-button-light'].icon-external {
+      button[is='paper-icon-button-light'].icon-external {
         background-image: url(images/open_in_new.svg);
       }
 
+      button[is='paper-icon-button-light'].subpage-arrow,
+      button[is='paper-icon-button-light'].icon-external {
+        display: none;
+      }
+
+      [actionable] button[is='paper-icon-button-light'].subpage-arrow,
+      [actionable] button[is='paper-icon-button-light'].icon-external,
+      button[is='paper-icon-button-light'][actionable].subpage-arrow,
+      button[is='paper-icon-button-light'][actionable].icon-external {
+        display: block;
+      }

[stevenjb, 2016/12/13 18:28:10]

Is the [is='paper-icon-button-light'] qualifier helpful here? For setting
background-image it makes sense, since we care about how the button is being
displayed, but conceptually wouldn't we want the display behavior for any
button.subpage-arrow (or .icon-external)? It just seems like it would make the
CSS here a little easier to read.

[Dan Beam, 2016/12/13 19:04:14]

there's a functional difference when it comes to specificity here, possibly

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

I agree that just

.subpage-arrow,
.icon-external {
  display: none;
}

[actionable] :-webkit-any(.subpage-arrow, .icon-external),
[actionable]:-webkit-any(.subpage-arrow, .icon-external) {
  display: block;
}

would be easier to read.  I've tried this and it seems to be fine.

+
       :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] {
         transform: scaleX(-1);  /* Flip on the X axis (aka mirror). */
       }