Symfony: Move ta Debug Bar

5 Tim Tutorials Mercredi 23 décembre 2009, 11:00

Trivial, mais depuis le temps que ca me démangeait! Et peut-être que je ne suis pas le seul, d’où ce petit billet.
Quand je développe sous Symfony, régulièrement, je dois fermer ma précieuse debug bar pour accéder à un lien en dessous. Du coup je suis obligé de recharger la page pour m’en servir de nouveau et depuis la 1.3, je m’en passe plus moi de ma debug bar.

J’ai donc pris 5min de mon temps pour faire rapido presto, un petit coup de jquery pour pouvoir bouger ma debug bar!

Tout simplement, j’ai juste utilisé un script jquery qui permet d’ajouter un event de type « drag » à un élément du DOM. Un petit coup de jquery pour l’utiliser sur la debug bar:

jQuery(document).ready(function($) {
  $("#sfWebDebugBar")
    .bind("dragstart",function( event ){
      $(this).css("right","auto")
    })
    .bind("drag",function( event ){
      $(this).css({
        top: event.offsetY,
        left: event.offsetX
      });
    });
});

Il ne reste plus qu’à faire un petit filtre pour inclure ces 2 scripts automatiquement à la volée en environnement de dev. J’ai tout mis dans un petit plugin disponible plus bas mais je vous détaille le code ici pour ceux qui voudraient juste jeter un œil:

class moveWebDebugBarFilter extends sfFilter
{
  public function execute($filterChain)
  {
    if ('dev' == sfConfig::get('sf_environment'))
    {
      $response = $this->getContext()->getResponse();
 
      $response->addJavascript('/moveDebugBarPlugin/js/jquery.event.drag-1.5.min.js','last');
      $response->addJavascript('/moveDebugBarPlugin/js/moveDebugBar.js','last');
    }
 
    $filterChain->execute();    
  }
}

que l’on rajoute dans notre filters.yml

rendering: ~
security:  ~
 
# insert your own filters here
moveDebugBar:
  class: moveWebDebugBarFilter
 
cache:     ~
execution: ~

Il ne reste plus qu’à télécharger:
moveDebugBarPlugin
et à lancer un petit:

php symfony plugin:publish-asset

Le plugin est très basique et rudimentaire évidemment, il ne sera pas encore sur le site de Symfony du coup. Mais si vous avez des idées d’améliorations ou d’enrichissements hésitez pas, sait-on jamais.

Voilà le rendu en vidéo, a noter que je l’ai testé avec Symfony 1.2 et 1.3:

Capture your screen in seconds

Crédit photo: http://www.flickr.com/photos/kaidohmaru/453263320/

Tags: debug, jquery, plugin, Symfony

5 Réponses

David 23 décembre 2009 à 11 h 29 min #

Yeahhh Cool, Trop fort le Tim ! Fallait y penser, c’est bien pratique!
oniryx 23 décembre 2009 à 15 h 39 min #

Cool! Merci pour le tuto et le plugin !!

Sinon il y aussi possibilité de cliquer sur le logo ‘Sf’ qui réduit la debug bar.
Tim 23 décembre 2009 à 16 h 33 min #

Mouarf, je savais même pas ça!

Merci bien, j’ai bien fait de pas perdre trop de temps sur ce gadget alors :p
Scalp 24 décembre 2009 à 11 h 34 min #

Salut !

Vraiment sympa ce petit plugin !! :)

Complètement par hasard tu n’aurais pas un site ou des ressources qui parle de l’utilisation de filters.yml justement ?

Merci :)
Tim 24 décembre 2009 à 13 h 55 min #

Hello,

Chez Lexik ils en ont parlé un peu:
http://www.lexik.fr/blog/symfony/symfony/symfony-utilisation-de-la-classe-sffilter-792

Mais si tu as des questions précises hésite pas!

Laisser un message

Cliquer ici pour annuler la réponse.