Adds a button to the relation member list item for zooming to the feature without selecting it

Adds "remove" tooltip to the delete relation member button

css/80_app.css

@@ -1253,7 +1253,6 @@ a.hide-toggle {
     top: 0;
     right: 0;
     height: 100%;
-    width: 100%;
     background: transparent;
     text-align: right;
 }

data/core.yaml

@@ -4,6 +4,7 @@ en:
     information: info
     remove: remove
     undo: undo
+    zoom_to: zoom to
   modes:
     add_area:
       title: Area

dist/locales/en.json

@@ -4,7 +4,8 @@
             "download": "download",
             "information": "info",
             "remove": "remove",
-            "undo": "undo"
+            "undo": "undo",
+            "zoom_to": "zoom to"
         },
         "modes": {
             "add_area": {

modules/ui/raw_member_editor.js

@@ -30,6 +30,17 @@ export function uiRawMemberEditor(context) {
         context.loadEntity(d.id);
     }
 
+    function zoomToMember(d) {
+        d3_event.preventDefault();
+
+        var entity = context.entity(d.id);
+        context.map().zoomTo(entity);
+
+        // highlight the feature in case it wasn't previously on-screen
+        var selectorPrefix = d.type === 'node' ? 'g.' : 'path.';
+        context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true);
+    }
+
 
     function selectMember(d) {
         d3_event.preventDefault();
@@ -133,22 +144,34 @@ export function uiRawMemberEditor(context) {
                         });
 
                         var label = d3_select(this).append('label')
-                            .attr('class', 'form-label')
-                            .append('a')
+                            .attr('class', 'form-label');
+
+                        // add the button wrap beneath the label text
+                        var buttonWrap = label.append('div')
+                            .attr('class', 'form-label-button-wrap');
+
+                        var labelLink = label.append('a')
                             .attr('href', '#')
                             .on('click', selectMember);
 
-                        label.append('span')
+                        labelLink.append('span')
                             .attr('class', 'member-entity-type')
                             .text(function(d) {
                                 var matched = context.presets().match(d.member, context.graph());
                                 return (matched && matched.name()) || utilDisplayType(d.member.id);
                             });
 
-                        label.append('span')
+                        labelLink.append('span')
                             .attr('class', 'member-entity-name')
                             .text(function(d) { return utilDisplayName(d.member); });
 
+                        buttonWrap.append('button')
+                            .attr('class', 'download-icon')
+                            .attr('title', t('icons.zoom_to'))
+                            .attr('tabindex', -1)
+                            .call(svgIcon('#iD-icon-geolocate'))
+                            .on('click', zoomToMember);
+
                     } else {
                         var incompleteLabel = d3_select(this).append('label')
                             .attr('class', 'form-label');
@@ -186,6 +209,7 @@ export function uiRawMemberEditor(context) {
             enter
                 .append('button')
                 .attr('tabindex', -1)
+                .attr('title', t('icons.remove'))
                 .attr('class', 'remove button-input-action member-delete minor')
                 .on('click', deleteMember)
                 .call(svgIcon('#iD-operation-delete'));