Set visible only on demand

By not being visible by default, but only on demand, we help parent
containers to hide themselves if they would not show content.

Change-Id: I5551f448eb7e1456c0e6e2e90ceed6446d00d484

gr-zuul/gr-zuul.js

diff --git a/gr-zuul/gr-zuul.js b/gr-zuul/gr-zuul.js
index 9bcd761..4afc62b 100644
--- a/gr-zuul/gr-zuul.js
+++ b/gr-zuul/gr-zuul.js
@@ -30,6 +30,11 @@
         type: Object,
         observer: '_onChangeChanged',
       },
+      hidden: {
+        type: Boolean,
+        value: true,
+        reflectToAttribute: true,
+      },
       _crd: {
         type: Object,
         value: {},
@@ -43,13 +48,26 @@
 
   _onChangeChanged() {
     this._crd_loaded = false;
+    this.setHidden(true);
     const url = '/changes/' + this.change.id + '/revisions/current/crd';
     return this.plugin.restApi().send('GET', url).then(crd => {
       this._crd = crd;
       this._crd_loaded = true;
+      this.setHidden(!(crd.depends_on.length || crd.needed_by.length));
     });
   }
 
+  setHidden(hidden) {
+    if (this.hidden != hidden) {
+      this.hidden = hidden;
+
+      // Flag to parents that something changed
+      this.dispatchEvent(new CustomEvent('new-section-loaded', {
+        composed: true, bubbles: true,
+      }));
+    }
+  }
+
   _computeDependencyUrl(changeId) {
     return Gerrit.Nav.getUrlForSearchQuery(changeId);
   }