#616240 follow-up by yched, dereine, marvil07: Make Field UI screens extensible from contrib - part II.

7 files changed, 723 insertions, 551 deletions

diff --git a/modules/field_ui/field_ui-display-overview-table.tpl.php b/modules/field_ui/field_ui-display-overview-table.tpl.php
deleted file mode 100644
index 0fe4e0a1f..000000000
--- a/modules/field_ui/field_ui-display-overview-table.tpl.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<?php
-// $Id$
-
-/**
- * @file
- * Default theme implementation to configure field display settings.
- *
- * Available variables:
- * - $rows: The field display settings form broken down into rendered rows for
- *   printing as a table. The array is separated in two entries, 'visible' and
- *   'hidden'.
- * - $id: The HTML id for the table.
- *
- * @see field_ui_display_overview_form()
- * @see template_preprocess_field_ui_display_overview_table()
- */
-?>
-<?php if ($rows): ?>
-<div id="field-display-overview-wrapper">
-  <table id="field-display-overview" class="field-display-overview sticky-enabled">
-    <thead>
-      <tr>
-        <th><?php print t('Field'); ?></th>
-        <th><?php print t('Weight'); ?></th>
-        <th><?php print t('Label'); ?></th>
-        <th colspan="3"><?php print t('Format'); ?></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="region-message region-visible-message <?php print empty($rows['visible']) ? 'region-empty' : 'region-populated'; ?>">
-        <td colspan="5"><em><?php print t('No field is displayed'); ?></em></td>
-      </tr>
-      <?php
-      $count = 0;
-      foreach ($rows['visible'] as $row): ?>
-        <tr id="<?php print $row->id; ?>" class="<?php print $count % 2 == 0 ? 'odd' : 'even'; ?> <?php print $row->class ?>">
-          <td><span class="<?php print $row->label_class; ?>"><?php print $row->human_name; ?></span></td>
-          <td><?php print $row->weight . $row->hidden_name; ?></td>
-          <td><?php if (isset($row->label)) print $row->label; ?></td>
-          <?php if (isset($row->settings_edit_form)) : ?>
-            <td colspan="3">
-              <?php print $row->type; ?>
-              <?php print $row->settings_edit_form; ?>
-            </td>
-          <?php else :?>
-            <td>
-              <?php print $row->type; ?>
-            </td>
-            <td class="field-formatter-summary-cell">
-              <?php print $row->settings_summary; ?>
-            </td>
-            <td>
-              <?php print $row->settings_edit; ?>
-            </td>
-          <?php endif; ?>
-        </tr>
-        <?php $count++;
-      endforeach; ?>
-      <tr class="region-title region-title-hidden">
-        <td colspan="5"><?php print t('Hidden'); ?></td>
-      </tr>
-      <tr class="region-message region-hidden-message <?php print empty($rows['hidden']) ? 'region-empty' : 'region-populated'; ?>">
-        <td colspan="5"><em><?php print t('No field is hidden'); ?></em></td>
-      </tr>
-      <?php foreach ($rows['hidden'] as $row): ?>
-        <tr class="<?php print $count % 2 == 0 ? 'odd' : 'even'; ?> <?php print $row->class ?>">
-          <td><span class="<?php print $row->label_class; ?>"><?php print $row->human_name; ?></span></td>
-          <td><?php print $row->weight . $row->hidden_name; ?></td>
-          <td><?php if (isset($row->label)) print $row->label; ?></td>
-          <td><?php print $row->type; ?></td>
-          <td class="field-formatter-summary-cell">
-            <?php print $row->settings_summary; ?>
-          </td>
-          <td>
-            <?php print $row->settings_edit; ?>
-          </td>
-        </tr>
-        <?php $count++;
-      endforeach; ?>
-    </tbody>
-  </table>
-</div>
-<?php endif; ?>
diff --git a/modules/field_ui/field_ui-rtl.css b/modules/field_ui/field_ui-rtl.css
index 49aadb528..3defc5688 100644
--- a/modules/field_ui/field_ui-rtl.css
+++ b/modules/field_ui/field_ui-rtl.css
@@ -1,7 +1,6 @@
 /* $Id$ */
 
 /* 'Manage fields' overview */
-#field-overview tr.add-new .label-input {
+table.field-ui-overview tr.add-new .label-input {
   float: right;
 }
-
diff --git a/modules/field_ui/field_ui.admin.inc b/modules/field_ui/field_ui.admin.inc
index 85bcce0d8..cf3e8c3e9 100644
--- a/modules/field_ui/field_ui.admin.inc
+++ b/modules/field_ui/field_ui.admin.inc
@@ -80,18 +80,53 @@ function _field_ui_reduce_order($array, $a) {
 }
 
 /**
- * Theme preprocess function for theme_field_ui_table().
+ * Returns the region to which a row in the 'Manage fields' screen belongs.
  *
- * @see theme_field_ui_table()
+ * This function is used as a #row_callback in field_ui_field_overview_form(),
+ * and is called during field_ui_table_pre_render().
  */
-function template_preprocess_field_ui_table(&$variables) {
-  $elements = &$variables['elements'];
+function field_ui_field_overview_row_region($row) {
+  switch ($row['#row_type']) {
+    case 'field':
+    case 'extra_field':
+      return 'main';
+    case 'add_new_field':
+      // If no input in 'label', assume the row has not been dragged out of the
+      // 'add new' section.
+      return (!empty($row['label']['#value']) ? 'main' : 'add_new');
+  }
+}
+
+/**
+ * Returns the region to which a row in the 'Manage display' screen belongs.
+ *
+ * This function is used as a #row_callback in field_ui_field_overview_form(),
+ * and is called during field_ui_table_pre_render().
+ */
+function field_ui_display_overview_row_region($row) {
+  switch ($row['#row_type']) {
+    case 'field':
+    case 'extra_field':
+      return ($row['format']['type']['#value'] == 'hidden' ? 'hidden' : 'visible');
+  }
+}
+
+/**
+ * Pre-render callback for field_ui_table elements.
+ */
+function field_ui_table_pre_render($elements) {
+  $js_settings = array();
 
-  // Build the tree structure from the weight and parenting data contained in
-  // the flat form structure, to determine row order and indentation.
+  // For each region, build the tree structure from the weight and parenting
+  // data contained in the flat form structure, to determine row order and
+  // indentation.
+  $regions = $elements['#regions'];
   $tree = array('' => array('name' => '', 'children' => array()));
+  $trees = array_fill_keys(array_keys($regions), $tree);
+
   $parents = array();
   $list = drupal_map_assoc(element_children($elements));
+
   // Iterate on rows until we can build a known tree path for all of them.
   while ($list) {
     foreach ($list as $name) {
@@ -99,12 +134,16 @@ function template_preprocess_field_ui_table(&$variables) {
       $parent = $row['parent_wrapper']['parent']['#value'];
       // Proceed if parent is known.
       if (empty($parent) || isset($parents[$parent])) {
-        // Remove from the next iteration.
+        // Grab parent, and remove the row from the next iteration.
         $parents[$name] = $parent ? array_merge($parents[$parent], array($parent)) : array();
         unset($list[$name]);
 
+        // Determine the region for the row.
+        $function = $row['#region_callback'];
+        $region_name = $function($row);
+
         // Add the element in the tree.
-        $target = &$tree[''];
+        $target = &$trees[$region_name][''];
         foreach ($parents[$name] as $key) {
           $target = &$target['children'][$key];
         }
@@ -115,12 +154,35 @@ function template_preprocess_field_ui_table(&$variables) {
           $cell = current(element_children($row));
           $row[$cell]['#prefix'] = theme('indentation', array('size' => $depth)) . (isset($row[$cell]['#prefix']) ? $row[$cell]['#prefix'] : '');
         }
+
+        // Add row id and associate JS settings.
+        $id = drupal_html_class($name);
+        $row['#attributes']['id'] = $id;
+        $row += array(
+          '#js_settings' => array(),
+        );
+        $row['#js_settings'] += array(
+          'rowHandler' => $row['#row_type'],
+          'name' => $name,
+          'region' => $region_name,
+        );
+        $js_settings[$id] = $row['#js_settings'];
       }
     }
   }
+  // Determine rendering order from the tree structure.
+  foreach ($regions as $region_name => $region) {
+    $elements['#regions'][$region_name]['rows_order'] = array_reduce($trees[$region_name], '_field_ui_reduce_order');
+  }
 
-  // Determine rendering order for the tree.
-  $variables['row_order'] = array_reduce($tree, '_field_ui_reduce_order');
+  drupal_add_js(array('fieldUIRowsData' => $js_settings), 'setting');
+  // @todo : use #attached instead when http://drupal.org/node/561858 is fixed.
+//  $elements['#attached']['js'][] = array(
+//    'type' => 'setting',
+//    'data' => array('fieldRowsData' => $js_settings),
+//  );
+
+  return $elements;
 }
 
 /**
@@ -136,26 +198,65 @@ function template_preprocess_field_ui_table(&$variables) {
 function theme_field_ui_table($variables) {
   $elements = $variables['elements'];
   $table = array();
+  $js_settings = array();
 
+  // Add table headers and attributes.
   foreach (array('header', 'attributes') as $key) {
     if (isset($elements["#$key"])) {
       $table[$key] = $elements["#$key"];
     }
   }
 
-  foreach ($variables['row_order'] as $key) {
-    $element = $elements[$key];
-    $row = array('data' => array());
-    $row += $element['#attributes'];
+  // Determine the colspan to use for region rows, by checking the number of
+  // columns in the headers.
+  $colums_count = 0;
+  foreach ($table['header'] as $header) {
+    $colums_count += (is_array($header) && isset($header['colspan']) ? $header['colspan'] : 1);
+  }
+
+  // Render rows, region by region.
+  foreach ($elements['#regions'] as $region_name => $region) {
+    $region_name_class = drupal_html_class($region_name);
+
+    // Add region rows.
+    if (isset($region['title'])) {
+      $table['rows'][] = array(
+        'class' => array('region-title', 'region-' . $region_name_class . '-title'),
+        'no_striping' => TRUE,
+        'data' => array(
+          array('data' => $region['title'], 'colspan' => $colums_count),
+        ),
+      );
+    }
+    if (isset($region['message'])) {
+      $class = (empty($region['rows_order']) ? 'region-empty' : 'region-populated');
+      $table['rows'][] = array(
+        'class' => array('region-message', 'region-' . $region_name_class . '-message', $class),
+        'no_striping' => TRUE,
+        'data' => array(
+          array('data' => $region['message'], 'colspan' => $colums_count),
+        ),
+      );
+    }
+
+    // Add form rows, in the order determined at pre-render time.
+    foreach ($region['rows_order'] as $name) {
+      $element = $elements[$name];
+
+      $row = array('data' => array());
+      if (isset($element['#attributes'])) {
+        $row += $element['#attributes'];
+      }
 
-    foreach (element_children($element) as $cell_key) {
-      $cell = array('data' => drupal_render($element[$cell_key]));
-      if (isset($element[$cell_key]['#cell_attributes'])) {
-        $cell += $element[$cell_key]['#cell_attributes'];
+      foreach (element_children($element) as $cell_key) {
+        $cell = array('data' => drupal_render($element[$cell_key]));
+        if (isset($element[$cell_key]['#cell_attributes'])) {
+          $cell += $element[$cell_key]['#cell_attributes'];
+        }
+        $row['data'][] = $cell;
       }
-      $row['data'][] = $cell;
+      $table['rows'][] = $row;
     }
-    $table['rows'][] = $row;
   }
 
   return theme('table', $table);
@@ -184,9 +285,6 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
 
   $extra_fields = field_info_extra_fields($entity_type, $bundle, 'form');
 
-  // Store each default weight so that we can add the 'add new' rows after them.
-  $weights = array();
-
   $form += array(
     '#entity_type' => $entity_type,
     '#bundle' => $bundle,
@@ -195,7 +293,7 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
   );
 
   $table = array(
-    '#type' => 'table',
+    '#type' => 'field_ui_table',
     '#tree' => TRUE,
     '#header' => array(
       t('Label'),
@@ -206,35 +304,40 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
       t('Widget'),
       array('data' => t('Operations'), 'colspan' => 2),
     ),
-    '#attributes' => array('id' => 'field-overview'),
+    '#parent_options' => array('' => t('<none>')),
+    '#regions' => array(
+      'main' => array(),
+      'add_new' => array('title' => '&nbsp;'),
+    ),
+    '#attributes' => array(
+      'class' => array('field-ui-overview'),
+      'id' => 'field-overview',
+    ),
   );
 
-  $parent_options = array('' => t('<none>'));
-
   // Fields.
   foreach ($instances as $name => $instance) {
     $field = field_info_field($instance['field_name']);
     $admin_field_path = $admin_path . '/fields/' . $instance['field_name'];
-    $weight = $instance['widget']['weight'];
-    $weights[] = $weight;
     $table[$name] = array(
-      '#parents' => array($name),
-      '#attributes' => array('class' => array('draggable tabledrag-leaf')),
+      '#attributes' => array('class' => array('draggable', 'tabledrag-leaf')),
+      '#row_type' => 'field',
+      '#region_callback' => 'field_ui_field_overview_row_region',
       'label' => array(
         '#markup' => check_plain($instance['label']),
       ),
       'weight' => array(
         '#type' => 'textfield',
-        '#default_value' => $weight,
+        '#default_value' => $instance['widget']['weight'],
         '#size' => 3,
         '#attributes' => array('class' => array('field-weight')),
        ),
       'parent_wrapper' => array(
         'parent' => array(
           '#type' => 'select',
-          '#options' => $parent_options,
+          '#options' => $table['#parent_options'],
           '#attributes' => array('class' => array('field-parent')),
-          '#parents' => array($name, 'parent'),
+          '#parents' => array('fields', $name, 'parent'),
         ),
         'hidden_name' => array(
           '#type' => 'hidden',
@@ -280,17 +383,16 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
 
   // Non-field elements.
   foreach ($extra_fields as $name => $extra_field) {
-    $weight = $extra_field['weight'];
-    $weights[] = $weight;
     $table[$name] = array(
-      '#parents' => array($name),
-      '#attributes' => array('class' => array('draggable', 'tabledrag-leaf', 'menu-disabled')),
+      '#attributes' => array('class' => array('draggable', 'tabledrag-leaf')),
+      '#row_type' => 'extra_field',
+      '#region_callback' => 'field_ui_field_overview_row_region',
       'label' => array(
         '#markup' => check_plain($extra_field['label']),
       ),
       'weight' => array(
         '#type' => 'textfield',
-        '#default_value' => $weight,
+        '#default_value' => $extra_field['weight'],
         '#size' => 3,
         '#attributes' => array('class' => array('field-weight')),
         '#title_display' => 'invisible',
@@ -299,9 +401,9 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
       'parent_wrapper' => array(
         'parent' => array(
           '#type' => 'select',
-          '#options' => $parent_options,
+          '#options' => $table['#parent_options'],
           '#attributes' => array('class' => array('field-parent')),
-          '#parents' => array($name, 'parent'),
+          '#parents' => array('fields', $name, 'parent'),
         ),
         'hidden_name' => array(
           '#type' => 'hidden',
@@ -326,7 +428,7 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
   }
 
   // Additional row: add new field.
-  $weight = !empty($weights) ? max($weights) + 1 : 0;
+  $max_weight = field_info_max_weight($entity_type, $bundle, 'form');
   $field_type_options = field_ui_field_type_options();
   $widget_type_options = field_ui_widget_type_options(NULL, TRUE);
   if ($field_type_options && $widget_type_options) {
@@ -334,8 +436,9 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
     array_unshift($widget_type_options, t('- Select a widget -'));
     $name = '_add_new_field';
     $table[$name] = array(
-      '#parents' => array($name),
       '#attributes' => array('class' => array('draggable', 'tabledrag-leaf', 'add-new')),
+      '#row_type' => 'add_new_field',
+      '#region_callback' => 'field_ui_field_overview_row_region',
       'label' => array(
         '#type' => 'textfield',
         '#size' => 15,
@@ -345,7 +448,7 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
       ),
       'weight' => array(
         '#type' => 'textfield',
-        '#default_value' => $weight,
+        '#default_value' => $max_weight + 1,
         '#size' => 3,
         '#title_display' => 'invisible',
         '#title' => t('Weight for new field'),
@@ -355,10 +458,10 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
       'parent_wrapper' => array(
         'parent' => array(
           '#type' => 'select',
-          '#options' => $parent_options,
+          '#options' => $table['#parent_options'],
           '#attributes' => array('class' => array('field-parent')),
           '#prefix' => '<div class="add-new-placeholder">&nbsp;</div>',
-          '#parents' => array($name, 'parent'),
+          '#parents' => array('fields', $name, 'parent'),
         ),
         'hidden_name' => array(
           '#type' => 'hidden',
@@ -372,7 +475,7 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
         '#field_prefix' => '<span dir="ltr">field_',
         '#field_suffix' => '</span>&lrm;',
         '#attributes' => array('dir'=>'ltr'),
-        '#size' => 15,
+        '#size' => 10,
         '#description' => t('Field name (a-z, 0-9, _)'),
         '#prefix' => '<div class="add-new-placeholder">&nbsp;</div>',
       ),
@@ -397,12 +500,12 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
   // Additional row: add existing field.
   $existing_field_options = field_ui_existing_field_options($entity_type, $bundle);
   if ($existing_field_options && $widget_type_options) {
-    $weight++;
     array_unshift($existing_field_options, t('- Select an existing field -'));
     $name = '_add_existing_field';
     $table[$name] = array(
-      '#parents' => array($name),
       '#attributes' => array('class' => array('draggable', 'tabledrag-leaf', 'add-new')),
+      '#row_type' => 'add_new_field',
+      '#region_callback' => 'field_ui_field_overview_row_region',
       'label' => array(
         '#type' => 'textfield',
         '#size' => 15,
@@ -413,7 +516,7 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
       ),
       'weight' => array(
         '#type' => 'textfield',
-        '#default_value' => $weight,
+        '#default_value' => $max_weight + 2,
         '#size' => 3,
         '#title_display' => 'invisible',
         '#title' => t('Weight for added field'),
@@ -423,10 +526,10 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
       'parent_wrapper' => array(
         'parent' => array(
           '#type' => 'select',
-          '#options' => $parent_options,
+          '#options' => $table['#parent_options'],
           '#attributes' => array('class' => array('field-parent')),
           '#prefix' => '<div class="add-new-placeholder">&nbsp;</div>',
-          '#parents' => array($name, 'parent'),
+          '#parents' => array('fields', $name, 'parent'),
         ),
         'hidden_name' => array(
           '#type' => 'hidden',
@@ -452,14 +555,14 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
       ),
     );
   }
-
-  $form['table'] = $table;
+  $form['fields'] = $table;
 
   $form['actions'] = array('#type' => 'actions');
   $form['actions']['submit'] = array('#type' => 'submit', '#value' => t('Save'));
 
   $form['#attached']['css'][] = drupal_get_path('module', 'field_ui') . '/field_ui.css';
   $form['#attached']['js'][] = drupal_get_path('module', 'field_ui') . '/field_ui.js';
+
   // Add settings for the update selects behavior.
   $js_fields = array();
   foreach ($existing_field_options as $field_name => $fields) {
@@ -470,8 +573,7 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
 
   $form['#attached']['js'][] = array(
     'type' => 'setting',
-    'data' => array('fields' => $js_fields, 'fieldWidgetTypes' => field_ui_widget_type_options(),
-    ),
+    'data' => array('fields' => $js_fields, 'fieldWidgetTypes' => field_ui_widget_type_options()),
   );
 
   // Add tabledrag behavior.
@@ -495,18 +597,18 @@ function field_ui_field_overview_form_validate($form, &$form_state) {
  * Validate the 'add new field' row.
  */
 function _field_ui_field_overview_form_validate_add_new($form, &$form_state) {
-  $field = $form_state['values']['_add_new_field'];
+  $field = $form_state['values']['fields']['_add_new_field'];
 
   // Validate if any information was provided in the 'add new field' row.
   if (array_filter(array($field['label'], $field['field_name'], $field['type'], $field['widget_type']))) {
     // Missing label.
     if (!$field['label']) {
-      form_set_error('_add_new_field][label', t('Add new field: you need to provide a label.'));
+      form_set_error('fields][_add_new_field][label', t('Add new field: you need to provide a label.'));
     }
 
     // Missing field name.
     if (!$field['field_name']) {
-      form_set_error('_add_new_field][field_name', t('Add new field: you need to provide a field name.'));
+      form_set_error('fields][_add_new_field][field_name', t('Add new field: you need to provide a field name.'));
     }
     // Field name validation.
     else {
@@ -515,39 +617,39 @@ function _field_ui_field_overview_form_validate_add_new($form, &$form_state) {
       // Add the 'field_' prefix.
       if (substr($field_name, 0, 6) != 'field_') {
         $field_name = 'field_' . $field_name;
-        form_set_value($form['table']['_add_new_field']['field_name'], $field_name, $form_state);
+        form_set_value($form['fields']['_add_new_field']['field_name'], $field_name, $form_state);
       }
 
       // Invalid field name.
       if (!preg_match('!^field_[a-z0-9_]+$!', $field_name)) {
-        form_set_error('_add_new_field][field_name', t('Add new field: the field name %field_name is invalid. The name must include only lowercase unaccentuated letters, numbers, and underscores.', array('%field_name' => $field_name)));
+        form_set_error('fields][_add_new_field][field_name', t('Add new field: the field name %field_name is invalid. The name must include only lowercase unaccentuated letters, numbers, and underscores.', array('%field_name' => $field_name)));
       }
       if (strlen($field_name) > 32) {
-        form_set_error('_add_new_field][field_name', t("Add new field: the field name %field_name is too long. The name is limited to 32 characters, including the 'field_' prefix.", array('%field_name' => $field_name)));
+        form_set_error('fields][_add_new_field][field_name', t("Add new field: the field name %field_name is too long. The name is limited to 32 characters, including the 'field_' prefix.", array('%field_name' => $field_name)));
       }
 
       // Field name already exists. We need to check inactive fields as well, so
       // we can't use field_info_fields().
       $fields = field_read_fields(array('field_name' => $field_name), array('include_inactive' => TRUE));
       if ($fields) {
-        form_set_error('_add_new_field][field_name', t('Add new field: the field name %field_name already exists.', array('%field_name' => $field_name)));
+        form_set_error('fields][_add_new_field][field_name', t('Add new field: the field name %field_name already exists.', array('%field_name' => $field_name)));
       }
     }
 
     // Missing field type.
     if (!$field['type']) {
-      form_set_error('_add_new_field][type', t('Add new field: you need to select a field type.'));
+      form_set_error('fields][_add_new_field][type', t('Add new field: you need to select a field type.'));
     }
 
     // Missing widget type.
     if (!$field['widget_type']) {
-      form_set_error('_add_new_field][widget_type', t('Add new field: you need to select a widget.'));
+      form_set_error('fields][_add_new_field][widget_type', t('Add new field: you need to select a widget.'));
     }
     // Wrong widget type.
     elseif ($field['type']) {
       $widget_types = field_ui_widget_type_options($field['type']);
       if (!isset($widget_types[$field['widget_type']])) {
-        form_set_error('_add_new_field][widget_type', t('Add new field: invalid widget.'));
+        form_set_error('fields][_add_new_field][widget_type', t('Add new field: invalid widget.'));
       }
     }
   }
@@ -561,30 +663,30 @@ function _field_ui_field_overview_form_validate_add_new($form, &$form_state) {
 function _field_ui_field_overview_form_validate_add_existing($form, &$form_state) {
   // The form element might be absent if no existing fields can be added to
   // this bundle.
-  if (isset($form_state['values']['_add_existing_field'])) {
-    $field = $form_state['values']['_add_existing_field'];
+  if (isset($form_state['values']['fields']['_add_existing_field'])) {
+    $field = $form_state['values']['fields']['_add_existing_field'];
 
     // Validate if any information was provided in the 'add existing field' row.
     if (array_filter(array($field['label'], $field['field_name'], $field['widget_type']))) {
       // Missing label.
       if (!$field['label']) {
-        form_set_error('_add_existing_field][label', t('Add existing field: you need to provide a label.'));
+        form_set_error('fields][_add_existing_field][label', t('Add existing field: you need to provide a label.'));
       }
 
       // Missing existing field name.
       if (!$field['field_name']) {
-        form_set_error('_add_existing_field][field_name', t('Add existing field: you need to select a field.'));
+        form_set_error('fields][_add_existing_field][field_name', t('Add existing field: you need to select a field.'));
       }
 
       // Missing widget type.
       if (!$field['widget_type']) {
-        form_set_error('_add_existing_field][widget_type', t('Add existing field: you need to select a widget.'));
+        form_set_error('fields][_add_existing_field][widget_type', t('Add existing field: you need to select a widget.'));
       }
       // Wrong widget type.
       elseif ($field['field_name'] && ($existing_field = field_info_field($field['field_name']))) {
         $widget_types = field_ui_widget_type_options($existing_field['type']);
         if (!isset($widget_types[$field['widget_type']])) {
-          form_set_error('_add_existing_field][widget_type', t('Add existing field: invalid widget.'));
+          form_set_error('fields][_add_existing_field][widget_type', t('Add existing field: invalid widget.'));
         }
       }
     }
@@ -595,7 +697,7 @@ function _field_ui_field_overview_form_validate_add_existing($form, &$form_state
  * Submit handler for the field overview form.
  */
 function field_ui_field_overview_form_submit($form, &$form_state) {
-  $form_values = $form_state['values'];
+  $form_values = $form_state['values']['fields'];
   $entity_type = $form['#entity_type'];
   $bundle = $form['#bundle'];
   $admin_path = _field_ui_bundle_admin_path($entity_type, $bundle);
@@ -711,6 +813,10 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
   $field_types = field_info_field_types();
   $extra_fields = field_info_extra_fields($entity_type, $bundle, 'display');
 
+  $form_state += array(
+    'formatter_settings_edit' => NULL,
+  );
+
   $form += array(
     '#entity_type' => $entity_type,
     '#bundle' => $bundle,
@@ -724,14 +830,28 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
     return $form;
   }
 
-  $form_state += array(
-    'formatter_settings_edit' => NULL,
-  );
-
   $table = array(
-    '#theme' => 'field_ui_display_overview_table',
-    '#field_rows' => array(),
+    '#type' => 'field_ui_table',
     '#tree' => TRUE,
+    '#header' => array(
+      t('Field'),
+      t('Weight'),
+      t('Parent'),
+      t('Label'),
+      array('data' => t('Format'), 'colspan' => 3),
+    ),
+    '#regions' => array(
+      'visible' => array('message' => t('No field is displayed.')),
+      'hidden' => array('title' => t('Hidden'), 'message' => t('No field is hidden.')),
+    ),
+    '#parent_options' => array('' => t('<none>')),
+    '#attributes' => array(
+      'class' => array('field-ui-overview'),
+      'id' => 'field-display-overview',
+    ),
+    // Add AJAX wrapper.
+    '#prefix' => '<div id="field-display-overview-wrapper">',
+    '#suffix' => '</div>',
   );
 
   $field_label_options = array(
@@ -744,50 +864,67 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
     'hidden' => t('Hidden'),
   );
 
+  // Field rows.
   foreach ($instances as $name => $instance) {
+    $field = field_info_field($instance['field_name']);
     $display = $instance['display'][$view_mode];
-    $table[$name]['human_name'] = array(
-      '#markup' => check_plain($instance['label']),
-    );
-    $table[$name]['weight'] = array(
-      '#type' => 'textfield',
-      '#default_value' => $display['weight'],
-      '#size' => 3,
-    );
-    $table[$name]['hidden_name'] = array(
-      '#type' => 'hidden',
-      '#default_value' => $name,
-    );
-    $table[$name]['label'] = array(
-      '#type' => 'select',
-      '#options' => $field_label_options,
-      '#default_value' => $display['label'],
+    $table[$name] = array(
+      '#attributes' => array('class' => array('draggable', 'tabledrag-leaf')),
+      '#row_type' => 'field',
+      '#region_callback' => 'field_ui_display_overview_row_region',
+      '#js_settings' => array(
+        'rowHandler' => 'field',
+        'defaultFormatter' => $field_types[$field['type']]['default_formatter'],
+      ),
+      'human_name' => array(
+        '#markup' => check_plain($instance['label']),
+      ),
+      'weight' => array(
+        '#type' => 'textfield',
+        '#default_value' => $display['weight'],
+        '#size' => 3,
+        '#attributes' => array('class' => array('field-weight')),
+      ),
+      'parent_wrapper' => array(
+        'parent' => array(
+          '#type' => 'select',
+          '#options' => $table['#parent_options'],
+          '#default_value' => '',
+          '#attributes' => array('class' => array('field-parent')),
+          '#parents' => array('fields', $name, 'parent'),
+        ),
+        'hidden_name' => array(
+          '#type' => 'hidden',
+          '#default_value' => $name,
+          '#attributes' => array('class' => array('field-name')),
+        ),
+      ),
+      'label' => array(
+        '#type' => 'select',
+        '#options' => $field_label_options,
+        '#default_value' => $display['label'],
+      ),
     );
-    $field = field_info_field($instance['field_name']);
 
-    // The handling of the 'hidden' region in field_ui.js relies on the
-    // 'formatter type' select, so it is present in all cases, and hidden with
-    // CSS when the row is in 'edit settings' mode.
     $formatter_options = field_ui_formatter_options($field['type']);
     $formatter_options['hidden'] = t('<Hidden>');
-    $table[$name]['type'] = array(
-      '#type' => 'select',
-      '#options' => $formatter_options,
-      '#default_value' => $display['type'],
-      '#ajax' => array(
-        'callback' => 'field_ui_formatter_settings_js',
-        'wrapper' => 'field-display-overview-wrapper',
-        'effect' => 'fade',
+    $table[$name]['format'] = array(
+      'type' => array(
+        '#type' => 'select',
+        '#options' => $formatter_options,
+        '#default_value' => $display['type'],
+        '#parents' => array('fields', $name, 'type'),
+        '#attributes' => array('class' => array('field-formatter-type')),
       ),
-      '#field_name' => $name,
-      '#op' => 'change_type',
+      'settings_edit_form' => array(),
     );
+
     // Formatter settings.
 
     // Check the currently selected formatter, and merge persisted values for
     // formatter settings.
-    if (isset($form_state['values']['settings'][$name]['type'])) {
-      $formatter_type = $form_state['values']['settings'][$name]['type'];
+    if (isset($form_state['values']['fields'][$name]['type'])) {
+      $formatter_type = $form_state['values']['fields'][$name]['type'];
     }
     else {
       $formatter_type = $display['type'];
@@ -807,9 +944,9 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
 
     // Base button element for the various formatter settings actions.
     $base_button = array(
-      '#submit' => array('field_ui_formatter_settings_submit'),
+      '#submit' => array('field_ui_display_overview_multistep_submit'),
       '#ajax' => array(
-        'callback' => 'field_ui_formatter_settings_js',
+        'callback' => 'field_ui_display_overview_multistep_js',
         'wrapper' => 'field-display-overview-wrapper',
         'effect' => 'fade',
       ),
@@ -820,38 +957,43 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
       // We are currently editing this field's formatter settings. Display the
       // settings form and submit buttons.
       $table[$name]['settings_edit_form'] = array();
+
+      $settings_form = array();
       $function = $formatter['module'] . '_field_formatter_settings_form';
-      $additions = $function($field, $instance, $view_mode, $form, $form_state);
-      if (is_array($additions)) {
-        $table[$name]['settings_edit_form'] = array(
+      if (function_exists($function)) {
+        $settings_form = $function($field, $instance, $view_mode, $form, $form_state);
+      }
+
+      if ($settings_form) {
+        $table[$name]['format']['#cell_attributes'] = array('colspan' => 3);
+        $table[$name]['format']['settings_edit_form'] = array(
           '#type' => 'container',
           '#attributes' => array('class' => array('field-formatter-settings-edit-form')),
+          '#parents' => array('fields', $name, 'settings_edit_form'),
+          'label' => array(
+            '#markup' => t('Format settings:') . ' <span class="formatter-name">' . $formatter['label'] . '</span>',
+          ),
+          'settings' => $settings_form,
+          'actions' => array(
+            '#type' => 'actions',
+            'save_settings' => $base_button + array(
+              '#type' => 'submit',
+              '#name' => $name . '_formatter_settings_update',
+              '#value' => t('Update'),
+              '#op' => 'update',
+            ),
+            'cancel_settings' => $base_button + array(
+              '#type' => 'submit',
+              '#name' => $name . '_formatter_settings_cancel',
+              '#value' => t('Cancel'),
+              '#op' => 'cancel',
+              // Do not check errors for the 'Cancel' button, but make sure we
+              // get the value of the 'formatter type' select.
+              '#limit_validation_errors' => array(array('fields', $name, 'type')),
+            ),
+          ),
         );
-        $table[$name]['settings_edit_form']['label'] = array(
-          '#markup' => t('Format settings:') . ' <span class="formatter-name">' . $formatter['label'] . '</span>',
-        );
-        $table[$name]['settings_edit_form']['settings'] = $additions;
-        $table[$name]['settings_edit_form']['actions'] = array('#type' => 'actions');
-        $table[$name]['settings_edit_form']['actions']['save_settings'] = $base_button + array(
-          '#type' => 'submit',
-          '#name' => $name . '_formatter_settings_update',
-          '#value' => t('Update'),
-          '#op' => 'update',
-        );
-        $table[$name]['settings_edit_form']['actions']['cancel_settings'] = $base_button + array(
-          '#type' => 'submit',
-          '#name' => $name . '_formatter_settings_cancel',
-          '#value' => t('Cancel'),
-          '#op' => 'cancel',
-          // Do not check errors for the 'Cancel' button. We still need the
-          // value of the 'formatter type' select in $form_state['values'].
-          '#limit_validation_errors' => array(array('settings', $name, 'type'))
-        );
-        $table[$name]['#settings_editing'] = TRUE;
-        // When formatter is changed, cancel the currently edited settings. The
-        // select 'formatter type' input is hidden in editing mode, so this only
-        // happens is the row is dragged into the 'hidden' section.
-        $table[$name]['type']['#ajax']['trigger_as'] = array('name' => $name . '_formatter_settings_cancel');
+        $table[$name]['#attributes']['class'][] = 'field-formatter-settings-editing';
       }
     }
     else {
@@ -862,6 +1004,7 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
       if ($summary) {
         $table[$name]['settings_summary'] = array(
           '#markup' => '<div class="field-formatter-summary">' . $summary . '</div>',
+          '#cell_attributes' => array('class' => array('field-formatter-summary-cell')),
         );
         $table[$name]['settings_edit'] = $base_button + array(
           '#type' => 'image_button',
@@ -869,47 +1012,65 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
           '#src' => 'misc/configure.png',
           '#attributes' => array('class' => array('field-formatter-settings-edit'), 'alt' => t('Edit')),
           '#op' => 'edit',
-          // Do not check errors for the 'Edit' button. We still need the value
-          // of the 'formatter type' select in $form_state['values'].
-          '#limit_validation_errors' => array(array('settings', $name, 'type')),
+          // Do not check errors for the 'Edit' button, but make sure we get
+          // the value of the 'formatter type' select.
+          '#limit_validation_errors' => array(array('fields', $name, 'type')),
           '#prefix' => '<div class="field-formatter-settings-edit-wrapper">',
           '#suffix' => '</div>',
         );
       }
     }
-    $table['#field_rows'][] = $name;
-
-    // Collect default formatters for the JS script.
-    $field_type_info = field_info_field_types($field['type']);
-    $default_formatters[$name] = $field_type_info['default_formatter'];
   }
 
   // Non-field elements.
   foreach ($extra_fields as $name => $extra_field) {
     $display = $extra_field['display'][$view_mode];
-    $table[$name]['human_name'] = array(
-      '#markup' => check_plain($extra_field['label']),
-    );
-    $table[$name]['weight'] = array(
-      '#type' => 'textfield',
-      '#default_value' => $display['weight'],
-      '#size' => 3,
-    );
-    $table[$name]['hidden_name'] = array(
-      '#type' => 'hidden',
-      '#default_value' => $name,
-    );
-    $table[$name]['type'] = array(
-      '#type' => 'select',
-      '#options' => $extra_visibility_options,
-      '#default_value' => $display['visible'] ? 'visible' : 'hidden',
+    $table[$name] = array(
+      '#attributes' => array('class' => array('draggable', 'tabledrag-leaf')),
+      '#row_type' => 'extra_field',
+      '#region_callback' => 'field_ui_display_overview_row_region',
+      '#js_settings' => array('rowHandler' => 'field'),
+      'human_name' => array(
+        '#markup' => check_plain($extra_field['label']),
+      ),
+      'weight' => array(
+        '#type' => 'textfield',
+        '#default_value' => $display['weight'],
+        '#size' => 3,
+        '#attributes' => array('class' => array('field-weight')),
+      ),
+      'parent_wrapper' => array(
+        'parent' => array(
+          '#type' => 'select',
+          '#options' => $table['#parent_options'],
+          '#default_value' => '',
+          '#attributes' => array('class' => array('field-parent')),
+          '#parents' => array('fields', $name, 'parent'),
+        ),
+        'hidden_name' => array(
+          '#type' => 'hidden',
+          '#default_value' => $name,
+          '#attributes' => array('class' => array('field-name')),
+        ),
+      ),
+      'empty_cell' => array(
+        '#markup' => '&nbsp;',
+      ),
+      'format' => array(
+        'type' => array(
+          '#type' => 'select',
+          '#options' => $extra_visibility_options,
+          '#default_value' => $display['visible'] ? 'visible' : 'hidden',
+          '#parents' => array('fields', $name, 'type'),
+          '#attributes' => array('class' => array('field-formatter-type')),
+        ),
+      ),
+      'settings_summary' => array(),
+      'settings_edit' => array(),
     );
-    $table[$name]['settings_summary'] = array();
-    $table[$name]['settings_edit'] = array();
-    $table['#field_rows'][] = $name;
   }
 
-  $form['settings'] = $table;
+  $form['fields'] = $table;
 
   // Custom display settings.
   if ($view_mode == 'default') {
@@ -940,40 +1101,82 @@ function field_ui_display_overview_form($form, &$form_state, $entity_type, $bund
     );
   }
 
+  // In overviews involving nested rows from contributed modules (i.e
+  // field_group), the 'format type' selects can trigger a series of changes in
+  // child rows. The #ajax behavior is therefore not attached directly to the
+  // selects, but triggered by the client-side script through a hidden #ajax
+  // 'Refresh' button. A hidden 'refresh_rows' input tracks the name of
+  // affected rows.
+  $form['refresh_rows'] = array('#type' => 'hidden');
+  $form['refresh'] = array(
+    '#type' => 'submit',
+    '#value' => t('Refresh'),
+    '#op' => 'refresh_table',
+    // Do not check errors, but make sure we get the values of the
+    // 'refresh_rows' input.
+    '#limit_validation_errors' => array('refresh_rows'),
+    '#submit' => array('field_ui_display_overview_multistep_submit'),
+    '#ajax' => array(
+      'callback' => 'field_ui_display_overview_multistep_js',
+      'wrapper' => 'field-display-overview-wrapper',
+      'effect' => 'fade',
+      // The button stays hidden, so we hide the AJAX spinner too. Ad-hoc
+      // spinners will be added manually by the client-side script.
+      'progress' => 'none',
+    ),
+  );
+
   $form['actions'] = array('#type' => 'actions');
   $form['actions']['submit'] = array('#type' => 'submit', '#value' => t('Save'));
 
   $form['#attached']['js'][] = drupal_get_path('module', 'field_ui') . '/field_ui.js';
   $form['#attached']['css'][] = drupal_get_path('module', 'field_ui') . '/field_ui.css';
 
-  drupal_add_js(array('fieldDefaultFormatters' => $default_formatters), 'setting');
+  // Add tabledrag behavior.
+  drupal_add_tabledrag('field-display-overview', 'order', 'sibling', 'field-weight');
+  drupal_add_tabledrag('field-display-overview', 'match', 'parent', 'field-parent', 'field-parent', 'field-name');
+// @todo : use #attached instead when http://drupal.org/node/561858 is fixed.
+//  $form['#attached']['drupal_add_tabledrag'][] = array('field-display-overview', 'order', 'sibling', 'field-weight');
+//  $form['#attached']['drupal_add_tabledrag'][] = array('field-display-overview', 'match', 'parent', 'field-parent', 'field-parent', 'field-name');
 
   return $form;
 }
 
 
 /**
- * Form submit handler for the formatter settings buttons.
+ * Form submit handler for multistep buttons on the 'Manage display' screen.
  */
-function field_ui_formatter_settings_submit($form, &$form_state) {
+function field_ui_display_overview_multistep_submit($form, &$form_state) {
   $trigger = $form_state['triggering_element'];
-  $field_name = $trigger['#field_name'];
   $op = $trigger['#op'];
 
   switch ($op) {
     case 'edit':
       // Store the field whose settings are currently being edited.
+      $field_name = $trigger['#field_name'];
       $form_state['formatter_settings_edit'] = $field_name;
       break;
 
     case 'update':
-      // Store the saved settings.
-      $values = $form_state['values']['settings'][$field_name]['settings_edit_form']['settings'];
+      // Store the saved settings, and set the field back to 'non edit' mode.
+      $field_name = $trigger['#field_name'];
+      $values = $form_state['values']['fields'][$field_name]['settings_edit_form']['settings'];
       $form_state['formatter_settings'][$field_name] = $values;
-      // Fall-through to the 'cancel' case.
+      unset($form_state['formatter_settings_edit']);
+      break;
+
     case 'cancel':
-      // Unset the field as being currently edited.
-      $form_state['formatter_settings_edit'] = NULL;
+      // Set the field back to 'non edit' mode.
+      unset($form_state['formatter_settings_edit']);
+      break;
+
+    case 'refresh_table':
+      // If the currently edited field is one of the rows to be refreshed, set
+      // it back to 'non edit' mode.
+      $updated_rows = explode(' ', $form_state['values']['refresh_rows']);
+      if (isset($form_state['formatter_settings_edit']) && in_array($form_state['formatter_settings_edit'], $updated_rows)) {
+        unset($form_state['formatter_settings_edit']);
+      }
       break;
   }
 
@@ -981,79 +1184,41 @@ function field_ui_formatter_settings_submit($form, &$form_state) {
 }
 
 /**
- * AJAX handler for the formatter settings buttons.
+ * AJAX handler for multistep buttons on the 'Manage display' screen.
  */
-function field_ui_formatter_settings_js($form, &$form_state) {
+function field_ui_display_overview_multistep_js($form, &$form_state) {
   $trigger = $form_state['triggering_element'];
-  $field_name = $trigger['#field_name'];
   $op = $trigger['#op'];
 
-  // Apply the AJAX effect to updated elements.
+  // Pick the elements that need ro receive the ajax-new-content effect.
   switch ($op) {
-    case 'change_type':
-      $updated = array('settings_summary');
-      break;
-
     case 'edit':
-      $updated = array('settings_edit_form');
+      $updated_rows = array($trigger['#field_name']);
+      $updated_columns = array('format');
       break;
 
     case 'update':
     case 'cancel':
-      $updated = array('type', 'settings_summary', 'settings_edit');
+      $updated_rows = array($trigger['#field_name']);
+      $updated_columns = array('format', 'settings_summary', 'settings_edit');
       break;
-  }
-  foreach ($updated as $key) {
-    $element = &$form['settings'][$field_name][$key];
-    $element['#prefix'] = '<div class="ajax-new-content">' . (isset($element['#prefix']) ? $element['#prefix'] : '');
-    $element['#suffix'] = (isset($element['#suffix']) ? $element['#suffix'] : '') . '</div>';
-  }
 
-  return $form['settings'];
-}
-
-/**
- * Theme preprocess function for field_ui-display-overview-table.tpl.php.
- */
-function template_preprocess_field_ui_display_overview_table(&$vars) {
-  $elements = &$vars['elements'];
-
-  $rows = array(
-    'visible' => array(),
-    'hidden' => array(),
-  );
-
-  if (!empty($elements['#field_rows'])) {
-    drupal_add_tabledrag('field-display-overview', 'order', 'sibling', 'field-weight');
-
-    $order = _field_ui_overview_order($elements, $elements['#field_rows']);
-    foreach ($order as $key) {
-      $element = &$elements[$key];
-      $visibility = $element['type']['#value'] == 'hidden' ? 'hidden' : 'visible';
-
-      // Add target classes for the tabledrag behavior.
-      $element['weight']['#attributes']['class'][] = 'field-weight';
-      $element['hidden_name']['#attributes']['class'][] = 'field-name';
-      $element['type']['#attributes']['class'][] = 'field-formatter-type';
-      $element['type']['#attributes']['class'][] = "field-display-$visibility";
-      $element['type']['#attributes']['class'][] = "field-name-$key";
+    case 'refresh_table':
+      $updated_rows = array_values(explode(' ', $form_state['values']['refresh_rows']));
+      $updated_columns = array('settings_summary', 'settings_edit');
+      break;
+  }
 
-      $row = new stdClass();
-      foreach (element_children($element) as $child) {
-        $row->{$child} = drupal_render($element[$child]);
-      }
-      $row->settings_class = (!empty($element['#settings_class']) ? $element['#settings_class'] : '');
-      $row->class = 'draggable';
-      if (isset($element['#settings_editing'])) {
-        $row->class .= ' field-formatter-settings-editing';
-      }
-      $row->label_class = 'label-field';
-      $row->id = 'row-' . strtr($key, '_', '-');
-      $rows[$visibility][] = $row;
+  foreach ($updated_rows as $name) {
+    foreach ($updated_columns as $key) {
+      $element = &$form['fields'][$name][$key];
+      $element['#prefix'] = '<div class="ajax-new-content">' . (isset($element['#prefix']) ? $element['#prefix'] : '');
+      $element['#suffix'] = (isset($element['#suffix']) ? $element['#suffix'] : '') . '</div>';
     }
   }
 
-  $vars['rows'] = $rows;
+  // Return the whole table.
+  return $form['fields'];
 }
 
 /**
@@ -1068,7 +1233,7 @@ function field_ui_display_overview_form_submit($form, &$form_state) {
   // Save data for 'regular' fields.
   foreach ($form['#fields'] as $field_name) {
     $instance = field_info_instance($entity_type, $field_name, $bundle);
-    $values = $form_values['settings'][$field_name];
+    $values = $form_values['fields'][$field_name];
     // Get formatter settings. They lie either directly in submitted form
     // values (if the whole form was submitted while some formatter
     // settings were being edited), or have been persisted in
@@ -1100,8 +1265,8 @@ function field_ui_display_overview_form_submit($form, &$form_state) {
   // Save data for 'extra' fields.
   foreach ($form['#extra'] as $name) {
     $bundle_settings['extra_fields']['display'][$name][$view_mode] = array(
-      'weight' => $form_values['settings'][$name]['weight'],
-      'visible' => $form_values['settings'][$name]['type'] == 'visible',
+      'weight' => $form_values['fields'][$name]['weight'],
+      'visible' => $form_values['fields'][$name]['type'] == 'visible',
     );
   }
 
@@ -1740,25 +1905,6 @@ function field_ui_next_destination($entity_type, $bundle) {
 }
 
 /**
- * Helper function to order fields when theming overview forms.
- * @todo Remove when 'Manage display' screen is done.
- */
-function _field_ui_overview_order(&$form, $field_rows) {
-  // Put weight and parenting values into a $dummy render structure and let
-  // drupal_render() figure out the corresponding row order.
-  $dummy = array();
-  // Field rows: account for weight.
-  foreach ($field_rows as $name) {
-    $dummy[$name] = array(
-      '#markup' => $name . ' ',
-      '#type' => 'markup',
-      '#weight' => $form[$name]['weight']['#value'],
-    );
-  }
-  return $dummy ? explode(' ', trim(drupal_render($dummy))) : array();
-}
-
-/**
  * Helper form element validator: integer.
  */
 function _element_validate_integer($element, &$form_state) {
diff --git a/modules/field_ui/field_ui.css b/modules/field_ui/field_ui.css
index 9f53967cb..a084e28b6 100644
--- a/modules/field_ui/field_ui.css
+++ b/modules/field_ui/field_ui.css
@@ -1,51 +1,60 @@
 /* $Id$ */
 
-/* 'Manage fields' overview */
-#field-overview tr.add-new .label-input {
+/* 'Manage fields' and 'Manage display' overviews */
+table.field-ui-overview tr.add-new .label-input {
   float: left; /* LTR */
 }
-#field-overview tr.add-new .tabledrag-changed {
+table.field-ui-overview tr.add-new .tabledrag-changed {
   display: none;
 }
-#field-overview tr.add-new .description {
+table.field-ui-overview tr.add-new .description {
   margin-bottom: 0;
 }
-#field-overview tr.add-new .add-new-placeholder {
+table.field-ui-overview tr.add-new .add-new-placeholder {
   font-weight: bold;
   padding-bottom: .5em;
 }
+table.field-ui-overview tr.region-add-new-title {
+  display: none;
+}
 
 /* 'Manage display' overview */
-.field-display-overview tr.region-title td {
+#field-display-overview tr.region-title td {
   font-weight: bold;
 }
-.field-display-overview tr.region-populated {
+#field-display-overview tr.region-message td {
+  font-style: italic;
+}
+#field-display-overview tr.region-populated {
   display: none;
 }
-.field-display-overview .field-formatter-summary-cell {
+#field-display-overview .field-formatter-summary-cell {
   line-height: 1em;
 }
-.field-display-overview .field-formatter-summary {
+#field-display-overview .field-formatter-summary {
   float: left;
   font-size: 0.9em;
 }
-.field-display-overview td.field-formatter-summary-cell span.warning {
+#field-display-overview td.field-formatter-summary-cell span.warning {
   display: block;
   float: left;
   margin-right: .5em;
 }
-.field-display-overview .field-formatter-settings-edit-wrapper {
+#field-display-overview .field-formatter-settings-edit-wrapper {
   float: right;
 }
-.field-display-overview .field-formatter-settings-edit {
+#field-display-overview .field-formatter-settings-edit {
   float: right;
 }
-.field-display-overview tr.field-formatter-settings-editing td {
+#field-display-overview tr.field-formatter-settings-editing td {
   vertical-align: top;
 }
-.field-display-overview tr.field-formatter-settings-editing .field-formatter-type {
+#field-display-overview tr.field-formatter-settings-editing .field-formatter-type {
   display: none;
 }
-.field-display-overview .field-formatter-settings-edit-form .formatter-name{
+#field-display-overview .field-formatter-settings-edit-form .formatter-name{
   font-weight: bold;
-}
\ No newline at end of file
+}
+#field-ui-display-overview-form #edit-refresh {
+  display:none;
+}
diff --git a/modules/field_ui/field_ui.js b/modules/field_ui/field_ui.js
index 86a8515fb..fda06d34d 100644
--- a/modules/field_ui/field_ui.js
+++ b/modules/field_ui/field_ui.js
@@ -2,61 +2,71 @@
 
 (function($) {
 
-Drupal.behaviors.fieldManageFields = {
-  attach: function (context) {
-    attachUpdateSelects(context);
+Drupal.behaviors.fieldUIFieldOverview = {
+  attach: function (context, settings) {
+    $('table#field-overview', context).once('field-overview', function () {
+      Drupal.fieldUIFieldOverview.attachUpdateSelects(this, settings);
+    });
   }
 };
 
-function attachUpdateSelects(context) {
-  var widgetTypes = Drupal.settings.fieldWidgetTypes;
-  var fields = Drupal.settings.fields;
+Drupal.fieldUIFieldOverview = {
+  /**
+   * Implements dependent select dropdowns on the 'Manage fields' screen.
+   */
+  attachUpdateSelects: function(table, settings) {
+    var widgetTypes = settings.fieldWidgetTypes;
+    var fields = settings.fields;
+
+    // Store the default text of widget selects.
+    $('.widget-type-select', table).each(function () {
+      this.initialValue = this.options[0].text;
+    });
 
-  // Store the default text of widget selects.
-  $('#field-overview .widget-type-select', context).each(function () {
-    this.initialValue = this.options[0].text;
-  });
+    // 'Field type' select updates its 'Widget' select.
+    $('.field-type-select', table).each(function () {
+      this.targetSelect = $('.widget-type-select', $(this).parents('tr').eq(0));
 
-  // 'Field type' select updates its 'Widget' select.
-  $('#field-overview .field-type-select', context).each(function () {
-    this.targetSelect = $('.widget-type-select', $(this).parents('tr').eq(0));
+      $(this).bind('change keyup', function () {
+        var selectedFieldType = this.options[this.selectedIndex].value;
+        var options = (selectedFieldType in widgetTypes ? widgetTypes[selectedFieldType] : []);
+        this.targetSelect.fieldUIPopulateOptions(options);
+      });
 
-    $(this).bind('change keyup', function () {
-      var selectedFieldType = this.options[this.selectedIndex].value;
-      var options = (selectedFieldType in widgetTypes ? widgetTypes[selectedFieldType] : []);
-      this.targetSelect.fieldPopulateOptions(options);
+      // Trigger change on initial pageload to get the right widget options
+      // when field type comes pre-selected (on failed validation).
+      $(this).trigger('change', false);
     });
 
-    // Trigger change on initial pageload to get the right widget options
-    // when field type comes pre-selected (on failed validation).
-    $(this).trigger('change', false);
-  });
+    // 'Existing field' select updates its 'Widget' select and 'Label' textfield.
+    $('.field-select', table).each(function () {
+      this.targetSelect = $('.widget-type-select', $(this).parents('tr').eq(0));
+      this.targetTextfield = $('.label-textfield', $(this).parents('tr').eq(0));
+
+      $(this).bind('change keyup', function (e, updateText) {
+        var updateText = (typeof updateText == 'undefined' ? true : updateText);
+        var selectedField = this.options[this.selectedIndex].value;
+        var selectedFieldType = (selectedField in fields ? fields[selectedField].type : null);
+        var selectedFieldWidget = (selectedField in fields ? fields[selectedField].widget : null);
+        var options = (selectedFieldType && (selectedFieldType in widgetTypes) ? widgetTypes[selectedFieldType] : []);
+        this.targetSelect.fieldUIPopulateOptions(options, selectedFieldWidget);
+
+        if (updateText) {
+          $(this.targetTextfield).attr('value', (selectedField in fields ? fields[selectedField].label : ''));
+        }
+      });
 
-  // 'Existing field' select updates its 'Widget' select and 'Label' textfield.
-  $('#field-overview .field-select', context).each(function () {
-    this.targetSelect = $('.widget-type-select', $(this).parents('tr').eq(0));
-    this.targetTextfield = $('.label-textfield', $(this).parents('tr').eq(0));
-
-    $(this).bind('change keyup', function (e, updateText) {
-      var updateText = (typeof updateText == 'undefined' ? true : updateText);
-      var selectedField = this.options[this.selectedIndex].value;
-      var selectedFieldType = (selectedField in fields ? fields[selectedField].type : null);
-      var selectedFieldWidget = (selectedField in fields ? fields[selectedField].widget : null);
-      var options = (selectedFieldType && (selectedFieldType in widgetTypes) ? widgetTypes[selectedFieldType] : []);
-      this.targetSelect.fieldPopulateOptions(options, selectedFieldWidget);
-
-      if (updateText) {
-        $(this.targetTextfield).attr('value', (selectedField in fields ? fields[selectedField].label : ''));
-      }
+      // Trigger change on initial pageload to get the right widget options
+      // and label when field type comes pre-selected (on failed validation).
+      $(this).trigger('change', false);
     });
+  },
+};
 
-    // Trigger change on initial pageload to get the right widget options
-    // and label when field type comes pre-selected (on failed validation).
-    $(this).trigger('change', false);
-  });
-}
-
-jQuery.fn.fieldPopulateOptions = function (options, selected) {
+/**
+ * Populates options in a select input.
+ */
+jQuery.fn.fieldUIPopulateOptions = function (options, selected) {
   return this.each(function () {
     var disabled = false;
     if (options.length == 0) {
@@ -81,145 +91,239 @@ jQuery.fn.fieldPopulateOptions = function (options, selected) {
   });
 };
 
-/**
- * Moves a field in the display settings table from visible to hidden.
- *
- * This behavior is dependent on the tableDrag behavior, since it uses the
- * objects initialized in that behavior to update the row.
- */
-Drupal.behaviors.fieldManageDisplayDrag = {
+Drupal.behaviors.fieldUIDisplayOverview = {
   attach: function (context, settings) {
-    // tableDrag is required for this behavior.
-    if (!$('table.field-display-overview', context).length || typeof Drupal.tableDrag == 'undefined') {
-      return;
+    $('table#field-display-overview', context).once('field-display-overview', function() {
+      Drupal.fieldUIOverview.attach(this, settings.fieldUIRowsData, Drupal.fieldUIDisplayOverview);
+    });
+  }
+};
+
+Drupal.fieldUIOverview = {
+  /**
+   * Attaches the fieldUIOverview behavior.
+   */
+  attach: function (table, rowsData, rowHandlers) {
+    var tableDrag = Drupal.tableDrag[table.id];
+
+    // Add custom tabledrag callbacks.
+    tableDrag.onDrop = this.onDrop;
+    tableDrag.row.prototype.onSwap = this.onSwap;
+
+    // Create row handlers.
+    $('tr.draggable', table).each(function () {
+      // Extract server-side data for the row.
+      var row = this;
+      var data = rowsData[row.id];
+      data.tableDrag = tableDrag;
+
+      // Create the row handler, make it accessible from the DOM row element.
+      var rowHandler = eval('new rowHandlers.' + data.rowHandler + '(row, data);');
+      $(row).data('fieldUIRowHandler', rowHandler);
+    });
+  },
+
+  /**
+   * Event handler to be attached to form inputs triggering a region change.
+   */
+  onChange: function () {
+    var $trigger = $(this);
+    var row = $trigger.parents('tr:first').get(0);
+    var rowHandler = $(row).data('fieldUIRowHandler');
+
+    var refreshRows = {};
+    refreshRows[rowHandler.name] = $trigger.get(0);
+
+    // Handle region change.
+    var region = rowHandler.getRegion();
+    if (region != rowHandler.region) {
+      // Remove parenting.
+      $('select.field-parent', row).val('');
+      // Let the row handler deal with the region change.
+      $.extend(refreshRows, rowHandler.regionChange(region));
+      // Update the row region.
+      rowHandler.region = region;
     }
 
-    var defaultFormatters = Drupal.settings.fieldDefaultFormatters;
-    var tableDrag = Drupal.tableDrag['field-display-overview'];
-
-    // Add a handler for when a row is swapped, update empty regions.
-    tableDrag.row.prototype.onSwap = function (swappedRow) {
-      checkEmptyRegions(this.table, this);
-    };
-
-    // Add a handler to update the formatter selector when a row is dropped in
-    // or out of the 'Hidden' section.
-    tableDrag.onDrop = function () {
-      var dragObject = this;
-      var regionRow = $(dragObject.rowObject.element).prevAll('tr.region-message').get(0);
-      var visibility = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
-
-      // Update the 'format' selector if the visibility changed.
-      var $select = $('select.field-formatter-type', dragObject.rowObject.element);
-      var oldVisibility = $select[0].className.replace(/([^ ]+[ ]+)*field-display-([^ ]+)([ ]+[^ ]+)*/, '$2');
-      if (visibility != oldVisibility) {
-        $select.removeClass('field-display-' + oldVisibility).addClass('field-display-' + visibility);
-
-        // Update the selected formatter if coming from an actual drag.
-        if (!$select.data('noUpdate')) {
-          if (visibility == 'visible') {
-            // Restore the formatter back to the previously selected one if
-            // available, or to the default formatter.
-            var value = $select.data('oldFormatter');
-            if (typeof value == 'undefined') {
-              // Extract field name from the name of the select.
-              var fieldName = $select[0].className.match(/\bfield-name-(\S+)\b/)[1].replace('-', '_');
-              // Pseudo-fields do not have an entry in the defaultFormatters
-              // array, we just return to 'visible' for those.
-              value = (fieldName in defaultFormatters) ? defaultFormatters[fieldName] : 'visible';
-            }
-            $select.data('oldFormatter', value);
-          }
-          else {
-            var value = 'hidden';
-          }
-          $select.val(value);
-          // Fire AJAX update of formatter settings.
-          $select.change();
+    // Ajax-update the rows.
+    Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
+  },
+
+  /**
+   * Lets row handlers react when a row is dropped into a new region.
+   */
+  onDrop: function () {
+    var dragObject = this;
+    var row = dragObject.rowObject.element;
+    var rowHandler = $(row).data('fieldUIRowHandler');
+
+    var regionRow = $(row).prevAll('tr.region-message').get(0);
+    var region = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
+
+    if (region != rowHandler.region) {
+      // Let the row handler deal with the region change.
+      refreshRows = rowHandler.regionChange(region);
+      // Update the row region.
+      rowHandler.region = region;
+      // AJAX-update the rows.
+      Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
+    }
+  },
+
+  /**
+   * Refreshes placeholder rows in empty regions while a row is being dragged.
+   *
+   * Copied from block.js.
+   *
+   * @param table
+   *   The table DOM element.
+   * @param rowObject
+   *   The tableDrag rowObject for the row being dragged.
+   */
+  onSwap: function (draggedRow) {
+    var rowObject = this;
+    $('tr.region-message', rowObject.table).each(function () {
+      // If the dragged row is in this region, but above the message row, swap
+      // it down one space.
+      if ($(this).prev('tr').get(0) == rowObject.group[rowObject.group.length - 1]) {
+        // Prevent a recursion problem when using the keyboard to move rows up.
+        if ((rowObject.method != 'keyboard' || rowObject.direction == 'down')) {
+          rowObject.swap('after', this);
         }
-        $select.removeData('noUpdate');
       }
-    };
-
-    // Add the behavior to each formatter select list.
-    $('select.field-formatter-type', context).once('field-formatter-type', function () {
-      // Initialize 'previously selected formatter' as the incoming value.
-      if ($(this).val() != 'hidden') {
-        $(this).data('oldFormatter', $(this).val());
+      // This region has become empty.
+      if ($(this).next('tr').is(':not(.draggable)') || $(this).next('tr').length == 0) {
+        $(this).removeClass('region-populated').addClass('region-empty');
       }
+      // This region has become populated.
+      else if ($(this).is('.region-empty')) {
+        $(this).removeClass('region-empty').addClass('region-populated');
+      }
+    });
+  },
+
+  /**
+   * Triigers AJAX refresh of selected rows.
+   *
+   * The 'format type' selects can trigger a series of changes in child rows.
+   * The #ajax behavior is therefore not attached directly to the selects, but
+   * triggered manually through a hidden #ajax 'Refresh' button.
+   *
+   * @param rows
+   *   A hash object, whose keys are the names of the rows to refresh (they
+   *   will receive the 'ajax-new-content' effect on the server side), and
+   *   whose values are the DOM element in the row that should get an AJAX
+   *   throbber.
+   */
+  AJAXRefreshRows: function (rows) {
+    // Separate keys and values.
+    var rowNames = [];
+    var ajaxElements = [];
+    $.each(rows, function (rowName, ajaxElement) {
+      rowNames.push(rowName);
+      ajaxElements.push(ajaxElement);
+    });
 
-      // Add change listener.
-      $(this).change(function (event) {
-        var $select = $(this);
-        var value = $select.val();
+    if (rowNames.length) {
+      // Add a throbber next each of the ajaxElements.
+      var $throbber = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
+      $(ajaxElements)
+        .addClass('progress-disabled')
+        .after($throbber);
 
-        // Keep track of the last selected formatter.
-        if (value != 'hidden') {
-          $select.data('oldFormatter', value);
-        }
+      // Fire the AJAX update.
+      $('input[name=refresh_rows]').val(rowNames.join(' '));
+      $('input#edit-refresh').mousedown();
 
-        var visibility = (value == 'hidden') ? 'hidden' : 'visible';
-        var oldVisibility = $select[0].className.replace(/([^ ]+[ ]+)*field-display-([^ ]+)([ ]+[^ ]+)*/, '$2');
-        if (visibility != oldVisibility) {
-          // Prevent the onDrop handler from overriding the selected option.
-          $select.data('noUpdate', true);
-
-          // Make our new row and select field.
-          var $row = $(this).parents('tr:first');
-          var $table = $(this).parents('table');
-          var tableDrag = Drupal.tableDrag[$table.attr('id')];
-          tableDrag.rowObject = new tableDrag.row($row);
-
-          // Move the row at the bottom of the new section.
-          if (visibility == 'hidden') {
-            $('tr:last', tableDrag.table).after($row);
-          }
-          else {
-            $('tr.region-title-hidden', tableDrag.table).before($row);
-          }
-
-          // Manually update weights and restripe.
-          tableDrag.updateFields($row.get(0));
-          tableDrag.rowObject.changed = true;
-          if (tableDrag.oldRowElement) {
-            $(tableDrag.oldRowElement).removeClass('drag-previous');
-          }
-          tableDrag.oldRowElement = $row.get(0);
-          tableDrag.restripeTable();
-          tableDrag.rowObject.markChanged();
-          tableDrag.oldRowElement = $row;
-          $row.addClass('drag-previous');
-
-          // Modify empty regions with added or removed fields.
-          checkEmptyRegions($table, tableDrag.rowObject);
-        }
+      // Disabled elements do not appear in POST ajax data, so we mark the
+      // elements disabled only after firing the request.
+      $(ajaxElements).attr('disabled', true);
+    }
+  },
+};
 
-        // Remove focus from selectbox.
-        $select.get(0).blur();
-      });
-    });
 
-    var checkEmptyRegions = function ($table, rowObject) {
-      $('tr.region-message', $table).each(function () {
-        // If the dragged row is in this region, but above the message row, swap
-        // it down one space.
-        if ($(this).prev('tr').get(0) == rowObject.element) {
-          // Prevent a recursion problem when using the keyboard to move rows up.
-          if ((rowObject.method != 'keyboard' || rowObject.direction == 'down')) {
-            rowObject.swap('after', this);
-          }
-        }
-        // This region has become empty.
-        if ($(this).next('tr').is(':not(.draggable)') || $(this).next('tr').length == 0) {
-          $(this).removeClass('region-populated').addClass('region-empty');
-        }
-        // This region has become populated.
-        else if ($(this).is('.region-empty')) {
-          $(this).removeClass('region-empty').addClass('region-populated');
+/**
+ * Row handlers for the 'Manage display' screen.
+ */
+Drupal.fieldUIDisplayOverview = {};
+
+/**
+ * Constructor for a 'field' row handler.
+ *
+ * This handler is used for both fields and 'extra fields' rows.
+ *
+ * @param row
+ *   The row DOM element.
+ * @param data
+ *   Additional data to be populated in the constructed object.
+ */
+Drupal.fieldUIDisplayOverview.field = function (row, data) {
+  this.row = row;
+  this.name = data.name;
+  this.region = data.region;
+  this.tableDrag = data.tableDrag;
+
+  // Attach change listener to the 'formatter type' select.
+  this.$formatSelect = $('select.field-formatter-type', row);
+  this.$formatSelect.change(Drupal.fieldUIOverview.onChange);
+
+  return this;
+};
+
+Drupal.fieldUIDisplayOverview.field.prototype = {
+  /**
+   * Returns the region corresponding to the current form values of the row.
+   */
+  getRegion: function () {
+    return (this.$formatSelect.val() == 'hidden') ? 'hidden' : 'visible';
+  },
+
+  /**
+   * Reacts to a row being changed regions.
+   *
+   * This function is called when the row is moved to a different region, as a
+   * result of either :
+   * - a drag-and-drop action (the row's form elements then probably need to be
+   *   updated accordingly)
+   * - user input in one of the form elements watched by the
+   *   Drupal.fieldUIOverview.onChange change listener.
+   *
+   * @param region
+   *   The name of the new region for the row.
+   * @return
+   *   A hash object indicating which rows should be AJAX-updated as a result
+   *   of the change, in the format expected by
+   *   Drupal.displayOverview.AJAXRefreshRows().
+   */
+  regionChange: function (region) {
+    $.debug(this.region + ' --> ' + region, this.name);
+
+    // When triggered by a row drag, the 'format' select needs to be adjusted
+    // to the new region.
+    var currentValue = this.$formatSelect.val();
+    switch (region) {
+      case 'visible':
+        if (currentValue == 'hidden') {
+          // Restore the formatter back to the default formatter. Pseudo-fields do
+          // not have default formatters, we just return to 'visible' for those.
+          var value = (this.defaultFormatter != undefined) ? this.defaultFormatter : 'visible';
         }
-      });
-    };
-  }
+        break;
+
+      default:
+        var value = 'hidden';
+        break;
+    }
+    if (value != undefined) {
+      this.$formatSelect.val(value);
+    }
+
+    var refreshRows = {};
+    refreshRows[this.name] = this.$formatSelect.get(0);
+
+    return refreshRows;
+  },
 };
 
 })(jQuery);
diff --git a/modules/field_ui/field_ui.module b/modules/field_ui/field_ui.module
index 59aabb46c..8ce1cdd14 100644
--- a/modules/field_ui/field_ui.module
+++ b/modules/field_ui/field_ui.module
@@ -275,11 +275,6 @@ function _field_ui_view_mode_menu_access($entity_type, $bundle, $view_mode, $acc
  */
 function field_ui_theme() {
   return array(
-    'field_ui_display_overview_table' => array(
-      'render element' => 'elements',
-      'file' => 'field_ui.admin.inc',
-      'template' => 'field_ui-display-overview-table',
-    ),
     'field_ui_table' => array(
       'render element' => 'elements',
     ),
@@ -291,8 +286,10 @@ function field_ui_theme() {
  */
 function field_ui_element_info() {
   return array(
-    'table' => array(
+    'field_ui_table' => array(
       '#theme' => 'field_ui_table',
+      '#pre_render' => array('field_ui_table_pre_render'),
+      '#regions' => array('' => array()),
     ),
   );
 }
diff --git a/modules/field_ui/field_ui.test b/modules/field_ui/field_ui.test
index ecc2ea5c2..d009dbed8 100644
--- a/modules/field_ui/field_ui.test
+++ b/modules/field_ui/field_ui.test
@@ -85,8 +85,8 @@ class FieldUITestCase extends DrupalWebTestCase {
   function createField() {
     // Create a test field.
     $edit = array(
-      '_add_new_field[label]' => $this->field_label,
-      '_add_new_field[field_name]' => $this->field_name_input,
+      'fields[_add_new_field][label]' => $this->field_label,
+      'fields[_add_new_field][field_name]' => $this->field_name_input,
     );
     $this->fieldUIAddNewField('admin/structure/types/manage/' . $this->hyphen_type, $edit);
 
@@ -95,7 +95,7 @@ class FieldUITestCase extends DrupalWebTestCase {
     // should also appear in the 'taxonomy term' entity.
     $vocabulary = taxonomy_vocabulary_load(1);
     $this->drupalGet('admin/structure/taxonomy/' . $vocabulary->machine_name . '/fields');
-    $this->assertTrue($this->xpath('//select[@name="_add_existing_field[field_name]"]//option[@value="' . $this->field_name . '"]'), t('Existing field was found in account settings.'));
+    $this->assertTrue($this->xpath('//select[@name="fields[_add_existing_field][field_name]"]//option[@value="' . $this->field_name . '"]'), t('Existing field was found in account settings.'));
   }
 
   /**
@@ -136,8 +136,8 @@ class FieldUITestCase extends DrupalWebTestCase {
 
     // Add a new field based on an existing field.
     $edit = array(
-      '_add_existing_field[label]' => $this->field_label . '_2',
-      '_add_existing_field[field_name]' => $this->field_name,
+      'fields[_add_existing_field][label]' => $this->field_label . '_2',
+      'fields[_add_existing_field][field_name]' => $this->field_name,
     );
     $this->fieldUIAddExistingField("admin/structure/types/manage/page", $edit);
   }
@@ -224,8 +224,8 @@ class FieldUITestCase extends DrupalWebTestCase {
     // Create a new field.
     $bundle_path1 = 'admin/structure/types/manage/' . $this->hyphen_type;
     $edit1 = array(
-      '_add_new_field[label]' => $this->field_label,
-      '_add_new_field[field_name]' => $this->field_name,
+      'fields[_add_new_field][label]' => $this->field_label,
+      'fields[_add_new_field][field_name]' => $this->field_name,
     );
     $this->fieldUIAddNewField($bundle_path1, $edit1);
 
@@ -238,8 +238,8 @@ class FieldUITestCase extends DrupalWebTestCase {
     // Add an instance to the second node type.
     $bundle_path2 = 'admin/structure/types/manage/' . $hyphen_type2;
     $edit2 = array(
-      '_add_existing_field[label]' => $this->field_label,
-      '_add_existing_field[field_name]' => $this->field_name,
+      'fields[_add_existing_field][label]' => $this->field_label,
+      'fields[_add_existing_field][field_name]' => $this->field_name,
     );
     $this->fieldUIAddExistingField($bundle_path2, $edit2);
 
@@ -317,11 +317,11 @@ class FieldUITestCase extends DrupalWebTestCase {
   function fieldUIAddNewField($bundle_path, $initial_edit, $field_edit = array(), $instance_edit = array()) {
     // Use 'test_field' field type by default.
     $initial_edit += array(
-      '_add_new_field[type]' => 'test_field',
-      '_add_new_field[widget_type]' => 'test_field_widget',
+      'fields[_add_new_field][type]' => 'test_field',
+      'fields[_add_new_field][widget_type]' => 'test_field_widget',
     );
-    $label = $initial_edit['_add_new_field[label]'];
-    $field_name = $initial_edit['_add_new_field[field_name]'];
+    $label = $initial_edit['fields[_add_new_field][label]'];
+    $field_name = $initial_edit['fields[_add_new_field][field_name]'];
 
     // First step : 'Add new field' on the 'Manage fields' page.
     $this->drupalPost("$bundle_path/fields",  $initial_edit, t('Save'));
@@ -357,10 +357,10 @@ class FieldUITestCase extends DrupalWebTestCase {
   function fieldUIAddExistingField($bundle_path, $initial_edit, $instance_edit = array()) {
     // Use 'test_field_widget' by default.
     $initial_edit += array(
-      '_add_existing_field[widget_type]' => 'test_field_widget',
+      'fields[_add_existing_field][widget_type]' => 'test_field_widget',
     );
-    $label = $initial_edit['_add_existing_field[label]'];
-    $field_name = $initial_edit['_add_existing_field[field_name]'];
+    $label = $initial_edit['fields[_add_existing_field][label]'];
+    $field_name = $initial_edit['fields[_add_existing_field][field_name]'];
 
     // First step : 'Add existing field' on the 'Manage fields' page.
     $this->drupalPost("$bundle_path/fields", $initial_edit, t('Save'));