UI Update. Fixes #81

app.yaml

@@ -1,5 +1,5 @@
 application: cr-status
-version: 2015-12-14
+version: 2015-12-16
 runtime: python27
 threadsafe: true
 api_version: 1

static/css/elements/chromedash-color-status.css

@@ -1 +1 @@
-h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2UzZTNlMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9),color-stop(70%, #e3e3e3));background:-moz-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:-webkit-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:linear-gradient(#f9f9f9 40%,#e3e3e3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNlM2UzZTMiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3),color-stop(70%, #f9f9f9));background:-moz-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:-webkit-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:linear-gradient(#e3e3e3 40%,#f9f9f9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}span{background-color:red;border-radius:50%;display:inline-block;height:10px;width:10px}:host(.corner){height:100%}:host(.corner) #status{border-radius:0;height:100%;width:7px}
+h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{text-decoration:none;color:#4580c0}a:hover{text-decoration:underline;color:#366597}b{font-weight:600}input:not([type="submit"]),textarea{border:1px solid #D4D4D4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}button,.button{display:inline-block;background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2UzZTNlMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9),color-stop(70%, #e3e3e3));background:-moz-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:-webkit-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:linear-gradient(#f9f9f9 40%,#e3e3e3 70%);border:1px solid #a9a9a9;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNlM2UzZTMiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3),color-stop(70%, #f9f9f9));background:-moz-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:-webkit-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:linear-gradient(#e3e3e3 40%,#f9f9f9 70%)}.comma::after{content:',\00a0'}*{box-sizing:border-box;list-style:none;padding:0;margin:0;font:inherit;text-decoration:inherit}:focus{z-index:1}span{background-color:red;border-radius:50%;display:inline-block;height:10px;width:10px}:host(.corner){height:100%}:host(.corner) #status{border-radius:0;height:100%;width:4px}:host(.bottom){height:8px;width:100%;position:absolute;bottom:0;left:0}:host(.bottom) #status{border-radius:0;height:100%;width:100%}

static/elements/chromedash-color-status.html

@@ -9,10 +9,6 @@
     Polymer({
       is: 'chromedash-color-status',
       properties: {
-        height: {
-          type: Number,
-          value: 10
-        },
         max: {
           type: Number,
           value: 7,
@@ -21,10 +17,6 @@
         value: {
           type: Number,
           observer: '_valueChanged'
-        },
-        width: {
-          type: Number,
-          value: 10
         }
       },
       updateColor: function() {

static/elements/chromedash-feature.html

@@ -27,13 +27,17 @@
   <template>
     <template is="dom-repeat" items="{{links}}" as="link" index-as="i">
       <a href$="{{link}}" target="_blank"
-         class$="{{_computeShowComma(i, links)}}">{{_prettyURLFilter(link)}}</a>
+         class$="{{_computeShowComma(links, i)}}">{{title}} {{_addOne(i)}}</a>
     </template>
   </template>
   <script>
     Polymer({
       is: 'multi-links',
       properties: {
+        title: {
+          type: String,
+          value: 'Link'
+        },
         links: {
           type: Array,
           value: function() { return []; }
@@ -45,6 +49,9 @@
       _computeShowComma: function(links, i) {
         var notLastOne = links.length > 1 && i < links.length - 1;
         return notLastOne ? 'comma' : '';
+      },
+      _addOne: function(i) {
+        return i + 1;
       }
     });
   </script>
@@ -53,8 +60,8 @@
 <dom-module id="chromedash-feature">
 <link rel="import" type="css" href="../css/elements/chromedash-feature.css">
 <template>
-<div on-tap="_toggle" class="main-content-area">
-  <hgroup>
+<div class="main-content-area">
+  <hgroup on-tap="_toggle">
     <chromedash-color-status class="tooltip corner"
        title="Compatibility risk: perceived interest from browser vendors and web developers"
        value="[[compatRisk]]" max="[[MAX_RISK]]"></chromedash-color-status>
@@ -87,118 +94,133 @@
       </div>
     </div>
   </hgroup>
-  <section class="desc">
+  <section class="desc" on-tap="_toggle">
     <summary>
       <!-- <html-echo html="[[_urlizeFilter(feature.summary)]]"></html-echo> -->
       <span>[[feature.summary]]</span>
     </summary>
   </section>
   <template is="dom-if" if="{{open}}">
-    <section>
-      <h3>Implementation Status</h3>
-      <div class="impl_status">
-        <template is="dom-if" if="{{feature.shipped_milestone}}">
-          <span class="chrome_desktop tooltip" title="Chrome desktop">
-            <label>{{feature.impl_status_chrome}}</label><span>{{feature.shipped_milestone}}</span>
-          </span>
-        </template>
-        <template is="dom-if" if="{{!feature.shipped_milestone}}">
-          <span class="chrome_desktop"><label>{{feature.impl_status_chrome}}</label></span>
-        </template>
-        <template is="dom-if" if="{{feature.shipped_android_milestone}}">
-          <span class="chrome_android tooltip" title="Chrome for Android">
-            <iron-icon icon="icons:android" class="android"></iron-icon>
-            <span>{{feature.shipped_android_milestone}}</span>
-          </span>
-        </template>
-        <template is="dom-if" if="{{feature.shipped_webview_milestone}}">
-          <span class="chrome_webview tooltip" title="Chrome Webview">
-            <label>Webview</label><span>{{feature.shipped_webview_milestone}}</span>
-          </span>
-        </template>
-        <span hidden$="{{!feature.prefixed}}"><label>Prefixed</label>Yes</span>
-        <span hidden$="{{!feature.bug_url}}">
-          <a href$="{{feature.bug_url}}" target="_blank">Launch bug</a>
-        </span>
-        <span class="owner" hidden$="{{!feature.owner.length}}">
-          <label>Owner(s)</label>
-          <template is="dom-repeat" items="{{feature.owner}}" as="owner" index-as="i">
-            <span on-tap="ownerFilter" class$="{{_computeOwnerComma(feature.owner, i)}}">{{owner}}</span>
+    <section class="sidebyside">
+      <div class="flex">
+        <h3>Implementation status</h3>
+        <div class="impl_status">
+          <template is="dom-if" if="{{feature.shipped_milestone}}">
+            <span class="chrome_desktop tooltip" title="Chrome desktop">
+              <label>{{feature.impl_status_chrome}}</label><span>{{feature.shipped_milestone}}</span>
+            </span>
           </template>
-        </span>
+          <template is="dom-if" if="{{!feature.shipped_milestone}}">
+            <span class="chrome_desktop"><label>{{feature.impl_status_chrome}}</label></span>
+          </template>
+          <template is="dom-if" if="{{feature.shipped_android_milestone}}">
+            <span class="chrome_android tooltip" title="Chrome for Android">
+              <iron-icon icon="icons:android" class="android"></iron-icon>
+              <span>{{feature.shipped_android_milestone}}</span>
+            </span>
+          </template>
+          <template is="dom-if" if="{{feature.shipped_webview_milestone}}">
+            <span class="chrome_webview tooltip" title="Chrome Webview">
+              <label>Webview</label><span>{{feature.shipped_webview_milestone}}</span>
+            </span>
+          </template>
+          <template is="dom-if" if="{{feature.prefixed}}">
+            <span><label>Prefixed</label><span>Yes</span></span>
+          </template>
+          <template is="dom-if" if="{{feature.bug_url}}">
+            <span>
+              <span>Launch bug</span>
+              <a href$="{{feature.bug_url}}" target="_blank">[[_computeCrbug(feature.bug_url)]]</a>
+            </span>
+          </template>
+          <template is="dom-if" if="{{feature.owner.length}}">
+            <span class="owner">
+              <label>Owner(s)</label>
+              <span class="owner-list">
+                <template is="dom-repeat" items="{{feature.owner}}" as="owner" index-as="i">
+                  <a href="#" on-tap="ownerFilter">{{owner}}</a>
+                </template>
+              </span>
+            </span>
+          </template>
+        </div>
       </div>
-    </section>
-    <section>
-      <h3>Consensus &amp; Standardization</h3>
-      <div class="views">
-        <template is="dom-if" if="{{feature.shipped_opera_milestone}}">
-          <span title="{{feature.impl_status_chrome}}">
-            Opera <span>{{feature.shipped_opera_milestone}}</span>
+      <div class="flex">
+        <h3>Consensus &amp; standardization</h3>
+        <div class="views">
+          <span title="{{feature.ff_views.text}}" class="view tooltip">
+            <chromedash-color-status class="bottom"
+                value="{{feature.ff_views.value}}"
+                max="{{MAX_VENDOR_VIEW}}"></chromedash-color-status>
+            <template is="dom-if" if="{{feature.ff_views_link}}">
+              <a href$="{{feature.ff_views_link}}" target="_blank">
+                <span class="vendor-view ff-view"></span>
+              </a>
+            </template>
+            <span class="vendor-view ff-view" hidden$="{{feature.ff_views_link}}"></span>
           </span>
-        </template>
-        <template is="dom-if" if="{{feature.shipped_opera_android_milestone}}">
-          <span title="{{feature.impl_status_chrome}}">
-            Opera for Android <span>{{feature.shipped_opera_android_milestone}}</span>
+          <span title="{{feature.ie_views.text}}" class="view tooltip">
+            <chromedash-color-status class="bottom"
+                value="[[feature.ie_views.value]]"
+                max="[[MAX_VENDOR_VIEW]]"></chromedash-color-status>
+            <template is="dom-if" if="{{feature.ie_views_link}}">
+              <a href$="{{feature.ie_views_link}}" target="_blank">
+                <span class="vendor-view edge-view"></span>
+              </a>
+            </template>
+            <span class="vendor-view edge-view" hidden$="{{feature.ie_views_link}}"></span>
           </span>
-        </template>
-        <span title="{{feature.ff_views.text}}">
-          <chromedash-color-status value="{{feature.ff_views.value}}"
-                                   max="{{MAX_VENDOR_VIEW}}"></chromedash-color-status>
-          <template is="dom-if" if="{{feature.ff_views_link}}">
-            <a href$="{{feature.ff_views_link}}" target="_blank">Firefox</a>
+          <span title="{{feature.safari_views.text}}" class="view tooltip">
+            <chromedash-color-status class="bottom"
+                value="[[feature.safari_views.value]]"
+                max="[[MAX_VENDOR_VIEW]]"></chromedash-color-status>
+            <template is="dom-if" if="{{feature.safari_views_link}}">
+              <a href$="{{feature.safari_views_link}}" target="_blank">
+                <span class="vendor-view safari-view"></span>
+              </a>
+            </template>
+            <span class="vendor-view safari-view" hidden$="{{feature.safari_views_link}}"></span>
+          </span>
+          <template is="dom-if" if="{{feature.shipped_opera_milestone}}">
+            <span title="Shipped. Desktop: {{feature.shipped_opera_milestone}}, Android: {{feature.shipped_opera_android_milestone}}" class="view opera-view tooltip">
+              <chromedash-color-status class="bottom"
+                  value="1" max="[[MAX_VENDOR_VIEW]]"></chromedash-color-status>
+              <span class="vendor-view"></span>
+            </span>
           </template>
-          <label hidden$="{{feature.ff_views_link}}">Firefox</label>
-        </span>
-        <span title="{{feature.ie_views.text}}">
-          <chromedash-color-status value="[[feature.ie_views.value]]"
-                                   max="[[MAX_VENDOR_VIEW]]"></chromedash-color-status>
-          <template is="dom-if" if="{{feature.ie_views_link}}">
-            <a href$="{{feature.ie_views_link}}" target="_blank">Edge</a>
-          </template>
-          <label hidden$="{{feature.ie_views_link}}">Edge</label>
-        </span>
-        <span title="{{feature.safari_views.text}}">
-          <chromedash-color-status value="[[feature.safari_views.value]]"
-                                   max="[[MAX_VENDOR_VIEW]]"></chromedash-color-status>
-          <template is="dom-if" if="{{feature.safari_views_link}}">
-            <a href$="{{feature.safari_views_link}}" target="_blank">Safari</a>
-          </template>
-          <label hidden$="{{feature.safari_views_link}}">Safari</label>
-        </span>
-        <span title="{{feature.web_dev_views.text}}">
-          <chromedash-color-status value="[[feature.web_dev_views.value]]"
-                                   max="[[MAX_WEBDEV_VIEW]]"></chromedash-color-status>
-          <label>Web developers</label>
-        </span>
-      </div>
-      <div class="standardization">
-        <span>
-          <chromedash-color-status value="[[feature.standardization.value]]"
-                                   max="[[MAX_STANDARDS_VAL]]"></chromedash-color-status>
-          <template is="dom-if" if="{{feature.spec_link}}">
-            <a href$="{{feature.spec_link}}" target="_blank">{{feature.standardization.text}}</a>
-          </template>
-          <span hidden$="{{feature.spec_link}}">{{feature.standardization.text}}</span>
-        </span>
+          <span title="Web developers: {{feature.web_dev_views.text}}" class="view webdev-view tooltip">
+            <chromedash-color-status class="bottom"
+                value="[[feature.web_dev_views.value]]"
+                max="[[MAX_WEBDEV_VIEW]]"></chromedash-color-status>
+            <iron-icon icon="icons:accessibility"></iron-icon>
+          </span>
+          <span class="standardization view">
+            <chromedash-color-status class="bottom"
+                value="[[feature.standardization.value]]"
+                max="[[MAX_STANDARDS_VAL]]"></chromedash-color-status>
+            <span class="vendor-view w3c-view"></span>
+            <template is="dom-if" if="{{feature.spec_link}}">
+              <a href$="{{feature.spec_link}}" target="_blank">{{feature.standardization.text}}</a>
+            </template>
+            <label hidden$="{{feature.spec_link}}">{{feature.standardization.text}}</label>
+          </span>
+        </div>
       </div>
     </section>
     <template is="dom-if" if="{{_computeShowResources(feature)}}">
       <section>
         <h3>Developer resources</h3>
-        <div>
+        <div class="resources">
+          <label>Documentation/samples:</label>
           <template is="dom-if" if="{{_computeShowDocLinks(feature)}}">
-            <span class="doc_links" hidden$="{{!feature.doc_links.length}}">
-              <label>Documentation</label>
-              <multi-links links="[[feature.doc_links]]"></multi-links>
-            </span>
+            <div class="doc_links">
+              <multi-links links="[[feature.doc_links]]" title="Link"></multi-links>
+            </div>
           </template>
-        </div>
-        <div>
           <template is="dom-if" if="{{_computeSampleLinks(feature)}}">
-            <span class="sample_links" hidden$="{{!feature.sample_links.length}}">
-              <label>Samples</label>
-              <multi-links links="[[feature.sample_links]]"></multi-links>
-            </span>
+            <div class="sample_links">
+              <multi-links links="[[feature.sample_links]]" title="Sample"></multi-links>
+            </div>
           </template>
         </div>
       </section>
@@ -365,9 +387,12 @@
     _computeEditLinkHidden: function(feature) {
       return '/admin/features/edit/' + feature.id;
     },
-    _computeOwnerComma: function(owners, i) {
-      var notLastOne = owners.length > 1 && i < owners.length - 1;
-      return notLastOne ? 'comma' : '';
+    _computeCrbug: function(link) {
+      var m = link.match(/[\/|?id=]([0-9]+)$/); // pull out bug number.
+      if (m) {
+        return '#' + m[1];
+      }
+      return link;
     }
   });
 </script>

static/sass/elements/chromedash-color-status.scss

@@ -15,6 +15,20 @@ span {
   #status {
     border-radius: 0;
     height: 100%; // Ensures we can color coverage when feature is scrolled.
-    width: 7px;
+    width: 4px;
+  }
+}
+
+:host(.bottom) {
+  height: 8px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  #status {
+    border-radius: 0;
+    height: 100%;
+    width: 100%;
   }
 }

static/sass/elements/chromedash-feature.scss

@@ -4,12 +4,7 @@
 
 :host {
   @include display-flex;
-  // @include transition(height 400ms ease-in-out);
-  // height: $feature-min-height;
-  // overflow: hidden;
-  cursor: pointer;
   @include gradient-bar-bg;
-  // margin-bottom: 10px !important;
   position: relative;
   border-radius: $default-border-radius;
   padding: 10px 20px !important;
@@ -22,8 +17,6 @@
 }
 
 :host([open]) {
-  // height: 290px;
-  // height: auto;
   overflow: auto;
   outline: none;
 
@@ -32,6 +25,10 @@
   }
 }
 
+[hidden] {
+  display: none !important;
+}
+
 h2 {
   display: inline-block;
   font-size: 25px;
@@ -54,11 +51,6 @@ iron-icon {
   &.experimental {
     color: var(--paper-green-700);
   }
-  // &.opennew {
-  //   color: var(--paper-grey-700);
-  //   --iron-icon-height: 14px;
-  //   --iron-icon-width: 14px;
-  // }
 }
 
 .opennew {
@@ -83,7 +75,6 @@ iron-icon {
   @include display-flex;
   @include align-items(center);
   height: 100%;
-  // box-shadow: -1px 1px 3px #ccc;
   border-left: 2px solid #eee;
   padding: 4px;
 }
@@ -112,15 +103,13 @@ iron-icon {
 hgroup {
   @include display-flex;
   @include align-items(flex-start);
+  cursor: pointer;
 
   .category {
     color: $gray-2;
-    //font-size: 14px;
-    cursor: pointer;
   }
 
   chromedash-color-status {
-    //margin-right: 10px;
     position: absolute;
     top: 0;
     left: 0;
@@ -128,7 +117,6 @@ hgroup {
     &:hover, &:active {
       &:before {
         @include tooltip;
-        //top: 5px;
         top: 50%;
         margin: -30px auto;
         left: 25px;
@@ -160,24 +148,26 @@ section {
     font-weight: 400;
   }
 
-  label {
-    font-weight: 600;
-    //color: $chromium-color-dark;
-    margin-right: 5px;
-  }
-
   div {
-    margin-bottom: 10px;
-    // @include flex-wrap(wrap);
-    @include display-flex;
     > span {
-      margin-right: 20px;
-      // @include flex-wrap(nowrap);
       @include flex-shrink(0);
     }
   }
 
   .impl_status {
+    @include display-flex;
+    @include flex-direction(column);
+
+    > span {
+      @include display-flex;
+      @include justify-content(space-between);
+      padding: 8px;
+
+      &:nth-of-type(odd) {
+        background: #eee;
+      }
+    }
+
     .chrome_desktop, .chrome_android, .chrome_webview {
       &.tooltip {
         position: relative;
@@ -197,38 +187,101 @@ section {
     @include display-flex;
     @include flex-wrap(wrap);
 
-    & > span {
+    .view {
       @include display-flex;
       @include align-items(center);
       position: relative;
+      height: 35px;
+      background: #eee;
+      margin: 0 8px 16px 0;
+      padding: 8px;
 
-      > label {
-        cursor: inherit;
+      &.tooltip {
+        &:hover, &:active {
+          &:before {
+            @include tooltip;
+            top: -50px;
+            left: 20px;
+            width: 150px;
+          }
+        }
       }
+    }
 
+    .standardization {
+      .vendor-view {
+        margin-left: 0;
+      }
+    }
+
+    iron-icon {
+      margin: 0 8px;
+    }
+
+    .vendor-view {
+      background: url(/static/img/browsers-logos.png) no-repeat;
+      background-size: cover;
+      height: 16px;
+      margin: 8px;
+      display: inline-block;
+    }
+
+    .opera-view {
+      .vendor-view {
+        background-position: -60px 50%;
+        width: 17px;
+      }
       &:hover, &:active {
         &:before {
-          @include tooltip;
-          top: -50px;
-          left: 20px;
-          width: 150px;
+          width: 210px !important;
+          left: -80px !important;
+        }
+      }
+    }
+
+    .edge-view {
+      background-position: -80px 50%;
+      width: 16px;
+    }
+    .safari-view {
+      background-position: -20px 50%;
+      width: 17px
+    }
+    .ff-view {
+      background-position: -40px 50%;
+      width: 17px;
+    }
+    .w3c-view {
+      background-position: -99px 50%;
+      width: 22px;
+    }
+    .webdev-view {
+      &:hover, &:active {
+        &:before {
+          left: -80px !important;
+          width: 160px !important;
         }
       }
     }
   }
 
-  .standardization {
-    @include display-flex;
-    @include flex-wrap(wrap);
-    & > span {
-      @include display-flex;
-      @include align-items(center);
+  chromedash-color-status {
+    width: 3px;
+    overflow: hidden;
+
+    &.bottom {
+      margin-top: 3px;
     }
   }
 
-  .owner {
+  .owner-list {
     @include display-flex;
-    @include flex-wrap(wrap);
+    @include flex-direction(column);
+    @include align-items(flex-end);
+
+    a {
+      display: block;
+    }
   }
 
   .comments html-echo {
@@ -238,19 +291,32 @@ section {
   .doc_links, .sample_links, .owner {
     @include flex-shrink(1 !important);
   }
+  .sample_links {
+    margin-left: 8px;
+  }
 }
 
-chromedash-color-status {
+.sidebyside {
   @include display-flex;
-  margin-right: 5px;
-  box-sizing: border-box;
-  @include flex(auto 0 0);
+  @include justify-content(space-between);
+
+  .flex {
+    -ms-flex: 0 0 calc(50% - 16px);
+    -webkit-flex: 0 0 calc(50% - 16px);
+    flex: 0 0 calc(50% - 16px);
+  }
 }
 
+.resources {
+  @include display-flex;
+  @include align-items(center);
+  label {
+    margin-right: 8px;
+  }
+}
 
 @media only screen and (max-width: 700px) {
   :host {
-    // box-shadow: none !important;
     border-radius: 0 !important;
     margin: 7px initial !important;
     @include transition(none !important);
@@ -271,10 +337,6 @@ chromedash-color-status {
     display: none;
   }
   .impl_status {
-    @include display-flex;
-    // @include flex-direction(column);
-    // @include flex-wrap(initial);
-    @include flex-wrap(wrap);
     > span:not([hidden]):not(:last-of-type),
     > a {
       margin-bottom: 10px;
@@ -283,4 +345,8 @@ chromedash-color-status {
   .views > span {
     margin-bottom: 10px;
   }
+
+  .sidebyside {
+    @include flex-direction(column);
+  }
 }

static/sass/elements/chromedash-featurelist.scss

@@ -14,6 +14,7 @@
 // See https://crbug.com/553278
 #ironlist {
   min-height: 0;
+  // @include transform(translateZ(0)); // force composite layer for non-retina.
 }
 
 .milestone-marker {