Convert chrome://policy to new WebUI style

chrome/browser/resources/policy.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-body {
-  color: black;
-  cursor: default;
-  font-family: Arial, sans-serif;
-  font-size: 14px;
-  margin: 0 10px;
-  min-width: 47em;
+body.uber-frame {
+  -webkit-margin-start: 23px;
 }
 
-button {
-  font-size: 0.9em;
+body.uber-frame > .page {
+  -webkit-margin-end: 0;
+  -webkit-padding-end: 24px;
 }
 
-#header {
-  border-bottom: 1px solid #000;
-  padding-top: 20px;
+div#filter-overlay {

[James Hawkins, 2013/01/30 16:22:29]

Do you mean 'div #filter-overlay'?

[bartfab (slow), 2013/01/31 14:24:17]

I meant "the element with id 'filter-overlay'". The "div" is not strictly
necessary (the id should be unique after all) but I like to be explicit about
what tag CSS rules apply to. If you prefer, I can change this rule to just
"#filter-overlay".

[James Hawkins, 2013/01/31 17:08:04]

nit: Particularly, I meant add a space between div and #filter-overlay.

[bartfab (slow), 2013/01/31 17:36:13]

But this is entirely different:

"div#filter-overlay" selects a div that has id 'filter-overlay'

"div #filter-overlay" selects an element that has id 'filter-overlay' and is a
child of a div

What I need here is the former, not the latter.

On 2013/01/31 17:08:04, James Hawkins wrote:

[James Hawkins, 2013/01/31 17:48:22]

Gotcha, didn't know what you were originally intending.  I would remove the div
because it introduces ambiguity of intention.

+  padding-bottom: 0;
+  position: fixed;
+  z-index: 4;
 }
 
-#about-policy-title {
-  -webkit-padding-end: 24px;
-  -webkit-user-select: none;
-  border-bottom: 1px solid rgb(198, 201, 206);
-  color: rgb(83, 99, 125);
-  cursor: pointer;
-  font-size: 200%;
-  font-weight: normal;
-  margin: 0;
-  padding-bottom: 14px;
-  padding-top: 13px;
-  text-shadow: white 0 1px 2px;
+body.uber-frame header {
+  left: 23px;
+  max-width: none;
 }
 
-#main-content {
-  min-height: 100%;
+body.uber-frame section {
+  max-width: none;
 }
 
-#status-title,
-#policies-title {
-  font-size: 120%;
-  font-weight: bold;
-  width: 65%;
+div#status-box-container {
+  display: -webkit-flex;
 }
 
-section {
-  border-bottom: 1px solid #eee;
-  margin-top: 17px;
-  padding-bottom: 20px;
-  width: 100%;
+fieldset {
+  border: 1px solid rgb(217, 217, 217);
+  display: inline;
+  margin: 0;
+  padding: 7px;
 }
 
-.separator {
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
+fieldset + fieldset {
+  -webkit-margin-start: 20px;
 }
 
-#fetch-policies,
-#unsent-policies-control {
-  -webkit-box-flex: 1;
+div.status-entry {
+  display: -webkit-flex;
 }
 
-#fetch-policies,
-#unsent-policies-control,
-#search {
-  bottom: 3px;
-  position: relative;
+div.status-entry + div.status-entry {
+  margin-top: .8em;
 }
 
-#fetch-policies {
-  margin-top: 20px;
+div.label {
+  -webkit-margin-end: 1em;
+  white-space: nowrap;
 }
 
-#checkbox-and-label {
-  -webkit-padding-end: 20px;
-  float: right;
+div#show-unset-container {
+  text-align: right;
 }
 
-html[dir='rtl'] #checkbox-and-label {
-  float: left;
+html[dir='rtl'] div#show-unset-container {
+  text-align: left;
 }
 
-#search-field {
-  bottom: 2px;
-  position: relative;
-}
-
-#status-pane {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
-  margin: 0 10%;
-}
-
-.status-box {
-  border: 1px solid #d9d9d9;
-  margin: 20px 100px;
-  min-height: 140px;
-  min-width: 300px;
-  overflow: hidden;
-  padding: 2px;
-  width: 30%;
-}
-
-legend {
-  padding: 0.2em 0.5em;
-}
-
-.status-box ul {
-  -webkit-padding-start: 10px;
-  list-style-type: none;
-}
-
-.status-box li {
-  padding: 3px;
-}
-
-#no-policies-text {
-  font-weight: bold;
-  margin: 20px;
+div.no-policies-set {
+  color: rgb(180, 180, 180);
+  font-size: 125%;
+  margin-top: 70px;
   text-align: center;
 }
 
-#policy-table {
-  table-layout: fixed;
-  width: 100%;
+section:not(.empty) > div.no-policies-set {
+  display: none;
 }
 
-#policy-table th td {
-  border: 1px solid #fff;
+table {
   border-collapse: collapse;
+  margin-bottom: 5px;
+  margin-top: 17px;
+  table-layout: fixed;
+  width: 100%
 }
 
-#policy-table th {
-  background-color: rgb(218, 218, 221);
-  padding: 10px;
+section.empty > table {
+  display: none;
 }
 
-#policy-table td {
-  background-color: rgb(234, 238, 243);
-  padding: 10px;
-  position: relative;
-  vertical-align: top;
-  width: 20%;
+th,
+td {
+  border: 1px solid rgb(217, 217, 217);
+  padding: 7px;
 }
 
-.text-collapsed {
-  bottom: 0;
-  left: 0;
-  margin: 10px;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
+th {
+  background-color: rgb(240, 240, 240);
+  font-weight: normal;
 }
 
-.text-cell {
+div.elide,
+span.value {
   overflow: hidden;
-}
-
-.text-collapsed .text-cell {
   text-overflow: ellipsis;
-}
-
-.text-expanded .text-cell {
-  overflow: visible;
-  word-wrap: break-word;
-}
-
-.text-collapsed .text-value {
   white-space: nowrap;
 }
 
-.text-expanded .text-value {
-  white-space: pre-wrap;
+button.toggle-expanded-value {
+  padding: 0;
 }
 
-.toggler {
-  float: right;
-  padding: 0 3px !important;
+tbody.has-overflowed-value span.value {
+  display: none;
 }
+
+tbody:not(.has-overflowed-value) button.toggle-expanded-value {
+  display: none;
+}
+
+tbody:not(.has-overflowed-value) > tr.expanded-value-container,
+tbody:not(.show-overflowed-value) > tr.expanded-value-container {
+  display: none;
+}