add a button to fold/unfold frame (closes #289629)

1              e.preventDefault();
2          });
3          qs('#remove-frame').addEventListener('click', function(e) {
4              host.remove();
5          });
6 +        qs('#toggle-frame').addEventListener('click', function(e) {
7 +            var frameBody = qs('#panel .panel-body');
8 +            frameBody.classList.toggle('fold');
9 +            e.currentTarget.classList.toggle('active');
10 +        });
11      }
12 
13 
14      function queryUpdated(host, ownerDocument, registry) {
15          let sourceviews = registry.views[host.dataset.source],

16  <template id="x-mosaic-frame-template">
17    <style>
18    @import url("/vendor.css"); /* XXX fix need for absolute path */
19 
20 -#panel {display: none}
21 +  #panel {display: none}
22 +  #panel .panel-body {
23 +    transition-property: max-height, transform;
24 +    transition-duration: 0.3s, 0.5s;
25 +    transition-timing-function: linear, ease;
26 +    transform-origin: top;
27 +    overflow: scroll;
28 +    max-height: 1000px;
29 +  }
30 +  #panel .panel-body.fold {
31 +    max-height: 0px;
32 +    transform: scaleY(0);
33 +  }
34    </style>
35 
36    <form>
37      <div class="form-group">
38        <label for="baseurl">source base url</label>

39  		aria-expanded="false">View <span class="caret"></span>
40  	</button>
41  	<ul id="view-menu" class="dropdown-menu" role="menu">
42  	</ul>
43        </div>
44 +      <button id="toggle-frame" class="btn btn-default glyphicon glyphicon-resize-small"></button>
45        <button id="remove-frame" class="btn btn-default glyphicon glyphicon-remove"></button>
46      </div>
47      <div class="panel-body">
48      </div>
49    </div>