[1.43.x] [KOGITO-9600][KSW-Guides]: Update chrome extension docs

serverlessworkflow/modules/ROOT/pages/tooling/serverless-workflow-editor/swf-editor-chrome-extension.adoc

@@ -53,16 +53,23 @@ For more information, see <<proc-install-chrome-extension-sw-editor, Installing
 . Push the created workflow file to GitHub, or you can go to the GitHub page and click on the workflow file to open in the editor.
 +
 --
-.Serverless Workflow file in GitHub
-image::tooling/serverless-workflow-editor/swf-editor-in-github.png[]
-
-The Serverless Workflow editor opens in read-only mode.
+.Serverless Workflow file in GitHub(read-only mode)
+image::tooling/serverless-workflow-editor/swf-editor-in-github-readonly.png[]
 --
 
 . To change the read-only mode to edit mode, click the pencil icon on the top-right corner of the screen. 
-. You can switch to the full-screen mode. Also, you can hide the editor and view the source code using *See as source* button.
-. Make changes to the source code, add a commit message. 
 +
-You can either commit the changes to a branch directly or create a new branch for pull request.
+--
+.Serverless Workflow file in GitHub(edit mode)
+image::tooling/serverless-workflow-editor/swf-editor-in-github-edit.png[]
+--
++
+. You can switch to the full-screen mode. Also, you can hide the editor and view the source code using the `See as source` button.
+. 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.
+. In a pull request, you can switch between the original and the changes using the buttons provided.
+--
+.Serverless Workflow file in GitHub(pr mode)
+image::tooling/serverless-workflow-editor/swf-editor-in-github-pr.gif[]
+--
 
 include::../../../pages/_common-content/report-issue.adoc[]