diff --git a/core/includes/form.inc b/core/includes/form.inc
index 49ace44..f7f2f93 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -256,8 +256,8 @@ function drupal_get_form($form_id) {
* handler, and is also used in Ajax handlers.
* - has_file_element: Internal. If TRUE, there is a file element and Form API
* will set the appropriate 'enctype' HTML attribute on the form.
- * - groups: Internal. An array containing references to fieldsets to render
- * them within vertical tabs.
+ * - groups: Internal. An array containing references to details elements to
+ * render them within vertical tabs.
* - storage: $form_state['storage'] is not a special key, and no specific
* support is provided for it in the Form API. By tradition it was
* the location where application-specific data was stored for communication
@@ -1706,9 +1706,9 @@ function form_error(&$element, $message = '') {
* type, one of the functions in this array is form_process_date(), which adds
* the individual 'year', 'month', 'day', etc. child elements. These functions
* can also be used to set additional properties or implement special logic
- * other than adding child elements: for example, for the 'fieldset' element
- * type, one of the functions in this array is form_process_fieldset(), which
- * adds the attributes and JavaScript needed to make the fieldset collapsible
+ * other than adding child elements: for example, for the 'details' element
+ * type, one of the functions in this array is form_process_details(), which
+ * adds the attributes and JavaScript needed to make the details collapsible
* if the #collapsible property is set. The #process functions are called in
* preorder traversal, meaning they are called for the parent element first,
* then for the child elements.
@@ -2814,6 +2814,39 @@ function theme_fieldset($variables) {
}
/**
+ * Returns HTML for a details form element and its children.
+ *
+ * @param $variables
+ * An associative array containing:
+ * - element: An associative array containing the properties of the element.
+ * Properties used: #attributes, #children, #collapsed, #collapsible,
+ * #description, #id, #title, #value.
+ *
+ * @ingroup themeable
+ */
+function theme_details($variables) {
+ $element = $variables['element'];
+ element_set_attributes($element, array('id'));
+ _form_set_class($element, array('form-wrapper'));
+
+ $output = '';
+ if (!empty($element['#title'])) {
+ $output .= '' . $element['#title'] . '';
+ }
+ $output .= '
';
+ if (!empty($element['#description'])) {
+ $output .= '
';
+ $output .= "\n";
+ return $output;
+}
+
+/**
* Returns HTML for a radio button form element.
*
* Note: The input "name" attribute needs to be sanitized before output, which
@@ -3684,16 +3717,35 @@ function form_validate_machine_name(&$element, &$form_state) {
* The processed element.
*/
function form_process_fieldset(&$element, &$form_state) {
+ return form_process_details($element, $form_state);
+}
+
+/**
+ * Arranges details into groups.
+ *
+ * @param $element
+ * An associative array containing the properties and children of the
+ * details. Note that $element must be taken by reference here, so processed
+ * child elements are taken over into $form_state.
+ * @param $form_state
+ * The $form_state array for the form this details belongs to.
+ *
+ * @return
+ * The processed element.
+ */
+function form_process_details(&$element, &$form_state) {
$parents = implode('][', $element['#parents']);
- // Each fieldset forms a new group. The #type 'vertical_tabs' basically only
- // injects a new fieldset.
+ // Each details element forms a new group. The #type 'vertical_tabs' basically
+ // only injects a new details element.
$form_state['groups'][$parents]['#group_exists'] = TRUE;
$element['#groups'] = &$form_state['groups'];
- // Process vertical tabs group member fieldsets.
+ // Process vertical tabs group member details elements.
if (isset($element['#group'])) {
- // Add this fieldset to the defined group (by reference).
+ // REMOVEME: Temporarily force vertical-tab fieldsets into details.
+ $element['#theme_wrappers'] = array('details');
+ // Add this details element to the defined group (by reference).
$group = $element['#group'];
$form_state['groups'][$group][] = &$element;
}
@@ -3715,13 +3767,27 @@ function form_process_fieldset(&$element, &$form_state) {
* The modified element with all group members.
*/
function form_pre_render_fieldset($element) {
- // The .form-wrapper class is required for #states to treat fieldsets like
+ return form_pre_render_details($element);
+}
+
+/**
+ * Adds members of this group as actual elements for rendering.
+ *
+ * @param $element
+ * An associative array containing the properties and children of the
+ * details.
+ *
+ * @return
+ * The modified element with all group members.
+ */
+function form_pre_render_details($element) {
+ // The .form-wrapper class is required for #states to treat details like
// containers.
if (!isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = array();
}
- // Collapsible fieldsets
+ // Collapsible details.
if (!empty($element['#collapsible'])) {
$element['#attached']['library'][] = array('system', 'drupal.collapse');
$element['#attributes']['class'][] = 'collapsible';
@@ -3730,7 +3796,7 @@ function form_pre_render_fieldset($element) {
}
}
- // Fieldsets may be rendered outside of a Form API context.
+ // Details may be rendered outside of a Form API context.
if (!isset($element['#parents']) || !isset($element['#groups'])) {
return $element;
}
@@ -3742,7 +3808,7 @@ function form_pre_render_fieldset($element) {
// Break references and indicate that the element should be rendered as
// group member.
$child = (array) $element['#groups'][$parents][$key];
- $child['#group_fieldset'] = TRUE;
+ $child['#group_details'] = TRUE;
// Inject the element as new child element.
$element[] = $child;
@@ -3762,7 +3828,7 @@ function form_pre_render_fieldset($element) {
// Intentionally empty to clarify the flow; we simply return $element.
}
// If we injected this element into the group, then we want to render it.
- elseif (!empty($element['#group_fieldset'])) {
+ elseif (!empty($element['#group_details'])) {
// Intentionally empty to clarify the flow; we simply return $element.
}
// Otherwise, this element belongs to a group and the group exists, so we do
@@ -3780,7 +3846,7 @@ function form_pre_render_fieldset($element) {
*
* @param $element
* An associative array containing the properties and children of the
- * fieldset.
+ * details element.
* @param $form_state
* The $form_state array for the form this vertical tab widget belongs to.
*
@@ -3788,10 +3854,10 @@ function form_pre_render_fieldset($element) {
* The processed element.
*/
function form_process_vertical_tabs($element, &$form_state) {
- // Inject a new fieldset as child, so that form_process_fieldset() processes
- // this fieldset like any other fieldset.
+ // Inject a new details as child, so that form_process_details() processes
+ // this details element like any other details.
$element['group'] = array(
- '#type' => 'fieldset',
+ '#type' => 'details',
'#theme_wrappers' => array(),
'#parents' => $element['#parents'],
);
@@ -3814,12 +3880,12 @@ function form_process_vertical_tabs($element, &$form_state) {
}
/**
- * Returns HTML for an element's children fieldsets as vertical tabs.
+ * Returns HTML for an element's children details as vertical tabs.
*
* @param $variables
* An associative array containing:
* - element: An associative array containing the properties and children of
- * the fieldset. Properties used: #children.
+ * the details element. Properties used: #children.
*
* @ingroup themeable
*/
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index cc29a98..f3d6988 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -3042,6 +3042,9 @@ function drupal_common_theme() {
'fieldset' => array(
'render element' => 'element',
),
+ 'details' => array(
+ 'render element' => 'element',
+ ),
'radio' => array(
'render element' => 'element',
),
diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index 80f5939..a64ce05 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -3,18 +3,18 @@
"use strict";
/**
- * The collapsible fieldset object represents a single collapsible fieldset.
+ * The collapsible details object represents a single collapsible details element.
*/
-function CollapsibleFieldset(node, settings) {
+function CollapsibleDetails(node, settings) {
this.$node = $(node);
- this.$node.data('fieldset', this);
+ this.$node.data('details', this);
this.settings = $.extend({
duration:'fast',
easing:'linear'
},
settings
);
- // Expand fieldset if there are errors inside, or if it contains an
+ // Expand details if there are errors inside, or if it contains an
// element that is targeted by the URI fragment identifier.
var anchor = location.hash && location.hash !== '#' ? ', ' + location.hash : '';
if (this.$node.find('.error' + anchor).length) {
@@ -27,19 +27,19 @@ function CollapsibleFieldset(node, settings) {
}
/**
- * Extend CollapsibleFieldset function.
+ * Extend CollapsibleDetails function.
*/
-$.extend(CollapsibleFieldset, {
+$.extend(CollapsibleDetails, {
/**
- * Holds references to instantiated CollapsibleFieldset objects.
+ * Holds references to instantiated CollapsibleDetails objects.
*/
- fieldsets: []
+ instances: []
});
/**
- * Extend CollapsibleFieldset prototype.
+ * Extend CollapsibleDetails prototype.
*/
-$.extend(CollapsibleFieldset.prototype, {
+$.extend(CollapsibleDetails.prototype, {
/**
* Flag preventing multiple simultaneous animations.
*/
@@ -57,17 +57,16 @@ $.extend(CollapsibleFieldset.prototype, {
* Initialize and setup legend markup.
*/
setupLegend: function () {
- // Turn the legend into a clickable link, but retain span.fieldset-legend
- // for CSS positioning.
- var $legend = this.$node.find('> legend .fieldset-legend');
+ // Turn the summary into a clickable link.
+ var $legend = this.$node.find('> summary');
- $('')
+ $('')
.append(this.$node.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
.prependTo($legend)
.after(' ');
// .wrapInner() does not retain bound events.
- var $link = $('')
+ var $link = $('')
.prepend($legend.contents())
.appendTo($legend)
.click($.proxy(this.onLegendClick, this));
@@ -88,7 +87,7 @@ $.extend(CollapsibleFieldset.prototype, {
this.$summary.html(text ? ' (' + text + ')' : '');
},
/**
- * Toggle the visibility of a fieldset using smooth animations.
+ * Toggle the visibility of a details element using smooth animations.
*/
toggle: function () {
// Don't animate multiple times.
@@ -96,11 +95,11 @@ $.extend(CollapsibleFieldset.prototype, {
return;
}
if (this.$node.is('.collapsed')) {
- var $content = this.$node.find('> .fieldset-wrapper').hide();
+ var $content = this.$node.find('> .details-wrapper').hide();
this.$node
.removeClass('collapsed')
.trigger({ type:'collapsed', value:false })
- .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
+ .find('> summary span.details-summary-prefix').html(Drupal.t('Hide'));
$content.slideDown(
$.extend(this.settings, {
complete:$.proxy(this.onCompleteSlideDown, this)
@@ -109,7 +108,7 @@ $.extend(CollapsibleFieldset.prototype, {
}
else {
this.$node.trigger({ type:'collapsed', value:true });
- this.$node.find('> .fieldset-wrapper').slideUp(
+ this.$node.find('> .details-wrapper').slideUp(
$.extend(this.settings, {
complete:$.proxy(this.onCompleteSlideUp, this)
})
@@ -117,19 +116,19 @@ $.extend(CollapsibleFieldset.prototype, {
}
},
/**
- * Completed opening fieldset.
+ * Completed opening details element.
*/
onCompleteSlideDown: function () {
this.$node.trigger('completeSlideDown');
this.animating = false;
},
/**
- * Completed closing fieldset.
+ * Completed closing details element.
*/
onCompleteSlideUp: function () {
this.$node
.addClass('collapsed')
- .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
+ .find('> summary span.details-summary-prefix').html(Drupal.t('Show'));
this.$node.trigger('completeSlideUp');
this.animating = false;
}
@@ -137,16 +136,16 @@ $.extend(CollapsibleFieldset.prototype, {
Drupal.behaviors.collapse = {
attach: function (context, settings) {
- var $collapsibleFieldsets = $(context).find('fieldset.collapsible').once('collapse');
- if ($collapsibleFieldsets.length) {
- for (var i = 0; i < $collapsibleFieldsets.length; i++) {
- CollapsibleFieldset.fieldsets.push(new CollapsibleFieldset($collapsibleFieldsets[i], settings.collapsibleFieldset));
+ var $collapsibleDetails = $(context).find('details.collapsible').once('collapse');
+ if ($collapsibleDetails.length) {
+ for (var i = 0; i < $collapsibleDetails.length; i++) {
+ CollapsibleDetails.instances.push(new CollapsibleDetails($collapsibleDetails[i], settings.collapsibleDetails));
}
}
}
};
// Expose constructor in the public space.
-Drupal.CollapsibleFieldset = CollapsibleFieldset;
+Drupal.CollapsibleDetails = CollapsibleDetails;
})(jQuery, Drupal);
diff --git a/core/misc/states.js b/core/misc/states.js
index afd922c..171bac5 100644
--- a/core/misc/states.js
+++ b/core/misc/states.js
@@ -538,7 +538,7 @@ $(document).bind('state:checked', function(e) {
$(document).bind('state:collapsed', function(e) {
if (e.trigger) {
if ($(e.target).is('.collapsed') !== e.value) {
- $(e.target).find('> legend a').click();
+ $(e.target).find('> summary a').click();
}
}
});
diff --git a/core/misc/vertical-tabs.css b/core/misc/vertical-tabs.css
index c946503..1f1fdf6 100644
--- a/core/misc/vertical-tabs.css
+++ b/core/misc/vertical-tabs.css
@@ -11,12 +11,12 @@ div.vertical-tabs {
margin: -1px 0 -1px -15em; /* LTR */
float: left; /* LTR */
}
-.vertical-tabs fieldset.vertical-tabs-pane {
+.vertical-tabs .vertical-tabs-pane {
margin: 0 !important;
padding: 0 1em;
border: 0;
}
-fieldset.vertical-tabs-pane > legend {
+.vertical-tabs-pane > summary {
display: none;
}
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 303840a..f8c20ed 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -3,13 +3,13 @@
"use strict";
/**
- * This script transforms a set of fieldsets into a stack of vertical
+ * This script transforms a set of details into a stack of vertical
* tabs. Another tab pane can be selected by clicking on the respective
* tab.
*
* Each tab may have a summary which can be updated by another
- * script. For that to work, each fieldset has an associated
- * 'verticalTabCallback' (with jQuery.data() attached to the fieldset),
+ * script. For that to work, each details element has an associated
+ * 'verticalTabCallback' (with jQuery.data() attached to the details),
* which is called every time the user performs an update to a form
* element inside the tab pane.
*/
@@ -25,9 +25,9 @@ Drupal.behaviors.verticalTabs = {
var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
var tab_focus;
- // Check if there are some fieldsets that can be converted to vertical-tabs
- var $fieldsets = $this.find('> fieldset');
- if ($fieldsets.length === 0) {
+ // Check if there are some details that can be converted to vertical-tabs
+ var $details = $this.find('> details');
+ if ($details.length === 0) {
return;
}
@@ -35,12 +35,12 @@ Drupal.behaviors.verticalTabs = {
var tab_list = $('
');
$this.wrap('').before(tab_list);
- // Transform each fieldset into a tab.
- $fieldsets.each(function () {
+ // Transform each details into a tab.
+ $details.each(function () {
var $this = $(this);
var vertical_tab = new Drupal.verticalTab({
- title: $this.find('> legend').text(),
- fieldset: $this
+ title: $this.find('> summary').text(),
+ details: $this
});
tab_list.append(vertical_tab.item);
$this
@@ -79,7 +79,7 @@ Drupal.behaviors.verticalTabs = {
* @param settings
* An object with the following keys:
* - title: The name of the tab.
- * - fieldset: The jQuery object of the fieldset that is the tab pane.
+ * - details: The jQuery object of the details element that is the tab pane.
*/
Drupal.verticalTab = function (settings) {
var self = this;
@@ -96,12 +96,12 @@ Drupal.verticalTab = function (settings) {
event.preventDefault();
if (event.keyCode === 13) {
self.focus();
- // Set focus on the first input field of the visible fieldset/tab pane.
- $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus();
+ // Set focus on the first input field of the visible details/tab pane.
+ $(".vertical-tabs-pane :input:visible:enabled:first").focus();
}
});
- this.fieldset
+ this.details
.bind('summaryUpdated', function () {
self.updateSummary();
})
@@ -113,17 +113,17 @@ Drupal.verticalTab.prototype = {
* Displays the tab's content pane.
*/
focus: function () {
- this.fieldset
- .siblings('fieldset.vertical-tabs-pane')
+ this.details
+ .siblings('.vertical-tabs-pane')
.each(function () {
var tab = $(this).data('verticalTab');
- tab.fieldset.hide();
+ tab.details.hide();
tab.item.removeClass('selected');
})
.end()
.show()
.siblings(':hidden.vertical-tabs-active-tab')
- .val(this.fieldset.attr('id'));
+ .val(this.details.attr('id'));
this.item.addClass('selected');
// Mark the active tab for screen readers.
$('#active-vertical-tab').remove();
@@ -134,7 +134,7 @@ Drupal.verticalTab.prototype = {
* Updates the tab's summary.
*/
updateSummary: function () {
- this.summary.html(this.fieldset.drupalGetSummary());
+ this.summary.html(this.details.drupalGetSummary());
},
/**
@@ -148,8 +148,8 @@ Drupal.verticalTab.prototype = {
// method.
this.item.parent().children('.vertical-tab-button').removeClass('first')
.filter(':visible:first').addClass('first');
- // Display the fieldset.
- this.fieldset.removeClass('vertical-tab-hidden').show();
+ // Display the details element.
+ this.details.removeClass('vertical-tab-hidden').show();
// Focus this tab.
this.focus();
return this;
@@ -166,10 +166,10 @@ Drupal.verticalTab.prototype = {
// method.
this.item.parent().children('.vertical-tab-button').removeClass('first')
.filter(':visible:first').addClass('first');
- // Hide the fieldset.
- this.fieldset.addClass('vertical-tab-hidden').hide();
+ // Hide the details element.
+ this.details.addClass('vertical-tab-hidden').hide();
// Focus the first visible tab (if there is one).
- var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
+ var $firstTab = this.details.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
if ($firstTab.length) {
$firstTab.data('verticalTab').focus();
}
diff --git a/core/modules/book/book.js b/core/modules/book/book.js
index 301c67f..d1c54c8 100644
--- a/core/modules/book/book.js
+++ b/core/modules/book/book.js
@@ -8,9 +8,9 @@
"use strict";
-Drupal.behaviors.bookFieldsetSummaries = {
+Drupal.behaviors.bookDetailsSummaries = {
attach: function (context) {
- $(context).find('fieldset.book-outline-form').drupalSetSummary(function (context) {
+ $(context).find('.book-outline-form').drupalSetSummary(function (context) {
var $select = $(context).find('.book-title-select');
var val = $select.val();
diff --git a/core/modules/comment/comment-node-form.js b/core/modules/comment/comment-node-form.js
index 0249d96..67800da 100644
--- a/core/modules/comment/comment-node-form.js
+++ b/core/modules/comment/comment-node-form.js
@@ -7,15 +7,15 @@
"use strict";
-Drupal.behaviors.commentFieldsetSummaries = {
+Drupal.behaviors.commentDetailsSummaries = {
attach: function (context) {
var $context = $(context);
- $context.find('fieldset.comment-node-settings-form').drupalSetSummary(function (context) {
+ $context.find('.comment-node-settings-form').drupalSetSummary(function (context) {
return Drupal.checkPlain($(context).find('.form-item-comment input:checked').next('label').text());
});
// Provide the summary for the node type form.
- $context.find('fieldset.comment-node-type-settings-form').drupalSetSummary(function(context) {
+ $context.find('.comment-node-type-settings-form').drupalSetSummary(function(context) {
var $context = $(context);
var vals = [];
diff --git a/core/modules/filter/filter.admin.js b/core/modules/filter/filter.admin.js
index b2d7c6e..f55159a 100644
--- a/core/modules/filter/filter.admin.js
+++ b/core/modules/filter/filter.admin.js
@@ -38,7 +38,7 @@ Drupal.behaviors.filterStatus = {
// Attach summary for configurable filters (only for screen-readers).
if (tab) {
- tab.fieldset.drupalSetSummary(function (tabContext) {
+ tab.details.drupalSetSummary(function (tabContext) {
return $checkbox.is(':checked') ? Drupal.t('Enabled') : Drupal.t('Disabled');
});
}
diff --git a/core/modules/locale/locale.admin.css b/core/modules/locale/locale.admin.css
index 4b252b6..e5ccd61 100644
--- a/core/modules/locale/locale.admin.css
+++ b/core/modules/locale/locale.admin.css
@@ -37,7 +37,7 @@
position: absolute;
}
-#locale-translate-filter-form fieldset.form-wrapper {
+#locale-translate-filter-form .form-wrapper {
margin-bottom:0;
}
diff --git a/core/modules/menu/menu.admin.js b/core/modules/menu/menu.admin.js
index d6a228a..530c8b6 100644
--- a/core/modules/menu/menu.admin.js
+++ b/core/modules/menu/menu.admin.js
@@ -13,10 +13,10 @@ Drupal.behaviors.menuChangeParentItems = {
* Function to set the options of the menu parent item dropdown.
*/
Drupal.menuUpdateParentList = function () {
- var $menuFieldset = $('#edit-menu');
+ var $menu = $('#edit-menu');
var values = [];
- $menuFieldset.find('input:checked').each(function () {
+ $menu.find('input:checked').each(function () {
// Get the names of all checked menus.
values.push(Drupal.checkPlain($.trim($(this).val())));
});
diff --git a/core/modules/menu/menu.js b/core/modules/menu/menu.js
index 1990374..77baddb 100644
--- a/core/modules/menu/menu.js
+++ b/core/modules/menu/menu.js
@@ -2,9 +2,9 @@
"use strict";
-Drupal.behaviors.menuFieldsetSummaries = {
+Drupal.behaviors.menuDetailsSummaries = {
attach: function (context) {
- $(context).find('fieldset.menu-link-form').drupalSetSummary(function (context) {
+ $(context).find('.menu-link-form').drupalSetSummary(function (context) {
var $context = $(context);
if ($context.find('.form-item-menu-enabled input').is(':checked')) {
return Drupal.checkPlain($context.find('.form-item-menu-link-title input').val());
@@ -22,7 +22,7 @@ Drupal.behaviors.menuFieldsetSummaries = {
Drupal.behaviors.menuLinkAutomaticTitle = {
attach: function (context) {
var $context = $(context);
- $context.find('fieldset.menu-link-form').each(function () {
+ $context.find('.menu-link-form').each(function () {
var $this = $(this);
// Try to find menu settings widget elements as well as a 'title' field in
// the form, but play nicely with user permissions and form alterations.
@@ -53,7 +53,7 @@ Drupal.behaviors.menuLinkAutomaticTitle = {
$link_title.val('');
$link_title.removeData('menuLinkAutomaticTitleOveridden');
}
- $checkbox.closest('fieldset.vertical-tabs-pane').trigger('summaryUpdated');
+ $checkbox.closest('.vertical-tabs-pane').trigger('summaryUpdated');
$checkbox.trigger('formUpdated');
});
// Take over any title change.
diff --git a/core/modules/node/content_types.js b/core/modules/node/content_types.js
index d2a63b6..f85ba7b 100644
--- a/core/modules/node/content_types.js
+++ b/core/modules/node/content_types.js
@@ -6,12 +6,12 @@ Drupal.behaviors.contentTypes = {
attach: function (context) {
var $context = $(context);
// Provide the vertical tab summaries.
- $context.find('fieldset#edit-submission').drupalSetSummary(function(context) {
+ $context.find('#edit-submission').drupalSetSummary(function(context) {
var vals = [];
vals.push(Drupal.checkPlain($(context).find('#edit-title-label').val()) || Drupal.t('Requires a title'));
return vals.join(', ');
});
- $context.find('fieldset#edit-workflow').drupalSetSummary(function(context) {
+ $context.find('#edit-workflow').drupalSetSummary(function(context) {
var vals = [];
$(context).find("input[name^='node_options']:checked").parent().each(function() {
vals.push(Drupal.checkPlain($(this).text()));
@@ -21,7 +21,7 @@ Drupal.behaviors.contentTypes = {
}
return vals.join(', ');
});
- $('fieldset#edit-language', context).drupalSetSummary(function(context) {
+ $('#edit-language', context).drupalSetSummary(function(context) {
var vals = [];
vals.push($(".form-item-language-configuration-langcode select option:selected", context).text())
@@ -32,7 +32,7 @@ Drupal.behaviors.contentTypes = {
return vals.join(', ');
});
- $context.find('fieldset#edit-display').drupalSetSummary(function(context) {
+ $context.find('#edit-display').drupalSetSummary(function(context) {
var vals = [];
var $context = $(context);
$context.find('input:checked').next('label').each(function() {
diff --git a/core/modules/node/node.js b/core/modules/node/node.js
index 0899d3c..d4c5dc7 100644
--- a/core/modules/node/node.js
+++ b/core/modules/node/node.js
@@ -2,10 +2,10 @@
"use strict";
-Drupal.behaviors.nodeFieldsetSummaries = {
+Drupal.behaviors.nodeDetailsSummaries = {
attach: function (context) {
var $context = $(context);
- $context.find('fieldset.node-form-revision-information').drupalSetSummary(function (context) {
+ $context.find('.node-form-revision-information').drupalSetSummary(function (context) {
var $context = $(context);
var revisionCheckbox = $context.find('.form-item-revision input');
@@ -20,7 +20,7 @@ Drupal.behaviors.nodeFieldsetSummaries = {
return Drupal.t('No revision');
});
- $context.find('fieldset.node-form-author').drupalSetSummary(function (context) {
+ $context.find('.node-form-author').drupalSetSummary(function (context) {
var $context = $(context);
var name = $context.find('.form-item-name input').val() || Drupal.settings.anonymous,
date = $context.find('.form-item-date input').val();
@@ -29,7 +29,7 @@ Drupal.behaviors.nodeFieldsetSummaries = {
Drupal.t('By @name', { '@name': name });
});
- $context.find('fieldset.node-form-options').drupalSetSummary(function (context) {
+ $context.find('.node-form-options').drupalSetSummary(function (context) {
var $context = $(context);
var vals = [];
diff --git a/core/modules/path/path.js b/core/modules/path/path.js
index 41b6e8f..7349d12 100644
--- a/core/modules/path/path.js
+++ b/core/modules/path/path.js
@@ -6,9 +6,9 @@
"use strict";
-Drupal.behaviors.pathFieldsetSummaries = {
+Drupal.behaviors.pathDetailsSummaries = {
attach: function (context) {
- $(context).find('fieldset.path-form').drupalSetSummary(function (context) {
+ $(context).find('.path-form').drupalSetSummary(function (context) {
var path = $('.form-item-path-alias input').val();
return path ?
diff --git a/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php b/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php
index 8abc198..9f7f42a 100644
--- a/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php
+++ b/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php
@@ -276,10 +276,10 @@ function assertAssertion($message, $type, $status, $file, $function) {
function getTestResults() {
$results = array();
if ($this->parse()) {
- if ($fieldset = $this->getResultFieldSet()) {
+ if ($fieldset = $this->getResultFieldSet()) { // @todo
// Code assumes this is the only test in group.
$results['summary'] = $this->asText($fieldset->div->div[1]);
- $results['name'] = $this->asText($fieldset->legend);
+ $results['name'] = $this->asText($fieldset->legend); // @todo
$results['assertions'] = array();
$tbody = $fieldset->div->table->tbody;
@@ -303,7 +303,7 @@ function getTestResults() {
* Get the fieldset containing the results for group this test is in.
*/
function getResultFieldSet() {
- $fieldsets = $this->xpath('//fieldset');
+ $fieldsets = $this->xpath('//fieldset'); // @todo
$info = $this->getInfo();
foreach ($fieldsets as $fieldset) {
if ($this->asText($fieldset->legend) == $info['name']) {
diff --git a/core/modules/simpletest/simpletest.pages.inc b/core/modules/simpletest/simpletest.pages.inc
index 337a62c..8300289 100644
--- a/core/modules/simpletest/simpletest.pages.inc
+++ b/core/modules/simpletest/simpletest.pages.inc
@@ -437,7 +437,7 @@ function simpletest_result_status_image($status) {
function simpletest_settings_form($form, &$form_state) {
$config = config('simpletest.settings');
$form['general'] = array(
- '#type' => 'fieldset',
+ '#type' => 'details',
'#title' => t('General'),
);
$form['general']['simpletest_clear_results'] = array(
@@ -454,7 +454,7 @@ function simpletest_settings_form($form, &$form_state) {
);
$form['httpauth'] = array(
- '#type' => 'fieldset',
+ '#type' => 'details',
'#title' => t('HTTP authentication'),
'#description' => t('HTTP auth settings to be used by the SimpleTest browser during testing. Useful when the site requires basic HTTP authentication.'),
'#collapsible' => TRUE,
diff --git a/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php b/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php
index adc35ba..67e0200 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php
@@ -246,7 +246,7 @@ function testDrupalRenderFormElements() {
$this->assertRenderedElement($element, '//fieldset/legend[contains(., :title)]', array(
':title' => $element['#title'],
));
-
+ // @todo
$element = array(
'#type' => 'fieldset',
'#title' => $this->randomName(),
diff --git a/core/modules/system/system.base.css b/core/modules/system/system.base.css
index c50b085..ede2339 100644
--- a/core/modules/system/system.base.css
+++ b/core/modules/system/system.base.css
@@ -38,23 +38,23 @@
}
/**
- * Collapsible fieldsets.
+ * Collapsible details.
*
* @see collapse.js
*/
-.js fieldset.collapsed {
+.js details.collapsed {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
height: 1em;
}
-.js fieldset.collapsed .fieldset-wrapper {
+.js details.collapsed .details-wrapper {
display: none;
}
-fieldset.collapsible {
+details.collapsible {
position: relative;
}
-fieldset.collapsible .fieldset-legend {
+details.collapsible summary {
display: block;
}
@@ -192,8 +192,8 @@ tr .ajax-progress-throbber .throbber {
.container-inline label {
display: inline;
}
-/* Fieldset contents always need to be rendered as block. */
-.container-inline .fieldset-wrapper {
+/* Details contents always need to be rendered as block. */
+.container-inline .details-wrapper {
display: block;
}
@@ -216,7 +216,7 @@ tr .ajax-progress-throbber .throbber {
* Hide elements from all users.
*
* Used for elements which should not be immediately displayed to any user. An
- * example would be a collapsible fieldset that will be expanded with a click
+ * example would be collapsible details that will be expanded with a click
* from a user. The effect of this class can be toggled with the jQuery show()
* and hide() functions.
*/
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index ea3dadc..1ae1c07 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -530,6 +530,14 @@ function system_element_info() {
'#pre_render' => array('form_pre_render_fieldset'),
'#theme_wrappers' => array('fieldset'),
);
+ $types['details'] = array(
+ '#collapsible' => FALSE,
+ '#collapsed' => FALSE,
+ '#value' => NULL,
+ '#process' => array('form_process_details', 'ajax_process_form'),
+ '#pre_render' => array('form_pre_render_details'),
+ '#theme_wrappers' => array('details'),
+ );
$types['vertical_tabs'] = array(
'#theme_wrappers' => array('vertical_tabs'),
'#default_tab' => '',
diff --git a/core/modules/system/system.theme-rtl.css b/core/modules/system/system.theme-rtl.css
index 03c93f3..27cc759 100644
--- a/core/modules/system/system.theme-rtl.css
+++ b/core/modules/system/system.theme-rtl.css
@@ -39,14 +39,14 @@ th {
}
/**
- * Collapsible fieldsets.
+ * Collapsible details.
*/
-.js fieldset.collapsible > legend .fieldset-legend {
+.js details.collapsible > summary a {
background-position: 98% 75%;
padding-left: 0;
padding-right: 15px;
}
-.js fieldset.collapsed > legend .fieldset-legend {
+.js details.collapsed > summary a {
background-image: url(../../misc/menu-collapsed-rtl.png);
background-position: 98% 50%;
}
diff --git a/core/modules/system/system.theme.css b/core/modules/system/system.theme.css
index 343a4f8..dffde40 100644
--- a/core/modules/system/system.theme.css
+++ b/core/modules/system/system.theme.css
@@ -7,6 +7,7 @@
/**
* HTML elements.
*/
+details,
fieldset {
margin-bottom: 1em;
padding: 0.5em;
@@ -179,19 +180,19 @@ abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed {
}
/**
- * Collapsible fieldsets.
+ * Collapsible details.
*
* @see collapse.js
*/
-.js fieldset.collapsible > legend .fieldset-legend a {
+.js details.collapsible > summary a {
background: url(../../misc/menu-expanded.png) 5px 65% no-repeat; /* LTR */
padding-left: 15px; /* LTR */
}
-.js fieldset.collapsed > legend .fieldset-legend a {
+.js details.collapsed > summary a {
background-image: url(../../misc/menu-collapsed.png); /* LTR */
background-position: 5px 50%; /* LTR */
}
-.fieldset-legend span.summary {
+summary {
color: #999;
font-size: 0.9em;
margin-left: 0.5em;
diff --git a/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php b/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php
index 9c518d7..399c62e 100644
--- a/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php
+++ b/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php
@@ -162,9 +162,9 @@ function testRegistrationDefaultValues() {
variable_set('date_default_timezone', 'Europe/Brussels');
// Check that the account information fieldset's options are not displayed
- // is a fieldset if there is not more than one fieldset in the form.
+ // as a fieldset if there is not more than one fieldset in the form.
$this->drupalGet('user/register');
- $this->assertNoRaw('