Hide attribution instead of DOM removal

The reasons are:

 - It minimizes DOM updates (most changes to the attribution are just toggling
   visibility, not the more expensive creation, insertion and removal of DOM
   elements)
 - The order of attributions remains stable as layer visibilities are toggled
   and the user interacts with the map

src/ol/control/attributioncontrol.js

@@ -65,36 +65,44 @@ goog.inherits(ol.control.Attribution, ol.control.Control);
 
 /**
  * @param {?ol.FrameState} frameState Frame state.
- * @return {Object.<string, ol.Attribution>} Attributions.
+ * @return {Array.<Object.<string, ol.Attribution>>} Attributions.
  */
-ol.control.Attribution.prototype.getTileSourceAttributions =
+ol.control.Attribution.prototype.getSourceAttributions =
     function(frameState) {
-  /** @type {Object.<string, ol.Attribution>} */
+  var i, ii, j, jj, tileRanges, source, sourceAttribution,
-  var attributions = {};
+      sourceAttributionKey, sourceAttributions, sourceKey;
-  var i, ii, j, jj, tileRanges, tileSource, tileSourceAttribution,
-      tileSourceAttributionKey, tileSourceAttributions, tileSourceKey;
   var layers = frameState.layersArray;
+  /** @type {Object.<string, ol.Attribution>} */
+  var attributions = goog.object.clone(frameState.attributions);
+  /** @type {Object.<string, ol.Attribution>} */
+  var hiddenAttributions = {};
   for (i = 0, ii = layers.length; i < ii; i++) {
-    tileSource = layers[i].getSource();
+    source = layers[i].getSource();
-    tileSourceKey = goog.getUid(tileSource).toString();
+    sourceKey = goog.getUid(source).toString();
-    if (tileSourceKey in frameState.usedTiles) {
+    sourceAttributions = source.getAttributions();
-      tileSourceAttributions = tileSource.getAttributions();
+    if (goog.isNull(sourceAttributions)) {
-      if (goog.isNull(tileSourceAttributions)) {
+      continue;
+    }
+    for (j = 0, jj = sourceAttributions.length; j < jj; j++) {
+      sourceAttribution = sourceAttributions[j];
+      sourceAttributionKey = goog.getUid(sourceAttribution).toString();
+      if (sourceAttributionKey in attributions) {
         continue;
       }
-      tileRanges = frameState.usedTiles[tileSourceKey];
+      tileRanges = frameState.usedTiles[sourceKey];
-      for (j = 0, jj = tileSourceAttributions.length; j < jj; j++) {
+      if (goog.isDef(tileRanges) &&
-        tileSourceAttribution = tileSourceAttributions[j];
+          sourceAttribution.intersectsAnyTileRange(tileRanges)) {
-        tileSourceAttributionKey =
+        if (sourceAttributionKey in hiddenAttributions) {
-            goog.getUid(tileSourceAttribution).toString();
+          delete hiddenAttributions[sourceAttributionKey];
-        if (!(tileSourceAttributionKey in attributions) &&
-            tileSourceAttribution.intersectsAnyTileRange(tileRanges)) {
-          attributions[tileSourceAttributionKey] = tileSourceAttribution;
         }
+        attributions[sourceAttributionKey] = sourceAttribution;
+      }
+      else {
+        hiddenAttributions[sourceAttributionKey] = sourceAttribution;
       }
     }
   }
-  return attributions;
+  return [attributions, hiddenAttributions];
 };
 
 
@@ -120,18 +128,28 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
     return;
   }
 
+  var attributions = this.getSourceAttributions(frameState);
   /** @type {Object.<string, ol.Attribution>} */
-  var attributions = goog.object.clone(frameState.attributions);
+  var visibleAttributions = attributions[0];
-  goog.object.extend(attributions, this.getTileSourceAttributions(frameState));
+  /** @type {Object.<string, ol.Attribution>} */
+  var hiddenAttributions = attributions[1];
 
   var attributionElement, attributionKey;
   for (attributionKey in this.attributionElements_) {
-    if (attributionKey in attributions) {
+    if (attributionKey in visibleAttributions) {
       if (!this.attributionElementRenderedVisible_[attributionKey]) {
         goog.style.showElement(this.attributionElements_[attributionKey], true);
         this.attributionElementRenderedVisible_[attributionKey] = true;
       }
-      delete attributions[attributionKey];
+      delete visibleAttributions[attributionKey];
+    }
+    else if (attributionKey in hiddenAttributions) {
+      if (this.attributionElementRenderedVisible_[attributionKey]) {
+        goog.style.showElement(
+            this.attributionElements_[attributionKey], false);
+        delete this.attributionElementRenderedVisible_[attributionKey];
+      }
+      delete hiddenAttributions[attributionKey];
     }
     else {
       goog.dom.removeNode(this.attributionElements_[attributionKey]);
@@ -139,15 +157,25 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
       delete this.attributionElementRenderedVisible_[attributionKey];
     }
   }
-  for (attributionKey in attributions) {
+  for (attributionKey in visibleAttributions) {
     attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
-    attributionElement.innerHTML = attributions[attributionKey].getHTML();
+    attributionElement.innerHTML =
+        visibleAttributions[attributionKey].getHTML();
     goog.dom.appendChild(this.ulElement_, attributionElement);
     this.attributionElements_[attributionKey] = attributionElement;
     this.attributionElementRenderedVisible_[attributionKey] = true;
   }
+  for (attributionKey in hiddenAttributions) {
+    attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
+    attributionElement.innerHTML =
+        hiddenAttributions[attributionKey].getHTML();
+    goog.style.showElement(attributionElement, false);
+    goog.dom.appendChild(this.ulElement_, attributionElement);
+    this.attributionElements_[attributionKey] = attributionElement;
+  }
 
-  var renderVisible = !goog.object.isEmpty(this.attributionElements_);
+  var renderVisible =
+      !goog.object.isEmpty(this.attributionElementRenderedVisible_);
   if (this.renderedVisible_ != renderVisible) {
     goog.style.showElement(this.element, renderVisible);
     this.renderedVisible_ = renderVisible;