diff --git a/core/modules/toolbar/js/responsive-preview.js b/core/modules/toolbar/js/responsive-preview.js
new file mode 100644
index 0000000..5307770
--- /dev/null
+++ b/core/modules/toolbar/js/responsive-preview.js
@@ -0,0 +1,58 @@
+(function ($) {
+
+Drupal.behaviors.responsivePreview = {
+  attach: function (context) {
+    var width = $(window).width() - 50;
+    var height = $(window).height() - 200;
+    var $iframe = $('<iframe width="' + width + '" height="' + height + '" id="responsive-preview-frame" frameborder="0" scrolling="auto" allowtransparency="true" style="display:block;clear:both;margin-left:auto;margin-right:auto;border:solid black 20px;"></iframe>');
+    var $slider = $('<div id="slider" style="background:red;margin-top:25px;margin-bottom:10px;margin-left:10px;margin-right:auto;width:50%;float:left;display:inline;"></div>');
+    var $sliderDescription = $('<div id="slider-description" style="font-size:2em;margin-top:10px;margin-bottom:10px;float:left;display:inline;"></div>');
+    var $pageTop = $('.region-page-top');
+    var added = false;
+
+    var getDeviceType = function (deviceWidth) {
+      // @todo These would be configurable.
+      if (deviceWidth > 900) {
+        return 'Desktop';
+      }
+      else if (deviceWidth > 500) {
+        return 'Tablet';
+      }
+      else {
+        return 'Mobile';
+      }
+    };
+
+    $(context).find('.responsive-preview-trigger').click(function () {
+      if (added) {
+        $iframe.remove();
+        $slider.remove();
+        $sliderDescription.remove();
+        $(this).html('Preview at different widths');
+        added = false;
+      }
+      else {
+        $(this).html('Close preview');
+        $iframe.insertAfter($pageTop).load(function() {
+          $(this).contents().find('.toolbar').remove();
+        });
+        $iframe[0].contentDocument.location.replace(Drupal.url(Drupal.settings.currentPath));
+        $slider.insertAfter($pageTop);
+        $sliderDescription.insertAfter($pageTop).html("Current width: " + width + " pixels (" + getDeviceType(width) + ")");
+        $slider.slider({
+          max: width,
+          value: width,
+          slide: function (e, ui) {
+            var sliderValue = $slider.slider('value');
+            $iframe.attr('width', sliderValue);
+            $sliderDescription.html("Current width: " + sliderValue + " pixels (" + getDeviceType(sliderValue) + ")");
+          }
+        });
+        added = true;
+      }
+      return false;
+    });
+  }
+};
+
+}(jQuery));
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index c9f0c22..36a4c60 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -459,6 +459,26 @@ function toolbar_toolbar() {
     '#weight' => -15,
   );
 
+  $items['preview'] = array(
+    '#type' => 'toolbar_item',
+    'tab' => array(
+      '#type' => 'html_tag',
+      '#tag' => 'button',
+      '#value' => t('Preview at different widths'),
+      '#attributes' => array(
+        'class' => array('responsive-preview-trigger'),
+      ),
+    ),
+    '#attached' => array(
+      'library' => array(
+        array('system', 'jquery.ui.slider'),
+      ),
+      'js' => array(
+        drupal_get_path('module', 'toolbar') . '/js/responsive-preview.js',
+      ),
+    ),
+  );
+
   return $items;
 }