MicrosoftEdge / MicrosoftEdge/Demos

/devtools-extension/ lacks Sample Panel tool in DevTools

Open
#107 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
330
Forks
233
Avg merge
21h 12m
Merged PRs (30d)
4

Description

This seems to be a rendering issue. Try different width of DevTools pane / Activity bar width.

Bug: Sample lacks icon for Edge Activity Bar tool tab. Need to add icon to sample, to display when tab is narrow and not selected.
PR adds icon.png ok, but need better png w/ right colors:

Bug: The tool tab doesn't appear in a blank tab. Blank tab fails to ever show the custom DevTools tool tab; the custom DevTools tab only appears when a webpage is loaded:

  1. Open new tab.

  2. F12.

    Actual Result: Missing the Sample Panel tab in DevTools.

  3. Open a webpage, such as https://github.com/MicrosoftEdge/Demos.

    Now the Sample Panel tab appears.


Tab in narrow mode is gray/blank:ImageTab in wide mode / Selected mode is has label but lacks an icon:Image

Bug? When install the sample in Chrome, tool tab doesn't appear. Article needs to state whether this sample works in Chrome also, or Edge only.

The /Demos/devtools-extension/sample 4/ sample no longer works; the custom tool tab Sample Panel is no longer available (in Edge or in Chrome) as shown in
https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension#download-install-and-run-the-devtools-extension-sample

The sample worked the last time I revised that article.

I tried from Demos repo > PR 106 branch where I removed the phase 1-4 dirs (/sample 1/ through /sample 4/), then I tried from "main" branch of Demos repo > /Demos/devtools-extension/sample 4/ dir.

The Sample Panel tool is not found in default activity bar or in More Tools. After hard refresh etc.
Chrome's Extensions tab showed popup notif saying "Extension Loaded", but can't find a Sample Panel tool in DevTools.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the missing Sample Panel from /Demos/devtools-extension/sample 4/ in Edge and Chrome, including a blank DevTools tab and narrow Activity Bar. Review the PR 106 branch and its icon.png change, then compare the sample with the linked documentation article. Done means the tool appears in the stated browser contexts, the icon renders correctly, and the article accurately states browser support.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
devtools
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.