Create a functional prototype of the new top contextual bar

Mentioned in Slack: This looks really great. The only thing I would change in a component perspective is trying to separate the breadcrumb component from the “back to site” link, so styles will be easier and won’t be that difficult.
As an idea, maybe separate left and right regions:

• Left: contextual navigation
  • “go back” button
  • breadcumb

• Right: contextual controls?
  • the rest

Apart from this small detail, just to mention that the expectation from the work here is to have a "functional" prototype to run user tests. For example:

• The content should change based the page we are. This is key to test if users find it useful to have different elements based on the context.
• The right sidebar should get the content from the node edit form sidebar, and the Claro one shouldn't appear. Even a display: none can work in a prototype. :)

Cool! Things I've noticed:

• When creating new content, the sidebar doesn’t appear
• When editing exiting content or viewing a node on the front-end, old local tasks below the title shouldn’t be visible. And the values under the dropdown should be those local tasks.
• The Preview when editing a node should take you to the preview page, same as the preview item on the
• When editing content, the left top bar should say “Edit + [content-title]”
• When viewing a node on the front-end, instead of the “Go back to Administration” it should say “Edit + [content-title]”
• The “Edit” on the front-end should be the Edit that exists nowadays on the Toolbar

Thanks @kostyashupenko!! And sorry it took me a while to review :)

Here's what I've found testing it:

1. There should be only the breadcrumb from the top bar on the admin UI.
   
2. The separator between items from the real breadcrumb should be a caret as the one we have in the admin UI. I’ve added an example in Figma
   
3. When it’s a full node view (for example this) the content in the left space should be “Edit [node-title] as in this design page
4. When it’s a full node view, the value of the dropdown should be the list of the local tasks. And if they could keep the real link it would be great because we want to test if they are useful with content users :)
5. When you’re on the edit form, the value of the dropdown should be the list of the local tasks too.
6. The text on the left side that replaces the breadcrumb shouldn’t be a link, maybe I didn’t explain myself properly. It should be plain text saying “Edit + [bundle]”.
   
7. The preview is working fine now, but it looks like the preview bar(id=node-preview-form-select) doesn’t show up anymore? Not a big deal for the tests but to keep in mind when we move forward with the final implementation.

I've left feedback, but the work happening in here is great. Thanks!!

Uploading the correct image.

This is almost ready, good that we have the test almost ready too :)

Just 2 more things:

1. On the front-end viewing a node, there shouldn’t be any extra info apart of the “Edit + nodetitle”.
   
2. When viewing a node in the front-end, the Edit button is pointing to edit the node, but it should be the button to inline editing. I know that button really doesn’t make sense and it’s actually confusing, so let’s change the label from “Edit” to “Turn on In Place Editing”. And it should actually be the button we have in the Toolbar nowadays, with its current functionality: when you click on it, it enables the in place editing and the icons appear everywhere. Thanks to this confusion we might actually improve something else :D
   

About the preview, let's forget about it for now. It's not important for the user tests and when we implement this beyond the prototype when can invest the time it needs.

Also, credits given. Thanks @YurkinPark!

Actually, I will use this issue to credit everybody that participated on the design part for this top contextual bar.

@kostyashupenko thank you for the changes!

I just realized of 2 more things. Sorry I didn't catch them earlier:

1. The save button from the top bar on the edit form doesn't work. It should behave as the one at the bottom.
2. The "turn on in place editing" item appear on all front-end pages (the same it appears nowadays)

This is great!!! Thanks both @kostyashupenko and @finnsky for all the work here! I'm leaving this as RTBC for now instead of merging to discuss the strategy to convert this into code ready for an alpha release of the module. Meanwhile we'll start testing this hopefully next week on #3396125: Toolbar Prototype Usability Testing Phase 4.

Testing the script for the user tests I've found this error on the top bar: when you are in the front-end, if you click in the "more options" dropdow, it triggers the Inline edit too. See:

Thanks for the fix @kostyashupenko! Moving back to RTBC.

Marking this as Fixed after the results from #3396125: Toolbar Prototype Usability Testing Phase 4. Thanks everybody that make it possible to see what worked and what didn't from this initial idea. We've learned a lot!