chore: use common instructions for popping out plunker window-button (#2886)

To see the browser title or address bar changes.
Instructions are a little more complicated when the plunker is in embedded style

public/docs/_includes/_see-addr-bar.jade

@@ -0,0 +1,11 @@
+table
+  tr
+    td
+      :marked
+        To see the URL changes in the browser address bar of the live example,
+        open it again in the Plunker editor by clicking the icon in the upper right,
+        then pop out the preview window by clicking the blue 'X' button in the upper right corner.
+    td
+      img(src='/resources/images/devguide/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right" )
+      br
+      img(src='/resources/images/devguide/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right" )

public/docs/ts/_cache/tutorial/toh-pt5.jade

@@ -32,12 +32,7 @@ figure.image-display
   Run the <live-example></live-example> for this part.
 
 +ifDocsFor('ts|js')
-  .l-sub-section
+  include ../../../_includes/_see-addr-bar
-    img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
-
-    :marked
-      To see the URL changes in the browser address bar,
-      pop out the preview window by clicking the blue 'X' button in the upper right corner:
 
 .l-main-section
 :marked

public/docs/ts/latest/cookbook/set-document-title.jade

@@ -6,11 +6,20 @@ a(id='top')
   This cookbook explains how to do it.
 :marked
   **See the <live-example name="cb-set-document-title"></live-example>**.
-.l-sub-section
+
-  img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
+table
-  :marked
+  tr
-    To see the browser Title bar changes,
+    td
-    pop out the preview window by clicking the blue 'X' button in the upper right corner.
+      :marked
+        To see the browser title bar change in the live example,
+        open it again in the Plunker editor by clicking the icon in the upper right,
+        then pop out the preview window by clicking the blue 'X' button in the upper right corner.
+    td
+      img(src='/resources/images/devguide/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right" )
+      br
+      img(src='/resources/images/devguide/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right" )
+
+
 :marked
   ## The problem with *&lt;title&gt;*
 

public/docs/ts/latest/guide/router.jade

@@ -6,11 +6,8 @@ include ../_util-fns
 
   We cover the router's primary features in this chapter, illustrating them through the evolution
   of a small application that we can <live-example>run live</live-example>.
-.l-sub-section
+
-  img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
+include ../../../_includes/_see-addr-bar
-  :marked
-    To see the URL changes in the browser address bar,
-    pop out the preview window by clicking the blue 'X' button in the upper right corner.
 
 .l-main-section
 :marked
@@ -1054,10 +1051,9 @@ figure.image-display
   The application still works. Clicking "back" returns to the hero list view.
 
   Look at the browser address bar.
-.l-sub-section
+
-  img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
+include ../../../_includes/_see-addr-bar
-  :marked
+
-    When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner.
 :marked
  It should look something like this, depending on where you run it:
 
@@ -2048,10 +2044,7 @@ a#fragment
   For our updated *Crisis Admin* component we'll feed the `Observable` directly into our template using the `AsyncPipe`, which
   will handle _unsubscribing_ from the `Observable` for us when the component is destroyed.
 
-.l-sub-section
+include ../../../_includes/_see-addr-bar
-  img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
-  :marked
-    When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner.
 
 :marked
   Following the steps in this process, we can click on the *Admin* button, that takes us to the *Login*

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -32,12 +32,7 @@ figure.image-display
   Run the <live-example></live-example> for this part.
 
 +ifDocsFor('ts|js')
-  .l-sub-section
+  include ../../../_includes/_see-addr-bar
-    img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
-
-    :marked
-      To see the URL changes in the browser address bar,
-      pop out the preview window by clicking the blue 'X' button in the upper right corner:
 
 .l-main-section
 :marked