Rewrite CLion guide to reflect new CLion

Author: multiplemonomials

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["streetsidesoftware.code-spell-checker", "redhat.vscode-yaml"]
+}

docs/getting-started/ide_cli_setup/clion_setup.md

@@ -2,71 +2,62 @@
 
 This page will show you how to take an existing Mbed CE project and use it with the CLion IDE.
 
-## Installing CLion
-
-Note: CLion is a paid product for commercial use, costing about $100 yearly (there's a subscription, but if you cancel it you can keep using your current version forever).  However, it is free for students if you fill out the application [here](https://www.jetbrains.com/community/education/#students). There is also a free 30-day trial available for everyone. I (Jamie) can say that it's the best C++ IDE I've personally used, and I highly recommend giving it a shot.
+Note: CLion is a paid product for commercial use, costing about $100 yearly (there's a subscription, but if you cancel it you can keep using your current version forever). However, it is free for non-commercial use. There is also a free 30-day trial available for everyone. 
 
-1. Download the CLion installer from the [download page](https://www.jetbrains.com/clion/download/).
-    a. You can also use the [JetBrains Toolbox](https://www.jetbrains.com/toolbox-app/) app to make installing and updating multiple JetBrains IDEs easier.
-2. On Windows/Mac, run the installer and go through the install.  You can then run CLion from your OS menu.  On Linux, you'll get a tar file instead.  Extract the tar file to Downloads, and move the folder to /opt/.  Then, you will be able to run CLion by executing `/opt/clion-20xx.x.x/bin/clion.sh` in a terminal.
-3. The first time you open CLion you will get a license screen.  You can use the "start trial" button to just use the 30 day trial, or if you have a license you should log in with your JetBrains account.
-4.  You should now be at the IDE start screen!
+I (Jamie) can say that CLion is the best C++ IDE I've personally used, and I highly recommend giving it a shot. The three main advantages of CLion over VS Code are:
+- Much faster searching for usages and references, as CLion indexes everything in advance
+- More intelligent source code analysis - CLion is more confident in determining whether source code is correct and gives you more options for refactoring and analyzing it
+- Ability to have multiple build configurations active at one time, whereas VS Code requires manually switching between them
 
-![image](https://user-images.githubusercontent.com/2099358/187101127-f3cdba83-2932-4c56-8eba-8e96ec781c1b.png)
+## Installing CLion
+1. Download JetBrains Toolbox from the [download page](https://www.jetbrains.com/toolbox-app/).
+2. On Windows/Mac, run the installer and go through the install.  You can then run CLion from your OS menu.  On Linux, you'll get a tar file instead.  Extract the tar file to Downloads, and move the folder to /opt/.  Then, you will be able to run the toolbox by executing `/opt/jetbrains-toolbox-x.y.z/bin/jetbrains-toolbox` in a terminal.
+3. In Toolbox, log in to your JetBrains account and run CLion
+3. The first time you open CLion you will get a license screen if you don't already have a license configured. You must now select non-commercial use, start a trial, or purchase a license.
+4.  You should now be at the IDE start screen!  
+    ![CLion welcome screen](img/clion-welcome.png)
 
 ## Importing the Project
 1. Now, in CLion, click on Open, then browse to the root folder of your project.  Then, click OK.
-
-![image](https://user-images.githubusercontent.com/2099358/187101223-2e95b918-11b6-4275-9dc8-d4e063f83f45.png)
-
-2. You'll likely get the below trust dialog box.  Click on Trust Project.
-
-![image](https://user-images.githubusercontent.com/2099358/187101279-83d64ed6-0e80-4671-93bf-ac8b935d6f67.png)
-
+    ![CLion project folder picker](img/clion-open-project.png){: style="width: 50%"}
+2. You'll likely get the below trust dialog box.  Click on Trust Project.  
+    ![trust project dialog](img/clion-trust-dialog.png)
 3. If this is your first project, CLion will ask about setting up a toolchain.  You can accept the defaults here and click Next, because the Mbed build system overrides the compiler selection.
+    ![clion toolchain setup](img/clion-toolchain-setup.png)
+4. Now, you will get a wizard to create a build profile.  For now, change the "Build Type" to "Develop", and set the Name to include the your target name and "Develop".  Also, in the "CMake Options" field, set MBED_TARGET to match your board name (e.g. `-DMBED_TARGET=SFE_ARTEMIS` for the Artemis board). Also, optionally you can specify the [upload method](../../upload-methods.md) to use.  Or, leave this unset to use the Mbed OS defaults for your board.  
+    ![clion build profile dialog](img/clion-build-profile.png)
+    - If you need Debug or Release configurations instead of Develop, you can come back here later and create them following the same process.
+    - If your upload method supports debug, you will need to add an additional parameter called `MBED_CLION_PROFILE_NAME` with the name of the profile. For the example above, I'd add `-DMBED_CLION_PROFILE_NAME="Develop SFE_ARTEMIS"`.
 
-![image](https://user-images.githubusercontent.com/2099358/187101341-b8bb3788-61be-4182-b44e-979d81f223a4.png)
-
-4. Now, you will get a wizard to create a build profile.  For now, change the "Name" and "Build type" settings to "Develop".  Also, in the "CMake Options" field, set MBED_TARGET to match your board name (e.g. `-DMBED_TARGET=NUCLEO_L452RE_P` for the Nucleo L452RE board). Also, optionally you can specify the [upload method](https://github.com/mbed-ce/mbed-os/wiki/Upload-Methods) to use.  Or, leave this unset to use the Mbed OS defaults for your board.
-    - If you need Debug or Release configurations, you can come back here later and create them following the same process.
-
-![Build Profiles Screen](https://user-images.githubusercontent.com/2099358/188508936-ed9958f1-ae2c-472d-b507-ef7bec556419.png)
-
-Finally, hit Finish.
+    Finally, hit Finish.
 
 5.  If all goes well, you should see the CMake project successfully configure and load.  If not, you may need to double-check the [toolchain setup guide](https://github.com/mbed-ce/mbed-os/wiki/Toolchain-Setup-Guide) to make sure everything is set up OK.
 
-NOTE: When working with Mbed projects, the Tools > CMake > Reset Cache and Reload Project option is your friend if things break.  If your project did not find the compilers successfully, things moved on the disk, or you're getting other errors, make it your first recourse to try this option.
+NOTE: When working with Mbed projects, the Tools > CMake > Reset Cache and Reload option is your friend if things break.  If your project did not find the compilers successfully, things moved on the disk, or you're getting other errors, make it your first recourse to try this option.
 
-![image](https://user-images.githubusercontent.com/2099358/187102104-81c52e9c-dbd8-435c-82fa-20eb68a25dc7.png)
+![reset cache and reload menu](img/clion-reset-cache-and-reload.png){: style="width: 50%"}
 
 ## Flashing Code
 
-To flash code, find the entry labeled `flash-<your target>` in the menu at the top right.  Then, click the hammer button (NOT the play button).
+To flash code, find the entry labeled `flash-<your target>` in the menu at the top.  Then, click the hammer button (NOT the play button).
 
-![image](https://user-images.githubusercontent.com/2099358/187102170-dfa3beb1-9d19-4333-8d67-a5e92c3a07d0.png)
+![targets menu](img/clion-targets-menu.png)
 
-Note: Mbed OS tends to clutter this menu up with its own targets.  To find your target quickly, you can just start typing with the menu open, and it will search the list.  Maybe this is obvious to you but it took me like 4 years to find this...
+Note: Mbed OS tends to clutter this menu up with its own targets.  To find your target quickly, you can just start typing with the menu open, and it will search the list.  Maybe this is obvious to you but it took me like 4 years to figure it out...
 
-![image](https://user-images.githubusercontent.com/2099358/187102307-85664d9f-78ee-4c06-8503-9cec7c4cc232.png)
+![searching target menu](img/clion-search-target.png)
 
 ## Debugging
-1. First, if you haven't already, you will need to make sure the project is configured to use an upload method that supports debugging. Read about upload methods on the [Upload Methods page](https://github.com/mbed-ce/mbed-os/wiki/Upload-Methods), and select a method to use using the -DUPLOAD_METHOD=<method> flag to CMake.  Note: you can edit the CMake flags that you initially configured by going to Settings > Build, Execution, Deployment > CMake.
-2. Additionally, you will need to set the `MBED_CLION_PROFILE_NAME` CMake variable to match the exact name of the profile.  This is needed in order to generate debug configuration files correctly.
-![image](https://user-images.githubusercontent.com/2099358/220048699-4a22c44a-ccac-49db-9e2e-c9a003c2405b.png)
-3. In CLion, find the GDB debug configuration for your executable in the targets menu.  This will be near the bottom and start with "GDB", then your target name.  Make sure to select the one that matches your build type too -- if you are working in the Develop configuration, don't pick the Debug one!
-
-![image](https://user-images.githubusercontent.com/2099358/220049391-a89dc7b4-188a-48fd-96fa-446c8263ad68.png)
-
-4. With the configuration selected, click the green bug button at the top.  If source files have been modified, the code will be rebuilt and downloaded to the target.  Then, GDB will start.
-
-Note: If you wish to have the code stop at main(), you must set a breakpoint there before starting the debug session.
-
-Note: With CLion, the GDB command line console is available by going to the GDB tab in the Debug panel.  You can use this console in parallel with the GUI to evaluate expressions and set breakpoints.
-
-![image](https://user-images.githubusercontent.com/2099358/187105850-0632954a-6ecb-44ae-960d-d848ef732cc8.png)
-
-Note: To reset the MCU, press the R-with-a-bar-over-it button.
+1. First, if you haven't already, you will need to make sure the project is configured to use an upload method that supports debugging. Read about upload methods on the [Upload Methods page](../../upload-methods.md), and select a method to use using the -DUPLOAD_METHOD=<method> flag to CMake.  Note: you can edit the CMake flags that you initially configured by going to Settings > Build, Execution, Deployment > CMake.
+    - You may also need to add the `MBED_CLION_PROFILE_NAME` flag as described earlier.
+2. In CLion, find the GDB debug configuration for your executable in the targets menu.  This will be near the bottom and start with "GDB", then your target name.  Make sure to select the one that matches your build type too -- if you are working in the Develop configuration, don't pick the Debug one!
+    ![clion GDB target](img/clion-search-target.png)
+3. With the configuration selected, click the green bug button at the top.  If source files have been modified, the code will be rebuilt and downloaded to the target.  Then, GDB will start.
+    - Note: If you wish to have the code stop at main(), you must set a breakpoint there before starting the debug session. You may also need to issue a reset after the debug session starts (via the R-with-a-bar-over-it button).
+    - Note: With CLion, the GDB command line console is available by going to the GDB tab in the Debug panel.  You can use this console in parallel with the GUI to evaluate expressions and set breakpoints.
+        ![CLion gdb console](img/clion-gdb-console.png)
 
 ### Tips
-- **Increasing GDB Timeout:** Sometimes, on Mbed, when you have deeply nested stack frames and lots of local variables, GDB can take a very long time to load after you hit a breakpoint, on the order of a minute.  This can cause CLion to time out and terminate the debugger session.  You can change the timeout by following [these instructions](https://www.jetbrains.com/help/clion/configuring-debugger-options.html#gdb-startup).  I'd recommend at least 120000 ms.
+- **Increasing GDB Timeout:** Sometimes, on Mbed, when you have deeply nested stack frames and lots of local variables, GDB can take a very long time to load after you hit a breakpoint, on the order of a minute.  This can cause CLion to time out and terminate the debugger session.  You can change the timeout by following [these instructions](https://www.jetbrains.com/help/clion/configuring-debugger-options.html#gdb-startup).  I'd recommend at least 120000 ms.
+- **Moving the navigation bar to the top:** In the old CLion UI (and VS Code too) the navigation bar which tells you what file you're in is at the top of the screen, but in the new UI it's at the bottom for some ungodly reason (where you will never see it). You can move it back to the top via a well-buried menu option: View &gt; Appearance &gt; Navigation Bar &gt; Top
+    - ![Navigation bar menu](img/clion-navigation-bar-top.png)