From f5e409d2f9dbaaeeda3eccafcaee883dc65db834 Mon Sep 17 00:00:00 2001
From: Jamie Peabody <jamie.peabody@gmail.com>
Date: Thu, 24 Oct 2019 15:45:09 +0100
Subject: [PATCH 1/5] patch(#5672): code highlight styles are now only applied
 to pre blocks that have the class pre.microlight

---
 src/style/_layout.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index bfcfdafe16d..83124d57780 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -596,7 +596,7 @@
   }
 }
 
-.opblock-body pre
+.opblock-body pre.microlight
 {
     font-size: 12px;
 

From f829e1811b0c46d4615bbf58db21efc60fb98feb Mon Sep 17 00:00:00 2001
From: Jamie Peabody <jamie.peabody@gmail.com>
Date: Thu, 24 Oct 2019 16:29:39 +0100
Subject: [PATCH 2/5] fixed pre style appied to .request-url

---
 src/style/_layout.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 83124d57780..07cc1f90e4b 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -596,7 +596,8 @@
   }
 }
 
-.opblock-body pre.microlight
+.opblock-body pre.microlight,
+.opblock-body .request-url > pre
 {
     font-size: 12px;
 

From 6107e93112b19e8d311b66ae33c07b242b250045 Mon Sep 17 00:00:00 2001
From: Jamie Peabody <jamie.peabody@gmail.com>
Date: Thu, 24 Oct 2019 16:39:28 +0100
Subject: [PATCH 3/5] fixed response-headers and request-duration pre blocks

---
 src/core/components/live-response.jsx | 4 ++--
 src/style/_layout.scss                | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/core/components/live-response.jsx b/src/core/components/live-response.jsx
index d3fc7e89fc5..fa178dc8387 100644
--- a/src/core/components/live-response.jsx
+++ b/src/core/components/live-response.jsx
@@ -5,7 +5,7 @@ import { Iterable } from "immutable"
 
 const Headers = ( { headers } )=>{
   return (
-    <div>
+    <div className="response-headers">
       <h5>Response headers</h5>
       <pre>{headers}</pre>
     </div>)
@@ -16,7 +16,7 @@ Headers.propTypes = {
 
 const Duration = ( { duration } ) => {
   return (
-    <div>
+    <div className="request-duration">
       <h5>Request duration</h5>
       <pre>{duration} ms</pre>
     </div>
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 07cc1f90e4b..22534ba9c56 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -597,7 +597,9 @@
 }
 
 .opblock-body pre.microlight,
-.opblock-body .request-url > pre
+.opblock-body .request-url > pre,
+.opblock-body .response-headers > pre,
+.opblock-body .request-duration > pre
 {
     font-size: 12px;
 

From 394e87da741092ad803f3a8d4a00c46ab0404508 Mon Sep 17 00:00:00 2001
From: Jamie Peabody <jpeabody@axway.com>
Date: Thu, 31 Oct 2019 09:29:21 +0000
Subject: [PATCH 4/5] made pre.microlight class as per review

---
 src/core/components/live-response.jsx | 12 ++++++------
 src/style/_layout.scss                |  5 +----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/core/components/live-response.jsx b/src/core/components/live-response.jsx
index fa178dc8387..abd2608cabd 100644
--- a/src/core/components/live-response.jsx
+++ b/src/core/components/live-response.jsx
@@ -5,9 +5,9 @@ import { Iterable } from "immutable"
 
 const Headers = ( { headers } )=>{
   return (
-    <div className="response-headers">
+    <div>
       <h5>Response headers</h5>
-      <pre>{headers}</pre>
+      <pre className="microlight">{headers}</pre>
     </div>)
 }
 Headers.propTypes = {
@@ -16,9 +16,9 @@ Headers.propTypes = {
 
 const Duration = ( { duration } ) => {
   return (
-    <div className="request-duration">
+    <div>
       <h5>Request duration</h5>
-      <pre>{duration} ms</pre>
+      <pre className="microlight">{duration} ms</pre>
     </div>
   )
 }
@@ -74,8 +74,8 @@ export default class LiveResponse extends React.Component {
         { curlRequest && <Curl request={ curlRequest }/> }
         { url && <div>
             <h4>Request URL</h4>
-            <div className="request-url">
-              <pre>{url}</pre>
+            <div>
+              <pre className="microlight">{url}</pre>
             </div>
           </div>
         }
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 22534ba9c56..83124d57780 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -596,10 +596,7 @@
   }
 }
 
-.opblock-body pre.microlight,
-.opblock-body .request-url > pre,
-.opblock-body .response-headers > pre,
-.opblock-body .request-duration > pre
+.opblock-body pre.microlight
 {
     font-size: 12px;
 

From 21a7426538b4da9df2c4d4f847c4259d8897541b Mon Sep 17 00:00:00 2001
From: Jamie Peabody <jpeabody@axway.com>
Date: Thu, 31 Oct 2019 11:18:25 +0000
Subject: [PATCH 5/5] added microlight class to appropriate pre and added tests

---
 src/core/components/live-response.jsx   |  2 +-
 src/core/components/response-body.jsx   |  4 ++--
 test/mocha/components/live-response.jsx | 19 +++++++++++++++++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/core/components/live-response.jsx b/src/core/components/live-response.jsx
index abd2608cabd..7f681e7b414 100644
--- a/src/core/components/live-response.jsx
+++ b/src/core/components/live-response.jsx
@@ -74,7 +74,7 @@ export default class LiveResponse extends React.Component {
         { curlRequest && <Curl request={ curlRequest }/> }
         { url && <div>
             <h4>Request URL</h4>
-            <div>
+            <div className="request-url">
               <pre className="microlight">{url}</pre>
             </div>
           </div>
diff --git a/src/core/components/response-body.jsx b/src/core/components/response-body.jsx
index 10b0d657238..33f971f134e 100644
--- a/src/core/components/response-body.jsx
+++ b/src/core/components/response-body.jsx
@@ -87,7 +87,7 @@ export default class ResponseBody extends React.PureComponent {
             bodyEl = <div><a href={ href } download={ download }>{ "Download file" }</a></div>
         }
       } else {
-        bodyEl = <pre>Download headers detected but your browser does not support downloading binary via XHR (Blob).</pre>
+        bodyEl = <pre className="microlight">Download headers detected but your browser does not support downloading binary via XHR (Blob).</pre>
       }
 
       // Anything else (CORS)
@@ -123,7 +123,7 @@ export default class ResponseBody extends React.PureComponent {
 
       // Audio
     } else if (/^audio\//i.test(contentType)) {
-      bodyEl = <pre><audio controls><source src={ url } type={ contentType } /></audio></pre>
+      bodyEl = <pre className="microlight"><audio controls><source src={ url } type={ contentType } /></audio></pre>
     } else if (typeof content === "string") {
       bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ content } />
     } else if ( content.size > 0 ) {
diff --git a/test/mocha/components/live-response.jsx b/test/mocha/components/live-response.jsx
index a4b1be1a633..9d7b6da17bd 100644
--- a/test/mocha/components/live-response.jsx
+++ b/test/mocha/components/live-response.jsx
@@ -43,8 +43,11 @@ describe("<LiveResponse/>", function(){
       let response = fromJSOrdered({
         status: 200,
         url: "http://petstore.swagger.io/v2/pet/1",
-        headers: {},
+        headers: {
+          "content-type": "application/xml"
+        },
         text: "<response/>",
+        duration: 50
       })
 
       let mutatedRequestForSpy = createSpy().andReturn(mutatedRequest)
@@ -81,8 +84,20 @@ describe("<LiveResponse/>", function(){
       expect(curl.props().request).toBe(requests[test.expected.request])
 
       const expectedUrl = requests[test.expected.request].get("url")
-      expect(wrapper.find("div.request-url pre").text()).toEqual(expectedUrl)
+      expect(wrapper.find("div.request-url pre.microlight").text()).toEqual(expectedUrl)
+
+      let duration = wrapper.find("Duration")
+      expect(duration.length).toEqual(1)
+      expect(duration.props().duration).toEqual(50)
+      expect(duration.html())
+        .toEqual("<div><h5>Request duration</h5><pre class=\"microlight\">50 ms</pre></div>")
 
+      let responseHeaders = wrapper.find("Headers")
+      expect(duration.length).toEqual(1)
+      expect(responseHeaders.props().headers.length).toEqual(1)
+      expect(responseHeaders.props().headers[0].key).toEqual("content-type")
+      expect(responseHeaders.html())
+        .toEqual("<div><h5>Response headers</h5><pre class=\"microlight\"><span class=\"headerline\"> content-type: application/xml </span></pre></div>")
     })
   })
 })