Le nouveau foyer de Tailscale sur macOS

• Pour résoudre le problème des icônes de la barre de menus masquées par l’encoche des MacBook, Tailscale introduit une nouvelle interface fenêtrée pour macOS
• Au départ, l’entreprise utilisait une solution provisoire avec des notifications pop-up lorsque l’icône se retrouvait cachée derrière l’encoche, mais elle passe désormais à une UI autonome complète
• La nouvelle interface est activée par défaut à partir de la version 1.96.2 et présente visuellement des fonctions clés comme Taildrop, Exit Node et la découverte des appareils
• La logique de détection du masquage de l’icône de la barre de menus est toujours conservée afin d’éviter que les utilisateurs ne perdent l’icône de vue
• Ce changement améliore l’expérience utilisateur sur macOS et devrait ensuite s’étendre au développement d’une interface similaire pour Windows

---

Le problème de l’encoche des MacBook et la nouvelle interface macOS de Tailscale

• Tailscale est censé fonctionner de façon presque invisible lorsqu’il connecte tous les appareils d’un utilisateur, mais le design à encoche de certains MacBook faisait disparaître son icône de la barre de menus
• Pour y remédier, deux approches ont été introduites : un système de notification temporaire et une nouvelle interface fenêtrée pour macOS
• Au début, l’approche consistait à avertir l’utilisateur lorsque l’icône était cachée derrière l’encoche, puis une UI autonome complète a été ajoutée pour améliorer l’accessibilité et les fonctionnalités
• La nouvelle interface est activée par défaut à partir de la version 1.96.2 et présente visuellement des fonctions clés comme Taildrop, Exit Node et la découverte des appareils
• Cette évolution améliore l’expérience utilisateur sur macOS et devrait mener à terme au développement d’une interface similaire pour Windows

Le problème des icônes de la barre de menus causé par l’encoche

• À partir du MacBook Pro 2021, l’apparition d’une encoche au centre de la partie supérieure de l’écran a entraîné un phénomène où les icônes de la barre de menus se retrouvent masquées dans la zone de l’encoche
  • Lorsqu’il y a trop d’icônes à afficher dans la barre de menus, certaines disparaissent derrière l’encoche et deviennent impossibles à cliquer
  • macOS ne fournit ni notification, ni menu de débordement, ni fonction de réorganisation des icônes pour ce cas de figure
• Apple a proposé quelques solutions indirectes, mais elles restent incomplètes
  • déplacer les icônes système vers le Control Center
  • ou ajuster le ratio d’affichage avec l’option « Scale to fit below camera »
• Des applications tierces comme ICE et Bartender peuvent gérer les icônes de la barre de menus, mais elles ajoutent de la complexité et consomment des ressources supplémentaires
• Un ingénieur de Tailscale explique que « lorsqu’on s’enregistre comme application de barre de menus, macOS décide arbitrairement de la position », ce qui échappe au contrôle des développeurs
• Après l’arrivée de l’encoche, des utilisateurs ont signalé que « Tailscale ne s’exécute pas », alors qu’en réalité l’icône était simplement cachée derrière l’encoche

Détection de l’icône et notifications aux utilisateurs

• Grâce aux données occlusionState de macOS, il est possible de détecter si l’icône de Tailscale est masquée
• Même lorsque l’icône est cachée, un message pop-up peut être affiché pour avertir l’utilisateur
  • Message : « L’icône Tailscale est cachée derrière l’encoche. Veuillez réorganiser ou supprimer d’autres icônes. »
• Cet avertissement n’est pas parfait et peut s’afficher à tort à cause de changements d’écran, de l’ouverture ou fermeture du capot, ou du branchement d’un moniteur externe
• Il a néanmoins permis pendant un certain temps d’atténuer le problème des utilisateurs qui « ne trouvent pas les réglages Tailscale »

Logique de détection de l’encoche basée sur du code Swift

• Du code Swift a été implémenté pour détecter quand l’application est masquée
  • surveillance de NSWindow.didChangeOcclusionStateNotification afin de vérifier l’état de visibilité de l’icône
  • si la valeur occlusionState.contains(.visible) est false, l’icône est considérée comme masquée
• Dans la nouvelle application fenêtrée, ce code n’est plus nécessaire, mais il peut toujours fonctionner si l’option masquer l’icône du Dock est activée

La nouvelle interface fenêtrée pour macOS

• L’UI fenêtrée activée par défaut à partir de Tailscale 1.96.2 peut fonctionner en parallèle de l’application de barre de menus
  • elle peut être lancée depuis le Dock ou via la recherche Spotlight
  • elle présente visuellement les fonctions principales, comme la liste des appareils du tailnet, l’état de connexion, le transfert de fichiers (Taildrop) et la sélection d’un Exit Node
• Principales fonctions

  • Découverte des appareils et affichage de l’état de connexion

  • Ping, copie d’IP et envoi via Taildrop

  • Recommandations d’Exit Node selon la latence, les performances et l’emplacement

  • Signalement des erreurs par un point rouge sur l’icône du Dock

  • Mode « mini-player » minimisé

    • Visite guidée des fonctions lors de l’installation ou d’une mise à jour
    • L’équipe recueille les retours des utilisateurs pour améliorer l’interface et développe aussi une UI similaire pour Windows
    • Tailscale souligne sa volonté de préserver, en plus de l’efficacité fonctionnelle, une forme de « functional whimsy »