Fixed layout problem in permission adder dialog.

In order to maintain consistent layout between details page and dialog
boxes the IPA.details_list_section has been replaced with
IPA.details_table_section which is based on table.

The IPA.target_section and other subclasses of IPA.details_list_section
have been converted to use IPA.details_table_section as well.

The unit tests have been updated accordingly.

Ticket #1648

12 files changed, 352 insertions, 456 deletions

diff --git a/install/ui/aci.js b/install/ui/aci.js
index a0399f501..e447391cc 100644
--- a/install/ui/aci.js
+++ b/install/ui/aci.js
@@ -33,20 +33,29 @@ IPA.entity_factories.permission = function() {
         }).
         details_facet({sections:[
             {
-                name:'identity',
-                fields: [{
-                    factory: IPA.text_widget,
-                    name: 'cn',
-                    read_only: true
-                }]
+                name: 'identity',
+                fields: [
+                    {
+                        factory: IPA.text_widget,
+                        name: 'cn',
+                        read_only: true
+                    }
+                ]
             },
             {
-                name:'rights',
-                factory:IPA.rights_section
+                name: 'rights',
+                label: IPA.messages.objects.permission.rights,
+                fields: [
+                    {
+                        factory: IPA.rights_widget,
+                        name: 'permissions',
+                        join: true
+                    }
+                ]
             },
             {
-                name:'target',
-                factory:IPA.target_section,
+                factory: IPA.target_section,
+                name: 'target',
                 label: IPA.messages.objects.permission.target
             }]}).
         association_facet({
@@ -56,10 +65,10 @@ IPA.entity_factories.permission = function() {
         adder_dialog({
             width: 500,
             height: 400,
-            fields:[
+            fields: [
                 'cn',
                 {
-                    factory:IPA.rights_widget,
+                    factory: IPA.rights_widget,
                     name: 'permissions',
                     join: true, undo: false
                 },
@@ -68,7 +77,8 @@ IPA.entity_factories.permission = function() {
                     name: 'target',
                     label: IPA.messages.objects.permission.target,
                     undo: false
-                }]
+                }
+            ]
         }).
         build();
 };
@@ -380,26 +390,6 @@ IPA.rights_widget = function(spec) {
     return that;
 };
 
-
-IPA.rights_section = function(spec) {
-
-    spec = spec || {};
-
-    spec.name = 'rights';
-    spec.label = IPA.messages.objects.permission.rights;
-
-    var that = IPA.details_section(spec);
-
-    that.add_field(IPA.rights_widget({
-        entity: that.entity,
-        name: 'permissions',
-        join: true
-    }));
-
-    return that;
-};
-
-
 IPA.target_section = function(spec) {
 
     spec = spec || {};
@@ -408,158 +398,60 @@ IPA.target_section = function(spec) {
     that.section = true;
     that.undo = typeof spec.undo == 'undefined' ? true : spec.undo;
 
-    that.filter_text = IPA.text_widget({
-        name: 'filter',
-        undo: that.undo,
-        entity: spec.entity
-    });
-    that.subtree_textarea = IPA.textarea_widget({
-        entity: spec.entity,
-        name: 'subtree',
-        cols: 30, rows: 1,
-        undo: that.undo
-    });
-    that.group_select = IPA.entity_select_widget({
-        name: 'targetgroup',
-        other_entity: 'group',
-        other_field: 'cn',
-        undo: that.undo
-    });
-    that.type_select = IPA.select_widget({
-        name: 'type',
-        undo: that.undo
-    });
-    that.attribute_table = IPA.attributes_widget({
-        entity: spec.entity,
-        name: 'attrs',
-        undo: that.undo
-    });
-
-    that.add_field(that.filter_text);
-    that.add_field(that.subtree_textarea);
-    that.add_field(that.group_select );
-    that.add_field(that.type_select);
-    that.add_field(that.attribute_table);
-
-
-    /*TODO these next two functions are work arounds for missing attribute
-      permissions for the filter text.  Remove them once that has been fixed */
-    that.filter_text.update = function(){
-        var value = that.filter_text.values && that.filter_text.values.length ?
-            that.filter_text.values[0] : '';
-        $('input[name="'+that.filter_text.name+'"]',
-          that.filter_text.container).val(value);
-
-        var label = $('label[name="'+that.filter_text.name+'"]',
-                      that.filter_text.container);
-        var input = $('input[name="'+that.filter_text.name+'"]',
-                      that.filter_text.container);
-        label.css('display', 'none');
-        input.css('display', 'inline');
-    };
-
-    that.filter_text.save = function(){
-        var input = $('input[name="'+that.filter_text.name+'"]',
-                      that.filter_text.container);
-        var value = input.val();
-        return value === '' ? [] : [value];
-    };
-
     var target_types = [
         {
-            name:'filter',
-            create: function(dl){
-
-                $('<dt/>').
-                    append($('<label/>', {
-                        text: IPA.messages.objects.permission.filter+':'
-                    })).
-                    appendTo(dl);
-
-                var dd = $('<dd/>', {
-                    'class': 'aci_by_filter first'
-                }).appendTo(dl);
-
-                var span = $('<span/>', {
-                    name: 'filter'
-                }).appendTo(dd);
-
-                that.filter_text.create(span);
+            name: 'filter',
+            label: IPA.messages.objects.permission.filter,
+            create: function(container) {
+                that.filter_text.create(container);
             },
-            load: function(record){
+            load: function(record) {
                 that.filter_text.load(record);
             },
-            save: function(record){
+            save: function(record) {
                 record.filter = that.filter_text.save()[0];
             }
         },
         {
-            name:'subtree',
-            create:function(dl) {
-                $('<dt/>').
-                    append($('<label/>', {
-                        text: IPA.messages.objects.permission.subtree+':'
-                    })).
-                    appendTo(dl);
-                var dd = $('<dd/>', {
-                    'class': 'aci_by_query first'
-                }).appendTo(dl);
-                var span = $('<span/>', {
-                    name: 'subtree'
-                }).appendTo(dd);
-                that.subtree_textarea.create(span);
+            name: 'subtree',
+            label: IPA.messages.objects.permission.subtree,
+            create: function(container) {
+                that.subtree_textarea.create(container);
             },
-            load: function(record){
+            load: function(record) {
                 that.subtree_textarea.load(record);
             },
-            save: function(record){
+            save: function(record) {
                 record.subtree = that.subtree_textarea.save()[0];
             }
         },
         {
-            name:'targetgroup',
-            create:  function (dl) {
-                $('<dt/>').
-                    append($('<label/>', {
-                        text: IPA.messages.objects.permission.targetgroup+':'
-                    })).
-                    appendTo(dl);
-                var dd = $('<dd/>', {
-                    'class': 'aci_by_group first'
-                }).appendTo(dl);
-                var span = $('<span/>', {
-                    name: 'targetgroup'
-                }).appendTo(dd);
-                that.group_select.create(span);
+            name: 'targetgroup',
+            label: IPA.messages.objects.permission.targetgroup,
+            create: function(container) {
+                that.group_select.create(container);
             },
-            load: function(record){
+            load: function(record) {
                 that.group_select.list.val(record.targetgroup);
             },
-            save: function(record){
+            save: function(record) {
                 record.targetgroup = that.group_select.save()[0];
             }
         },
         {
-            name:'type',
-            create:   function(dl) {
-                $('<dt/>').
-                    append($('<label/>', {
-                        text: IPA.messages.objects.permission.type+':'
-                    })).
-                    appendTo(dl);
-                var dd = $('<dd/>', {
-                    'class': 'aci_by_type first'
-                }).appendTo(dl);
+            name: 'type',
+            label: IPA.messages.objects.permission.type,
+            create: function(container) {
+
                 var span = $('<span/>', {
                     name: 'type'
-                }).appendTo(dd);
-                that.type_select.create(span);
+                }).appendTo(container);
 
+                that.type_select.create(span);
 
-                span = $('<dd/>', {
-                    name: 'attrs',
-                    'class':'other'
-                }).appendTo(dl);
+                span = $('<span/>', {
+                    name: 'attrs'
+                }).appendTo(container);
 
                 that.attribute_table.create(span);
 
@@ -570,17 +462,21 @@ IPA.target_section = function(spec) {
                         that.type_select.save()[0];
                     that.attribute_table.reset();
                 });
+
                 select.append($('<option/>', {
                     value: '',
                     text: ''
                 }));
+
                 var type_params = IPA.get_entity_param('permission', 'type');
-                for (var i=0; i<type_params.values.length; i++){
+
+                for (var i=0; i<type_params.values.length; i++) {
                     select.append($('<option/>', {
                         value: type_params.values[i],
                         text: type_params.values[i]
                     }));
                 }
+
                 that.type_select.update = function() {
                     that.type_select.select_update();
                     that.attribute_table.object_type =
@@ -601,11 +497,69 @@ IPA.target_section = function(spec) {
 
     var target_type = target_types[0];
 
+    var init = function() {
+        that.filter_text = IPA.text_widget({
+            name: 'filter',
+            undo: that.undo,
+            entity: spec.entity
+        });
+        that.subtree_textarea = IPA.textarea_widget({
+            entity: spec.entity,
+            name: 'subtree',
+            cols: 30, rows: 1,
+            undo: that.undo
+        });
+        that.group_select = IPA.entity_select_widget({
+            name: 'targetgroup',
+            other_entity: 'group',
+            other_field: 'cn',
+            undo: that.undo
+        });
+        that.type_select = IPA.select_widget({
+            name: 'type',
+            undo: that.undo
+        });
+        that.attribute_table = IPA.attributes_widget({
+            entity: spec.entity,
+            name: 'attrs',
+            undo: that.undo
+        });
+
+        that.add_field(that.filter_text);
+        that.add_field(that.subtree_textarea);
+        that.add_field(that.group_select );
+        that.add_field(that.type_select);
+        that.add_field(that.attribute_table);
+
+        /*TODO these next two functions are work arounds for missing attribute
+          permissions for the filter text.  Remove them once that has been fixed */
+        that.filter_text.update = function() {
+            var value = that.filter_text.values && that.filter_text.values.length ?
+                that.filter_text.values[0] : '';
+            $('input[name="'+that.filter_text.name+'"]',
+              that.filter_text.container).val(value);
+
+            var label = $('label[name="'+that.filter_text.name+'"]',
+                          that.filter_text.container);
+            var input = $('input[name="'+that.filter_text.name+'"]',
+                          that.filter_text.container);
+            label.css('display', 'none');
+            input.css('display', 'inline');
+        };
+
+        that.filter_text.save = function(){
+            var input = $('input[name="'+that.filter_text.name+'"]',
+                          that.filter_text.container);
+            var value = input.val();
+            return value === '' ? [] : [value];
+        };
+    };
+
     function show_target_type(type_to_show) {
         for (var i=0; i<target_types.length; i++) {
             if (target_types[i].name === type_to_show) {
                 target_type = target_types[i];
-                target_type.container.css('display', 'block');
+                target_type.container.css('display', '');
             } else {
                 target_types[i].container.css('display', 'none');
             }
@@ -613,38 +567,79 @@ IPA.target_section = function(spec) {
     }
 
     that.create = function(container) {
+        that.container = container;
 
-        var dl =  $('<dl/>', {
-            'class': 'aci-target'
-        }).appendTo(container);
-        $('<dt>Target:</dt>').appendTo(dl);
+        var table = $('<table/>', {
+            'class': 'section-table'
+        }).appendTo(that.container);
 
-        if (that.undo){
-            dl.css('display','none');
+        var tr = $('<tr/>').appendTo(table);
+
+        var td = $('<td/>', {
+            'class': 'section-cell-label'
+        }).appendTo(tr);
+
+        $('<label/>', {
+            name: 'target',
+            title: IPA.messages.objects.permission.target,
+            'class': 'field-label',
+            text: IPA.messages.objects.permission.target+':'
+        }).appendTo(td);
+
+        if (that.undo) {
+            tr.css('display', 'none');
         }
-        that.target_type_select =  $('<select></select>',{
-            change:function(){
-                show_target_type(this.value);
-            }});
 
-        $('<dd/>',
-          {"class":"first"}).
-            append(that.target_type_select).appendTo(dl);
+        td = $('<td/>', {
+            'class': 'section-cell-field'
+        }).appendTo(tr);
+
+        var field_container = $('<div/>', {
+            name: 'target',
+            'class': 'field'
+        }).appendTo(td);
+
+        that.target_type_select = $('<select/>', {
+            change: function() {
+                show_target_type(this.value);
+            }
+        }).appendTo(field_container);
 
-        for (var i = 0 ; i < target_types.length; i += 1){
+        for (var i=0 ; i<target_types.length; i++) {
             target_type = target_types[i];
-            dl =  $('<dl/>', {
-                'class': 'aci-target' ,
-                id:  target_type.name,
-                style: 'display:none'
-            }).appendTo(container);
 
-            that.target_type_select.append($('<option/>',{
+            $('<option/>', {
                 text: target_type.name,
                 value : target_type.name
-            }));
-            target_type.create(dl);
-            target_type.container = dl;
+            }).appendTo(that.target_type_select);
+
+            tr = $('<tr/>', {
+                style: 'display: none'
+            }).appendTo(table);
+
+            td = $('<td/>', {
+                'class': 'section-cell-label'
+            }).appendTo(tr);
+
+            $('<label/>', {
+                name: target_type.name,
+                title: target_type.label,
+                'class': 'field-label',
+                text: target_type.label+':'
+            }).appendTo(td);
+
+            td = $('<td/>', {
+                'class': 'section-cell-field'
+            }).appendTo(tr);
+
+            field_container = $('<div/>', {
+                name: target_type.name,
+                title: target_type.label,
+                'class': 'field'
+            }).appendTo(td);
+
+            target_type.create(field_container);
+            target_type.container = tr;
         }
     };
 
@@ -667,14 +662,14 @@ IPA.target_section = function(spec) {
         reset_target_widgets();
 
         var target_type_name ;
-        for (var i = 0 ; i < target_types.length; i += 1){
+        for (var i=0; i<target_types.length; i++) {
             target_type = target_types[i];
-            if (record[target_type.name]){
+            if (record[target_type.name]) {
                 target_type_name = target_type.name;
                 break;
             }
         }
-        if (!target_type_name){
+        if (!target_type_name) {
             alert(IPA.messages.objects.permission.invalid_target);
             return;
         }
@@ -698,6 +693,7 @@ IPA.target_section = function(spec) {
 
         } else {
             reset_target_widgets();
+            that.target_type_select.val(target_types[0].name);
             show_target_type(target_types[0].name);
         }
     };
@@ -706,14 +702,7 @@ IPA.target_section = function(spec) {
         target_type.save(record);
     };
 
-    return that;
-};
-
-IPA.permission_details_facet = function(spec) {
-
-    spec = spec || {};
-
-    var that = IPA.details_facet(spec);
+    init();
 
     return that;
 };
diff --git a/install/ui/details.js b/install/ui/details.js
index dbdca5a1d..23f217afb 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -95,7 +95,8 @@ IPA.details_section = function(spec) {
             var field = fields[i];
             var field_container = $('<div/>', {
                 name: field.name,
-                'class': 'details-field'
+                title: field.label,
+                'class': 'field'
             }).appendTo(container);
             field.create(field_container);
         }
@@ -167,36 +168,7 @@ IPA.details_section = function(spec) {
     return that;
 };
 
-
-/**
- * This class creates a details section formatted as a list of
- * attributes names and values. The list is defined using a <dl> tag.
- * The attribute name is defined inside a <dt> tag. The attribute
- * value is specified within a <span> inside a <dd> tag. If the
- * attribute has multiple values the <span> will contain be
- * duplicated to display each value.
- *
- * Example:
- *   <dl class="entryattrs">
- *
- *     <dt title="givenname">First Name:</dt>
- *     <dd>
- *       <span name="givenname">
- *         John Smith
- *       </span>
- *     </dd>
- *
- *     <dt title="telephonenumber">Telephone Number:</dt>
- *     <dd>
- *       <span name="telephonenumber">
- *         <div name="value">111-1111</div>
- *         <div name="value">222-2222</div>
- *       </span>
- *     </dd>
- *
- *   </dl>
- */
-IPA.details_list_section = function(spec) {
+IPA.details_table_section = function(spec) {
 
     spec = spec || {};
 
@@ -207,33 +179,56 @@ IPA.details_list_section = function(spec) {
 
         // do not call section_create() here
 
-        var dl = $('<dl/>', {
-            'id': that.name,
-            'class': 'entryattrs'
-        }).appendTo(container);
+        var table = $('<table/>', {
+            'class': 'section-table'
+        }).appendTo(that.container);
 
         var fields = that.fields.values;
         for (var i=0; i<fields.length; i++) {
             var field = fields[i];
+            if (field.hidden) continue;
 
-            var label = field.label || '';
+            var tr = $('<tr/>').appendTo(table);
 
-            $('<dt/>', {
-                html: label+':',
-                title: label
-            }).appendTo(dl);
+            var td = $('<td/>', {
+                'class': 'section-cell-label'
+            }).appendTo(tr);
 
-            var dd = $('<dd/>').appendTo(dl);
+            $('<label/>', {
+                name: field.name,
+                title: field.label,
+                'class': 'field-label',
+                text: field.label+':'
+            }).appendTo(td);
+
+            td = $('<td/>', {
+                'class': 'section-cell-field'
+            }).appendTo(tr);
 
             var field_container = $('<div/>', {
                 name: field.name,
-                'class': 'details-field'
-            }).appendTo(dd);
+                title: field.label,
+                'class': 'field'
+            }).appendTo(td);
+
             field.create(field_container);
+
+            if (field.optional){
+                field_container.css('display', 'none');
+                var link = $('<a/>', {
+                    text: IPA.messages.widget.optional,
+                    href: '',
+                    click: function() {
+                        field_container.css('display', 'inline');
+                        link.css('display', 'none');
+                        return false;
+                    }
+                }).appendTo(td);
+            }
         }
     };
 
-    that.list_section_create = that.create;
+    that.table_section_create = that.create;
 
     return that;
 };
diff --git a/install/ui/dialog.js b/install/ui/dialog.js
index 05d0eb4b5..2d6d941c6 100644
--- a/install/ui/dialog.js
+++ b/install/ui/dialog.js
@@ -128,7 +128,9 @@ IPA.dialog = function(spec) {
      */
     that.create = function() {
 
-        var table = $('<table/>').appendTo(that.container);
+        var table = $('<table/>', {
+            'class': 'section-table'
+        }).appendTo(that.container);
 
         var fields = that.fields.values;
         for (var i=0; i<fields.length; i++) {
@@ -138,39 +140,39 @@ IPA.dialog = function(spec) {
             var tr = $('<tr/>').appendTo(table);
 
             var td = $('<td/>', {
-                style: 'vertical-align: top;',
-                title: field.label
+                'class': 'section-cell-label'
             }).appendTo(tr);
-            var label_text = field.label;
-            if (label_text !== null){
-                label_text += ': ';
-            }else{
-                label_text = '';
-            }
-            td.append($('<label />',{id: field.name+'-label',
-                                     text: label_text}));
+
+            $('<label/>', {
+                name: field.name,
+                title: field.label,
+                'class': 'field-label',
+                text: field.label+':'
+            }).appendTo(td);
 
             td = $('<td/>', {
-                style: 'vertical-align: top;'
+                'class': 'section-cell-field'
             }).appendTo(tr);
 
-            var span = $('<span/>', { 'name': field.name }).appendTo(td);
-            field.create(span);
-            field.field_span = span;
+            var field_container = $('<div/>', {
+                name: field.name,
+                title: field.label,
+                'class': 'field'
+            }).appendTo(td);
+
+            field.create(field_container);
 
             if (field.optional){
-                span.css('display','none');
-                td.append(
-                    $('<a/>',{
-                        text: IPA.messages.widget.optional,
-                        href:'',
-                        click: function(){
-                            var span = $(this).prev();
-                            span.css('display','inline');
-                            $(this).css('display','none');
-                            return false;
-                        }
-                    }));
+                field_container.css('display','none');
+                var link = $('<a/>', {
+                    text: IPA.messages.widget.optional,
+                    href: '',
+                    click: function(){
+                        field_container.css('display', 'inline');
+                        link.css('display', 'none');
+                        return false;
+                    }
+                }).appendTo(td);
             }
 
         }
@@ -181,7 +183,7 @@ IPA.dialog = function(spec) {
 
             var div = $('<div/>', {
                 name: section.name,
-                'class': 'details-section'
+                'class': 'dialog-section'
             }).appendTo(that.container);
 
             section.create(div);
diff --git a/install/ui/entity.js b/install/ui/entity.js
index 8b05d475a..15e45aad9 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -882,7 +882,7 @@ IPA.entity_builder = function(){
         if (spec.factory) {
             section = spec.factory(spec);
         } else {
-            section = IPA.details_list_section(spec);
+            section = IPA.details_table_section(spec);
         }
         facet.add_section(section);
         var fields = spec.fields;
diff --git a/install/ui/hbac.js b/install/ui/hbac.js
index 7f445b91f..0f2da3a9e 100644
--- a/install/ui/hbac.js
+++ b/install/ui/hbac.js
@@ -141,7 +141,7 @@ IPA.hbacrule_details_facet = function(spec) {
     var that = IPA.details_facet(spec);
 
     function general_section(){
-        var section = IPA.details_list_section({
+        var section = IPA.details_table_section({
             name: 'general',
             entity:that.entity,
             label: IPA.messages.details.general
diff --git a/install/ui/host.js b/install/ui/host.js
index bcff252dd..7eb2e98e5 100644
--- a/install/ui/host.js
+++ b/install/ui/host.js
@@ -427,10 +427,10 @@ IPA.host_enrollment_section = function(spec) {
 
     spec = spec || {};
 
-    var that = IPA.details_list_section(spec);
+    var that = IPA.details_table_section(spec);
 
     that.create = function(container) {
-        that.list_section_create(container);
+        that.table_section_create(container);
 
         var keytab_field = that.get_field('has_keytab');
         var password_field = that.get_field('has_password');
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index e341b4112..826126065 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -806,112 +806,46 @@ hr {
     line-height: 25px;
 }
 
-.details-section {
-    margin-left: 4.5em;
-    margin-right: 1.5em;
-    margin-top: 1.8em;
-    white-space: nowrap;
-    padding-bottom: 1.8em;
-    padding-right: 1.8em;
+.dialog-section {
+    margin-top: 10px;
 }
 
-.undo {
-    cursor:pointer;
+.section-table {
+    width: 100%;
 }
 
-dl.entryattrs {
-    clear: both;
-    margin-left: 1.5em;
-    margin-top: 1.8em;
-    white-space: nowrap;
+.section-cell-label {
+    vertical-align: top;
+    width: 120px;
 }
 
-dl.entryattrs dt {
-    clear: left;
-    float: left;
-    padding-bottom: 1.8em;
-    padding-right: 1.8em;
-    text-align: right;
-    width: 16em;
-    margin: 0.5em -0.5em 0 -6em;
+.section-cell-field {
 }
 
-dl.entryattrs dd {
-    float: left;
+.details-section {
+    margin-top: 1em;
+    margin-left: 4.5em;
+    margin-right: 3.3em;
     margin-bottom: 1em;
-    margin-left: 0;
-    margin-top: 0.5em;
-    font-weight: bold;
-}
-
-dl.entryattrs input.otp {
-    min-width: 15em;
-    width: 15em;
-}
-
-dl.aci-target{
-    clear: both;
-    margin-left: 2em;
-    margin-top: 1.8em;
-    white-space: nowrap;
-}
-
-dl.aci-target dt {
-    padding-bottom: 1.8em;
-    padding-left: 2.8em;
-
-    text-align: left;
-    width: 16em;
-    margin: 0.5em -0.5em 0 -6em;
-}
-
-dl.aci-target dd {
-}
-
-dl.aci-target dd.other {
-        margin-left: -1em;
-}
-
-dl.aci-target dd.first {
-        margin-left: 8.5em;
-        margin-top: -3.7em;
-        padding-bottom: 2em;
-
-}
-
-dl.aci-target dd.other {
-        padding-left: 0.7em;
-}
-
-
-dl.aci-target input {
-
 }
 
-#group_filter {
-        margin-right: 2em;
-}
-
-#aci_by_filter {
-        margin-right: 1em;
-}
-
-#aci_by_query {
-        margin-right: 1em;
+.details-section .section-table {
+    width: 100%;
+    border-spacing: 12px;
 }
 
-#aci_by_group {
-        margin-right: 1em;
+.details-section .section-cell-label {
+    text-align: right;
+    vertical-align: top;
+    width: 120px;
 }
 
-#aci_by_type {
-        margin-right: 1em;
-        margin-top: 2.2em;
+.details-section .section-cell-field {
+    font-weight: bold;
 }
 
-#aci_attributes_table {
-        overflow-x: hidden;
-        width: 46em;
+.undo {
+    cursor:pointer;
 }
 
 span.attrhint {
@@ -1101,32 +1035,6 @@ table.kerberos-key-status {
     background-color: #daa520;
 }
 
-dl.modal {
-    clear: both;
-    margin-left: 1em;
-    margin-top: 1em;
-    white-space: nowrap;
-}
-
-dl.modal dt {
-    clear: left;
-    float: left;
-    padding-bottom: 0;
-    padding-right: 0;
-    text-align: right;
-    width: 10em;
-}
-
-dl.modal dd {
-    float: left;
-    padding-bottom: 0;
-    margin-left: 0.8em;
-}
-/*
-#dns-record-type-filter {
-        margin: 0 1em 0 0.5em;
-}
-*/
 .ui-widget-content {
     border:0;
 }
diff --git a/install/ui/rule.js b/install/ui/rule.js
index d9602f689..b4d10a1fc 100644
--- a/install/ui/rule.js
+++ b/install/ui/rule.js
@@ -45,7 +45,7 @@ IPA.rule_details_section = function(spec) {
         var span = $('<span/>', {
             name: that.field_name,
             title: param_info.doc,
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(container);
 
 
@@ -92,7 +92,7 @@ IPA.rule_details_section = function(spec) {
             var table_span = $('<span/>', {
                 name: table.field_name,
                 title: param_info ? param_info.doc : table.field_name,
-                'class': 'details-field'
+                'class': 'field'
             }).appendTo(span);
 
             field = that.get_field(table.field_name);
diff --git a/install/ui/service.js b/install/ui/service.js
index eef909115..0bb15cba8 100644
--- a/install/ui/service.js
+++ b/install/ui/service.js
@@ -71,7 +71,7 @@ IPA.entity_factories.service = function() {
         standard_association_facets().
         adder_dialog({
             factory: IPA.service_add_dialog,
-            width: 450,
+            width: 500,
             height: 300
         }).
         build();
diff --git a/install/ui/sudo.js b/install/ui/sudo.js
index 1a6b03b1b..1e1b5a6b7 100644
--- a/install/ui/sudo.js
+++ b/install/ui/sudo.js
@@ -133,7 +133,7 @@ IPA.sudorule_details_facet = function(spec) {
     var that = IPA.details_facet(spec);
 
     function general_section(){
-        var section = IPA.details_list_section({
+        var section = IPA.details_table_section({
             name: 'general',
             label: IPA.messages.details.general,
             entity: that.entity,
@@ -746,7 +746,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
         var span = $('<span/>', {
             name: 'cmdcategory',
             title: param_info.doc,
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(container);
 
         $('<h3/>', {
@@ -764,7 +764,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
         var table_span = $('<span/>', {
             name: 'memberallowcmd_sudocmd',
             title: param_info ? param_info.doc : 'memberallowcmd_sudocmd',
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(span);
 
         field = that.get_field('memberallowcmd_sudocmd');
@@ -776,7 +776,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
         table_span = $('<span/>', {
             name: 'memberallowcmd_sudocmdgroup',
             title: param_info ? param_info.doc : 'memberallowcmd_sudocmdgroup',
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(span);
 
         field = that.get_field('memberallowcmd_sudocmdgroup');
@@ -793,7 +793,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
         table_span = $('<span/>', {
             name: 'memberdenycmd_sudocmd',
             title: param_info ? param_info.doc : 'memberdenycmd_sudocmd',
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(span);
 
         field = that.get_field('memberdenycmd_sudocmd');
@@ -805,7 +805,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
         table_span = $('<span/>', {
             name: 'memberdenycmd_sudocmdgroup',
             title: param_info ? param_info.doc : 'memberdenycmd_sudocmdgroup',
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(span);
 
         field = that.get_field('memberdenycmd_sudocmdgroup');
@@ -919,7 +919,7 @@ IPA.sudo.rule_details_runas_section = function(spec) {
         var span = $('<span/>', {
             name: 'ipasudorunasusercategory',
             title: param_info.doc,
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(container);
         span.append(param_info.doc+": ");
         field.create(span);
@@ -930,7 +930,7 @@ IPA.sudo.rule_details_runas_section = function(spec) {
         var table_span = $('<span/>', {
             name: 'ipasudorunas_user',
             title: param_info ? param_info.doc : 'ipasudorunas_user',
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(span);
 
         field = that.get_field('ipasudorunas_user');
@@ -941,7 +941,7 @@ IPA.sudo.rule_details_runas_section = function(spec) {
         table_span = $('<span/>', {
             name: 'ipasudorunas_group',
             title: param_info ? param_info.doc : 'ipasudorunas_group',
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(span);
 
         field = that.get_field('ipasudorunas_group');
@@ -954,7 +954,7 @@ IPA.sudo.rule_details_runas_section = function(spec) {
         span = $('<span/>', {
             name: 'ipasudorunasgroupcategory',
             title: param_info.doc,
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(container);
 
         span.append(param_info.doc+": ");
@@ -967,7 +967,7 @@ IPA.sudo.rule_details_runas_section = function(spec) {
         table_span = $('<span/>', {
             name: 'ipasudorunasgroup_group',
             title: param_info ? param_info.doc : 'ipasudorunasgroup_group',
-            'class': 'details-field'
+            'class': 'field'
         }).appendTo(span);
 
         field = that.get_field('ipasudorunasgroup_group');
diff --git a/install/ui/test/data/permission_show_targetgroup.json b/install/ui/test/data/permission_show_targetgroup.json
index 0a140c201..cfe49b938 100644
--- a/install/ui/test/data/permission_show_targetgroup.json
+++ b/install/ui/test/data/permission_show_targetgroup.json
@@ -5,16 +5,24 @@
         "result": {
             "attributelevelrights": {
                 "aci": "rscwo",
+                "attrs": "rscwo",
                 "businesscategory": "rscwo",
                 "cn": "rscwo",
                 "description": "rscwo",
+                "filter": "rscwo",
+                "group": "rscwo",
+                "ipapermissiontype": "rscwo",
                 "member": "rscwo",
                 "nsaccountlock": "rscwo",
                 "o": "rscwo",
                 "objectclass": "rscwo",
                 "ou": "rscwo",
                 "owner": "rscwo",
-                "seealso": "rscwo"
+                "permissions": "rscwo",
+                "seealso": "rscwo",
+                "subtree": "rscwo",
+                "targetgroup": "rscwo",
+                "type": "rscwo"
             },
             "cn": [
                 "targetgroup"
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index e06ddc23c..122234e78 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -58,7 +58,7 @@ module('details', {
 
 test("Testing IPA.details_section.create().", function() {
 
-    var section = IPA.details_list_section({
+    var section = IPA.details_table_section({
         entity: IPA.get_entity('user'),
         name:'IDIDID', label:'NAMENAMENAME'}).
         text({name:'cn'}).
@@ -71,45 +71,38 @@ test("Testing IPA.details_section.create().", function() {
     var container = $("<div/>");
     section.create(container);
 
-    var dl = $('dl', container);
+    var table = $('table', container);
 
     same(
-        dl.length, 1,
-        'Checking dl tag'
+        table.length, 1,
+        'Verifying table'
     );
 
+    var rows = $('tr', table);
     same(
-        dl.attr('id'), section.name,
-        'Checking section name'
-    );
-
-    var dts = $('dt', dl);
-    same(
-        dts.length, fields.length, // each field generates dt & dd
-        'Checking number of children'
+        rows.length, fields.length,
+        'Verifying table rows'
     );
 
     for (var i=0; i<fields.length; i++) {
         var field = fields[i];
 
-        var dt = dts.get(i);
+        var field_label = $('.field-label[name='+field.name+']', container);
         same(
-            dt.innerHTML, field.label+':',
-            'Checking field '+field.name+'\'s label'
+            field_label.text(), field.label+':',
+            'Verifying label for field '+field.name
         );
 
-        var field_container = $('.details-field[name='+field.name+']', dl);
+        var field_container = $('.field[name='+field.name+']', container);
 
         ok(
             field_container.length,
-            'Checking container tag for field '+field.name
+            'Verifying container for field '+field.name
         );
 
-        var dd = $('dd', field_container);
-
         ok(
-            dd.length == 0,
-            'Checking dd tag for field '+field.name
+            field_container.hasClass('widget'),
+            'Verifying field '+field.name+' was created'
         );
     }
 });
@@ -210,25 +203,25 @@ test("Testing details lifecycle: create, load.", function(){
 
     facet.load(result);
 
-    var contact = facet_container.find('dl#contact.entryattrs');
+    var contact = $('.details-section[name=contact]', facet_container);
 
     ok(
-        contact,
-        'dl tag for contact is created'
+        contact.length,
+        'Verifying section for contact is created'
     );
 
-    var identity = facet_container.find('dl#identity.entryattrs');
+    var identity = $('.details-section[name=identity]', facet_container);
 
     ok(
-        identity,
-        'dl tag for identity is created'
+        identity.length,
+        'Verifying section for identity is created'
     );
 
-    var dts = identity.find('dt');
+    var rows = $('tr', identity);
 
     same(
-        dts.length, 6,
-        'Checking dt tags for identity'
+        rows.length, 6,
+        'Verifying rows for identity'
     );
 
     facet_container.attr('id','user');
@@ -253,8 +246,8 @@ test("Testing details lifecycle: create, load.", function(){
 
 test("Testing IPA.details_section_create again()",function(){
 
-    var section = IPA.details_list_section({
-        name: 'IDIDID', label: 'NAMENAMENAME',entity: IPA.get_entity('user'),}).
+    var section = IPA.details_table_section({
+        name: 'IDIDID', label: 'NAMENAMENAME',entity: IPA.get_entity('user')}).
         text({name:'cn', label:'Entity Name'}).
         text({name:'description', label:'Description'}).
         text({name:'number', label:'Entity ID'});
@@ -268,37 +261,38 @@ test("Testing IPA.details_section_create again()",function(){
     section.create(container);
     section.load(result);
 
-    var dl = $('dl', container);
-    ok(
-        dl.length,
-        'dl is created'
-    );
+    var table = $('table', container);
 
     same(
-        dl[0].id, section.name,
-        'checking section name'
+        table.length, 1,
+        'Verifying table'
     );
 
-    var dt = $('dt', dl);
+    var rows = $('tr', table);
     same(
-        dt.length, 3,
-        '3 dt'
+        rows.length, fields.length,
+        'Verifying table rows'
     );
 
-    same(
-        dt[0].innerHTML, fields[0].label+":",
-        'inner HTML matches label'
-    );
+    for (var i=0; i<fields.length; i++) {
+        var field = fields[i];
 
-    var dd = $('dd', dl);
-    same(
-        dd.length, 3,
-        '3 dd'
-    );
+        var field_label = $('.field-label[name='+field.name+']', container);
+        same(
+            field_label.text(), field.label+':',
+            'Verifying label for field '+field.name
+        );
 
-    var field_container = $('.details-field[name="cn"]', dd[0]);
-    same(
-        field_container.length, 1,
-        '1 field container'
-    );
+        var field_container = $('.field[name='+field.name+']', container);
+
+        ok(
+            field_container.length,
+            'Verifying container for field '+field.name
+        );
+
+        ok(
+            field_container.hasClass('widget'),
+            'Verifying field '+field.name+' was created'
+        );
+    }
 });