[RESOLU] Barre d'adresse, largeur personnalisée (à défaut de : Barres d'outils supplémentaires)

[Gloops]

Ah, ben on y a mis le temps, mais on attaque le sujet
Effectivement l'attribut overflow, je n'y avais pas pensé.
D'ailleurs ça doit être un peu plus sioux que ça, puisque les éléments passent dans un autre contenant : c'est sûrement le programme qui prend ça en charge.
Mais le programme n'a pas prévu qu'il pourrait y avoir de nouveau la place, et qu'alors il pourrait faire revenir les éléments.
Le fait est que si je les mets en hidden, le programme peut n'avoir plus besoin de les éjecter vers un autre contenant, et ensuite quand je les remets visibles ils peuvent retrouver leur place. Tout dépend bien entendu dans quel ordre se font les opérations. Si le programme éjecte les éléments avant que leur style soit changé, c'est cuit.
On va se faire un petit dodo, et après on va essayer ça ...
Merci pour l'idée.

[Gloops]

Bon, raté. On dirait que Firefox retire les boutons avant que les styles soient appliqués. Toujours est-il que "overflow:hidden!important;" n'a rien changé.
Pour l'ajout de barres d'outils, apparemment il va falloir éplucher ça :
https://developer.mozilla.org/en-US/doc ... ar_Buttons
ce qui risque de prendre plus de cinq minutes ...

[Freddy]

Je ne comprend pas ce qui ne va pas ?
C'est bien ce comportement que tu souhaites (clique sur l'image, c'est un gif animé pour mieux se représenter ce que ça donne)


Logiquement en collant juste ce code dans le userchrome tout est ok.
Je vois pas trop pourquoi tu parles de

Toujours est-il que "overflow:hidden!important;" n'a rien changé.

Ou alors tu as d'autre code css dans ton fichier, ou extensions,... faudrait faire un essai sur un profil vierge si ce n'est pas déjà fait.

[Gloops]

Ben ... si je dis qu'il les enlève avant d'appliquer les styles, c'est qu'il ne les remet pas après.
Tu as fait comment alors ?

[Gloops]

Là maintenant voilà ce que j'ai comme userChrome.css :

Code : Tout sélectionner

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

 /*largeur minimum de la barre d'adresse*/
#main-window[sizemode="maximized"] #urlbar-container:hover {
    min-width: 800px !important;
    overflow:hidden!important;
}   

#main-window[sizemode="maximized"] #urlbar-container {
    min-width: 480px !important;
    width:480px !important;
    max-width: 480px ! important;
}   

Et une fois que j'ai agrandi la zone d'adresse en mettant la souris dessus, quand je l'enlève les boutons restent dans la liste déroulante de dépassement de la barre d'outils.
(sur Firefox 62.0.2, Windows 10, 64 bits, 1803)

Bon maintenant je vais remettre le reste de la feuille de style, parce que pas de barre d'état ça fait bizarre.

[Gloops]

Je reste impatient de découvrir si c'est bien #urlbar-container que tu as mis comme sélecteur, ça doit être décisif.
Toujours est-il que j'ai mijoté un truc peut-être un peu tarabiscoté, mais qui fonctionne.

Code : Tout sélectionner

#main-window[sizemode="maximized"] #nav-bar-customization-target:hover * 
:not(#urlbar) :not(.urlbar-input-box), #sidebar-button, #library-button {
   display:none;
}

#main-window[sizemode="maximized"] #urlbar {
    min-width: 480px !important;
    width:480px !important;
    max-width: 480px ! important;
}   


#main-window[sizemode="maximized"] #urlbar:hover {
    min-width: 900px !important;
    color:black!important;
    background-color:yellow;
    /*overflow:hidden!important;*/
}   

Et je peux dire que c'est pratique parce qu'avec la souris sur la zone d'adresse j'ai toute la place de lire l'URL, et une fois que j'enlève la souris les boutons reviennent à leur place. Pile comme dans ta vidéo.

[Freddy]

Je pense que le petit dodo d'hier soir devrait se transformer en bon gros dodo pour ce soir, et qu'avec de bonnes lunettes bien nettoyées tout devrait s'arranger
Regarde bien mon code (et copie/colle le bien - avec tes propres valeurs pour width bien sûr)
Il n'a rien à voir avec ton userchrome de ton avant-dernier post:
le mien a 3 règles et non pas deux.
et de plus la valeur du "overflow" n'est pas la même, ce n'est surtout pas "hidden", sans compter qu'il n'est pas placé avec le bon sélecteur.

[Gloops]

Alors il suffisait de mettre overflow:initial ?
Ah ben c'est du propre ...
Tu m'as tellement parlé du plein écran, que quand tu t'es mis à aborder le sujet proposé je n'ai pas réalisé, dommage.
Bah du coup, ça m'a permis de tracer un autre chemin pour arriver au même point. À cette occasion j'ai appris la pseudo-classe :not() qui permet d'exclure du champ d'application du style le sélecteur qu'on met dans les parenthèses.
J'ai aussi appris que pour parcourir le DOM du navigateur (hors site web) il faut afficher l'adresse chrome://browser/content/browser.xul
(J'aurais bien présenté ça sous forme d'URL mais le code correspondant n'est pas interprété, ce soir, que je le mette en minuscules ou en majuscules.)

À un moment j'ai évoqué deux autres ... comment dois-je dire, sujets, pistes ?

Le vrai sujet initial était la création de barres d'outils supplémentaires, j'ai évoqué une piste dans le deuxième message de la deuxième page. Ah c'est clair que si une extension pouvait proposer la mise en œuvre de ça comme ça se faisait à une époque, j'hésiterais moins longtemps.
Pour l'exécution de scripts sur le navigateur il existe des extensions, finalement l'occasion qui se profilait ne se concrétise pas donc on verra plus tard.

Je vais regarder de plus près comment fonctionne l'overflow. La solution que j'ai proposée fonctionne en deux temps :
1/ survol de la barre d'outils : les boutons disparaissent pour laisser la place à la zone d'adresse
2/ survol de la zone d'adresse : elle prend la place qui vient de lui être attribuée.
Concrètement la première partie va très vite donc il faut vraiment y aller doucement pour se rendre compte de cette décomposition.

[Freddy]

Tu m'as tellement parlé du plein écran, que quand tu t'es mis à aborder le sujet proposé je n'ai pas réalisé, dommage.

c'est toi qui a (mal) commencé avec ta confusion que tu expliques entre "plein écran" et "fenêtre maximisé"

À cette occasion j'ai appris la pseudo-classe :not() qui permet d'exclure du champ d'application du style le sélecteur qu'on met dans les parenthèses.

et y en a tant d'autres, le css évolue toujours plus, et c'est tant mieux, sauf qu'il faut avoir le temps et l'occasion de rester à la page, et c'est pas toujours évident.

J'ai aussi appris que pour parcourir le DOM du navigateur (hors site web) il faut afficher l'adresse chrome://browser/content/browser.xul

tu n'utilises pas ce merveilleux outil ?

Le vrai sujet initial était la création de barres d'outils supplémentaires

Bon alors je me suis penché un peu sur la question, et voilà ce qu'on peut obtenir:

Code : Tout sélectionner

/*==== Ajouter barre-boutons ====*/
#nav-bar-customization-target{
  overflow: visible !important;
  display: block;
}

#nav-bar-customization-target .webextension-browser-action,
#nav-bar-customization-target toolbarbutton,
#nav-bar-customization-target toolbaritem{
  vertical-align:middle!important;
}

#nav-bar-overflow-button{
  display: none !important;
}

[Gloops]

tu n'utilises pas ce merveilleux outil ?

Non je ne connaissais pas, est-ce qu'en y sélectionnant un élément ça peut aussi le faire clignoter ?

Le vrai sujet initial était la création de barres d'outils supplémentaires

Bon alors je me suis penché un peu sur la question, et voilà ce qu'on peut obtenir:

Code : Tout sélectionner

/*==== Ajouter barre-boutons ====*/
#nav-bar-customization-target{
  overflow: visible !important;
  display: block;
}

#nav-bar-customization-target .webextension-browser-action,
#nav-bar-customization-target toolbarbutton,
#nav-bar-customization-target toolbaritem{
  vertical-align:middle!important;
}

#nav-bar-overflow-button{
  display: none !important;
}

Hum, pour une nouvelle barre d'outils, j'ai l'impression qu'il faudra quand même chercher en dehors du userChrome.css

[Freddy]

Freddy a écrit : ↑
29 sept. 2018 12:49
tu n'utilises pas ce merveilleux outil ?

Non je ne connaissais pas, est-ce qu'en y sélectionnant un élément ça peut aussi le faire clignoter ?

ça l'encadre en pointillés rouges et ça le surligne dans le html.

Hum, pour une nouvelle barre d'outils, j'ai l'impression qu'il faudra quand même chercher en dehors du userChrome.css

ce qui m'étonne c'est que tu fais des demandes, et si on t'apporte une solution tu as l'air d'hésiter à l'appliquer.
Les codes CSS n'engendrent pas de perturbations, et surtout rien de grave; tout au plus si l'affichage ne revient pas à son état original une fois le code supprimé, on ferme Fx et on le redémarre, y'a vraiment pas de quoi hésité, faut essayer, je dirai même, faut essayer dans tous les sens

Maintenant moi je te propose un code qui peut répondre à ta demande (je pense), je le remet avec un ptit ajout pour agrndir la barre d'adresse en fenêtre maxi, car quand on colle plein de boutons elle fini par être vraiment petite.
Voilà ce que ça donne chez moi, en fenêtre maxi:


Et si on rédimensionne la fenêtre, le contenu de la barre s'adapte automatiquement pour que tous les boutons restent affichés, à savoir chez moi, voilà ce que ça donne si la largeur de la fenêtre est réduite complètement:


Et voilà pour le code avec son ptit ajout:

Code : Tout sélectionner

/*==== Ajouter barre-boutons ====*/

#nav-bar-customization-target{
  overflow: visible !important;
  display: block;
}

#nav-bar-customization-target .webextension-browser-action,
#nav-bar-customization-target toolbarbutton,
#nav-bar-customization-target toolbaritem{
  vertical-align:middle!important;
}

#nav-bar-overflow-button{
  display: none !important;
}

/* imposer la longueur de la barre d'adresse*/ 
#main-window[sizemode="maximized"] #urlbar-container {
    min-width: 800px !important;   
} 

[Gloops]

Ah oui j'ai fini par voir le pointillé rouge ...
Ce n'est pas que j'hésite à appliquer, mais que je voudrais créer une nouvelle barre d'outils.
J'ai essayé, ce que tu as dit, ça secoue effectivement des trucs, mais ça ne crée pas de nouvelles barres d'outils.
Quand je fais un clic droit sur une barre d'outils ça affiche la liste donc c'est vite vu, il y en a deux :

• Barre de menus
• Barre personnelle

Ah d'ailleurs curieusement, la barre d'adresse n'est pas comptée dedans. Mais il est vrai qu'un navigateur sans barre d'adresse, c'est un peu particulier comme concept.

La doc que j'ai indiquée dit les choses bien : c'est facile à faire, mais c'est aussi facile de le faire mal

Là je suis sur les webparts, alors pour se concentrer sur une barre d'outils supplémentaire, on verra un peu plus tard. Sinon je vais faire un bête copier/coller, et je vais oublier un truc, ça va donner une rencontre du troisième type avec Firefox ...