Add close 'x' to infobox

css/80_app.css

@@ -2660,6 +2660,23 @@ img.tile-removing {
     padding: 5px 10px;
 }
 
+.widget-title h3 {
+    display: inline-block;
+    margin-bottom: 0;
+}
+
+.widget-title button.close {
+    float: right;
+    height: 20px;
+    background: none;
+    color: white;
+}
+
+.widget-title button.close .icon {
+    height: 20px;
+    width: 16px;
+}
+
 .widget-content-measurement .measurement-heading {
     display: block;
     border-radius: 4px 0 0 0;

modules/ui/info.js

@@ -1,6 +1,7 @@
 import * as d3 from 'd3';
 import { d3keybinding } from '../lib/d3.keybinding.js';
 import { t } from '../util/locale';
+import { svgIcon } from '../svg/index';
 import { uiCmd } from './cmd';
 import { uiInfoWidgets } from './info/index';
 
@@ -33,7 +34,10 @@ export function uiInfo(context) {
 
 
         function toggle(setCurrent) {
-            current = setCurrent || current;
+            if (setCurrent && current !== setCurrent) {
+                current = setCurrent;
+                return;
+            }
 
             if (d3.event) {
                 d3.event.preventDefault();
@@ -75,22 +79,30 @@ export function uiInfo(context) {
             .merge(infobox);
 
 
-        var containers = infobox.selectAll('.widget-container')
+        var container = infobox.selectAll('.widget-container')
             .data(ids);
 
-        containers.exit()
+        container.exit()
             .remove();
 
-        var enter = containers.enter()
+        var enter = container.enter()
             .append('div')
             .attr('class', function(d) { return 'widget-container widget-container-' + d; });
 
-        enter
+        var title = enter
             .append('div')
-            .attr('class', 'widget-title fillD2')
+            .attr('class', 'widget-title fillD2');
+
+        title
             .append('h3')
             .text(function(d) { return widgets[d].title; });
 
+        title
+            .append('button')
+            .attr('class', 'close')
+            .on('click', function () { if (!isHidden) toggle(); })
+            .call(svgIcon('#icon-close'));
+
         enter
             .append('div')
             .attr('class', function(d) { return 'widget-content widget-content-' + d; });

modules/ui/info/measurement.js

@@ -11,7 +11,8 @@ import {
 
 
 export function uiInfoMeasurement(context) {
-    var isImperial = (utilDetect().locale.toLowerCase() === 'en-us');
+    var isImperial = (utilDetect().locale.toLowerCase() === 'en-us'),
+        lastLength, lastSingular;
 
 
     function radiansToMeters(r) {
@@ -117,6 +118,10 @@ export function uiInfoMeasurement(context) {
             extent = geoExtent(),
             entity;
 
+        if (selected.length === lastLength && singular === lastSingular) return;  // no change
+        lastLength = selected.length;
+        lastSingular = singular;
+
         selection.html('');
 
         selection