Remove sidebar toggle button, move tooltip to resizer

(re: #1497)

This also quietly changes a few of the text strings that we use to talk about this component.
"sidebar" -> "feature inspector"
Because if we move it to some other part of the screen like the bottom, it's not really a sidebar anymore

data/core.yaml

@@ -570,9 +570,6 @@ en:
   report_a_bug: Report a bug
   help_translate: Help translate
   example: "Example:"
-  sidebar:
-    key: '`'
-    tooltip: Toggle the sidebar.
   feature_info:
     hidden_warning:
       one: "{count} hidden feature"
@@ -679,6 +676,8 @@ en:
     locating: "Locating, please wait..."
     location_unavailable: Your location is unavailable.
   inspector:
+    key: '`'
+    tooltip: Toggle the feature inspector.
     zoom_to:
       key: Z
       title: Zoom To Selection
@@ -1585,7 +1584,7 @@ en:
     editing:
       title: "Editing & Saving"
       select_h: "Select"
-      select_left_click: "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar."
+      select_left_click: "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the feature inspector."
       select_right_click: "{mouse_right_icon} Right-click or {onefinger_tap_and_hold_icon} long-press a feature to display the edit menu, which provides operations such as copy, rotate, and delete."
       select_space: "The `{space}` key can also be used instead of left-click when selecting and drawing."
       multiselect_h: "Multiselect"
@@ -1754,7 +1753,7 @@ en:
       tools_h: "Tools"
       tools: "The following tools are currently supported: [KeepRight](https://www.keepright.at/) and [Osmose](https://osmose.openstreetmap.fr/)."
       issues_h: "Handling Issues"
-      issues: "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue."
+      issues: "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the feature inspector. Each tool has its own capabilities, but generally you can comment and/or close an issue."
     field:
       restrictions:
         title: Turn Restrictions Help
@@ -2541,7 +2540,7 @@ en:
         issues: "Toggle validation issues pane"
         preferences: "Toggle user preferences pane"
         fullscreen: "Toggle full screen mode"
-        sidebar: "Toggle sidebar"
+        inspector: "Toggle feature inspector"
         wireframe: "Toggle wireframe mode"
         osm_data: "Toggle OpenStreetMap data"
         rapid_features_data: "Toggle Rapid Features"

data/l10n/core.en.json

@@ -755,10 +755,6 @@
     "report_a_bug": "Report a bug",
     "help_translate": "Help translate",
     "example": "Example:",
-    "sidebar": {
-      "key": "`",
-      "tooltip": "Toggle the sidebar."
-    },
     "feature_info": {
       "hidden_warning": {
         "one": "{count} hidden feature",
@@ -881,6 +877,8 @@
       "location_unavailable": "Your location is unavailable."
     },
     "inspector": {
+      "key": "`",
+      "tooltip": "Toggle the feature inspector.",
       "zoom_to": {
         "key": "Z",
         "title": "Zoom To Selection",
@@ -2002,7 +2000,7 @@
       "editing": {
         "title": "Editing & Saving",
         "select_h": "Select",
-        "select_left_click": "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar.",
+        "select_left_click": "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the feature inspector.",
         "select_right_click": "{mouse_right_icon} Right-click or {onefinger_tap_and_hold_icon} long-press a feature to display the edit menu, which provides operations such as copy, rotate, and delete.",
         "select_space": "The `{space}` key can also be used instead of left-click when selecting and drawing.",
         "multiselect_h": "Multiselect",
@@ -2182,7 +2180,7 @@
         "tools_h": "Tools",
         "tools": "The following tools are currently supported: [KeepRight](https://www.keepright.at/) and [Osmose](https://osmose.openstreetmap.fr/).",
         "issues_h": "Handling Issues",
-        "issues": "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue."
+        "issues": "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the feature inspector. Each tool has its own capabilities, but generally you can comment and/or close an issue."
       },
       "field": {
         "restrictions": {
@@ -3139,7 +3137,7 @@
           "issues": "Toggle validation issues pane",
           "preferences": "Toggle user preferences pane",
           "fullscreen": "Toggle full screen mode",
-          "sidebar": "Toggle sidebar",
+          "inspector": "Toggle feature inspector",
           "wireframe": "Toggle wireframe mode",
           "osm_data": "Toggle OpenStreetMap data",
           "rapid_features_data": "Toggle Rapid Features",

data/shortcuts.json

@@ -91,8 +91,8 @@
               "text": "shortcuts.browsing.display_options.fullscreen"
             },
             {
-              "shortcuts": ["sidebar.key", "`", "²"],
-              "text": "shortcuts.browsing.display_options.sidebar"
+              "shortcuts": ["inspector.key", "`", "²"],
+              "text": "shortcuts.browsing.display_options.inspector"
             },
             {
               "shortcuts": ["area_fill.wireframe.key"],

modules/ui/UiSidebar.js

@@ -12,6 +12,7 @@ import { uiMapRouletteEditor } from './maproulette_editor.js';
 import { uiOsmoseEditor } from './osmose_editor.js';
 import { uiNoteEditor } from './note_editor.js';
 import { uiRapidFeatureInspector } from './rapid_feature_inspector.js';
+import { uiTooltip } from './tooltip.js';
 
 
 const NEAR_TOLERANCE = 4;
@@ -51,10 +52,12 @@ export class UiSidebar {
     this.KeepRightEditor = uiKeepRightEditor(context);
     this.OsmoseEditor = uiOsmoseEditor(context);
     this.MapRouletteEditor = uiMapRouletteEditor(context);
+    this.Tooltip = uiTooltip(context);
 
     // D3 selections
     this.$parent = null;
     this.$sidebar = null;
+    this.$resizer = null;
     this.$custom = null;
     this.$featureList = null;
     this.$inspector = null;
@@ -104,8 +107,8 @@ export class UiSidebar {
     const storage = context.systems.storage;
 
     const dir = l10n.textDirection();
-    const preferCollapsed = (storage.getItem('sidebar.collapsed') === 'true');
-    const storedWidth = +(storage.getItem('sidebar.width') || DEFAULT_WIDTH);
+    const preferCollapsed = (storage.getItem('inspector.collapsed') === 'true');
+    const storedWidth = +(storage.getItem('inspector.width') || DEFAULT_WIDTH);
     this._expandWidth = Math.max(MIN_WIDTH, storedWidth);
 
     // add .sidebar
@@ -139,7 +142,12 @@ export class UiSidebar {
       .append('div')
       .attr('class', 'resizer-handle');
 
-    $resizer = $resizer.merge($$resizer);
+    this.$resizer = $resizer = $resizer.merge($$resizer)
+      .call(this.Tooltip
+        .placement(dir === 'rtl' ? 'right' : 'left')  // place on the sidebar side (i.e. don't cover the map)
+        .title(l10n.t('inspector.tooltip'))
+        .shortcut(l10n.t('inspector.key'))
+      );
 
 
     // add sidebar contents: feature list pane and inspector
@@ -155,7 +163,7 @@ export class UiSidebar {
     this.$inspector = $sidebar.select('.inspector-wrap');
 
 // figure out a better way to rebind this if locale changes
-    const keys = [l10n.t('sidebar.key'), '`', '²', '@'];  // iD#5663, iD#6864 - common QWERTY, AZERTY
+    const keys = [l10n.t('inspector.key'), '`', '²', '@'];  // iD#5663, iD#6864 - common QWERTY, AZERTY
     context.keybinding().off(keys);
     context.keybinding().on(keys, this.toggle);
   }
@@ -445,7 +453,7 @@ export class UiSidebar {
 
     $sidebar
       .transition()
-      .tween('sidebar.toggler', () => {
+      .tween('inspector.toggler', () => {
         return t => {
           const setWidth = lerp(t);
 
@@ -489,8 +497,8 @@ export class UiSidebar {
 
     if ('button' in e && e.button !== 0) return;
 
-    const $sidebar = this.$sidebar;
     const $container = this.context.container();
+    const $sidebar = this.$sidebar;
 
     const expandWidth = this._expandWidth || DEFAULT_WIDTH;
     const startCollapsed = $sidebar.classed('collapsed');
@@ -502,6 +510,7 @@ export class UiSidebar {
     this._lastCoord = [e.clientX, e.clientY];
     this._lastWidth = startWidth;
 
+    this.Tooltip.hide();
     $container.classed('resizing', true);
 
     $sidebar
@@ -618,7 +627,7 @@ export class UiSidebar {
     const preferWidth = this._expandWidth;
 
     const storage = this.context.systems.storage;
-    storage.setItem('sidebar.collapsed', preferCollapsed);
-    storage.setItem('sidebar.width', preferWidth);
+    storage.setItem('inspector.collapsed', preferCollapsed);
+    storage.setItem('inspector.width', preferWidth);
   }
 }

modules/ui/tools/index.js

@@ -3,5 +3,4 @@ export * from './modes.js';
 export * from './notes.js';
 export * from './rapid_features.js';
 export * from './save.js';
-export * from './sidebar_toggle.js';
 export * from './undo_redo.js';

modules/ui/top_toolbar.js

@@ -1,13 +1,12 @@
 import { select as d3_select } from 'd3-selection';
 
 import {
-  uiToolRapidFeatures, uiToolDrawModes, uiToolNotes, uiToolSave,
-  uiToolSidebarToggle, uiToolUndoRedo, uiToolDownloadOsc
+  uiToolRapidFeatures, uiToolDrawModes, uiToolNotes,
+  uiToolSave, uiToolUndoRedo, uiToolDownloadOsc
 } from './tools/index.js';
 
 
 export function uiTopToolbar(context) {
-  const sidebarToggle = uiToolSidebarToggle(context);
   const rapidFeatures = uiToolRapidFeatures(context);
   const modes = uiToolDrawModes(context);
   const notes = uiToolNotes(context);
@@ -22,7 +21,7 @@ export function uiTopToolbar(context) {
 
 
   function update(selection) {
-    let tools = [sidebarToggle, 'spacer', modes, rapidFeatures];
+    const tools = ['spacer', modes, rapidFeatures];
 
     if (notesEnabled()) {
       tools.push('spacer', notes);