Add port protocol selection instructions (#22276)

* Add port protocol selection instructions

* Apply suggestions from code review

Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>

* Switch image to light mode

Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>

Author: 2percentsilk

assets/images/help/codespaces/update-port-protocol.png

@@ -21,7 +21,7 @@ shortTitle: Forward ports
 
 Port forwarding gives you access to TCP ports running within your codespace. For example, if you're running a web application on port 4000, you can access the application from your browser to test and debug the application.
 
-When an application running inside a codespace outputs a port to the console, {% data variables.product.prodname_codespaces %} detects the localhost URL pattern and automatically forwards the port. You can click on the URL in the terminal to open the port in a browser. For example, if an application outputs `http://127.0.0.1:4000` or `http://localhost:4000` to the console, the log would automatically convert the output to a clickable URL for port 4000.
+When an application running inside a codespace outputs a port to the console, {% data variables.product.prodname_codespaces %} detects the localhost URL pattern and automatically forwards the port. You can click on the URL in the terminal to open the port in a browser. For example, if an application outputs `http://127.0.0.1:4000` or `http://localhost:4000` to the console, the log would automatically convert the output to a clickable URL for port 4000. By default, {% data variables.product.prodname_codespaces %} forwards ports using HTTP.
 
 ![Automatic port forwarding](/assets/images/help/codespaces/automatic-port-forwarding.png)
 
@@ -37,6 +37,15 @@ You can manually forward a port that wasn't forwarded automatically.
 1. Type the port number or address, then press enter.
   ![Text box to type port button](/assets/images/help/codespaces/port-number-text-box.png)
 
+## Using HTTPS forwarding
+
+By default, {% data variables.product.prodname_codespaces %} forwards ports using HTTP but you can update any port to use HTTPS, as needed.
+
+{% data reusables.codespaces.navigate-to-ports-tab %}
+1. Right click the port you want to update, then hover over **Change Port Protocol**. 
+  ![Option to change port protocol](/assets/images/help/codespaces/update-port-protocol.png)
+1. Select the protocol needed for this port. The protocol that you select will be remembered for this port for the lifetime of the codespace.
+
 ## Labeling a port
 
 You can label a port to make the port more easily identifiable in a list.

content/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace.md

@@ -72,7 +72,7 @@ Port forwarding determines which ports are made accessible to you from the remot
 
 ![Diagram showing how port forwarding works in a codespace](/assets/images/help/codespaces/port-forwarding.png)
 
-When an application running inside {% data variables.product.prodname_codespaces %} outputs a port to the console, {% data variables.product.prodname_codespaces %} detects the localhost URL pattern and automatically forwards the port. You can click on the URL in the terminal or in the toast message to open the port in a browser. For more information on port forwarding, see "[Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)."
+When an application running inside {% data variables.product.prodname_codespaces %} outputs a port to the console, {% data variables.product.prodname_codespaces %} detects the localhost URL pattern and automatically forwards the port. You can click on the URL in the terminal or in the toast message to open the port in a browser. By default, {% data variables.product.prodname_codespaces %} forwards the port using HTTP. For more information on port forwarding, see "[Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)."
 
 While ports can be forwarded automatically, they are not publicly accessible to the internet. By default, all ports are private, but you can [manually make a port public](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace#sharing-a-port) to share access through a URL.