deploy: 021e80b

serverlessworkflow/main/tooling/serverless-workflow-editor/swf-editor-chrome-extension.html

@@ -632,30 +632,47 @@ <h2 id="proc-using-chrome-extension-sw-editor"><a class="anchor" href="#proc-usi
 <div class="content">
 <div class="imageblock">
 <div class="content">
-<img src="../../_images/tooling/serverless-workflow-editor/swf-editor-in-github.png" alt="swf editor in github">
+<img src="../../_images/tooling/serverless-workflow-editor/swf-editor-in-github-readonly.png" alt="swf editor in github readonly">
 </div>
-<div class="title">Figure 2. Serverless Workflow file in GitHub</div>
-</div>
-<div class="paragraph">
-<p>The Serverless Workflow editor opens in read-only mode.</p>
+<div class="title">Figure 2. Serverless Workflow file in GitHub(read-only mode)</div>
 </div>
 </div>
 </div>
 </li>
 <li>
 <p>To change the read-only mode to edit mode, click the pencil icon on the top-right corner of the screen.</p>
+<div class="openblock">
+<div class="content">
+<div class="imageblock">
+<div class="content">
+<img src="../../_images/tooling/serverless-workflow-editor/swf-editor-in-github-edit.png" alt="swf editor in github edit">
+</div>
+<div class="title">Figure 3. Serverless Workflow file in GitHub(edit mode)</div>
+</div>
+</div>
+</div>
 </li>
 <li>
-<p>You can switch to the full-screen mode. Also, you can hide the editor and view the source code using <strong>See as source</strong> button.</p>
+<p>You can switch to the full-screen mode. Also, you can hide the editor and view the source code using the <code>See as source</code> button.</p>
 </li>
 <li>
-<p>Make changes to the source code, add a commit message.</p>
-<div class="paragraph">
-<p>You can either commit the changes to a branch directly or create a new branch for pull request.</p>
-</div>
+<p>Make changes to the source code, and add a commit message. You can either commit the changes to a branch directly or create a new branch for pull requests.</p>
+</li>
+<li>
+<p>In a pull request, you can switch between the original and the changes using the buttons provided.</p>
 </li>
 </ol>
 </div>
+<div class="openblock">
+<div class="content">
+<div class="imageblock">
+<div class="content">
+<img src="../../_images/tooling/serverless-workflow-editor/swf-editor-in-github-pr.gif" alt="swf editor in github pr">
+</div>
+<div class="title">Figure 4. Serverless Workflow file in GitHub(pr mode)</div>
+</div>
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">