UX de la prochaine version

[felixgirault]

Avec le passage en manifest V3, on a l'occasion de revoir l'UI/UX de l'application, notamment via 2 options : les sidebars et les panneaux de devtools.

Sidebars

Les +

• Dans l'idée c'est exactement le concept de l'assistant, un panneau ouvrable à côté de la page

Les -

• Les sidebars sont limitées en largeur (largeur min sur chrome, largeur max sur FF). Par défaut elle est suffisante pour que le contenu soit lisible et l'interface utilisable, mais on pourrait vouloir une largeur plus confortable.
• Il n'y a pas de moyen natif d'ouvrir la sidebar dans une popup. On peut contourner cette limitation, mais pas de manière optimale (il est impossible de réouvrir la sidebar programmatiquement à la fermeture de la popup car elle ne peut être ouverte ou fermée qu'à la suite d'un jeu restreint d'actions utilisateur)
• Chrome et FF ont une implémentation différente des sidebars. Sur chrome, on peut en ouvrir une dédiée à chaque page. Sur FF aussi, mais on est obligé de définir une page par défaut car la sidebar reste ouverte lorsqu'on change d'onglet.
  Donc sur FF, soit on charge l'assistant sur chaque page qu'on visite une fois la sidebar ouverte (suboptimal mais compréhensible), soit on charge une page vide avec un bouton pour charger l'assistant sur l'onglet courant (assez étrange).

Devtools

Les +

• L'interface est équivalente aux sidebars, mais plus flexible en dimensionnement
• On peut nativement ouvrir les devtools dans une popup

Les -

• On ne peut pas ouvrir les devtools programmatiquement, par exemple au clic sur l'icône de l'extension. Il faut que l'utilisateur sache les ouvrir et atteindre le bon panneau.
  On peut mitiger ce problème en affichant une petite bulle d'info au clic, pour expliquer la marche à suivre
• On ne peut pas détecter la fermeture des devtools pour enlever les modifications dans la page. On peut détecter l'affichage ou non du panneau de l'assistant et mettre à jour la page en fonction, mais ça devient gênant si on a besoin de switcher entre plusieurs panneaux (DOM, console, ...). On ne pourrait pas voir à la fois les modifications dans la page et ces autres panneaux.
  On peut imaginer un bouton intégré dans la page pour annuler les modifications ?
• Sur chrome, il est possible d'afficher à la fois un panneau pour l'assistant et un second. Ça semble impossible sur FF.
• D'un point de vue technique, il semble quasiment impossible d'injecter des scripts dans la page sans se confronter à des problèmes de droits (les droits sur les domaines sont considérés optionnels en V3 et non autorisés par défaut).
  On peut mitiger ce problème en injectant les scripts via le manifest, mais sur chaque page, que l'assistant soit chargé ou non...

Inline

C'est le fonctionnement actuel de l'extension.

Les +

• On a la main sur le dimensionnement et le positionnement

Les -

• On injecte le panel dans la page à tester, ce qui engendre des conflits de markup et de style (on pourrait mitiger ces problèmes en utilisant un shadow dom)
• Le panel s'affiche en surimpression de la page et non à côté (modifier ce comportement serait risqué car on pourrait casser le layout de la page)

[felixgirault]

Après concertation avec l'équipe de développement, nous avons décidé de déplacer l'assistant dans une sidebar, qui semble offrir plus d'avantages que d'inconvénients (inconvénients qui pourraient de plus être résolus dans le futur).

Un des principaux avantages réside dans le fait de pouvoir afficher l'assistant à côté du contenu et non au-dessus, permettant par exemple d'avoir côte à côte l'assistant, la page auditée et les devtools :

Sur Firefox, un panel par défaut sera présent lorsque la sidebar est ouverte mais que l'assistant n'est pas encore chargé, sur le modèle suivant :

Cette interface permettra de lancer effectivement l'assistant pour la page courante.