Move containing <div> rendering of UIControl to new template, add new custom Twig tag to render Views and allow selected segment of segment selector to be determined by PHP code.

8 files changed, 327 insertions, 146 deletions

diff --git a/core/Twig.php b/core/Twig.php
index 3dec9d0a7c..c927e82e92 100644
--- a/core/Twig.php
+++ b/core/Twig.php
@@ -11,6 +11,7 @@ namespace Piwik;
 use Exception;
 use Piwik\Translate;
 use Piwik\Visualization\Sparkline;
+use Piwik\View\RenderTokenParser;
 use Twig_Environment;
 use Twig_Extension_Debug;
 use Twig_Loader_Chain;
@@ -71,6 +72,8 @@ class Twig
         $this->addFunction_postEvent();
         $this->addFunction_isPluginLoaded();
         $this->addFunction_getJavascriptTranslations();
+
+        $this->twig->addTokenParser(new RenderTokenParser());
     }
 
     protected function addFunction_getJavascriptTranslations()
diff --git a/core/View.php b/core/View.php
index ba60198ddd..b0d8e5562f 100644
--- a/core/View.php
+++ b/core/View.php
@@ -150,11 +150,13 @@ class View implements ViewInterface
     /**
      * Returns the variables to bind to the template when rendering.
      *
+     * @param array $override Template variable override values. Mainly useful
+     *                        when including View templates in other templates.
      * @return array
      */
-    public function getTemplateVars()
+    public function getTemplateVars($override = array())
     {
-        return $this->templateVars;
+        return $override + $this->templateVars;
     }
 
     /**
diff --git a/core/View/RenderTokenParser.php b/core/View/RenderTokenParser.php
new file mode 100644
index 0000000000..14f1eb6806
--- /dev/null
+++ b/core/View/RenderTokenParser.php
@@ -0,0 +1,82 @@
+<?php
+/**
+ * Piwik - Open source web analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+namespace Piwik\View;
+
+use Twig_Token;
+use Twig_TokenParser;
+use Twig_Node_Expression_MethodCall;
+use Twig_Node_Expression_Array;
+use Twig_Node_Include;
+use Exception;
+
+/**
+ * Defines a new Twig tag that will render a Piwik View.
+ *
+ * Use the tag like this:
+ *
+ *     {% render theView %}
+ *
+ * where `theView` is a variable referencing a View instance.
+ */
+class RenderTokenParser extends Twig_TokenParser
+{
+    /**
+     * Parses the Twig stream and creates a Twig_Node_Include instance that includes
+     * the View's template.
+     *
+     * @return Twig_Node_Include
+     */
+    public function parse(Twig_Token $token)
+    {
+        $parser = $this->parser;
+        $stream = $parser->getStream();
+
+        $view = $parser->getExpressionParser()->parseExpression();
+
+        $variablesOverride = null;
+        if ($stream->nextIf(Twig_Token::NAME_TYPE, 'with')) {
+            $variablesOverride = $this->parser->getExpressionParser()->parseExpression();
+        }
+
+        $stream->expect(Twig_Token::BLOCK_END_TYPE);
+
+        $viewTemplateExpr = new Twig_Node_Expression_MethodCall(
+            $view,
+            'getTemplateFile',
+            new Twig_Node_Expression_Array(array(), $token->getLine()),
+            $token->getLine()
+        );
+
+        $variablesOverrideExpr = $variablesOverride === null ? array() : array($variablesOverride);
+        $variablesExpr = new Twig_Node_Expression_MethodCall(
+            $view,
+            'getTemplateVars',
+            new Twig_Node_Expression_Array($variablesOverrideExpr, $token->getLine()),
+            $token->getLine()
+        );
+
+        return new Twig_Node_Include(
+            $viewTemplateExpr,
+            $variablesExpr,
+            $only = false,
+            $ignoreMissing = false,
+            $token->getLine()
+        );
+    }
+
+    /**
+     * Returns the tag identifier.
+     *
+     * @return string
+     */
+    public function getTag()
+    {
+        return 'render';
+    }
+}
\ No newline at end of file
diff --git a/core/View/UIControl.php b/core/View/UIControl.php
index 90d0b0b331..39994aa828 100644
--- a/core/View/UIControl.php
+++ b/core/View/UIControl.php
@@ -8,6 +8,9 @@
  */
 namespace Piwik\View;
 
+use Piwik\View;
+use Exception;
+
 /**
  * Base type of UI controls.
  *
@@ -25,12 +28,99 @@ class UIControl extends \Piwik\View
     const TEMPLATE = '';
 
     /**
+     * Holds the array of values that are passed to the UIControl JavaScript class.
+     *
+     * @var array
+     */
+    public $clientSideProperties = array();
+
+    /**
+     * Holds an array of values that are passed to the UIControl JavaScript class. These values
+     * differ from those in {@link $clientSideProperties} in that they are meant to passed as
+     * request parameters when the JavaScript code makes an AJAX request.
+     *
+     * @var array
+     */
+    public $clientSideParameters = array();
+
+    /**
+     * The CSS class that is used to map the root element of this control with the JavaScript class.
+     *
+     * This field must be set prior to rendering.
+     *
+     * @var string
+     */
+    public $cssIdentifier = null;
+
+    /**
+     * The name of the JavaScript class that handles the behavior of this control.
+     *
+     * The JavaScript class must exist in the **piwik/UI** JavaScript module (so it will exist in
+     * `window.piwik.UI`).
+     *
+     * This field must be set prior to rendering.
+     *
+     * @var string
+     */
+    public $jsClass = null;
+
+    /**
+     * Extra CSS class(es) for the root element.
+     *
+     * @var string
+     */
+    public $cssClass = "";
+
+    /**
+     * Whether we are currently rendering the containing div or not.
+     */
+    private $renderingContainer = false;
+
+    /**
      * Constructor.
      */
-    public function __construct() {
+    public function __construct()
+    {
         parent::__construct(static::TEMPLATE);
 
         $this->clientSideProperties = array();
         $this->clientSideParameters = array();
     }
+
+    /**
+     * Renders the control view within a containing <div> that is used by the UIControl JavaScript
+     * class.
+     *
+     * @return string
+     */
+    public function render()
+    {
+        if ($this->cssIdentifier === null) {
+            throw new Exception("All UIControls must set a cssIdentifier property");
+        }
+
+        if ($this->jsClass === null) {
+            throw new Exception("All UIControls must set a jsClass property");
+        }
+
+        if ($this->renderingContainer) {
+            return parent::render();
+        } else {
+            $this->renderingContainer = true;
+
+            $surroundingDivView = new View("@CoreHome\_uiControl");
+            $surroundingDivView->clientSideProperties = $this->clientSideProperties;
+            $surroundingDivView->clientSideParameters = $this->clientSideParameters;
+            $surroundingDivView->implView = $this;
+            $surroundingDivView->cssIdentifier = $this->cssIdentifier;
+            $surroundingDivView->cssClass = $this->cssClass;
+            $surroundingDivView->jsClass = $this->jsClass;
+
+            $result = $surroundingDivView->render();
+
+            $this->renderingContainer = false;
+
+            return $result;
+        }
+    }
 }
\ No newline at end of file
diff --git a/plugins/CoreHome/templates/_uiControl.twig b/plugins/CoreHome/templates/_uiControl.twig
new file mode 100644
index 0000000000..f1d2343056
--- /dev/null
+++ b/plugins/CoreHome/templates/_uiControl.twig
@@ -0,0 +1,6 @@
+<div class="{{ cssIdentifier }} {{ cssClass }}"
+     data-props="{{ clientSideProperties|json_encode }}"
+     data-params="{{ clientSideParameters|json_encode }}">
+     {% render implView %}
+</div>
+<script>$(document).ready(function () { require('piwik/UI').{{ jsClass }}.initElements(); });</script>
\ No newline at end of file
diff --git a/plugins/SegmentEditor/SegmentSelectorControl.php b/plugins/SegmentEditor/SegmentSelectorControl.php
index d1ec4749cc..9225b4d27d 100644
--- a/plugins/SegmentEditor/SegmentSelectorControl.php
+++ b/plugins/SegmentEditor/SegmentSelectorControl.php
@@ -29,10 +29,14 @@ class SegmentSelectorControl extends UIControl
     {
         parent::__construct();
 
+        $this->jsClass = "SegmentSelectorControl";
+        $this->cssIdentifier = "segmentEditorPanel";
+        $this->cssClass = "js-autoLeftPanel";
+
         $this->isSuperUser = Access::getInstance()->hasSuperUserAccess();
         $this->idSite = Common::getRequestVar('idSite', false, 'int');
 
-        $currentSelectedSegment = Common::getRequestVar('segment', false, 'string');
+        $this->selectedSegment = Common::getRequestVar('segment', false, 'string');
 
         $segments = APIMetadata::getInstance()->getSegmentsMetadata($this->idSite);
 
@@ -57,7 +61,7 @@ class SegmentSelectorControl extends UIControl
         foreach ($savedSegments as &$savedSegment) {
             $savedSegment['name'] = Common::sanitizeInputValue($savedSegment['name']);
 
-            if (!empty($currentSelectedSegment) && $currentSelectedSegment == $savedSegment['definition']) {
+            if (!empty($this->selectedSegment) && $this->selectedSegment == $savedSegment['definition']) {
                 $this->nameOfCurrentSegment = $savedSegment['name'];
                 $this->clientSideProperties['isSegmentNotAppliedBecauseBrowserArchivingIsDisabled']
                     = $this->wouldApplySegment($savedSegment) ? 0 : 1;
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index 162e35e107..f8c1d64718 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -1086,13 +1086,13 @@ $(document).ready(function() {
             ajaxHandler.send(true);
         };
 
-        var segmentFromRequest = broadcast.getValueFromHash('segment');
-        if(segmentFromRequest.length == 0) {
-            segmentFromRequest = broadcast.getValueFromUrl('segment');
-        }
+        var segmentFromRequest = self.props.selectedSegment
+                              || broadcast.getValueFromHash('segment')
+                              || broadcast.getValueFromUrl('segment');
         if($.browser.mozilla) {
             segmentFromRequest = decodeURIComponent(segmentFromRequest);
         }
+        
         this.impl = new Segmentation({
             "target"   : this.$element.find(".segmentListContainer"),
             "segmentAccess" : "write",
diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig
index 85cf139106..9dfb59a7d5 100644
--- a/plugins/SegmentEditor/templates/_segmentSelector.twig
+++ b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -1,154 +1,148 @@
-<div class="segmentEditorPanel js-autoLeftPanel"
-     data-props="{{ clientSideProperties|json_encode }}"
-     data-params="{{ clientSideParameters|json_encode }}">
-    <div class="SegmentEditor" style="display:none;">
-        <div class="segmentationContainer listHtml">
-            <span class="segmentationTitle"></span>
+<div class="SegmentEditor" style="display:none;">
+    <div class="segmentationContainer listHtml">
+        <span class="segmentationTitle"></span>
 
+        <ul class="submenu">
+            <li>{{ 'SegmentEditor_SelectSegmentOfVisitors'|translate }}
+                <div class="segmentList">
+                    <ul>
+                    </ul>
+                </div>
+            </li>
+        </ul>
+        {% if authorizedToCreateSegments %}
+            <a class="add_new_segment">{{ 'SegmentEditor_AddNewSegment'|translate }}</a>
+        {% else %}
             <ul class="submenu">
-                <li>{{ 'SegmentEditor_SelectSegmentOfVisitors'|translate }}
-                    <div class="segmentList">
-                        <ul>
-                        </ul>
-                    </div>
-                </li>
+            <li> <span class='youMustBeLoggedIn'>{{ 'SegmentEditor_YouMustBeLoggedInToCreateSegments'|translate }}
+                <br/>&rsaquo; <a href='index.php?module={{ loginModule }}'>{{ 'Login_LogIn'|translate }}</a> </span>
+            </li>
             </ul>
-            {% if authorizedToCreateSegments %}
-                <a class="add_new_segment">{{ 'SegmentEditor_AddNewSegment'|translate }}</a>
-            {% else %}
-                <ul class="submenu">
-                <li> <span class='youMustBeLoggedIn'>{{ 'SegmentEditor_YouMustBeLoggedInToCreateSegments'|translate }}
-                    <br/>&rsaquo; <a href='index.php?module={{ loginModule }}'>{{ 'Login_LogIn'|translate }}</a> </span>
-                </li>
-                </ul>
-            {% endif %}
-        </div>
+        {% endif %}
+    </div>
 
-        <div class="initial-state-rows">{# no space here important for jquery #}<div class="segment-add-row initial"><div>
-            <span>+ {{ 'SegmentEditor_DragDropCondition'|translate|raw }}</span>
-        </div></div>
-        <div class="segment-and">{{ 'SegmentEditor_OperatorAND'|translate|raw }}</div>
-        <div class="segment-add-row initial"><div>
-            <span>+ {{ 'SegmentEditor_DragDropCondition'|translate|raw }}</span>
-        </div></div>
-        </div>
+    <div class="initial-state-rows">{# no space here important for jquery #}<div class="segment-add-row initial"><div>
+        <span>+ {{ 'SegmentEditor_DragDropCondition'|translate|raw }}</span>
+    </div></div>
+    <div class="segment-and">{{ 'SegmentEditor_OperatorAND'|translate|raw }}</div>
+    <div class="segment-add-row initial"><div>
+        <span>+ {{ 'SegmentEditor_DragDropCondition'|translate|raw }}</span>
+    </div></div>
+    </div>
 
-        <div class="segment-row-inputs">
-            <div class="segment-input metricListBlock">
-                <select title="{{ 'SegmentEditor_ChooseASegment'|translate }}" class="metricList">
-                    {% for category,segmentsInCategory in segmentsByCategory %}
-                    <optgroup label="{{ category }}">
-                        {% for segmentInCategory in segmentsInCategory %}
-                            <option data-type="{{ segmentInCategory.type }}" value="{{ segmentInCategory.segment }}">{{ segmentInCategory.name }}</option>
-                        {% endfor %}
-                    </optgroup>
+    <div class="segment-row-inputs">
+        <div class="segment-input metricListBlock">
+            <select title="{{ 'SegmentEditor_ChooseASegment'|translate }}" class="metricList">
+                {% for category,segmentsInCategory in segmentsByCategory %}
+                <optgroup label="{{ category }}">
+                    {% for segmentInCategory in segmentsInCategory %}
+                        <option data-type="{{ segmentInCategory.type }}" value="{{ segmentInCategory.segment }}">{{ segmentInCategory.name }}</option>
                     {% endfor %}
-                </select>
-            </div>
-            <div class="segment-input metricMatchBlock">
-                <select title="{{ 'General_Matches'|translate }}">
-                    <option value="==">{{ 'General_OperationEquals'|translate }}</option>
-                    <option value="!=">{{ 'General_OperationNotEquals'|translate }}</option>
-                    <option value="<=">{{ 'General_OperationAtMost'|translate }}</option>
-                    <option value=">=">{{ 'General_OperationAtLeast'|translate }}</option>
-                    <option value="<">{{ 'General_OperationLessThan'|translate }}</option>
-                    <option value=">">{{ 'General_OperationGreaterThan'|translate }}</option>
-                    <option value="=@">{{ 'General_OperationContains'|translate }}</option>
-                    <option value="!@">{{ 'General_OperationDoesNotContain'|translate }}</option>
-                </select>
-            </div>
-            <div class="segment-input metricValueBlock">
-                <input type="text" title="{{ 'General_Value'|translate }}">
-            </div>
-            <div class="clear"></div>
+                </optgroup>
+                {% endfor %}
+            </select>
         </div>
-        <div class="segment-rows">
-            <div class="segment-row">
-                <a href="#" class="segment-close"></a>
-                <a href="#" class="segment-loading"></a>
-            </div>
+        <div class="segment-input metricMatchBlock">
+            <select title="{{ 'General_Matches'|translate }}">
+                <option value="==">{{ 'General_OperationEquals'|translate }}</option>
+                <option value="!=">{{ 'General_OperationNotEquals'|translate }}</option>
+                <option value="<=">{{ 'General_OperationAtMost'|translate }}</option>
+                <option value=">=">{{ 'General_OperationAtLeast'|translate }}</option>
+                <option value="<">{{ 'General_OperationLessThan'|translate }}</option>
+                <option value=">">{{ 'General_OperationGreaterThan'|translate }}</option>
+                <option value="=@">{{ 'General_OperationContains'|translate }}</option>
+                <option value="!@">{{ 'General_OperationDoesNotContain'|translate }}</option>
+            </select>
         </div>
-        <div class="segment-or">{{ 'SegmentEditor_OperatorOR'|translate }}</div>
-        <div class="segment-add-or"><div>
-                {% set orCondition %}<span>{{ 'SegmentEditor_OperatorOR'|translate }}</span>{% endset %}
-                <a href="#"> + {{ 'SegmentEditor_AddANDorORCondition'|translate(orCondition)|raw }} </a>
-            </div>
+        <div class="segment-input metricValueBlock">
+            <input type="text" title="{{ 'General_Value'|translate }}">
         </div>
-        <div class="segment-and">{{ 'SegmentEditor_OperatorAND'|translate }}</div>
-        <div class="segment-add-row"><div>
-                {% set andCondition %}<span>{{ 'SegmentEditor_OperatorAND'|translate }}</span>{% endset %}
-                <a href="#">+ {{ 'SegmentEditor_AddANDorORCondition'|translate(andCondition)|raw }}</a>
-            </div>
+        <div class="clear"></div>
+    </div>
+    <div class="segment-rows">
+        <div class="segment-row">
+            <a href="#" class="segment-close"></a>
+            <a href="#" class="segment-loading"></a>
         </div>
-        <div class="segment-element">
-            <div class="segment-nav">
-                <h4 class="visits"><span class="available_segments"><strong>
-                    <select class="available_segments_select"></select>
-                </strong></span></h4>
-                <div class="scrollable">
-                <ul>
-                    {% for category,segmentsInCategory in segmentsByCategory %}
-                    <li data="visit">
-                        <a class="metric_category" href="#">{{ category }}</a>
-                        <ul style="display:none;">
-                            {% for segmentInCategory in segmentsInCategory %}
-                                <li data-metric="{{ segmentInCategory.segment }}"><a class="ddmetric" href="#">{{ segmentInCategory.name }}</a></li>
-                            {% endfor %}
-                        </ul>
-                    </li>
-                    {% endfor %}
-                </ul>
-                </div>
-                <div class="custom_select_search">
-                    <a href="#"></a>
-                    <input type="text" aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="inp ui-autocomplete-input segmentSearch" value="{{ 'General_Search'|translate }}" length="15">
-                </div>
+    </div>
+    <div class="segment-or">{{ 'SegmentEditor_OperatorOR'|translate }}</div>
+    <div class="segment-add-or"><div>
+            {% set orCondition %}<span>{{ 'SegmentEditor_OperatorOR'|translate }}</span>{% endset %}
+            <a href="#"> + {{ 'SegmentEditor_AddANDorORCondition'|translate(orCondition)|raw }} </a>
+        </div>
+    </div>
+    <div class="segment-and">{{ 'SegmentEditor_OperatorAND'|translate }}</div>
+    <div class="segment-add-row"><div>
+            {% set andCondition %}<span>{{ 'SegmentEditor_OperatorAND'|translate }}</span>{% endset %}
+            <a href="#">+ {{ 'SegmentEditor_AddANDorORCondition'|translate(andCondition)|raw }}</a>
+        </div>
+    </div>
+    <div class="segment-element">
+        <div class="segment-nav">
+            <h4 class="visits"><span class="available_segments"><strong>
+                <select class="available_segments_select"></select>
+            </strong></span></h4>
+            <div class="scrollable">
+            <ul>
+                {% for category,segmentsInCategory in segmentsByCategory %}
+                <li data="visit">
+                    <a class="metric_category" href="#">{{ category }}</a>
+                    <ul style="display:none;">
+                        {% for segmentInCategory in segmentsInCategory %}
+                            <li data-metric="{{ segmentInCategory.segment }}"><a class="ddmetric" href="#">{{ segmentInCategory.name }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </li>
+                {% endfor %}
+            </ul>
             </div>
-            <div class="segment-content">
-                <div class="segment-top" {% if not isSuperUser %}style="display:none"{% endif %}>
-                    {{ 'SegmentEditor_ThisSegmentIsVisibleTo'|translate }} <span class="enable_all_users"><strong>
-                            <select class="enable_all_users_select">
-                                <option selected="1" value="0">{{ 'SegmentEditor_VisibleToMe'|translate }}</option>
-                                <option value="1">{{ 'SegmentEditor_VisibleToAllUsers'|translate }}</option>
-                            </select>
-                        </strong></span>
+            <div class="custom_select_search">
+                <a href="#"></a>
+                <input type="text" aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="inp ui-autocomplete-input segmentSearch" value="{{ 'General_Search'|translate }}" length="15">
+            </div>
+        </div>
+        <div class="segment-content">
+            <div class="segment-top" {% if not isSuperUser %}style="display:none"{% endif %}>
+                {{ 'SegmentEditor_ThisSegmentIsVisibleTo'|translate }} <span class="enable_all_users"><strong>
+                        <select class="enable_all_users_select">
+                            <option selected="1" value="0">{{ 'SegmentEditor_VisibleToMe'|translate }}</option>
+                            <option value="1">{{ 'SegmentEditor_VisibleToAllUsers'|translate }}</option>
+                        </select>
+                    </strong></span>
 
-                    {{ 'SegmentEditor_SegmentIsDisplayedForWebsite'|translate }}<span class="visible_to_website"><strong>
-                            <select class="visible_to_website_select">
-                                <option selected="" value="{{ idSite }}">{{ 'SegmentEditor_SegmentDisplayedThisWebsiteOnly'|translate }}</option>
-                                <option value="0">{{ 'SegmentEditor_SegmentDisplayedAllWebsites'|translate }}</option>
-                            </select>
-                        </strong></span>
-                    {{ 'General_And'|translate }} <span class="auto_archive"><strong>
-                            <select class="auto_archive_select">
-                                <option selected="1" value="0">{{ 'SegmentEditor_AutoArchiveRealTime'|translate }} {{ 'General_DefaultAppended'|translate }}</option>
-                                <option value="1">{{ 'SegmentEditor_AutoArchivePreProcessed'|translate }} </option>
-                            </select>
-                        </strong></span>
+                {{ 'SegmentEditor_SegmentIsDisplayedForWebsite'|translate }}<span class="visible_to_website"><strong>
+                        <select class="visible_to_website_select">
+                            <option selected="" value="{{ idSite }}">{{ 'SegmentEditor_SegmentDisplayedThisWebsiteOnly'|translate }}</option>
+                            <option value="0">{{ 'SegmentEditor_SegmentDisplayedAllWebsites'|translate }}</option>
+                        </select>
+                    </strong></span>
+                {{ 'General_And'|translate }} <span class="auto_archive"><strong>
+                        <select class="auto_archive_select">
+                            <option selected="1" value="0">{{ 'SegmentEditor_AutoArchiveRealTime'|translate }} {{ 'General_DefaultAppended'|translate }}</option>
+                            <option value="1">{{ 'SegmentEditor_AutoArchivePreProcessed'|translate }} </option>
+                        </select>
+                    </strong></span>
 
-                </div>
-                <h3>{{ 'General_Name'|translate }}: <span  class="segmentName"></span> <a class="editSegmentName" href="#">{{ 'General_Edit'|translate|lower }}</a></h3>
-            </div>
-            <div class="segment-footer">
-                <span class="segmentFooterNote">The Segment Editor was <a class='crowdfundingLink' href='http://crowdfunding.piwik.org/custom-segments-editor/' target='_blank'>crowdfunded</a> with the awesome support of 80 companies and Piwik users worldwide!</span>
-                <a class="delete" href="#">{{ 'General_Delete'|translate }}</a>
-                <a class="close" href="#">{{ 'General_Close'|translate }}</a>
-                <button class="saveAndApply">{{ 'SegmentEditor_SaveAndApply'|translate }}</button>
             </div>
+            <h3>{{ 'General_Name'|translate }}: <span  class="segmentName"></span> <a class="editSegmentName" href="#">{{ 'General_Edit'|translate|lower }}</a></h3>
+        </div>
+        <div class="segment-footer">
+            <span class="segmentFooterNote">The Segment Editor was <a class='crowdfundingLink' href='http://crowdfunding.piwik.org/custom-segments-editor/' target='_blank'>crowdfunded</a> with the awesome support of 80 companies and Piwik users worldwide!</span>
+            <a class="delete" href="#">{{ 'General_Delete'|translate }}</a>
+            <a class="close" href="#">{{ 'General_Close'|translate }}</a>
+            <button class="saveAndApply">{{ 'SegmentEditor_SaveAndApply'|translate }}</button>
         </div>
-    </div>
-    <div class="segmentListContainer"></div>
-    <div class="ui-confirm segment-delete-confirm">
-        <h2>{{ 'SegmentEditor_AreYouSureDeleteSegment'|translate }}</h2>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-    </div>
-    <div class="ui-confirm pleaseChangeBrowserAchivingDisabledSetting">
-        <h2>{{ 'SegmentEditor_SegmentNotApplied'|translate(nameOfCurrentSegment)|raw }}</h2>
-        {% set segmentSetting %}{{ 'SegmentEditor_AutoArchivePreProcessed'|translate }}{% endset %}
-        <p class="description">{{ 'SegmentEditor_SegmentNotAppliedExplanation'|translate(nameOfCurrentSegment, 'browser_archiving_disabled_enforce', segmentSetting)|raw }}</p>
-        <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
     </div>
 </div>
-
-<script type="text/javascript">$(document).ready(function () { require('piwik/UI').SegmentSelectorControl.initElements(); });</script>
\ No newline at end of file
+<div class="segmentListContainer"></div>
+<div class="ui-confirm segment-delete-confirm">
+    <h2>{{ 'SegmentEditor_AreYouSureDeleteSegment'|translate }}</h2>
+    <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
+    <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
+</div>
+<div class="ui-confirm pleaseChangeBrowserAchivingDisabledSetting">
+    <h2>{{ 'SegmentEditor_SegmentNotApplied'|translate(nameOfCurrentSegment)|raw }}</h2>
+    {% set segmentSetting %}{{ 'SegmentEditor_AutoArchivePreProcessed'|translate }}{% endset %}
+    <p class="description">{{ 'SegmentEditor_SegmentNotAppliedExplanation'|translate(nameOfCurrentSegment, 'browser_archiving_disabled_enforce', segmentSetting)|raw }}</p>
+    <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
+</div>
\ No newline at end of file