Add help button "?" in some windows (fix #1980)

We hope to enhance the discoverability of Aseprite features in this
way.

data/extensions/aseprite-theme/dark/theme.xml

@@ -171,6 +171,7 @@
         <part id="window_play_icon" x="21" y="11" w="5" h="6" />
         <part id="window_stop_icon" x="26" y="11" w="5" h="6" />
         <part id="window_center_icon" x="31" y="11" w="5" h="6" />
+        <part id="window_help_icon" x="36" y="11" w="5" h="6" />
         <part id="slider_full" x="0" y="144" w1="5" w2="6" w3="5" h1="5" h2="5" h3="6" />
         <part id="slider_empty" x="16" y="144" w1="5" w2="6" w3="5" h1="5" h2="5" h3="6" />
         <part id="slider_full_focused" x="0" y="160" w1="5" w2="6" w3="5" h1="5" h2="5" h3="6" />
@@ -498,6 +499,12 @@
             <icon part="window_stop_icon" color="button_hot_text" state="mouse" />
             <icon part="window_stop_icon" color="button_selected_text" state="selected" />
         </style>
+        <style id="window_help_button" extends="window_button" margin-top="3" margin-right="2">
+            <newlayer />
+            <icon part="window_help_icon" color="button_normal_text" />
+            <icon part="window_help_icon" color="button_hot_text" state="mouse" />
+            <icon part="window_help_icon" color="button_selected_text" state="selected" />
+        </style>
         <style id="popup_window">
             <background color="window_face" />
             <border part="menu" />

data/extensions/aseprite-theme/theme.xml

@@ -167,6 +167,7 @@
         <part id="window_play_icon" x="21" y="11" w="5" h="6" />
         <part id="window_stop_icon" x="26" y="11" w="5" h="6" />
         <part id="window_center_icon" x="31" y="11" w="5" h="6" />
+        <part id="window_help_icon" x="36" y="11" w="5" h="6" />
         <part id="slider_full" x="0" y="144" w1="5" w2="6" w3="5" h1="5" h2="5" h3="6" />
         <part id="slider_empty" x="16" y="144" w1="5" w2="6" w3="5" h1="5" h2="5" h3="6" />
         <part id="slider_full_focused" x="0" y="160" w1="5" w2="6" w3="5" h1="5" h2="5" h3="6" />
@@ -494,6 +495,12 @@
             <icon part="window_stop_icon" color="button_hot_text" state="mouse" />
             <icon part="window_stop_icon" color="button_selected_text" state="selected" />
         </style>
+        <style id="window_help_button" extends="window_button" margin-top="3" margin-right="2">
+            <newlayer />
+            <icon part="window_help_icon" color="button_normal_text" />
+            <icon part="window_help_icon" color="button_hot_text" state="mouse" />
+            <icon part="window_help_icon" color="button_selected_text" state="selected" />
+        </style>
         <style id="popup_window">
             <background color="window_face" />
             <border part="menu" />

data/widgets/canvas_size.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (C) 2019  Igara Studio S.A. -->
+<!-- Copyright (C) 2019-2024  Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2018  David Capello -->
 <gui>
- <window id="canvas_size" text="@.title">
+ <window id="canvas_size" text="@.title" help="canvas">
   <vbox>
     <separator text="@.size" left="true" horizontal="true" />
     <hbox>

data/widgets/export_file.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (C) 2022 by Igara Studio S.A. -->
+<!-- Copyright (C) 2022-2024 by Igara Studio S.A. -->
 <!-- Copyright (C) 2016-2018 by David Capello -->
 <gui>
-  <window id="export_file" text="@.title">
+  <window id="export_file" text="@.title" help="exporting">
     <grid columns="3">
       <label text="@.output_file" />
       <entry id="output_filename" cell_align="horizontal" maxsize="1024" maxwidth="256" />

data/widgets/export_sprite_sheet.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (C) 2019-2022  Igara Studio S.A. -->
+<!-- Copyright (C) 2019-2024  Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2018  David Capello -->
 <gui>
-  <window id="export_sprite_sheet" text="@.title">
+  <window id="export_sprite_sheet" text="@.title" help="sprite-sheet#export">
   <vbox expansive="true">
 
     <!-- Tabs -->

data/widgets/import_sprite_sheet.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (C) 2019 by Igara Studio S.A. -->
+<!-- Copyright (C) 2019-2024 by Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2018 by David Capello -->
 <gui>
-  <window id="import_sprite_sheet" text="@.title">
+  <window id="import_sprite_sheet" text="@.title" help="sprite-sheet#import">
     <vbox>
       <grid columns="4">
         <button id="select_file" text="@select_file.text" cell_hspan="4" />

data/widgets/keyboard_shortcuts.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (C) 2018-2022  Igara Studio S.A. -->
+<!-- Copyright (C) 2018-2024  Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2016  David Capello -->
 <gui>
-  <window id="keyboard_shortcuts" text="@keyboard_shortcuts.title">
+  <window id="keyboard_shortcuts" text="@keyboard_shortcuts.title" help="keyboard-shortcuts">
     <vbox>
       <splitter horizontal="true" expansive="true" noborders="true" childspacing="2"
                 by="pixel" position="80" id="section_splitter">

data/widgets/new_layer.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (C) 2019  Igara Studio S.A. -->
+<!-- Copyright (C) 2019-2024  Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2016  David Capello -->
 <gui>
-  <window id="new_layer" text="@.title">
+  <window id="new_layer" text="@.title" help="new-layer">
     <vbox>
       <grid columns="2">
         <label text="@.name" />

data/widgets/new_sprite.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (c) 2020  Igara Studio S.A. -->
+<!-- Copyright (c) 2020-2024  Igara Studio S.A. -->
 <!-- Copyright (c) 2001-2018  David Capello -->
 <gui>
-  <window id="new_sprite" text="@.title">
+  <window id="new_sprite" text="@.title" help="new-sprite">
     <box vertical="true">
 
       <separator text="@.size" left="true" horizontal="true" />

data/widgets/options.xml

@@ -2,7 +2,7 @@
 <!-- Copyright (C) 2018-2024  Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2018  David Capello -->
 <gui>
-  <window id="options" text="@.title">
+  <window id="options" text="@.title" help="preferences">
   <vbox>
     <hbox expansive="true">
       <view maxsize="true">

data/widgets/slice_properties.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Aseprite -->
-<!-- Copyright (C) 2019-2021  Igara Studio S.A. -->
+<!-- Copyright (C) 2019-2024  Igara Studio S.A. -->
 <!-- Copyright (C) 2017-2018  David Capello -->
 <gui>
-<window id="slice_properties" text="@.title">
+<window id="slice_properties" text="@.title" help="slices#slice-properties">
   <vbox>
     <grid id="properties_grid" columns="3">
       <label id="label1" text="@.name" />

data/widgets/sprite_properties.xml

@@ -1,8 +1,8 @@
 <!-- Aseprite -->
-<!-- Copyright (C) 2018-2020  Igara Studio S.A. -->
+<!-- Copyright (C) 2018-2024  Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2016  David Capello -->
 <gui>
-<window id="sprite_properties" text="@.title">
+<window id="sprite_properties" text="@.title" help="sprite-properties">
   <vbox>
     <grid id="properties_grid" columns="3">
       <label text="@.filename" />

data/widgets/sprite_size.xml

@@ -1,7 +1,8 @@
 <!-- Aseprite -->
+<!-- Copyright (C) 2024 by Igara Studio S.A. -->
 <!-- Copyright (C) 2001-2018 by David Capello -->
 <gui>
-<window id="sprite_size" text="@.title">
+<window id="sprite_size" text="@.title" help="resize">
   <box vertical="true">
     <box vertical="true">
       <separator text="@.pixels" left="true" horizontal="true" />

src/app/CMakeLists.txt

@@ -422,6 +422,7 @@ if(ENABLE_UI)
     ui/keyboard_shortcuts.cpp
     ui/main_menu_bar.cpp
     ui/main_window.cpp
+    ui/mini_help_button.cpp
     ui/notifications.cpp
     ui/optional_alert.cpp
     ui/palette_popup.cpp

src/app/ui/mini_help_button.cpp

@@ -0,0 +1,76 @@
+// Aseprite
+// Copyright (C) 2024  Igara Studio S.A.
+//
+// This program is distributed under the terms of
+// the End-User License Agreement for Aseprite.
+
+#ifdef HAVE_CONFIG_H
+#include "config.h"
+#endif
+
+#include "app/ui/mini_help_button.h"
+
+#include "app/ui/skin/skin_theme.h"
+#include "base/launcher.h"
+#include "ui/message.h"
+#include "ui/system.h"
+#include "ver/info.h"
+
+namespace app {
+
+using namespace app::skin;
+using namespace ui;
+
+MiniHelpButton::MiniHelpButton(const std::string& link)
+  : Button(std::string())
+  , m_link(link)
+{
+  setDecorative(true);
+  initTheme();
+}
+
+void MiniHelpButton::onInitTheme(InitThemeEvent& ev)
+{
+  Button::onInitTheme(ev);
+
+  auto* theme = SkinTheme::get(this);
+  setStyle(theme->styles.windowHelpButton());
+}
+
+void MiniHelpButton::onClick()
+{
+  Button::onClick();
+
+  std::string url;
+  if (m_link.find("http") != std::string::npos) {
+    url = m_link;
+  }
+  else {
+    url = get_app_url();
+    url += "docs/";
+    url += m_link;
+  }
+
+  base::launcher::open_url(url);
+}
+
+void MiniHelpButton::onSetDecorativeWidgetBounds()
+{
+  auto* theme = SkinTheme::get(this);
+  Widget* window = parent();
+  gfx::Rect rect(0, 0, 0, 0);
+  const gfx::Size thisSize = this->sizeHint();
+  const gfx::Size closeSize = theme->calcSizeHint(this, theme->styles.windowCloseButton());
+  const gfx::Border margin(0, 0, 0, 0);
+
+  rect.w = thisSize.w;
+  rect.h = thisSize.h;
+  rect.offset(window->bounds().x2()
+              - theme->styles.windowCloseButton()->margin().width() - closeSize.w
+              - style()->margin().right() - thisSize.w,
+              window->bounds().y + style()->margin().top());
+
+  setBounds(rect);
+}
+
+} // namespace app

src/app/ui/mini_help_button.h

@@ -0,0 +1,29 @@
+// Aseprite
+// Copyright (C) 2024  Igara Studio S.A.
+//
+// This program is distributed under the terms of
+// the End-User License Agreement for Aseprite.
+
+#ifndef APP_UI_MINI_HELP_BUTTON_H_INCLUDED
+#define APP_UI_MINI_HELP_BUTTON_H_INCLUDED
+#pragma once
+
+#include "ui/button.h"
+
+namespace app {
+
+class MiniHelpButton : public ui::Button {
+public:
+  MiniHelpButton(const std::string& link);
+
+private:
+  void onInitTheme(ui::InitThemeEvent& ev) override;
+  void onClick() override;
+  void onSetDecorativeWidgetBounds() override;
+
+  std::string m_link;
+};
+
+} // namespace app
+
+#endif

src/app/widget_loader.cpp

@@ -23,6 +23,7 @@
 #include "app/ui/drop_down_button.h"
 #include "app/ui/expr_entry.h"
 #include "app/ui/icon_button.h"
+#include "app/ui/mini_help_button.h"
 #include "app/ui/search_entry.h"
 #include "app/ui/skin/skin_theme.h"
 #include "app/widget_not_found.h"
@@ -434,12 +435,20 @@ Widget* WidgetLoader::convertXmlElementToWidget(const XMLElement* elem, Widget*
     if (!widget) {
       bool desktop = bool_attr(elem, "desktop", false);
 
-      if (desktop)
+      if (desktop) {
         widget = new Window(Window::DesktopWindow);
-      else if (elem->Attribute("text"))
+      }
+      else if (elem->Attribute("text")) {
         widget = new Window(Window::WithTitleBar, m_xmlTranslator(elem, "text"));
-      else
+      }
+      else {
         widget = new Window(Window::WithoutTitleBar);
+      }
+    }
+
+    if (const char* help = elem->Attribute("help")) {
+      auto* helpButton = new MiniHelpButton(help);
+      widget->addChild(helpButton);
     }
   }
   else if (elem_name == "colorpicker") {