SONAR-5007 Display quality profiles on which a rule is activated and related actions

15 files changed, 293 insertions, 100 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb
index 66438a28820..4755ba39bfb 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb
@@ -16,5 +16,6 @@
 <%= render :partial => '/coding_rules/templates/coding_rules_list_item_template.hbs' -%>
 <%= render :partial => '/coding_rules/templates/coding_rules_list_empty_template.hbs' -%>
 <%= render :partial => '/coding_rules/templates/coding_rules_detail_template.hbs' -%>
+<%= render :partial => '/coding_rules/templates/coding_rules_detail_quality_profile_template.hbs' -%>
 <%= render :partial => '/coding_rules/templates/coding_rules_facets_item_template.hbs' -%>
 <%= render :partial => '/coding_rules/templates/coding_rules_bulk_change_template.hbs' -%>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/templates/_coding_rules_detail_quality_profile_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/templates/_coding_rules_detail_quality_profile_template.hbs.erb
new file mode 100644
index 00000000000..61127eefde7
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/templates/_coding_rules_detail_quality_profile_template.hbs.erb
@@ -0,0 +1,48 @@
+<script id="coding-rules-detail-quality-profile-template" type="text/x-handlebars-template">
+  <div class="coding-rules-detail-quality-profile-name">{{name}}</div>
+
+  {{#if parent}}
+    <div class="coding-rules-detail-quality-profile-inheritance">
+      <i class="icon-inheritance"></i> {{t 'coding_rules.inherits'}} <strong>{{parent.name}}</strong>
+    </div>
+  {{/if}}
+
+  <ul class="coding-rules-detail-parameters coding-rules-detail-quality-profile-parameters">
+    <li class="coding-rules-detail-parameter">
+      <h3 class="coding-rules-detail-parameter-name">{{t 'severity'}}</h3>
+      <div class="coding-rules-detail-parameter-description">
+        <select class="coding-rules-detail-quality-profile-severity">
+          {{#each severities}}
+            <option value="{{this}}">{{t 'severity' this}}</option>
+          {{/each}}
+        </select>
+        {{#if parent}}
+          {{#notEq severity parent.severity}}
+            {{t 'coding_rules.original'}} {{severityIcon parent.severity}}{{t 'severity' parent.severity}}
+          {{/notEq}}
+        {{/if}}
+      </div>
+    </li>
+    {{#each parameters}}
+      <li class="coding-rules-detail-parameter">
+        <h3 class="coding-rules-detail-parameter-name">{{key}}</h3>
+        <div class="coding-rules-detail-parameter-description">
+          <input type="text" value="{{value}}">
+          {{#if ../parent}}
+            {{#notEq value original}}
+              {{t 'coding_rules.original'}} {{original}}
+            {{/notEq}}
+          {{/if}}
+        </div>
+      </li>
+    {{/each}}
+  </ul>
+
+  <div class="button-group coding-rules-detail-quality-profile-actions">
+    <button>{{t 'update'}}</button>
+    {{#if parent}}
+      <button class="button-red">{{t 'coding_rules.revert_to_parent_definition'}}</button>
+    {{/if}}
+    <button class="button-red">{{t 'coding_rules.deactivate_quality_profile'}}</button>
+  </div>
+</script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/templates/_coding_rules_detail_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/templates/_coding_rules_detail_template.hbs.erb
index d0abf0748a1..2b6c9651cec 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/templates/_coding_rules_detail_template.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/coding_rules/templates/_coding_rules_detail_template.hbs.erb
@@ -79,42 +79,6 @@
   {{/if}}
 
 
-  {{!--
-  <h3 class="coding-rules-detail-header coding-rules-detail-quality-profiles-header">
-    {{t 'coding_rules.quality_profiles'}}
-
-    <div class="button-group coding-rules-detail-quality-profiles-activation">
-      <button>{{t 'coding_rules.activate_quality_profile'}}</button>
-    </div>
-  </h3>
-
-  <ul class="coding-rules-detail-quality-profiles">
-    {{#each qualityProfiles}}
-      <li class="coding-rules-detail-quality-profile">
-        <div class="coding-rules-detail-quality-profile-name">{{name}}</div>
-        <div class="coding-rules-detail-quality-profile-severity">{{severityIcon severity}}{{t 'severity' severity}}</div>
-        <ul class="coding-rules-detail-quality-profile-parameters">
-          {{#each parameters}}
-            <li class="coding-rules-detail-quality-profile-parameter">
-              {{#if ../canUpdate}}
-                <label class="coding-rules-detail-quality-profile-parameter-key">{{key}}</label>
-                <input class="coding-rules-detail-quality-profile-parameter-value" type="text" value="{{value}}">
-                 <div class="button-group coding-rules-detail-quality-profile-parameter-actions">
-                   <button class="coding-rules-detail-quality-profile-parameter-update">{{t 'update'}}</button>
-                 </div>
-              {{else}}
-                {{key}}: {{value}}
-              {{/if}}
-            </li>
-          {{/each}}
-        </ul>
-        {{#if canDeactivate}}
-          <div class="button-group coding-rules-detail-quality-profile-actions">
-            <button class="button-red">{{t 'coding_rules.deactivate_quality_profile'}}</button>
-          </div>
-        {{/if}}
-      </li>
-    {{/each}}
-  </ul>
-  --}}
+  <h3 class="coding-rules-detail-title">{{t 'coding_rules.quality_profiles'}}</h3>
+  <div id="coding-rules-detail-quality-profiles"></div>
 </script>
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.coffee b/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.coffee
index e3bf41d9fbe..09e73d0bb2e 100644
--- a/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.coffee
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.coffee
@@ -52,6 +52,7 @@ define ['jquery.mockjax'], ->
         'done': 'Done'
         'moreCriteria': '+ More Criteria'
         'search_verb': 'Search'
+        'severity': 'Severity'
         'update': 'Update'
 
         'severity.BLOCKER': 'Blocker'
@@ -66,16 +67,19 @@ define ['jquery.mockjax'], ->
         'coding_rules.extend_description': 'Extend Description'
         'coding_rules.deactivate_quality_profile': 'Deactivate'
         'coding_rules.found': 'Found'
+        'coding_rules.inherits': 'Inherits'
         'coding_rules.key': 'Key:'
         'coding_rules.new_search': 'New Search'
         'coding_rules.no_results': 'No Coding Rules'
         'coding_rules.order': 'Order'
         'coding_rules.ordered_by': 'Ordered By'
+        'coding_rules.original': 'Original:'
         'coding_rules.page': 'Coding Rules'
         'coding_rules.parameters': 'Parameters'
         'coding_rules.parameters.default_value': 'Default Value:'
         'coding_rules.quality_profiles': 'Quality Profiles'
         'coding_rules.repository': 'Repository:'
+        'coding_rules.revert_to_parent_definition': 'Revert to Parent Definition'
         'coding_rules._rules': 'rule(s)'
         'coding_rules.select_tag': 'Select Tag'
 
@@ -187,23 +191,24 @@ define ['jquery.mockjax'], ->
         qualityProfiles: [
           {
             name: 'SonarWay'
+            key: 'sonarway'
             severity: 'MINOR'
             canDeactivate: true
             canUpdate: true
             parameters: [
               { key: 'max', value: 8 }
             ]
-
           },
           {
             name: 'Quality Profile 1'
+            key: 'qualityprofile1'
             severity: 'MAJOR'
             canDeactivate: false
             canUpdate: false
             parameters: [
               { key: 'max', value: 6 }
             ]
-
+            inherits: 'sonarway'
           }
         ]
 
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.js b/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.js
index 44442353b37..469a4841a34 100644
--- a/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.js
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/mockjax.js
@@ -68,6 +68,7 @@
           'done': 'Done',
           'moreCriteria': '+ More Criteria',
           'search_verb': 'Search',
+          'severity': 'Severity',
           'update': 'Update',
           'severity.BLOCKER': 'Blocker',
           'severity.CRITICAL': 'Critical',
@@ -80,16 +81,19 @@
           'coding_rules.extend_description': 'Extend Description',
           'coding_rules.deactivate_quality_profile': 'Deactivate',
           'coding_rules.found': 'Found',
+          'coding_rules.inherits': 'Inherits',
           'coding_rules.key': 'Key:',
           'coding_rules.new_search': 'New Search',
           'coding_rules.no_results': 'No Coding Rules',
           'coding_rules.order': 'Order',
           'coding_rules.ordered_by': 'Ordered By',
+          'coding_rules.original': 'Original:',
           'coding_rules.page': 'Coding Rules',
           'coding_rules.parameters': 'Parameters',
           'coding_rules.parameters.default_value': 'Default Value:',
           'coding_rules.quality_profiles': 'Quality Profiles',
           'coding_rules.repository': 'Repository:',
+          'coding_rules.revert_to_parent_definition': 'Revert to Parent Definition',
           'coding_rules._rules': 'rule(s)',
           'coding_rules.select_tag': 'Select Tag',
           'coding_rules.filters.availableSince': 'Available Since',
@@ -182,6 +186,7 @@
           qualityProfiles: [
             {
               name: 'SonarWay',
+              key: 'sonarway',
               severity: 'MINOR',
               canDeactivate: true,
               canUpdate: true,
@@ -193,6 +198,7 @@
               ]
             }, {
               name: 'Quality Profile 1',
+              key: 'qualityprofile1',
               severity: 'MAJOR',
               canDeactivate: false,
               canUpdate: false,
@@ -201,7 +207,8 @@
                   key: 'max',
                   value: 6
                 }
-              ]
+              ],
+              inherits: 'sonarway'
             }
           ]
         }
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profile-view.coffee b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profile-view.coffee
new file mode 100644
index 00000000000..3b4dd7ae888
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profile-view.coffee
@@ -0,0 +1,48 @@
+define [
+  'backbone.marionette',
+  'common/handlebars-extensions'
+], (
+  Marionette
+) ->
+
+  class CodingRulesDetailQualityProfilesView extends Marionette.ItemView
+    className: 'coding-rules-detail-quality-profile'
+    template: getTemplate '#coding-rules-detail-quality-profile-template'
+
+
+    ui:
+      severitySelect: '.coding-rules-detail-quality-profile-severity'
+
+
+    onRender: ->
+      format = (state) ->
+        return state.text unless state.id
+        "<i class='icon-severity-#{state.id.toLowerCase()}'></i> #{state.text}"
+
+      @ui.severitySelect.val @model.get 'severity'
+      @ui.severitySelect.select2
+        width: '200px'
+        minimumResultsForSearch: 999
+        formatResult: format
+        formatSelection: format
+        escapeMarkup: (m) -> m
+
+
+    getParent: ->
+      return null unless @model.get 'inherits'
+      @options.qualityProfiles.findWhere(key: @model.get('inherits')).toJSON()
+
+
+    enhanceParameters: ->
+      parent = @getParent()
+      parameters = @model.get 'parameters'
+      return parameters unless parent
+      parameters.map (p) ->
+        _.extend p, original: _.findWhere(parent.parameters, key: p.key).value
+
+
+    serializeData: ->
+      _.extend super,
+        parent: @getParent()
+        parameters: @enhanceParameters()
+        severities: ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO']
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profile-view.js b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profile-view.js
new file mode 100644
index 00000000000..4020695f3c7
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profile-view.js
@@ -0,0 +1,82 @@
+// Generated by CoffeeScript 1.6.3
+(function() {
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  define(['backbone.marionette', 'common/handlebars-extensions'], function(Marionette) {
+    var CodingRulesDetailQualityProfilesView, _ref;
+    return CodingRulesDetailQualityProfilesView = (function(_super) {
+      __extends(CodingRulesDetailQualityProfilesView, _super);
+
+      function CodingRulesDetailQualityProfilesView() {
+        _ref = CodingRulesDetailQualityProfilesView.__super__.constructor.apply(this, arguments);
+        return _ref;
+      }
+
+      CodingRulesDetailQualityProfilesView.prototype.className = 'coding-rules-detail-quality-profile';
+
+      CodingRulesDetailQualityProfilesView.prototype.template = getTemplate('#coding-rules-detail-quality-profile-template');
+
+      CodingRulesDetailQualityProfilesView.prototype.ui = {
+        severitySelect: '.coding-rules-detail-quality-profile-severity'
+      };
+
+      CodingRulesDetailQualityProfilesView.prototype.onRender = function() {
+        var format;
+        format = function(state) {
+          if (!state.id) {
+            return state.text;
+          }
+          return "<i class='icon-severity-" + (state.id.toLowerCase()) + "'></i> " + state.text;
+        };
+        this.ui.severitySelect.val(this.model.get('severity'));
+        return this.ui.severitySelect.select2({
+          width: '200px',
+          minimumResultsForSearch: 999,
+          formatResult: format,
+          formatSelection: format,
+          escapeMarkup: function(m) {
+            return m;
+          }
+        });
+      };
+
+      CodingRulesDetailQualityProfilesView.prototype.getParent = function() {
+        if (!this.model.get('inherits')) {
+          return null;
+        }
+        return this.options.qualityProfiles.findWhere({
+          key: this.model.get('inherits')
+        }).toJSON();
+      };
+
+      CodingRulesDetailQualityProfilesView.prototype.enhanceParameters = function() {
+        var parameters, parent;
+        parent = this.getParent();
+        parameters = this.model.get('parameters');
+        if (!parent) {
+          return parameters;
+        }
+        return parameters.map(function(p) {
+          return _.extend(p, {
+            original: _.findWhere(parent.parameters, {
+              key: p.key
+            }).value
+          });
+        });
+      };
+
+      CodingRulesDetailQualityProfilesView.prototype.serializeData = function() {
+        return _.extend(CodingRulesDetailQualityProfilesView.__super__.serializeData.apply(this, arguments), {
+          parent: this.getParent(),
+          parameters: this.enhanceParameters(),
+          severities: ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO']
+        });
+      };
+
+      return CodingRulesDetailQualityProfilesView;
+
+    })(Marionette.ItemView);
+  });
+
+}).call(this);
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profiles-view.coffee b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profiles-view.coffee
new file mode 100644
index 00000000000..0b6f7ec680e
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profiles-view.coffee
@@ -0,0 +1,13 @@
+define [
+  'backbone.marionette'
+  'coding-rules/views/coding-rules-detail-quality-profile-view'
+], (
+  Marionette,
+  CodingRulesDetailQualityProfileView
+) ->
+
+  class CodingRulesDetailQualityProfilesView extends Marionette.CollectionView
+    itemView: CodingRulesDetailQualityProfileView
+
+    itemViewOptions: ->
+      qualityProfiles: @collection
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profiles-view.js b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profiles-view.js
new file mode 100644
index 00000000000..75cda1e2a86
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-quality-profiles-view.js
@@ -0,0 +1,29 @@
+// Generated by CoffeeScript 1.6.3
+(function() {
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  define(['backbone.marionette', 'coding-rules/views/coding-rules-detail-quality-profile-view'], function(Marionette, CodingRulesDetailQualityProfileView) {
+    var CodingRulesDetailQualityProfilesView, _ref;
+    return CodingRulesDetailQualityProfilesView = (function(_super) {
+      __extends(CodingRulesDetailQualityProfilesView, _super);
+
+      function CodingRulesDetailQualityProfilesView() {
+        _ref = CodingRulesDetailQualityProfilesView.__super__.constructor.apply(this, arguments);
+        return _ref;
+      }
+
+      CodingRulesDetailQualityProfilesView.prototype.itemView = CodingRulesDetailQualityProfileView;
+
+      CodingRulesDetailQualityProfilesView.prototype.itemViewOptions = function() {
+        return {
+          qualityProfiles: this.collection
+        };
+      };
+
+      return CodingRulesDetailQualityProfilesView;
+
+    })(Marionette.CollectionView);
+  });
+
+}).call(this);
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.coffee b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.coffee
index 2c0e74937e3..919eee0c6ce 100644
--- a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.coffee
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.coffee
@@ -1,14 +1,22 @@
 define [
+  'backbone',
   'backbone.marionette',
+  'coding-rules/views/coding-rules-detail-quality-profiles-view'
   'common/handlebars-extensions'
 ], (
-  Marionette
+  Backbone,
+  Marionette,
+  CodingRulesDetailQualityProfilesView
 ) ->
 
-  class CodingRulesDetailView extends Marionette.ItemView
+  class CodingRulesDetailView extends Marionette.Layout
     template: getTemplate '#coding-rules-detail-template'
 
 
+    regions:
+      qualityProfilesRegion: '#coding-rules-detail-quality-profiles'
+
+
     ui:
       tagsChange: '.coding-rules-detail-tags-change'
       tagInput: '.coding-rules-detail-tag-input'
@@ -34,7 +42,14 @@ define [
       'click @ui.extendDescriptionSubmit': 'submitExtendDescription'
 
 
+    initialize: (options) ->
+      @qualityProfilesView = new CodingRulesDetailQualityProfilesView
+        collection: new Backbone.Collection options.model.get 'qualityProfiles'
+
+
     onRender: ->
+      @qualityProfilesRegion.show @qualityProfilesView
+
       @ui.tagInput.select2
         tags: _.difference @options.app.tags, @model.get 'tags'
         width: '500px'
diff --git a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.js b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.js
index 9e1a0c335ff..a62422642b7 100644
--- a/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.js
+++ b/sonar-server/src/main/webapp/javascripts/coding-rules/views/coding-rules-detail-view.js
@@ -3,7 +3,7 @@
   var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-  define(['backbone.marionette', 'common/handlebars-extensions'], function(Marionette) {
+  define(['backbone', 'backbone.marionette', 'coding-rules/views/coding-rules-detail-quality-profiles-view', 'common/handlebars-extensions'], function(Backbone, Marionette, CodingRulesDetailQualityProfilesView) {
     var CodingRulesDetailView, _ref;
     return CodingRulesDetailView = (function(_super) {
       __extends(CodingRulesDetailView, _super);
@@ -15,6 +15,10 @@
 
       CodingRulesDetailView.prototype.template = getTemplate('#coding-rules-detail-template');
 
+      CodingRulesDetailView.prototype.regions = {
+        qualityProfilesRegion: '#coding-rules-detail-quality-profiles'
+      };
+
       CodingRulesDetailView.prototype.ui = {
         tagsChange: '.coding-rules-detail-tags-change',
         tagInput: '.coding-rules-detail-tag-input',
@@ -38,8 +42,15 @@
         'click @ui.extendDescriptionSubmit': 'submitExtendDescription'
       };
 
+      CodingRulesDetailView.prototype.initialize = function(options) {
+        return this.qualityProfilesView = new CodingRulesDetailQualityProfilesView({
+          collection: new Backbone.Collection(options.model.get('qualityProfiles'))
+        });
+      };
+
       CodingRulesDetailView.prototype.onRender = function() {
         var qp;
+        this.qualityProfilesRegion.show(this.qualityProfilesView);
         this.ui.tagInput.select2({
           tags: _.difference(this.options.app.tags, this.model.get('tags')),
           width: '500px'
@@ -107,7 +118,7 @@
 
       return CodingRulesDetailView;
 
-    })(Marionette.ItemView);
+    })(Marionette.Layout);
   });
 
 }).call(this);
diff --git a/sonar-server/src/main/webapp/stylesheets/coding-rules.css b/sonar-server/src/main/webapp/stylesheets/coding-rules.css
index 11d7539c91d..eea426560a6 100644
--- a/sonar-server/src/main/webapp/stylesheets/coding-rules.css
+++ b/sonar-server/src/main/webapp/stylesheets/coding-rules.css
@@ -85,25 +85,17 @@
   font-size: 0;
 }
 .coding-rules-detail-quality-profile {
-  display: inline-block;
-  vertical-align: top;
-  width: 240px;
-  margin-right: 20px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  font-size: 13px;
+  border: 1px solid transparent;
 }
 .coding-rules-detail-quality-profile.active {
-  background-color: #CAE3F2;
   border-color: #4b9fd5;
 }
 .coding-rules-detail-quality-profile.active .coding-rules-detail-quality-profile-name {
   background-color: #4b9fd5;
   color: #fff;
 }
-.coding-rules-detail-quality-profile-severity {
-  padding: 5px;
-  font-size: 11px;
+.coding-rules-detail-quality-profile + .coding-rules-detail-quality-profile {
+  margin-top: 20px;
 }
 .coding-rules-detail-quality-profile-name {
   padding: 5px;
@@ -114,25 +106,18 @@
 .coding-rules-detail-quality-profile-actions {
   padding: 5px;
 }
-.coding-rules-detail-quality-profile-parameters {
-  padding: 5px;
-}
-.coding-rules-detail-quality-profile-parameter {
-  white-space: nowrap;
-}
-.coding-rules-detail-quality-profile-parameter-key,
-.coding-rules-detail-quality-profile-parameter-value,
-.coding-rules-detail-quality-profile-parameter-actions {
+.coding-rules-detail-quality-profile-parameters .coding-rules-detail-parameter-name,
+.coding-rules-detail-quality-profile-parameters .coding-rules-detail-parameter-description {
   vertical-align: middle;
 }
-.coding-rules-detail-quality-profile-parameter-key:after {
-  content: ":";
+.coding-rules-detail-quality-profile-parameters .coding-rules-detail-parameter-description input {
+  width: 200px;
 }
-.coding-rules-detail-quality-profile-parameter-value {
-  width: 110px;
+.coding-rules-detail-quality-profile-inheritance {
+  margin: 10px 0;
 }
-.coding-rules-detail-quality-profile-parameter-actions {
-  float: right;
+.coding-rules-detail-quality-profile-inheritance strong {
+  font-weight: bold;
 }
 .coding-rules-detail-quality-profiles-activation {
   margin-top: -3px;
diff --git a/sonar-server/src/main/webapp/stylesheets/coding-rules.less b/sonar-server/src/main/webapp/stylesheets/coding-rules.less
index bd5cb1cd4a8..31da7ea9b5b 100644
--- a/sonar-server/src/main/webapp/stylesheets/coding-rules.less
+++ b/sonar-server/src/main/webapp/stylesheets/coding-rules.less
@@ -106,15 +106,9 @@
 }
 
 .coding-rules-detail-quality-profile {
-  display: inline-block;
-  vertical-align: top;
-  width: 240px;
-  margin-right: 2 * @navigatorPadding;
-  .box-sizing(border-box);
-  font-size: @baseFontSize;
+  border: 1px solid transparent;
 
   &.active {
-    background-color: #CAE3F2;
     border-color: @highlighted;
 
     .coding-rules-detail-quality-profile-name {
@@ -124,9 +118,8 @@
   }
 }
 
-.coding-rules-detail-quality-profile-severity {
-  padding: @navigatorPadding / 2;
-  font-size: @smallFontSize;
+.coding-rules-detail-quality-profile + .coding-rules-detail-quality-profile {
+  margin-top: 2 * @navigatorPadding;
 }
 
 .coding-rules-detail-quality-profile-name {
@@ -141,31 +134,21 @@
 }
 
 .coding-rules-detail-quality-profile-parameters {
-  padding: @navigatorPadding / 2;
-}
 
-.coding-rules-detail-quality-profile-parameter {
-  white-space: nowrap;
-}
-
-.coding-rules-detail-quality-profile-parameter-key,
-.coding-rules-detail-quality-profile-parameter-value,
-.coding-rules-detail-quality-profile-parameter-actions {
-  vertical-align: middle;
-}
+  .coding-rules-detail-parameter-name,
+  .coding-rules-detail-parameter-description {
+    vertical-align: middle;
+  }
 
-.coding-rules-detail-quality-profile-parameter-key {
-  &:after {
-    content: ":";
+  .coding-rules-detail-parameter-description input {
+    width: 200px;
   }
 }
 
-.coding-rules-detail-quality-profile-parameter-value {
-  width: 110px;
-}
+.coding-rules-detail-quality-profile-inheritance {
+  margin: @navigatorPadding 0;
 
-.coding-rules-detail-quality-profile-parameter-actions {
-  float: right;
+  strong { font-weight: bold; }
 }
 
 .coding-rules-detail-quality-profiles-activation {
diff --git a/sonar-server/src/main/webapp/stylesheets/icons.css b/sonar-server/src/main/webapp/stylesheets/icons.css
index aa150eafb4d..cbeeb7190ca 100644
--- a/sonar-server/src/main/webapp/stylesheets/icons.css
+++ b/sonar-server/src/main/webapp/stylesheets/icons.css
@@ -264,6 +264,7 @@ a[class*=" icon-"] {
 }
 .icon-inheritance:before {
   content: "\f126";
+  font-size: 16px;
 }
 .icon-plus:before {
   content: "\f067";
diff --git a/sonar-server/src/main/webapp/stylesheets/icons.less b/sonar-server/src/main/webapp/stylesheets/icons.less
index 5c8bc983bd1..aca5c15c06d 100644
--- a/sonar-server/src/main/webapp/stylesheets/icons.less
+++ b/sonar-server/src/main/webapp/stylesheets/icons.less
@@ -273,6 +273,7 @@ a[class^="icon-"], a[class*=" icon-"] {
 }
 .icon-inheritance:before {
   content: "\f126";
+  font-size: @iconFontSize;
 }
 .icon-plus:before {
   content: "\f067";