Add extension to slugify client name for selectors

Update Changelog

Rename extension from slugify to httplug_slugify

Rename extension from slugify to httplug_slugify

Rename extension from slugify to httplug_slugify

Author: sowbiba

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 The change log describes what is "Added", "Removed", "Changed" or "Fixed" between each release.
 
+## 1.14.1
+
+### Fixed
+
+- Profiler does not display stack when client name contains dots
+
 ## 1.14.0
 
 ### Added

Collector/Twig/HttpPlugSlugifyExtension.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Http\HttplugBundle\Collector\Twig;
+
+/**
+ * @author Ibrahima SOW <[email protected]>
+ */
+class HttpPlugSlugifyExtension extends \Twig_Extension
+{
+    /**
+     * {@inheritdoc}
+     *
+     * @return array
+     */
+    public function getFilters()
+    {
+        return [
+            new \Twig_SimpleFilter('httplug_slugify', [$this, 'slugify'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    /**
+     * @param $string
+     *
+     * @return string
+     */
+    public function slugify($string)
+    {
+        return preg_replace('/[^a-zA-Z0-9_-]/u', '_', $string);
+    }
+
+    public function getName()
+    {
+        return 'httplug_slugify';
+    }
+}

Resources/config/data-collector.xml

@@ -26,6 +26,10 @@
             <tag name="twig.extension" />
         </service>
 
+        <service id="httplug.collector.twig.httplug_slugify" class="Http\HttplugBundle\Collector\Twig\HttpPlugSlugifyExtension" public="false">
+            <tag name="twig.extension" />
+        </service>
+
         <!-- Discovered clients -->
         <service id="httplug.collector.auto_discovered_client" class="Http\HttplugBundle\Collector\ProfileClient" decorates="httplug.auto_discovery.auto_discovered_client" public="false">
             <argument type="service" id="httplug.collector.auto_discovered_client.inner"/>

Resources/views/stack.html.twig

@@ -1,4 +1,4 @@
-<div class="httplug-stack-header httplug-toggle" data-toggle="#httplug-{{ client }}-{{ id }}-details">
+<div class="httplug-stack-header httplug-toggle" data-toggle="#httplug-{{ client|httplug_slugify }}-{{ id }}-details">
     <div>
         {% if stack.failed %}
             <span class="httplug-stack-failed">✘</span>
@@ -23,14 +23,14 @@
         {% endif %}
     </div>
 </div>
-<div id="httplug-{{ client }}-{{ id }}-details" class="httplug-hidden">
+<div id="httplug-{{ client|httplug_slugify }}-{{ id }}-details" class="httplug-hidden">
     <div class="httplug-toolbar">
         <div class="httplug-copy-as-curl">
             <input readonly="readonly" type="text" value="{{ stack.curlCommand }}" />
             <button class="btn tooltip-toggle" aria-label="Copy to clipboard">Copy to clipboard</button>
         </div>
-        <button data-toggle="#httplug-{{ client }}-{{ id }}-stack" class="httplug-toggle btn" >Toggle plugin stack</button>
-        <button data-toggle="#httplug-{{ client }}-{{ id }}-details .httplug-http-body" class="httplug-toggle btn">Toggle body</button>
+        <button data-toggle="#httplug-{{ client|httplug_slugify }}-{{ id }}-stack" class="httplug-toggle btn" >Toggle plugin stack</button>
+        <button data-toggle="#httplug-{{ client|httplug_slugify }}-{{ id }}-details .httplug-http-body" class="httplug-toggle btn">Toggle body</button>
     </div>
     <div class="httplug-messages">
         <div class="httplug-message card">
@@ -43,7 +43,7 @@
         </div>
     </div>
     {% if stack.profiles %}
-        <div id="httplug-{{ client }}-{{ id }}-stack" class="httplug-hidden card">
+        <div id="httplug-{{ client|httplug_slugify }}-{{ id }}-stack" class="httplug-hidden card">
             {% for profile in stack.profiles %}
                 <h3 class="httplug-plugin-name">{{ profile.plugin }}</h3>
                 <div class="httplug-messages">