Remove use of ID in segment selector HTML.

7 files changed, 185 insertions, 188 deletions

diff --git a/plugins/Morpheus/stylesheets/components.less b/plugins/Morpheus/stylesheets/components.less
index 1d64944944..8875d64f4d 100644
--- a/plugins/Morpheus/stylesheets/components.less
+++ b/plugins/Morpheus/stylesheets/components.less
@@ -160,8 +160,8 @@
     }
 }
 
-#available_segments a.dropdown  {
-    color: @brand-black;
+.available_segments a.dropdown  {
+    color: @brand-black !important;
     text-transform: uppercase;
     .font-default(10px, 12px);
 }
diff --git a/plugins/Morpheus/stylesheets/theme.less b/plugins/Morpheus/stylesheets/theme.less
index 9f65c04a38..f74f7889ea 100644
--- a/plugins/Morpheus/stylesheets/theme.less
+++ b/plugins/Morpheus/stylesheets/theme.less
@@ -254,7 +254,7 @@ table.entityTable tr td a:hover {
   }
 }
 
-#segmentEditorPanel {
+.segmentEditorPanel {
   border: 1px solid @silver-80;
   background: #fff;
   padding: 8px 10px 8px 10px;
@@ -299,7 +299,7 @@ table.entityTable tr td a:hover {
     }
   }
 
-  #segmentList {
+  .segmentListContainer {
     .segmentationContainer {
       &.visible {
         .submenu {
@@ -318,7 +318,7 @@ table.entityTable tr td a:hover {
   }
 }
 
-#segmentEditorPanel:hover {
+.segmentEditorPanel:hover {
   background: #fff;
   border: 1px solid @silver-80;
 }
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index ad26f21310..c27e1ae332 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -12,9 +12,10 @@ Segmentation = (function($) {
         var self = this;
 
         self.currentSegmentStr = "";
-        self.targetId = "segmentEditorPanel";
+        self.target = "segmentEditorPanel";
         self.segmentAccess = "read";
         self.availableSegments = [];
+        self.editorTemplate = $('.SegmentEditor').detach();
 
         for(var item in config)
         {
@@ -100,21 +101,21 @@ Segmentation = (function($) {
 
         var getAndDiv = function(){
             if(typeof andDiv === "undefined"){
-                var andDiv = $("#SegmentEditor").find("> div.segment-and").clone();
+                var andDiv = self.editorTemplate.find("> div.segment-and").clone();
             }
             return andDiv.clone();
         };
 
         var getOrDiv = function(){
             if(typeof orDiv === "undefined"){
-                var orDiv = $("#SegmentEditor").find("> div.segment-or").clone();
+                var orDiv = self.editorTemplate.find("> div.segment-or").clone();
             }
             return orDiv.clone();
         };
 
         var getMockedInputSet = function(){
             if(typeof mockedInputSet === "undefined"){
-                var mockedInputSet = $("#SegmentEditor").find("div.segment-row-inputs").clone();
+                var mockedInputSet = self.editorTemplate.find("div.segment-row-inputs").clone();
             }
             return mockedInputSet.clone();
         };
@@ -129,7 +130,7 @@ Segmentation = (function($) {
         var getMockedFormRow = function(){
             if(typeof mockedFormRow === "undefined")
             {
-                var mockedFormRow = $("#SegmentEditor").find("div.segment-rows").clone();
+                var mockedFormRow = self.editorTemplate.find("div.segment-rows").clone();
                 $(mockedFormRow).find(".segment-row").append(getMockedInputSet()).after(getAddOrBlockButtonHtml).after(getOrDiv());
             }
             return mockedFormRow.clone();
@@ -137,7 +138,7 @@ Segmentation = (function($) {
 
         var getInitialStateRowsHtml = function(){
             if(typeof initialStateRows === "undefined"){
-                var content = $("#SegmentEditor").find("div.initial-state-rows").html();
+                var content = self.editorTemplate.find("div.initial-state-rows").html();
                 var initialStateRows = $(content).clone();
             }
             return initialStateRows;
@@ -199,7 +200,7 @@ Segmentation = (function($) {
         };
 
         var getListHtml = function() {
-            var html = $("#SegmentEditor").find("> .listHtml").clone();
+            var html = self.editorTemplate.find("> .listHtml").clone();
             var segment, injClass;
 
             var listHtml = '<li data-idsegment="" ' +
@@ -239,10 +240,10 @@ Segmentation = (function($) {
         };
 
         var getFormHtml = function() {
-            var html = $("#SegmentEditor").find("> .segment-element").clone();
+            var html = self.editorTemplate.find("> .segment-element").clone();
             // set left margin to center form
             //$("body").append(html);
-            var segmentsDropdown = $(html).find("#available_segments_select");
+            var segmentsDropdown = $(html).find(".available_segments_select");
             var segment, newOption;
             newOption = '<option data-idsegment="" data-definition="" title="'
                         + self.translations['SegmentEditor_AddNewSegment']
@@ -343,9 +344,9 @@ Segmentation = (function($) {
             addForm("edit", segment);
 
             $(self.form).find(".segment-content > h3 > span").text(segment.name);
-            $(self.form).find('#available_segments_select > option[data-idsegment="'+segment.idsegment+'"]').prop("selected",true);
+            $(self.form).find('.available_segments_select > option[data-idsegment="'+segment.idsegment+'"]').prop("selected",true);
 
-            $(self.form).find('#available_segments a.dropList').html(self.shortenSegmentName(segment.name, 16));
+            $(self.form).find('.available_segments a.dropList').html(self.shortenSegmentName(segment.name, 16));
 
 
 
@@ -485,16 +486,15 @@ Segmentation = (function($) {
         {
             if(typeof addNewBlockButton === "undefined")
             {
-                var addNewBlockButton = $("#SegmentEditor").find("> div.segment-add-row").clone();
+                var addNewBlockButton = self.editorTemplate.find("> div.segment-add-row").clone();
             }
             return addNewBlockButton.clone();
 
         };
 
         var getAddOrBlockButtonHtml = function(){
-            if(typeof addOrBlockButton === "undefined")
-            {
-                var addOrBlockButton = $("#SegmentEditor").find("div.segment-add-or").clone();
+            if(typeof addOrBlockButton === "undefined") {
+                var addOrBlockButton = self.editorTemplate.find("div.segment-add-or").clone();
             }
             return addOrBlockButton.clone();
         };
@@ -534,7 +534,7 @@ Segmentation = (function($) {
             });
 
             $('#closeSegmentationForm').on("click", function() {
-                $("#segmentList").show();
+                $(".segmentListContainer").show();
                 self.form.remove();
             });
 
@@ -565,7 +565,7 @@ Segmentation = (function($) {
                 event.preventDefault();
             });
 
-            $(self.form).find("#available_segments_select").bind("change", function(e){
+            $(self.form).find(".available_segments_select").bind("change", function(e){
                 var option = $(e.currentTarget).find('option:selected');
                 openEditFormGivenSegment(option);
             });
@@ -578,18 +578,18 @@ Segmentation = (function($) {
             });
 
             $(self.form).off("click", ".custom_select_search a").on("click", ".custom_select_search a", function(e){
-                $(self.form).find("#segmentSearch").val("").trigger("keyup").val(self.translations['General_Search']);
+                $(self.form).find(".segmentSearch").val("").trigger("keyup").val(self.translations['General_Search']);
             });
 
             // attach event that will clear search input upon focus if its content is default
-            $(self.form).find("#segmentSearch").on("focus", function(e){
+            $(self.form).find(".segmentSearch").on("focus", function(e){
                 var search = $(e.currentTarget).val();
                 if(search == self.translations['General_Search'])
                     $(e.currentTarget).val("");
             });
 
             // attach event that will set search input value upon blur if its content is not null
-            $(self.form).find("#segmentSearch").on("blur", function(e){
+            $(self.form).find(".segmentSearch").on("blur", function(e){
                 var search = $(e.currentTarget).val();
                 if(search == ""){
                     clearSearchMetricHighlight();
@@ -598,7 +598,7 @@ Segmentation = (function($) {
             });
 
             // bind search action triggering - only when input text is longer than 2 chars
-            $(self.form).find("#segmentSearch").on("keyup", function(e){
+            $(self.form).find(".segmentSearch").on("keyup", function(e){
                 var search = $(e.currentTarget).val();
                 if( search.length >= 2)
                 {
@@ -616,13 +616,13 @@ Segmentation = (function($) {
 
             $(self.form).on("click", ".delete", function(){
                 var segmentName = $(self.form).find(".segment-content > h3 > span").text();
-                var segmentId = $(self.form).find("#available_segments_select option:selected").attr("data-idsegment");
+                var segmentId = $(self.form).find(".available_segments_select option:selected").attr("data-idsegment");
                 var params = {
                     "idsegment" : segmentId
                 };
-                $('#segment-delete-confirm').find('#name').text( segmentName );
+                $('.segment-delete-confirm').find('#name').text( segmentName );
                 if(segmentId != ""){
-                    piwikHelper.modalConfirm( '#segment-delete-confirm', {
+                    piwikHelper.modalConfirm( '.segment-delete-confirm', {
                         yes: function(){
                             self.deleteMethod(params);
                         }
@@ -631,13 +631,13 @@ Segmentation = (function($) {
             });
 
             $(self.form).on("click", "a.close", function(e){
-                $("#segmentList").show();
+                $(".segmentListContainer").show();
                 self.form.unbind().remove();
             });
 
             $("body").on("keyup", function(e){
                 if(e.keyCode == "27"){
-                    $("#segmentList").show();
+                    $(".segmentListContainer").show();
                     $(self.form).remove();
                 }
             });
@@ -810,7 +810,7 @@ Segmentation = (function($) {
         // Mode = 'new' or 'edit'
         var addForm = function(mode, segment){
 
-            $("#segmentEditorPanel").find(".segment-element:visible").unbind().remove();
+            $(".segmentEditorPanel").find(".segment-element:visible").unbind().remove();
             if(typeof self.form !== "undefined")
             {
                 self.form.unbind().remove();
@@ -818,22 +818,22 @@ Segmentation = (function($) {
             // remove any remaining forms
 
             self.form = getFormHtml();
-            $("#segmentEditorPanel").prepend(self.form);
+            $(".segmentEditorPanel").prepend(self.form);
 
             bindFormEvents();
             bindSegmentManipulationEvents();
 
             if(mode == "edit") {
-                $(self.form).find('#enable_all_users_select > option[value="'+segment.enable_all_users+'"]').prop("selected",true);
-                $(self.form).find('#visible_to_website_select > option[value="'+segment.enable_only_idsite+'"]').prop("selected",true);
-                $(self.form).find('#auto_archive_select > option[value="'+segment.auto_archive+'"]').prop("selected",true);
+                $(self.form).find('.enable_all_users_select > option[value="'+segment.enable_all_users+'"]').prop("selected",true);
+                $(self.form).find('.visible_to_website_select > option[value="'+segment.enable_only_idsite+'"]').prop("selected",true);
+                $(self.form).find('.auto_archive_select > option[value="'+segment.auto_archive+'"]').prop("selected",true);
 
             }
 
-            makeDropList("#enable_all_users" , "#enable_all_users_select");
-            makeDropList("#visible_to_website" , "#visible_to_website_select");
-            makeDropList("#auto_archive" , "#auto_archive_select");
-            makeDropList("#available_segments" , "#available_segments_select");
+            makeDropList(".enable_all_users" , ".enable_all_users_select");
+            makeDropList(".visible_to_website" , ".visible_to_website_select");
+            makeDropList(".auto_archive" , ".auto_archive_select");
+            makeDropList(".available_segments" , ".available_segments_select");
             $(self.form).find(".saveAndApply").bind("click", function(e){
                 e.preventDefault();
                 parseFormAndSave();
@@ -849,7 +849,7 @@ Segmentation = (function($) {
             {
                 $(self.form).find(".editSegmentName").trigger('click');
             }
-            $("#segmentList").hide();
+            $(".segmentListContainer").hide();
 
         };
 
@@ -881,15 +881,15 @@ Segmentation = (function($) {
         var parseFormAndSave = function(){
             var segmentName = $(self.form).find(".segment-content > h3 >span").text();
             var segmentStr = parseForm();
-            var segmentId = $(self.form).find('#available_segments_select > option:selected').attr("data-idsegment");
-            var user = $(self.form).find("#enable_all_users_select option:selected").val();
-            var autoArchive = $(self.form).find("#auto_archive_select option:selected").val() || 0;
+            var segmentId = $(self.form).find('.available_segments_select > option:selected').attr("data-idsegment");
+            var user = $(self.form).find(".enable_all_users_select option:selected").val();
+            var autoArchive = $(self.form).find(".auto_archive_select option:selected").val() || 0;
             var params = {
                 "name": segmentName,
                 "definition": segmentStr,
                 "enabledAllUsers": user,
                 "autoArchive": autoArchive,
-                "idSite":  $(self.form).find("#visible_to_website_select option:selected").val()
+                "idSite":  $(self.form).find(".visible_to_website_select option:selected").val()
             };
 
             // determine if save or update should be performed
@@ -927,7 +927,7 @@ Segmentation = (function($) {
                     event.preventDefault();
                     ui.item.option.selected = true;
                     // Mark original select>option
-                    $('#SegmentEditor ' + spanId + ' option[value="' + ui.item.value + '"]').prop('selected', true);
+                    $(spanId + ' option[value="' + ui.item.value + '"]', self.editorTemplate).prop('selected', true);
                     dropList.text(ui.item.label);
                     $(self.form).find(selectId).trigger("change");
                 }
@@ -970,8 +970,8 @@ Segmentation = (function($) {
             if(typeof self.content !== "undefined"){
                 self.content.html($(html).html());
             } else {
-                $("#"+self.targetId).append(html);
-                self.content = $("#"+self.targetId).find(".segmentationContainer");
+                self.target.append(html);
+                self.content = self.target.find(".segmentationContainer");
             }
             initTopControls();
 
@@ -1001,7 +1001,7 @@ $(document).ready( function(){
     }
 
     var changeSegment = function(segmentDefinition){
-        $('#segmentEditorPanel').find('a.close').click();
+        $('.segmentEditorPanel').find('a.close').click();
         segmentDefinition = cleanupSegmentDefinition(segmentDefinition);
         segmentDefinition = encodeURIComponent(segmentDefinition);
         return broadcast.propagateNewPage('segment=' + segmentDefinition, true);
@@ -1090,7 +1090,7 @@ $(document).ready( function(){
         segmentFromRequest = decodeURIComponent(segmentFromRequest);
     }
     var segmentationFtw = new Segmentation({
-        "targetId"   : "segmentList",
+        "target"   : $(".segmentListContainer"),
         "segmentAccess" : "write",
         "availableSegments" : availableSegments,
         "addMethod": addSegment,
@@ -1105,11 +1105,10 @@ $(document).ready( function(){
         if($(e.target).parents('.segment-element').length === 0 && !$(e.target).is('.segment-element') && $(e.target).hasClass("ui-corner-all") == false
             && $(e.target).hasClass("ddmetric") == false  && $(".segment-element:visible").length == 1 ) {
             $(".segment-element:visible").unbind().remove();
-            $("#segmentList").show();
+            $(".segmentListContainer").show();
         }
 
-
-        if($(e.target).parents('#segmentList').length === 0 && $(".segmentationContainer").hasClass("visible")){
+        if($(e.target).parents('.segmentListContainer').length === 0 && $(".segmentationContainer").hasClass("visible")){
             $(".segmentationContainer").trigger("click");
         }
     });
diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
index a00ad6860a..46c5e4281e 100644
--- a/plugins/SegmentEditor/stylesheets/segmentation.less
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -438,7 +438,7 @@ div.scrollable {
   margin: 0 0 0 15px;
 }
 
-#segmentEditorPanel {
+.segmentEditorPanel {
   position: absolute;
   z-index: 121; /* Should be bigger than 'Dashboard widget selector' (z-index: 120) */
   background: #f7f7f7;
@@ -450,7 +450,7 @@ div.scrollable {
   font-size: 14px;
 }
 
-#segmentEditorPanel:hover {
+.segmentEditorPanel:hover {
   background: #f1f0eb;
   border-color: #a9a399;
 }
@@ -547,7 +547,7 @@ span.segmentationTitle {
   display: none;
 }
 
-#segmentList {
+.segmentListContainer {
   overflow: hidden; /* Create a BFC */
 }
 
@@ -617,7 +617,7 @@ a.metric_category {
   content: ".";
 }
 
-#available_segments a.dropdown {
+.available_segments a.dropdown {
   background: url("plugins/Zeitgeist/images/sort_subtable_desc.png") no-repeat scroll 100% -2px transparent !important;
   padding: 0 17px 0 0 !important;
 }
diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig
index f036a98976..4272de971f 100644
--- a/plugins/SegmentEditor/templates/_segmentSelector.twig
+++ b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -1,148 +1,146 @@
-<div id="SegmentEditor" style="display:none;">
-    <div class="segmentationContainer listHtml">
-        <span class="segmentationTitle"></span>
+<div class="segmentEditorPanel js-autoLeftPanel">
+    <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> <span class='youMustBeLoggedIn'>{{ 'SegmentEditor_YouMustBeLoggedInToCreateSegments'|translate }}
-                <br/>&rsaquo; <a href='index.php?module={{ loginModule }}'>{{ 'Login_LogIn'|translate }}</a> </span>
-            </li>
+                <li>{{ 'SegmentEditor_SelectSegmentOfVisitors'|translate }}
+                    <div class="segmentList">
+                        <ul>
+                        </ul>
+                    </div>
+                </li>
             </ul>
-        {% endif %}
-    </div>
+            {% 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>
 
-    <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>
+        <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>
                     {% endfor %}
-                </optgroup>
-                {% 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>
-    </div>
-    <div class="segment-rows">
-        <div class="segment-row">
-            <a href="#" class="segment-close"></a>
-            <a href="#" class="segment-loading"></a>
-        </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>
+                </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>
         </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 class="segment-rows">
+            <div class="segment-row">
+                <a href="#" class="segment-close"></a>
+                <a href="#" class="segment-loading"></a>
+            </div>
         </div>
-    </div>
-    <div class="segment-element">
-        <div class="segment-nav">
-            <h4 class="visits"><span id="available_segments"><strong>
-                <select id="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 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="custom_select_search">
-                <a href="#"></a>
-                <input type="text" aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="inp ui-autocomplete-input" id="segmentSearch" value="{{ 'General_Search'|translate }}" length="15">
+        </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-content">
-            <div class="segment-top" {% if not isSuperUser %}style="display:none"{% endif %}>
-                {{ 'SegmentEditor_ThisSegmentIsVisibleTo'|translate }} <span id="enable_all_users"><strong>
-                        <select id="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="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-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 id="visible_to_website"><strong>
-                        <select id="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 id="auto_archive"><strong>
-                        <select id="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>
-
-<div id="segmentEditorPanel" class="js-autoLeftPanel">
-    <div id="segmentList"></div>
-</div>
-
-<div class="ui-confirm" id="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 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>
 
 <div class="ui-confirm" id="pleaseChangeBrowserAchivingDisabledSetting">
@@ -156,4 +154,4 @@
 var availableSegments = {{ savedSegmentsJson|raw }};
 var segmentTranslations = {{ segmentTranslations|raw }};
 var isSegmentNotAppliedBecauseBrowserArchivingIsDisabled = {{ isSegmentNotAppliedBecauseBrowserArchivingIsDisabled }};
-</script>
+</script>
\ No newline at end of file
diff --git a/tests/PHPUnit/UI b/tests/PHPUnit/UI
-Subproject ec7b2f65c0ef8c8570c1da0f9b3263dc37f8863
+Subproject 254e2d4ff48e44bcb15a28767fb77b741aa8d2e
diff --git a/tests/resources/screenshot-override/override.css b/tests/resources/screenshot-override/override.css
index 891364e079..4dcb133f19 100644
--- a/tests/resources/screenshot-override/override.css
+++ b/tests/resources/screenshot-override/override.css
@@ -15,6 +15,6 @@ span.plugin-version {
 }
 
 /* add some space to the top of the segment editor so screenshots are clearer */
-.widget #segmentEditorPanel {
+.widget .segmentEditorPanel {
     margin-top:1em;
 }
\ No newline at end of file