feat(ux): Extension Host - StatusBar - Handle tooltip property

- Add parsing of the tooltip property to statusbar `$setEntry` - Add tooltip to status bar items, if available - Optionally override `offsetX` and `offsetY`
ssyx02 · Jul 16, 2020 · 6ad4ac9 · 6ad4ac9
1 parent 6bd145a
commit 6ad4ac9
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 24 deletions.
diff --git a/development_extensions/oni-dev-extension/extension.js b/development_extensions/oni-dev-extension/extension.js
@@ -16,6 +16,7 @@ function activate(context) {
     item.color = new vscode.ThemeColor("foreground");
     item.command = "developer.oni.statusBarClicked";
     item.text = "$(wrench) Developer";
+    item.tooltip = "Hello from oni-dev-extension!";
     item.show();
 
     let cleanup = (disposable) => context.subscriptions.push(disposable);

diff --git a/src/Components/Tooltip.re b/src/Components/Tooltip.re
@@ -16,6 +16,8 @@ type t = {
   text: string,
   x: float,
   y: float,
+  offsetX: int,
+  offsetY: int,
 };
 
 // TOOLTIP
@@ -24,10 +26,10 @@ module Tooltip = {
   module Styles = {
     open Style;
 
-    let tooltip = (~theme, ~x, ~y) => [
+    let tooltip = (~theme, ~x, ~y, ~offsetX, ~offsetY) => [
       position(`Absolute),
-      left(int_of_float(x) + Constants.offsetX),
-      top(int_of_float(y) + Constants.offsetY),
+      left(int_of_float(x) + offsetX),
+      top(int_of_float(y) + offsetY),
       backgroundColor(Colors.background.from(theme)),
       paddingVertical(3),
       paddingHorizontal(8),
@@ -46,8 +48,8 @@ module Tooltip = {
     ];
   };
 
-  let make = (~text, ~x, ~y, ~theme, ~font: UiFont.t, ()) =>
-    <View style={Styles.tooltip(~theme, ~x, ~y)}>
+  let make = (~offsetX, ~offsetY, ~text, ~x, ~y, ~theme, ~font: UiFont.t, ()) =>
+    <View style={Styles.tooltip(~theme, ~x, ~y, ~offsetX, ~offsetY)}>
       <Text
         style={Styles.tooltipText(~theme)}
         fontFamily={font.family}
@@ -98,7 +100,8 @@ module Overlay: {
     internalSetTooltip := setCurrent;
 
     switch (current) {
-    | Some({text, x, y}) => <Tooltip text x y theme font />
+    | Some({text, x, y, offsetX, offsetY}) =>
+      <Tooltip text x y theme font offsetX offsetY />
     | None => React.empty
     };
   };
@@ -107,9 +110,23 @@ module Overlay: {
 // HOTSPOT
 
 module Trigger = {
-  let make = (~children, ~text, ~style=[], ()) => {
+  let make =
+      (
+        ~offsetX=Constants.offsetX,
+        ~offsetY=Constants.offsetY,
+        ~children,
+        ~text,
+        ~style=[],
+        (),
+      ) => {
     let onMouseOver = (evt: NodeEvents.mouseMoveEventParams) =>
-      Overlay.setTooltip({text, x: evt.mouseX, y: evt.mouseY});
+      Overlay.setTooltip({
+        text,
+        x: evt.mouseX,
+        y: evt.mouseY,
+        offsetX,
+        offsetY,
+      });
     let onMouseMove = onMouseOver;
     let onMouseOut = _ => Overlay.clearTooltip();
 

diff --git a/src/Components/Tooltip.rei b/src/Components/Tooltip.rei
@@ -14,6 +14,8 @@ module Overlay: {
 
 let make:
   (
+    ~offsetX: int=?,
+    ~offsetY: int=?,
     ~children: element,
     ~text: string,
     ~style: list(Style.viewStyleProps)=?,

diff --git a/src/Exthost/Exthost.rei b/src/Exthost/Exthost.rei
@@ -1061,6 +1061,7 @@ module Msg: {
           alignment,
           command: option(Command.t),
           color: option(Color.t),
+          tooltip: option(string),
           priority: int,
         })
       | Dispose({id: int});

diff --git a/src/Exthost/Msg.re b/src/Exthost/Msg.re
@@ -835,6 +835,7 @@ module StatusBar = {
         alignment,
         command: option(ExtCommand.t),
         color: option(Color.t),
+        tooltip: option(string),
         priority: int,
       })
     | Dispose({id: int});
@@ -858,27 +859,43 @@ module StatusBar = {
           _,
           `String(source),
           labelJson,
-          _tooltip,
+          tooltipJson,
           commandJson,
           colorJson,
           alignmentJson,
           priorityJson,
         ]),
       ) =>
       open Base.Result.Let_syntax;
+      open Json.Decode;
+
       let%bind id = idJson |> Internal.decode_value(Decode.id);
       let%bind command = parseCommand(commandJson);
       let%bind color =
-        colorJson
-        |> Internal.decode_value(Json.Decode.nullable(Color.decode));
+        colorJson |> Internal.decode_value(nullable(Color.decode));
+      let%bind tooltip =
+        tooltipJson |> Internal.decode_value(nullable(string));
       let%bind label = labelJson |> Internal.decode_value(Label.decode);
 
       let%bind alignmentNumber =
         alignmentJson |> Internal.decode_value(Decode.int);
       let alignment = alignmentNumber |> intToAlignment;
       let%bind priority = priorityJson |> Internal.decode_value(Decode.int);
-      Ok(SetEntry({id, source, label, alignment, color, priority, command}));
+      Ok(
+        SetEntry({
+          id,
+          source,
+          label,
+          alignment,
+          color,
+          priority,
+          tooltip,
+          command,
+        }),
+      );
+
     | ("$dispose", `List([`Int(id)])) => Ok(Dispose({id: id}))
+
     | _ =>
       Error(
         "Unable to parse method: "

diff --git a/src/Feature/StatusBar/Feature_StatusBar.re b/src/Feature/StatusBar/Feature_StatusBar.re
@@ -13,16 +13,27 @@ module Item = {
     alignment: Exthost.Msg.StatusBar.alignment,
     color: option(Exthost.Color.t),
     command: option(string),
+    tooltip: option(string),
   };
 
   let create =
-      (~color=?, ~command=?, ~id, ~priority, ~label, ~alignment=Left, ()) => {
+      (
+        ~color=?,
+        ~command=?,
+        ~tooltip=?,
+        ~id,
+        ~priority,
+        ~label,
+        ~alignment=Left,
+        (),
+      ) => {
     id,
     color,
     priority,
     label,
     alignment,
     command,
+    tooltip,
   };
 };
 
@@ -83,6 +94,7 @@ module Diagnostic = Feature_LanguageSupport.Diagnostic;
 module Editor = Feature_Editor.Editor;
 
 module Colors = Feature_Theme.Colors;
+module Tooltip = Oni_Components.Tooltip;
 
 module Styles = {
   open Style;
@@ -357,16 +369,22 @@ module View = {
         |> OptionEx.flatMap(Exthost.Color.resolve(theme))
         |> Option.value(~default=defaultForeground);
 
-      <item ?onClick>
-        <View
-          style=Style.[
-            flexDirection(`Row),
-            justifyContent(`Center),
-            alignItems(`Center),
-          ]>
-          <Label font color label={statusItem.label} />
-        </View>
-      </item>;
+      let children = <Label font color label={statusItem.label} />;
+      let style =
+        Style.[
+          flexDirection(`Row),
+          justifyContent(`Center),
+          alignItems(`Center),
+        ];
+
+      let viewOrTooltip =
+        switch (statusItem.tooltip) {
+        | None => <View style> children </View>
+        | Some(tooltip) =>
+          <Tooltip offsetY=(-25) text=tooltip style> children </Tooltip>
+        };
+
+      <item ?onClick> viewOrTooltip </item>;
     };
 
     let leftItems =

diff --git a/src/Store/ExtensionClient.re b/src/Store/ExtensionClient.re
@@ -395,7 +395,16 @@ let create = (~config, ~extensions, ~setup: Setup.t) => {
         Lwt.return(Reply.okEmpty);
 
       | StatusBar(
-          SetEntry({id, label, alignment, priority, color, command, _}),
+          SetEntry({
+            id,
+            label,
+            alignment,
+            priority,
+            color,
+            command,
+            tooltip,
+            _,
+          }),
         ) =>
         let command =
           command |> Option.map(({id, _}: Exthost.Command.t) => id);
@@ -405,6 +414,7 @@ let create = (~config, ~extensions, ~setup: Setup.t) => {
               Feature_StatusBar.Item.create(
                 ~command?,
                 ~color?,
+                ~tooltip?,
                 ~id,
                 ~label,
                 ~alignment,