Misc code style changes in response to code review

index.yaml

@@ -2,160 +2,192 @@ indexes:
 
 # AUTOGENERATED
 
-# This index.yaml is automatically updated whenever the Cloud Datastore
-# emulator detects that a new type of query is run. If you want to manage the
-# index.yaml file manually, remove the "# AUTOGENERATED" marker line above.
-# If you want to manage some indexes manually, move them above the marker line.
+# This index.yaml is automatically updated whenever the dev_appserver
+# detects that a new type of query is run.  If you want to manage the
+# index.yaml file manually, remove the above marker line (the line
+# saying "# AUTOGENERATED").  If you want to manage some indexes
+# manually, move them above the marker line.  The index.yaml file is
+# automatically uploaded to the admin console when you next deploy
+# your application using appcfg.py.
 
-- kind: "Feature"
+- kind: AnimatedProperty
   properties:
-  - name: "impl_status_chrome"
-  - name: "shipped_milestone"
+  - name: bucket_id
+  - name: date
+
+- kind: AnimatedProperty
+  properties:
+  - name: bucket_id
+  - name: date
     direction: desc
-  - name: "name"
-- kind: "Feature"
+
+- kind: AnimatedProperty
   properties:
-  - name: "impl_status_chrome"
+  - name: date
+  - name: day_percentage
     direction: desc
-  - name: "shipped_milestone"
+
+- kind: Feature
+  properties:
+  - name: category
+  - name: updated
     direction: desc
-  - name: "name"
-- kind: "AnimatedProperty"
+
+- kind: Feature
   properties:
-  - name: "bucket_id"
-  - name: "date"
-- kind: "AnimatedProperty"
-  properties:
-  - name: "bucket_id"
-  - name: "date"
+  - name: category
+  - name: updated
     direction: desc
-- kind: "AnimatedProperty"
+  - name: name
+
+- kind: Feature
   properties:
-  - name: "date"
-  - name: "day_percentage"
+  - name: impl_status_chrome
+  - name: name
+
+- kind: Feature
+  properties:
+  - name: impl_status_chrome
+  - name: name
     direction: desc
-- kind: "Feature"
+
+- kind: Feature
   properties:
-  - name: "category"
-  - name: "updated"
+  - name: impl_status_chrome
+  - name: shipped_milestone
+  - name: name
+
+- kind: Feature
+  properties:
+  - name: impl_status_chrome
+  - name: shipped_milestone
     direction: desc
-- kind: "Feature"
+  - name: name
+
+- kind: Feature
   properties:
-  - name: "category"
-  - name: "updated"
+  - name: impl_status_chrome
+  - name: shipped_milestone
     direction: desc
-  - name: "name"
-- kind: "Feature"
-  properties:
-  - name: "impl_status_chrome"
-  - name: "name"
-- kind: "Feature"
-  properties:
-  - name: "impl_status_chrome"
-  - name: "name"
+  - name: name
     direction: desc
-- kind: "Feature"
+
+- kind: Feature
   properties:
-  - name: "impl_status_chrome"
-  - name: "shipped_milestone"
-  - name: "name"
-- kind: "Feature"
-  properties:
-  - name: "impl_status_chrome"
-  - name: "shipped_milestone"
+  - name: impl_status_chrome
     direction: desc
-  - name: "name"
+  - name: shipped_milestone
     direction: desc
-- kind: "Feature"
+  - name: name
+
+- kind: Feature
   properties:
-  - name: "name"
-  - name: "updated"
-- kind: "Feature"
+  - name: name
+  - name: updated
+
+- kind: Feature
   properties:
-  - name: "name"
-  - name: "updated"
+  - name: name
+  - name: updated
     direction: desc
-- kind: "Feature"
+
+- kind: Feature
   properties:
-  - name: "sample_links"
-  - name: "updated"
+  - name: sample_links
+  - name: updated
     direction: desc
-- kind: "Feature"
+
+- kind: Feature
   properties:
-  - name: "shipped_milestone"
-  - name: "name"
-- kind: "Feature"
+  - name: shipped_milestone
+  - name: name
+
+- kind: Feature
   properties:
-  - name: "shipped_milestone"
-  - name: "shipped_android_milestone"
+  - name: shipped_milestone
+  - name: shipped_android_milestone
     direction: desc
-  - name: "name"
-- kind: "Feature"
+  - name: name
+
+- kind: Feature
   properties:
-  - name: "shipped_milestone"
+  - name: shipped_milestone
     direction: desc
-  - name: "name"
-- kind: "Feature"
+  - name: name
+
+- kind: Feature
   properties:
-  - name: "shipped_milestone"
+  - name: shipped_milestone
     direction: desc
-  - name: "name"
-  - name: "impl_status_chrome"
-- kind: "Feature"
+  - name: name
+  - name: impl_status_chrome
+
+- kind: Feature
   properties:
-  - name: "shipped_milestone"
+  - name: shipped_milestone
     direction: desc
-  - name: "name"
-  - name: "impl_status_chrome"
+  - name: name
+  - name: impl_status_chrome
     direction: desc
-- kind: "Feature"
+
+- kind: Feature
   properties:
-  - name: "updated"
+  - name: updated
     direction: desc
-  - name: "name"
-- kind: "FeatureObserver"
+  - name: name
+
+- kind: FeatureObserver
   properties:
-  - name: "bucket_id"
-  - name: "date"
-- kind: "FeatureObserver"
+  - name: bucket_id
+  - name: date
+
+- kind: FeatureObserver
   properties:
-  - name: "bucket_id"
-  - name: "date"
+  - name: bucket_id
+  - name: date
     direction: desc
-- kind: "FeatureObserver"
+
+- kind: FeatureObserver
   properties:
-  - name: "date"
-  - name: "day_percentage"
+  - name: date
+  - name: day_percentage
     direction: desc
-- kind: "FeatureOwner"
+
+- kind: FeatureOwner
   properties:
-  - name: "blink_components"
-  - name: "name"
-- kind: "FeatureOwner"
+  - name: blink_components
+  - name: name
+
+- kind: FeatureOwner
   properties:
-  - name: "primary_blink_components"
-  - name: "name"
-- kind: "StableInstance"
+  - name: primary_blink_components
+  - name: name
+
+- kind: StableInstance
   properties:
-  - name: "bucket_id"
-  - name: "date"
-- kind: "StableInstance"
+  - name: bucket_id
+  - name: date
+
+- kind: StableInstance
   properties:
-  - name: "bucket_id"
-  - name: "date"
+  - name: bucket_id
+  - name: date
     direction: desc
-- kind: "StableInstance"
+
+- kind: StableInstance
   properties:
-  - name: "bucket_id="
-  - name: "date"
+  - name: bucket_id=
+  - name: date
     direction: desc
-- kind: "StableInstance"
+
+- kind: StableInstance
   properties:
-  - name: "date"
-  - name: "day_percentage"
+  - name: date
+  - name: day_percentage
     direction: desc
-- kind: "StableInstance"
+
+- kind: StableInstance
   properties:
-  - name: "date"
-  - name: "hits"
+  - name: date
+  - name: hits
     direction: desc

static/elements/chromedash-color-status.js

@@ -6,8 +6,8 @@ const DEFAULT_MAX = 7;
 class ChromedashColorStatus extends LitElement {
   static get properties() {
     return {
-      max: {type: Number}, // From parent
-      value: {type: Number}, // From parent
+      max: {type: Number}, // From attribute
+      value: {type: Number}, // From attribute
     };
   }
 

static/elements/chromedash-feature.js

@@ -129,7 +129,7 @@ class ChromedashFeature extends LitElement {
     this.dispatchEvent(event);
   }
 
-  toggle(e) {
+  _togglePanelExpansion(e) {
     // Don't toggle panel if tooltip or link is being clicked.
     const target = e.currentTarget;
     if (target.classList.contains('tooltip') || 'tooltip' in target.dataset ||
@@ -189,8 +189,8 @@ class ChromedashFeature extends LitElement {
     return html`
       <link rel="stylesheet" href="/static/css/elements/chromedash-feature.css">
 
-      <div class="main-content-area">
-        <hgroup @click="${this.toggle}">
+      <div id="main-content-area">
+        <hgroup @click="${this._togglePanelExpansion}">
           <chromedash-color-status class="tooltip corner"
             title="Interoperability risk: perceived interest from browser
                 vendors and web developers"
@@ -269,7 +269,7 @@ class ChromedashFeature extends LitElement {
             </div>
           </div>
         </hgroup>
-        <section class="desc" @click="${this.toggle}">
+        <section class="desc" @click="${this._togglePanelExpansion}">
           <summary>
             <p><span>${this.feature.summary}</span></p>
             <p><span>${this.feature.motivation}</span></p>

static/elements/chromedash-featurelist.js

@@ -30,11 +30,12 @@ class ChromedashFeaturelist extends LitElement {
     this._loadData();
   }
 
-  _loadData() {
+  async _loadData() {
     const featureUrl = location.hostname == 'localhost' ?
       'https://www.chromestatus.com/features_v2.json' : '/features_v2.json';
 
-    fetch(featureUrl).then((res) => res.json()).then((features) => {
+    try {
+      const features = await (await fetch(featureUrl)).json();
       this._featuresFetchMetric.end().log().sendToAnalytics('features', 'loaded');
 
       features.map((feature) => {
@@ -50,11 +51,11 @@ class ChromedashFeaturelist extends LitElement {
       this.searchEl.disabled = false;
       this.filter(this.searchEl.value);
       this._initialize();
-    }).catch((error) => {
+    } catch (error) {
       document.getElementById('content').classList.add('error');
       console.error(error);
       throw new Error('Failed to fetch features');
-    });
+    };
   }
 
   connectedCallback() {
@@ -369,17 +370,15 @@ class ChromedashFeaturelist extends LitElement {
     return html`
       <link rel="stylesheet" href="/static/css/elements/chromedash-featurelist.css">
 
-      <div id="featurelist">
-        ${this.filtered.map((feature) => html`
-          <div class="item">
-            <div ?hidden="${this._computeMilestoneHidden(feature, this.features, this.filtered)}"
-                 class="milestone-marker">${this._computeMilestoneString(feature.browsers.chrome.status.milestone_str)}</div>
-            <chromedash-feature id="id-${feature.id}" tabindex="0"
-                 @feature-toggled="${this._onFeatureToggled}"
-                 .feature="${feature}" ?whitelisted="${this.whitelisted}"></chromedash-feature>
-          </div>
-          `)}
-      </div>
+      ${this.filtered.map((feature) => html`
+        <div class="item">
+          <div ?hidden="${this._computeMilestoneHidden(feature, this.features, this.filtered)}"
+               class="milestone-marker">${this._computeMilestoneString(feature.browsers.chrome.status.milestone_str)}</div>
+          <chromedash-feature id="id-${feature.id}" tabindex="0"
+               @feature-toggled="${this._onFeatureToggled}"
+               .feature="${feature}" ?whitelisted="${this.whitelisted}"></chromedash-feature>
+        </div>
+        `)}
     `;
   }
 }

static/sass/elements/chromedash-feature.scss

@@ -62,7 +62,7 @@ iron-icon {
   height: 18px;
 }
 
-.main-content-area {
+#main-content-area {
   flex: 1 0 0;
   overflow: hidden;
 }