diff --git a/core/modules/responsive_preview/css/responsive-preview.icons.css b/core/modules/responsive_preview/css/responsive-preview.icons.css
index 1dd177a..01571e9 100644
--- a/core/modules/responsive_preview/css/responsive-preview.icons.css
+++ b/core/modules/responsive_preview/css/responsive-preview.icons.css
@@ -2,8 +2,8 @@
  * @file
  * Responsive preview icon styling.
  */
-.toolbar-tab-responsive-preview .icon:before,
-.responsive-preview .icon:before {
+.toolbar-tab-responsive-preview .responsive-preview-icon:before,
+.responsive-preview .responsive-preview-icon:before {
   background-attachment: scroll;
   background-color: transparent;
   background-image: url("../images/responsive-preview-icons.png");
@@ -13,67 +13,67 @@
   position: absolute;
   z-index: 1;
 }
-.toolbar .toolbar-bar .toolbar-tab-responsive-preview .icon:before {
+.toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon:before {
   width: 13px;
 }
-.toolbar-tab-responsive-preview button.icon,
-.responsive-preview button.icon {
+.toolbar-tab-responsive-preview button.responsive-preview-icon,
+.responsive-preview button.responsive-preview-icon {
   background-color: transparent;
   border: 0;
   font-size: 1em;
 }
 
 /* Toolbar icon. */
-.toolbar .toolbar-bar .icon.icon-responsive-preview {
+.toolbar .toolbar-bar .responsive-preview-icon.responsive-preview-icon-responsive-preview {
   margin-left: 0;
   margin-right: 0;
   padding-left: 0;
   padding-right: 0;
   width: 5em;
 }
-.toolbar-tab-responsive-preview .icon.icon-responsive-preview:before {
+.toolbar-tab-responsive-preview .responsive-preview-icon.responsive-preview-icon-responsive-preview:before {
   background-position: center top;
 }
-.toolbar-tab-responsive-preview.open .icon-responsive-preview:before,
-.toolbar-tab-responsive-preview .icon-responsive-preview.active:before,
-.toolbar-tab-responsive-preview .icon-responsive-preview:hover:before {
+.toolbar-tab-responsive-preview.open .responsive-preview-icon-responsive-preview:before,
+.toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview.active:before,
+.toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:hover:before {
   background-position: center -22px;
 }
-.toolbar .toolbar-bar .toolbar-tab-responsive-preview .icon-responsive-preview:before {
+.toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:before {
   left: 1em; /* LTR */
   height: 22px;
   top: 0.6667em;
 }
-[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview .icon-responsive-preview:before {
+[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:before {
   left: auto;
   right: 6px;
 }
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active {
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active {
   padding: 0.5em 1.3333em;
   text-indent: 0;
   -moz-transition: padding 0.25s;
   -webkit-transition: padding 0.25s;
   transition: padding 0.25s;
 }
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active.active {
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active {
   padding-left: 2.25em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active.active {
+[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active {
   padding-left: 1.333em;
   padding-right: 2.25em;
 }
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active:before {
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active:before {
   background-position: -999px -999px;
   height: 14px;
   left: 0.667em; /* LTR */
   top: 0.5em;
   width: 13px;
 }
-[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active:before {
+[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active:before {
   left: auto;
   right: 0.667em;
 }
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.icon-active.active:before {
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active:before {
   background-position: center -116px;
 }
 
@@ -81,48 +81,48 @@
 /**
  * Responsive preview controls icons.
  */
-.responsive-preview .control.icon:before {
+.responsive-preview .responsive-preview-control.responsive-preview-icon:before {
   height: 12px;
   width: 12px;
   top: 12px;
 }
-.responsive-preview .icon-close:before {
+.responsive-preview .responsive-preview-icon-close:before {
   background-position: left -44px;
   right: 9px; /* LTR */
 }
-[dir="rtl"] .responsive-preview .icon-close:before {
+[dir="rtl"] .responsive-preview .responsive-preview-icon-close:before {
   left: 9px;
   right: auto;
 }
-.responsive-preview .icon-close:active:before,
-.responsive-preview .icon-close.active:before,
-.responsive-preview .icon-close:hover:before {
+.responsive-preview .responsive-preview-icon-close:active:before,
+.responsive-preview .responsive-preview-icon-close.active:before,
+.responsive-preview .responsive-preview-icon-close:hover:before {
   background-position: left -56px;
 }
-.responsive-preview .icon-orientation:before {
+.responsive-preview .responsive-preview-icon-orientation:before {
   background-position: left -92px; /* LTR */
   left: 9px; /* LTR */
 }
-[dir="rtl"] .responsive-preview .icon-orientation:before {
+[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation:before {
   background-position: left -155px;
   left: auto;
   right: 9px;
 }
-.responsive-preview .icon-orientation:hover:before {
+.responsive-preview .responsive-preview-icon-orientation:hover:before {
   background-position: left -104px; /* LTR */
 }
-[dir="rtl"] .responsive-preview .icon-orientation:hover:before {
+[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation:hover:before {
   background-position: left -167px;
 }
-.responsive-preview .icon-orientation.rotated:before {
+.responsive-preview .responsive-preview-icon-orientation.rotated:before {
   background-position: left -68px; /* LTR */
 }
-[dir="rtl"] .responsive-preview .icon-orientation.rotated:before {
+[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation.rotated:before {
   background-position: left -131px;
 }
-.responsive-preview .icon-orientation.rotated:hover:before {
+.responsive-preview .responsive-preview-icon-orientation.rotated:hover:before {
   background-position: left -80px; /* LTR */
 }
-[dir="rtl"] .responsive-preview .icon-orientation.rotated:hover:before {
+[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation.rotated:hover:before {
   background-position: left -143px;
 }
diff --git a/core/modules/responsive_preview/css/responsive-preview.module.css b/core/modules/responsive_preview/css/responsive-preview.module.css
index 976c41d..e92f95a 100644
--- a/core/modules/responsive_preview/css/responsive-preview.module.css
+++ b/core/modules/responsive_preview/css/responsive-preview.module.css
@@ -27,7 +27,7 @@
 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview.toolbar-tab {
   float: left;
 }
-.toolbar-tab-responsive-preview .trigger {
+.toolbar-tab-responsive-preview .responsive-preview-trigger {
   display: block;
 }
 /* Device preview options. */
@@ -40,7 +40,7 @@
 .toolbar-tab-responsive-preview.open .item-list {
   display: block;
 }
-.toolbar-tab-responsive-preview.toolbar-tab .options li {
+.toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options li {
   float: none;
   position: relative;
 }
@@ -71,10 +71,10 @@
   left: auto;
   right: 0;
 }
-.responsive-preview .control {
+.responsive-preview .responsive-preview-control {
   position: absolute;
 }
-.responsive-preview .modal-background {
+.responsive-preview .responsive-preview-modal-background {
   bottom: 0;
   height: 100%;
   left: 0;
@@ -84,18 +84,18 @@
   width: 100%;
   z-index: 1;
 }
-.responsive-preview.active .modal-background {
+.responsive-preview.active .responsive-preview-modal-background {
   position: fixed;
 }
 
 /**
  * Preview iframe.
  */
-.responsive-preview .frame-container {
+.responsive-preview .responsive-preview-frame-container {
   position: absolute;
   z-index: 100;
 }
-.responsive-preview .frame-container iframe {
+.responsive-preview .responsive-preview-frame-container iframe {
   position: relative;
 }
 
diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css
index e2e0137..33d26d0 100644
--- a/core/modules/responsive_preview/css/responsive-preview.theme.css
+++ b/core/modules/responsive_preview/css/responsive-preview.theme.css
@@ -6,38 +6,40 @@
 /**
  * Toolbar tab.
  */
-.toolbar-tab-responsive-preview .options {
+.toolbar-tab-responsive-preview .responsive-preview-options {
   background-color: white;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
 }
 /* Device preview options. */
-.toolbar-tab-responsive-preview .options {
+.toolbar-tab-responsive-preview .responsive-preview-options {
   box-shadow: 0 0.8em 2.5em -0.8em rgba(0, 0, 0, 0.75);
 }
 /* [dir] is needed to override Bartik's .item-list li padding */
-[dir] .toolbar-tab-responsive-preview .options li {
+[dir] .toolbar-tab-responsive-preview .responsive-preview-options li {
   margin: 0;
   padding: 0;
 }
-.toolbar-tab-responsive-preview .trigger {
+.toolbar-tab-responsive-preview .responsive-preview-trigger {
   cursor: pointer;
   line-height: 1;
   height: 3em;
 }
-.toolbar-tab-responsive-preview .trigger:hover {
+.toolbar-tab-responsive-preview .responsive-preview-trigger:hover {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
-.toolbar-tab-responsive-preview .trigger.active,
-.toolbar-tab-responsive-preview .trigger.active:hover {
+.toolbar-tab-responsive-preview .responsive-preview-trigger.active,
+.toolbar-tab-responsive-preview .responsive-preview-trigger.active:hover {
   background-image: -webkit-linear-gradient(top, rgb(78,159,234) 0%, rgb(69,132,221) 100%);
   background-image: linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
 }
-.toolbar-tab-responsive-preview .trigger,
-.toolbar-tab-responsive-preview .options .device {
+.toolbar-tab-responsive-preview .responsive-preview-trigger,
+.toolbar-tab-responsive-preview .responsive-preview-options .responsive-preview-device {
   padding-bottom: 1em;
   padding-top: 1em;
 }
-.toolbar-tab-responsive-preview .options .device {
+.toolbar-tab-responsive-preview .responsive-preview-options .responsive-preview-device {
   background: none;
   border: none;
   cursor: pointer;
@@ -45,30 +47,32 @@
   font-size: 1em;
   padding: 0.5em 1.3333em
 }
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device {
-  color: #777;
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device {
+  color: #0074BD;
   text-align: left;
   width: 100%;
 }
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device:hover,
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device.active {
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device:hover,
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.active {
   color: black;
 }
-.toolbar .toolbar-tab-responsive-preview.toolbar-tab .options .device[disabled] {
+.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device[disabled] {
   color: #ccc;
   cursor: default;
 }
 /* Configuration link. */
-.toolbar-tab-responsive-preview.toolbar-tab .configure {
-  border-top: 1px solid #000;
-  color: #000;
+.toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-configure {
+  color: #777;
   margin-top: 0.5em;
   padding-bottom: 0.5em;
   padding-top: 0.5em;
 }
+.toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-configure:hover {
+  color: #000;
+}
 
 /* Toolbar tab triangle toggle. */
-.toolbar-tab-responsive-preview .trigger:after {
+.toolbar-tab-responsive-preview .responsive-preview-trigger:after {
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
@@ -87,7 +91,7 @@
   width: 0;
   z-index: 1
 }
-[dir="rtl"] .toolbar-tab-responsive-preview .trigger:after {
+[dir="rtl"] .toolbar-tab-responsive-preview .responsive-preview-trigger:after {
   left: 1em;
   right: auto;
 }
@@ -106,23 +110,23 @@
   left: 0;
   right: auto;
 }
-.toolbar-tab-responsive-preview.open .trigger:after {
+.toolbar-tab-responsive-preview.open .responsive-preview-trigger:after {
   border-bottom: 0.4545em solid;
   border-top-color: transparent;
   color: black;
   right: 0.7em; /* LTR */
   top: 1.25em;
 }
-[dir="rtl"] .toolbar-tab-responsive-preview.open .trigger:after {
+[dir="rtl"] .toolbar-tab-responsive-preview.open .responsive-preview-trigger:after {
   left: 0.7em;
   right: auto;
 }
-.toolbar-tab-responsive-preview:hover .trigger:after,
-.toolbar-tab-responsive-preview .trigger.active:after,
-.toolbar-tab-responsive-preview:hover .trigger.active:after {
+.toolbar-tab-responsive-preview:hover .responsive-preview-trigger:after,
+.toolbar-tab-responsive-preview .responsive-preview-trigger.active:after,
+.toolbar-tab-responsive-preview:hover .responsive-preview-trigger.active:after {
   color: white;
 }
-.toolbar-tab-responsive-preview.open:hover .trigger:after {
+.toolbar-tab-responsive-preview.open:hover .responsive-preview-trigger:after {
   color: black;
 }
 
@@ -132,16 +136,16 @@
 .responsive-preview {
   box-shadow: 0 0 10px 0 black;
 }
-.responsive-preview .frame-container {
+.responsive-preview .responsive-preview-frame-container {
   opacity: 0;
   -moz-transition: all 450ms;
   -webkit-transition: all 450ms;
   transition: all 450ms;
 }
-.responsive-preview.active .frame-container {
+.responsive-preview.active .responsive-preview-frame-container {
   opacity: 1;
 }
-.responsive-preview .modal-background {
+.responsive-preview .responsive-preview-modal-background {
   background-color: black;
   background-color: rgba(0,0,0,0.92);
   background-image: -webkit-linear-gradient(left, rgb(20,20,20),rgb(50,50,50) 25%, rgb(100,100,100) 40%, rgb(100,100,100) 60%, rgb(50,50,50) 75%, rgb(20,20,20));
@@ -151,49 +155,68 @@
 /**
  * Responsive preview control placement.
  */
-.responsive-preview .control {
+.responsive-preview .responsive-preview-control {
   cursor: pointer;
   height: 40px;
   position: absolute;
   top: 0;
   width: 40px;
 }
-.responsive-preview .control.close {
+.responsive-preview .responsive-preview-control.responsive-preview-close {
   right: 0; /* LTR */
 }
-[dir="rtl"] .responsive-preview .control.close {
+[dir="rtl"] .responsive-preview .responsive-preview-control.responsive-preview-close {
   left: 0;
   right: auto;
 }
-.responsive-preview .control.orientation {
+.responsive-preview .responsive-preview-control.responsive-preview-orientation {
   left: 0; /* LTR */
 }
-[dir="rtl"] .responsive-preview .control.orientation {
+[dir="rtl"] .responsive-preview .responsive-preview-control.responsive-preview-orientation {
   left: auto;
   right: 0;
 }
-.responsive-preview .device-label {
+.responsive-preview .responsive-preview-device-label {
+  bottom: 0;
   color: #bbbbbb;
+  cursor: pointer;
   font-family: sans-serif;
-  font-size: 0.85em;
   font-weight: normal;
   left: 30px;
-  letter-spacing: 0.25ex;
   line-height: 2.6667;
   margin: 0;
   overflow: hidden;
   position: absolute;
-  right: 40px;
+  right: 30px;
+  text-align: center;
   text-overflow: ellipsis;
-  bottom: 3px;
   white-space: nowrap;
-  width: auto;
+}
+.responsive-preview .responsive-preview-device-label-text:after {
+  color: #666;
+  content: '\0000A0' attr(data-responsive-preview-label-expand);
+}
+.responsive-preview .responsive-preview-device-label-text:hover:after {
+  color: #bbb;
+}
+.responsive-preview .responsive-preview-device-label-details {
+  display: none;
+}
+.responsive-preview .responsive-preview-device-label-details:before {
+  content: '\0002C\0000A0'; /* ', ' */
+}
+.responsive-preview-expanded .responsive-preview-device-label-details {
+  display: inline;
+}
+.responsive-preview-expanded .responsive-preview-device-label-text:after,
+.responsive-preview-expanded .responsive-preview-device-label-text:hover:after {
+  display: none;
 }
 
 /**
  * Responsive preview frame.
  */
-.responsive-preview .frame-container {
+.responsive-preview .responsive-preview-frame-container {
   background-color: #212121;
   border-radius: 20px;
   box-shadow:
@@ -205,7 +228,7 @@
   transition: all 150ms ease-out;
   margin-top: 2em;
 }
-.responsive-preview .frame-container iframe {
+.responsive-preview .responsive-preview-frame-container iframe {
   box-shadow: 0 0 0 1px #808080;
   -webkit-transition: all 150ms ease-out;
   -moz-transition: all 150ms ease-out;
@@ -216,7 +239,7 @@
 /**
  * Control block styling.
  */
-#block-responsive-preview-controls .content .device {
+#block-responsive-preview-controls .content .responsive-preview-device {
   background: none;
   border: none;
   color: inherit;
@@ -226,7 +249,7 @@
   margin: 0;
   padding: 0.25em 0;
 }
-#block-responsive-preview-controls .content .device[disabled] {
+#block-responsive-preview-controls .content .responsive-preview-device[disabled] {
   color: #ccc;
   cursor: default;
 }
diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js
index e4b2717..6d1e47b 100644
--- a/core/modules/responsive_preview/js/responsive-preview.js
+++ b/core/modules/responsive_preview/js/responsive-preview.js
@@ -14,6 +14,7 @@ var options = $.extend({
   // therefore it must be defined here instead of in the CSS file.
   bleed: 30,
   strings: {
+    details: Drupal.t('details'),
     close: Drupal.t('close'),
     orientation: Drupal.t('Change orientation'),
     portrait: Drupal.t('portrait'),
@@ -235,6 +236,8 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       isBuilt: false,
       // Indicates whether the device is portrait (false) or landscape (true).
       isRotated: false,
+      // Indicates of the device details are visible in the preview frame.
+      isDetailsExpanded: false,
       // The number of devices that fit the current viewport (i.e. previewable).
       fittingDeviceCount: 0,
       // Currently selected device link.
@@ -345,7 +348,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
   TabView: Backbone.View.extend({
 
     events: {
-      'click .trigger': 'toggleDeviceList',
+      'click .responsive-preview-trigger': 'toggleDeviceList',
       'mouseleave': 'toggleDeviceList'
     },
 
@@ -361,7 +364,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       // The selectDevice function is declared outside of the view because it is
       // shared among views. It must be bound to this for the correct context
       // to obtain.
-      this.$el.on('click.responsivepreview', '.device', $.proxy(selectDevice, this));
+      this.$el.on('click.responsivepreview', '.responsive-preview-device', $.proxy(selectDevice, this));
 
       this.model.on('change:isActive change:dimensions change:activeDevice change:fittingDeviceCount', this.render, this);
 
@@ -392,7 +395,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
 
       // Clean the active class from the device list.
       this.$el
-        .find('.device.active')
+        .find('.responsive-preview-device.active')
         .removeClass('active');
 
       this.$el
@@ -460,7 +463,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       // The selectDevice function is declared outside of the view because it is
       // shared among views. It must be bound to this for the correct context
       // to obtain.
-      this.$el.on('click.responsivepreview', '.device', $.proxy(selectDevice, this));
+      this.$el.on('click.responsivepreview', '.responsive-preview-device', $.proxy(selectDevice, this));
 
       this.model.on('change:isActive change:dimensions change:activeDevice change:fittingDeviceCount', this.render, this);
 
@@ -476,7 +479,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       this.$el
         // Render the visibility of the toolbar block.
         .toggle(this.model.get('fittingDeviceCount') > 0)
-        .find('.device.active')
+        .find('.responsive-preview-device.active')
         .removeClass('active');
 
       this.$el
@@ -530,7 +533,8 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
 
     events: {
       'click #responsive-preview-close': 'onClose',
-      'click #responsive-preview-orientation': 'onRotate'
+      'click #responsive-preview-orientation': 'onRotate',
+      'click #responsive-preview-frame-label': 'onMoreInfo'
     },
 
     /**
@@ -542,7 +546,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       this.strings = this.options.strings;
       this.envModel = this.options.envModel;
 
-      this.model.on('change:isRotated change:dimensions change:activeDevice', this.render, this);
+      this.model.on('change:isRotated change:isDetailsExpanded change:dimensions change:activeDevice', this.render, this);
 
       // Recalculate the size of the preview container when the window resizes.
       this.envModel.on('change:viewportWidth change:viewportHeight change:offsets', this.render, this);
@@ -592,6 +596,15 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
     },
 
     /**
+     * Responds to clicks on the device frame label.
+     *
+     * @param jQuery.Event event
+     */
+    onMoreInfo: function (event) {
+      this.model.set('isDetailsExpanded', !this.model.get('isDetailsExpanded'));
+    },
+
+    /**
      * Builds the preview iframe.
      */
     _build: function () {
@@ -675,7 +688,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       height = Math.ceil((viewportHeight - this.gutter < heightSpread) ? viewportHeight - this.gutter - (bleed * 2) : height);
 
       // Updated the state of the rotated icon.
-      this.$el.find('.control.orientation').toggleClass('rotated', isRotated);
+      this.$el.find('.responsive-preview-control.responsive-preview-orientation').toggleClass('rotated', isRotated);
 
       // Resize & reposition the iframe.
       this.$el.css({
@@ -697,24 +710,36 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       this._scaleIfNotResponsive();
 
       // Update the device label.
-      $container.find('.device-label').text(Drupal.t('@label, @displayWidth@width by @displayHeight@height, @dpi, @orientation', {
-        '@label': $deviceLink.text(),
-        '@displayWidth': displayWidth + 'px',
-        // If the width of the preview element is not equivalent to the
-        // configured display width, display the actual width of the preview
-        // in parentheses.
-        '@width': (displayWidth !== Math.floor(width * dimensions.dppx)) ? ' (' + (Math.floor(width * dimensions.dppx)) + 'px)' : '',
-        '@displayHeight': displayHeight + 'px',
-        // If the height of the preview element is not equivalent to the
-        // configured display height, display the actual height of the preview
-        // in parentheses.
-        '@height': (displayHeight !== Math.floor(height * dimensions.dppx)) ? ' (' + (Math.floor(height * dimensions.dppx)) + 'px)' : '',
-        '@dpi': dimensions.dppx + 'ppx',
-        '@orientation': (isRotated) ? this.strings.landscape : this.strings.portrait
-      }));
+      var $label = $container.find('.responsive-preview-device-label');
+      // Expose the details if the user has expanded the label.
+      $label.toggleClass('responsive-preview-expanded', this.model.get('isDetailsExpanded'));
+      // Attach the device label.
+      $label
+        .find('.responsive-preview-device-label-text')
+        .text(Drupal.t('@label', {
+          '@label': $deviceLink.text()
+        }));
+      // The device details are appended to the device label node in a separate
+      // node so that their presentation can be varied independent of the label.
+      $label
+        .find('.responsive-preview-device-label-details')
+        .text(Drupal.t('@displayWidth@width by @displayHeight@height, @dpi, @orientation', {
+          '@displayWidth': displayWidth + 'px',
+          // If the width of the preview element is not equivalent to the
+          // configured display width, display the actual width of the preview
+          // in parentheses.
+          '@width': (displayWidth !== Math.floor(width * dimensions.dppx)) ? ' (' + (Math.floor(width * dimensions.dppx)) + 'px)' : '',
+          '@displayHeight': displayHeight + 'px',
+          // If the height of the preview element is not equivalent to the
+          // configured display height, display the actual height of the preview
+          // in parentheses.
+          '@height': (displayHeight !== Math.floor(height * dimensions.dppx)) ? ' (' + (Math.floor(height * dimensions.dppx)) + 'px)' : '',
+          '@dpi': dimensions.dppx + 'ppx',
+          '@orientation': (isRotated) ? this.strings.landscape : this.strings.portrait
+        }));
 
       // Update the positioning of the modal background.
-      this.$el.find('.modal-background').css(offsets);
+      this.$el.find('.responsive-preview-modal-background').css(offsets);
     },
 
     /**
@@ -874,7 +899,7 @@ function updateDeviceList () {
   var gutter = this.gutter;
   var bleed = this.bleed;
   var viewportWidth = this.envModel.get('viewportWidth');
-  var $devices = this.$el.find('.device');
+  var $devices = this.$el.find('.responsive-preview-device');
   var fittingDeviceCount = $devices.length;
 
   // Remove devices whose previews won't fit the current viewport.
@@ -936,7 +961,7 @@ $.extend(Drupal.theme, {
    *   The corresponding HTML.
    */
   responsivePreviewContainer: function () {
-    return '<div id="responsive-preview" class="responsive-preview"><div class="modal-background"></div></div>';
+    return '<div id="responsive-preview" class="responsive-preview"><div class="responsive-preview-modal-background"></div></div>';
   },
 
   /**
@@ -948,10 +973,13 @@ $.extend(Drupal.theme, {
    *   The corresponding HTML.
    */
   responsivePreviewFrameContainer: function (strings) {
-    return '<div id="responsive-preview-frame-container" class="frame-container">' +
-      '<label id="responsive-preview-frame-label" class="device-label"></label>' +
-      '<button id="responsive-preview-close" title="' + strings.close + '" role="button" class="icon icon-close control close" aria-pressed="false"><span class="visually-hidden">' + strings.close + '</span></button>' +
-      '<button id="responsive-preview-orientation" title="' + strings.orientation + '" role="button" class="icon icon-orientation control orientation" aria-pressed="false"><span class="visually-hidden">' + strings.orientation + '</span></button>' +
+    return '<div id="responsive-preview-frame-container" class="responsive-preview-frame-container" aria-describedby="responsive-preview-frame-label">' +
+      '<label id="responsive-preview-frame-label" class="responsive-preview-device-label" for="responsive-preview-frame-container">' +
+        '<span class="responsive-preview-device-label-text" data-responsive-preview-label-expand="' + strings.details + '"></span>' +
+        '<span class="responsive-preview-device-label-details"></span>' +
+      '</label>' +
+      '<button id="responsive-preview-close" title="' + strings.close + '" role="button" class="responsive-preview-icon responsive-preview-icon-close responsive-preview-control responsive-preview-close" aria-pressed="false"><span class="visually-hidden">' + strings.close + '</span></button>' +
+      '<button id="responsive-preview-orientation" title="' + strings.orientation + '" role="button" class="responsive-preview-icon responsive-preview-icon-orientation responsive-preview-control responsive-preview-orientation" aria-pressed="false"><span class="visually-hidden">' + strings.orientation + '</span></button>' +
       '</div>';
   },
 
@@ -961,7 +989,7 @@ $.extend(Drupal.theme, {
    * @return
    *   The corresponding HTML.
    */
-  responsivePreviewFrame: function (url) {
+  responsivePreviewFrame: function () {
     return '<iframe id="responsive-preview-frame" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>';
   }
 });
diff --git a/core/modules/responsive_preview/responsive_preview.module b/core/modules/responsive_preview/responsive_preview.module
index 227b4ed..b87bf63 100644
--- a/core/modules/responsive_preview/responsive_preview.module
+++ b/core/modules/responsive_preview/responsive_preview.module
@@ -70,7 +70,7 @@ function responsive_preview_get_devices_list() {
         '#tag' => 'button',
         '#value' => $device->label(),
         '#attributes' => array(
-          'class' => array('device', 'icon', 'icon-active'),
+          'class' => array('responsive-preview-device', 'responsive-preview-icon', 'responsive-preview-icon-active'),
           'data-responsive-preview-name' => $device->id(),
           'data-responsive-preview-width' => (!empty($dimensions['width'])) ? $dimensions['width'] : '',
           'data-responsive-preview-height' => (!empty($dimensions['height'])) ? $dimensions['height'] : '',
@@ -86,7 +86,7 @@ function responsive_preview_get_devices_list() {
     '#href' => url('admin/config/content/responsive-preview'),
     '#options' => array(
       'attributes' => array(
-        'class' => array('configure'),
+        'class' => array('responsive-preview-configure'),
       ),
     ),
   );
@@ -130,14 +130,14 @@ function responsive_preview_toolbar() {
         '#value_suffix' => '</span>',
         '#attributes' => array(
           'title' => t('Preview page layout'),
-          'class' => array('icon', 'icon-responsive-preview', 'trigger'),
+          'class' => array('responsive-preview-icon', 'responsive-preview-icon-responsive-preview', 'responsive-preview-trigger'),
         ),
       ),
       'device_options' => array(
         '#theme' => 'item_list',
         '#items' => responsive_preview_get_devices_list(),
         '#attributes' => array(
-          'class' => array('options'),
+          'class' => array('responsive-preview-options'),
         ),
       ),
     ),