Custom context menu items (Remove / Save As / Inspect)

[ajtruckle]

Example:

if (!m_displayPageUrlContextSubMenuItem)
{
	items->RemoveValueAtIndex(0); // Back
	itemsCount--;
	items->RemoveValueAtIndex(0); // Forward
	itemsCount--;
	items->RemoveValueAtIndex(5); // Share
	itemsCount--;
	items->RemoveValueAtIndex(5); // Separator
	itemsCount--;
}

Looks like:

Questions:

1. Is the default menu always going to be the same? I am concerned about using the literal index positions. If the default menu changes my code then breaks. What is the best approach?
2. Save As does nothing in my application. Why?
3. Can we change Inspect (which works) to Inspect Element?
4. How can we add new functional menu item for View Page Source?

AB#39691823

1. You should use the name property to identify the item you are looking for.
2. I will look into this and get back to you.
3. You can set the label property to "Inspect Element".
4. You can add a custom context menu item via the CreateContextMenuItem and navigate the WebView2 to "view-source:" + webView2.Source in its CustomItemSelected handler.

[ajtruckle]

@yildirimcagri Thanks for the suggestions.
For point 1 I tried this code:

wil::com_ptr<ICoreWebView2ContextMenuItem> current;
std::vector<UINT32> vRemoveIndex;
for (UINT32 i = 0; i < itemsCount; i++)
{
	CHECK_FAILURE(items->GetValueAtIndex(i, &current));
	wil::unique_cotaskmem_string name;
	CHECK_FAILURE(current->get_Name(&name));

	if (std::wstring(L"back") == name.get() ||
		std::wstring(L"forward") == name.get() || 
		std::wstring(L"share") == name.get())
	{
		vRemoveIndex.push_back(i);

	}
}
std::reverse(vRemoveIndex.begin(), vRemoveIndex.end());
for (const auto& iRemoveIndex : vRemoveIndex)
{
	CHECK_FAILURE(items->RemoveValueAtIndex(iRemoveIndex));
}
CHECK_FAILURE(items->get_Count(&itemsCount));

It raises two problems:

1. The Separators all have the name other. This means we can't remove a specific default separator. I appreciate that we can just rebuild a new menu from scratch but it would be nice if we can identify which separator we want to remove. Why not give them better names, like, separator1 etc,?
2. The menu item Share seems to have a name of other so I can't intercept the correct menu item for removal. Is this a bug in the API?
3. How exactly o you set the label? It is readonly. For example, I can identify the menu item:

else if (std::wstring(L"inspectElement") == name.get())
{
									
}

But there is no put_Label call. But this is not critical. I can revert to Inspect if needed. The more fundamental issue is that in my context, pressing Inspect just brings up the inspector. It does not navigate to the element (unlike when I use the browser).

4. For this one, the discussion can be continued in WebView2 Context Menu - View Page Source  #2376 .

Will these names be the same no matter what language the user has WebView2 running in? My app sponsors many languages.

1. Sorry that this wasn't clear in my previous post, while you'd use the name property to identify context menu items, you should also check for the Kind property to identify separators.
2. We currently manually generate the name property in WebView2, so for new context menu items added with a new runtime release, until we map the item to our internal name, it will be reported as 'other'. I'll bring this to the team's attention and we will improve this process to ensure we don't have any unnamed items. For a temporary workaround, you can use the command ID reported for the 'other' default context menu items to identify them. The command IDs for default items would only change between releases and are unlikely to change (the custom context menu items change for each app session). The code would look something like this:

if (name == "share") {
  // identify as share context menu item
 } else if (name == "other") {
   if (commandId == shareCommandId) {
      // identify as share context menu item
   }
}

3. The default context menu items are immutable. In order to display one with a different label, you need to create a custom context item with the same command ID as the default context menu item you'd like to replace and remove the default item.
   I'm unable to reproduce your issue about Inspect though, I see that the DevTools window will navigate to the element that's being right clicked on and inspected. What WebView2 runtime do you use, what sort of item are you trying to inspect and is there a page I can try reproducing this from?

Names are unlocalized, labels are the actually localized text displayed.

By the way I'm unable to reproduce the "saveAs" issue. I see the file picker come up as expected for the html file that's being saved. If you could provide me with some repro steps (including your ContextMenuRequested handler and the page and element you are opening the context menu on), I can take another look. If you haven't already, you can also update to the latest WebView2 runtime to see if it helps.

[ajtruckle]

Hi @yildirimcagri

I am using the latest NuGet package (is that what you mean when you refer to the "WebView2 runtime"? This is all being built and executed in Visual Studio 2022 on Windows 11.

My context menu handler is a work in progress and has a lot of sample code commented out. Here it is:

void CWebBrowser::AddContextMenuRequestedHandler()
{
    if (m_pImpl->m_webView2_11 != nullptr && 
		m_pImpl->m_webController != nullptr &&
		m_pImpl->m_webController3 != nullptr)
    {
		m_pImpl->m_webView2_11->add_ContextMenuRequested(
			Callback<ICoreWebView2ContextMenuRequestedEventHandler>(
				[this](
					ICoreWebView2* sender,
					ICoreWebView2ContextMenuRequestedEventArgs* eventArgs) {
						wil::com_ptr<ICoreWebView2ContextMenuRequestedEventArgs> args =
							eventArgs;
						wil::com_ptr<ICoreWebView2ContextMenuItemCollection> items;
						CHECK_FAILURE(args->get_MenuItems(&items));
						UINT32 itemsCount;
						CHECK_FAILURE(items->get_Count(&itemsCount));

						wil::com_ptr<ICoreWebView2ContextMenuTarget> target;
						CHECK_FAILURE(args->get_ContextMenuTarget(&target));

						COREWEBVIEW2_CONTEXT_MENU_TARGET_KIND targetKind;
						CHECK_FAILURE(target->get_Kind(&targetKind));
						// Custom UI Context Menu rendered if invoked on selected text
						if (targetKind ==
							COREWEBVIEW2_CONTEXT_MENU_TARGET_KIND_SELECTED_TEXT)
						{
							auto showMenu = [this, args, itemsCount, items, target] {
								CHECK_FAILURE(args->put_Handled(true));


								HMENU hPopupMenu = CreatePopupMenu();
								AddMenuItems(hPopupMenu, items);
								HWND hWnd;
								m_pImpl->m_webController->get_ParentWindow(&hWnd);
								::SetForegroundWindow(hWnd);
								RECT rct;
								::GetClientRect(hWnd, &rct);
								POINT topLeft{};
								topLeft.x = rct.left;
								topLeft.y = rct.top;
								::ClientToScreen(hWnd, &topLeft);
								POINT p;
								CHECK_FAILURE(args->get_Location(&p));
								RECT bounds;
								CHECK_FAILURE(m_pImpl->m_webController->get_Bounds(&bounds));
								double scale;
								m_pImpl->m_webController3->get_RasterizationScale(&scale);
								const INT32 selectedCommandId = ::TrackPopupMenu(
									hPopupMenu,
									TPM_TOPALIGN | TPM_LEFTALIGN | TPM_RETURNCMD,
									bounds.left + topLeft.x + ((int)(p.x * scale)),
									bounds.top + topLeft.y + ((int)(p.y * scale)), 0, hWnd,
									nullptr);
								CHECK_FAILURE(
									args->put_SelectedCommandId(selectedCommandId));
							};
							wil::com_ptr<ICoreWebView2Deferral> deferral;
							CHECK_FAILURE(args->GetDeferral(&deferral));
							RunAsync([deferral, showMenu]() {
								showMenu();
								CHECK_FAILURE(deferral->Complete());
								});
						}
						// Removing the 'Save image as' context menu item for image context
						// selections.
						/*
						else if (targetKind == COREWEBVIEW2_CONTEXT_MENU_TARGET_KIND_IMAGE)
						{
							UINT32 removeIndex = itemsCount;
							wil::com_ptr<ICoreWebView2ContextMenuItem> current;
							for (UINT32 i = 0; i < itemsCount; i++)
							{
								CHECK_FAILURE(items->GetValueAtIndex(i, &current));
								wil::unique_cotaskmem_string name;
								CHECK_FAILURE(current->get_Name(&name));
								if (std::wstring(L"saveImageAs") == name.get())
								{
									removeIndex = i;
								}
							}
							if (removeIndex < itemsCount)
							{
								CHECK_FAILURE(items->RemoveValueAtIndex(removeIndex));
							}
						}
						*/
						// Adding a custom context menu item for the page that will display
						// the page's URI.
						else if (targetKind == COREWEBVIEW2_CONTEXT_MENU_TARGET_KIND_PAGE)
						{
							// Custom items should be reused whenever possible.
							if (!m_displayPageUrlContextSubMenuItem)
							{
								wil::com_ptr<ICoreWebView2ContextMenuItem> current;
								std::vector<UINT32> vRemoveIndex;
								int iSepIndex = 0;
								for (UINT32 i = 0; i < itemsCount; i++)
								{
									CHECK_FAILURE(items->GetValueAtIndex(i, &current));
									wil::unique_cotaskmem_string name;
									CHECK_FAILURE(current->get_Name(&name));
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND itemKind = {};
									CHECK_FAILURE(current->get_Kind(&itemKind));

									if (std::wstring(L"back") == name.get() ||
										std::wstring(L"forward") == name.get() || 
										std::wstring(L"share") == name.get())
									{
										vRemoveIndex.push_back(i);
									}
									else if (itemKind == COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_SEPARATOR)
									{
										iSepIndex++;
										if(iSepIndex == 2)
										{
											vRemoveIndex.push_back(i);
										}

									}
									else if (std::wstring(L"other") == name.get())
									{
										INT32 id;
										CHECK_FAILURE(current->get_CommandId(&id));
										//if(id == sha)

									}
									else if (std::wstring(L"inspectElement") == name.get())
									{
										

									}
								}
								std::reverse(vRemoveIndex.begin(), vRemoveIndex.end());
								for (const auto& iRemoveIndex : vRemoveIndex)
								{
									CHECK_FAILURE(items->RemoveValueAtIndex(iRemoveIndex));
								}
								CHECK_FAILURE(items->get_Count(&itemsCount));

								//items->RemoveValueAtIndex(0); // Back
								//itemsCount--;
								//items->RemoveValueAtIndex(0); // Forward
								//itemsCount--;
								//items->RemoveValueAtIndex(5); // Share
								//itemsCount--;
								//items->RemoveValueAtIndex(5); // Separator
								//itemsCount--;

								wil::com_ptr<ICoreWebView2Environment9> webviewEnvironment;
								CHECK_FAILURE(
									m_pImpl->m_webViewEnvironment->QueryInterface(
										IID_PPV_ARGS(&webviewEnvironment)));

								// ===============================================================
								wil::com_ptr<ICoreWebView2ContextMenuItem> itemSep1;
								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_SEPARATOR, &itemSep1));

								CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemSep1.get()));
								itemsCount++;
								// ===============================================================

								// ===============================================================
								wil::com_ptr<ICoreWebView2ContextMenuItem> itemViewXML;
								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"View XML", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &itemViewXML));

								CHECK_FAILURE(itemViewXML->add_CustomItemSelected(
									Callback<ICoreWebView2CustomItemSelectedEventHandler>(
										[appWindow = this, target](ICoreWebView2ContextMenuItem* sender, IUnknown* args)
										{
											appWindow->GetParentWindow()->SendMessage(WM_COMMAND, CUSTOM_MENU_VIEW_XML, NULL);

											return S_OK;
										})
									.Get(),	nullptr));

								CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemViewXML.get()));
								itemsCount++;
								// ===============================================================

								// ===============================================================
								wil::com_ptr<ICoreWebView2ContextMenuItem> itemViewPageSource;
								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"View Page Source (CTRL + U)", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &itemViewPageSource));

								CHECK_FAILURE(itemViewPageSource->add_CustomItemSelected(
									Callback<ICoreWebView2CustomItemSelectedEventHandler>(
										[appWindow = this, target](ICoreWebView2ContextMenuItem* sender, IUnknown* args)
										{
											wil::unique_cotaskmem_string pageUri;
											CHECK_FAILURE(target->get_PageUri(&pageUri));
											CString strUrl = L"view-source:" + CString(pageUri.get());

											// Create an array of generic keyboard INPUT structures
											INPUT ip[4] = {};
											for (int n = 0; n < 4; ++n)
											{
												ip[n].type = INPUT_KEYBOARD;
												ip[n].ki.wScan = 0;
												ip[n].ki.time = 0;
												ip[n].ki.dwFlags = 0; // 0 for key press
												ip[n].ki.dwExtraInfo = 0;
											}

											ip[0].ki.wVk = VK_CONTROL;
											ip[1].ki.wVk = 'U';

											ip[2].ki.wVk = 'U';
											ip[2].ki.dwFlags = KEYEVENTF_KEYUP;

											ip[3].ki.wVk = VK_CONTROL;
											ip[3].ki.dwFlags = KEYEVENTF_KEYUP;

											SendInput(4, ip, sizeof(INPUT));
											
											return S_OK;
										})
									.Get(), nullptr));

								CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemViewPageSource.get()));
								itemsCount++;
								// ===============================================================

								// ===============================================================
								wil::com_ptr<ICoreWebView2ContextMenuItem> itemSep2;
								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_SEPARATOR, &itemSep2));

								CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemSep2.get()));
								itemsCount++;
								// ===============================================================

								// ===============================================================
								// ALT + SHIFT + W
								wil::com_ptr<ICoreWebView2ContextMenuItem> itemOpenFileLocation;
								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"Open File Location\tALT+SHIFT+W", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &itemOpenFileLocation));

								CHECK_FAILURE(itemOpenFileLocation->add_CustomItemSelected(
									Callback<ICoreWebView2CustomItemSelectedEventHandler>(
										[appWindow = this, target](ICoreWebView2ContextMenuItem* sender, IUnknown* args)
										{
											appWindow->GetParentWindow()->SendMessage(WM_COMMAND, ID_DISPLAY_WORKING_FOLDER, NULL);

											return S_OK;
										})
									.Get(),	nullptr));

								CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemOpenFileLocation.get()));
								itemsCount++;
								// ===============================================================

								// ===============================================================
								wil::com_ptr<ICoreWebView2ContextMenuItem> itemExport;
								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"Export", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &itemExport));

								CHECK_FAILURE(itemExport->add_CustomItemSelected(
									Callback<ICoreWebView2CustomItemSelectedEventHandler>(
										[appWindow = this, target](ICoreWebView2ContextMenuItem* sender, IUnknown* args)
										{
											appWindow->GetParentWindow()->SendMessage(WM_COMMAND, ID_FILE_EXPORT, NULL);

											return S_OK;
										})
									.Get(),	nullptr));

								CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemExport.get()));
								itemsCount++;
								// ===============================================================

								// ===============================================================
								wil::com_ptr<ICoreWebView2ContextMenuItem> itemFind;
								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"Find", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &itemFind));

								CHECK_FAILURE(itemFind->add_CustomItemSelected(
									Callback<ICoreWebView2CustomItemSelectedEventHandler>(
										[appWindow = this, target](ICoreWebView2ContextMenuItem* sender, IUnknown* args)
										{
											appWindow->m_pImpl->m_webView->ExecuteScript(L"window.find()", nullptr);
											return S_OK;
										})
									.Get(), nullptr));

								CHECK_FAILURE(items->InsertValueAtIndex(itemsCount, itemFind.get()));
								itemsCount++;
								// ===============================================================


								/*
								wil::com_ptr<ICoreWebView2Environment9> webviewEnvironment;
								CHECK_FAILURE(
									m_pImpl->m_webViewEnvironment->QueryInterface(
										IID_PPV_ARGS(&webviewEnvironment)));

								wil::com_ptr<ICoreWebView2ContextMenuItem> displayPageUrlItem;
								wil::com_ptr<IStream> iconStream;

								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_SEPARATOR,
									&m_separatorContextSubMenuItem));

								CHECK_FAILURE(items->InsertValueAtIndex(
									itemsCount, m_separatorContextSubMenuItem.get()));

								CHECK_FAILURE(SHCreateStreamOnFileEx(
									L"d:\\small.ico", STGM_READ, FILE_ATTRIBUTE_NORMAL, FALSE, nullptr, &iconStream));

								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"Display Page Url", iconStream.get(),
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_COMMAND, &displayPageUrlItem));


								CHECK_FAILURE(displayPageUrlItem->add_CustomItemSelected(
									Callback<ICoreWebView2CustomItemSelectedEventHandler>(
										[appWindow = this, target](
											ICoreWebView2ContextMenuItem* sender,
											IUnknown* args) {
												wil::unique_cotaskmem_string pageUri;
												CHECK_FAILURE(target->get_PageUri(&pageUri));
												appWindow->AsyncMessageBox(
													pageUri.get(), L"Display Page Uri");
												return S_OK;
										})
									.Get(),
											nullptr));

								CHECK_FAILURE(webviewEnvironment->CreateContextMenuItem(
									L"New Submenu", nullptr,
									COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_SUBMENU,
									&m_displayPageUrlContextSubMenuItem));

								wil::com_ptr<ICoreWebView2ContextMenuItemCollection>
									m_displayPageUrlContextSubMenuItemChildren;

								CHECK_FAILURE(
									m_displayPageUrlContextSubMenuItem->get_Children(
										&m_displayPageUrlContextSubMenuItemChildren));

								m_displayPageUrlContextSubMenuItemChildren
									->InsertValueAtIndex(0, displayPageUrlItem.get());
								*/
							}
							//CHECK_FAILURE(items->InsertValueAtIndex(
							//	itemsCount, m_displayPageUrlContextSubMenuItem.get()));
						}
						// If type is not an image, video, or page, the regular Edge context
						// menu will be displayed
						return S_OK;
				})
			.Get(),
					&m_contextMenuRequestedToken);
    }
}

It does not matter what element I open it on. The HTML file has tables in it and I am right-clicking a cell. If I run the sample and open my HTML file and right-click a cell:

But, if I open the same file in Edge and inspect the very same element:

See? Edge drills down to the actual cell in the table. But not WebView2.

I don't want to attach the HTML file publish because it has names in it. But if you have a private email address that I can send the file to then I will share it.

BTW. You mentioned about getting the command ID (for Share). But I do not know how you defined shareCommandId.

[ajtruckle]

@yildirimcagri Any update?

[ajtruckle]

@yildirimcagri Any thoughts about this one?

Hi @ajtruckle , sorry for delayed response. I can now repro the 'inspect' issue on my side and added this to our bug backlog. Quick question, when you click inspect on the element again after DevTools opened, does DevTools then point to the correct element the second time? That's what I've observed on my side.

The value of shareCommandId would be obtained by the ContextMenuRequested event for the CommandId property of the 'share' command ContextMenuItem (by visually mapping the order of the items as they are laid out in the context menu to the MenuItems property). We did recently push a change that should update the item name of the 'share' item so you can directly find it by the name in next release.

[ajtruckle]

Hi @yildirimcagri

Quick question, when you click inspect on the element again after DevTools opened, does DevTools then point to the correct element the second time? That's what I've observed on my side.

Yes, I get the same behaviour as you described.

We did recently push a change that should update the item name of the 'share' item so you can directly find it by the name in next release.

Awesome, I look forward to the update. :)

[ajtruckle]

@yildirimcagri
Hi !

I can now repro the 'inspect' issue on my side and added this to our bug backlog.

This is still an unaddressed issue. Is there a link to this being worked on? Thank you.