profile
viewpoint
Harald Kirschner digitarald Mozilla US http://digitarald.de Product Manager @firefox-devtools. Web Platform DX . Performance. Husband & Dad. 🏳️‍🌈

digitarald/acmejs 11

Cross-platform, low-garbage entity/component JavaScript game framework

digitarald/chromeless-external-links-snippet 8

Open external links in a new window when your web app runs in a chromeless runtime. Useful for Firefox OS and iOS web apps! Created and tested in Firefox.

digitarald/art 6

vector drawing for buttons, icons, widgets and all that stuff

digitarald/chromatic-tuner-cloud-web-app 6

Tune any instrument on any device

anantn/aitc 4

Working space for Apps in the Cloud. Because Mercurial.

digitarald/agavi-1.0 3

[svn-mirror latest tag] Agavi is a powerful, scalable PHP5 application framework that follows the MVC paradigm. It enables developers to write clean, maintainable and extensible code. Agavi puts choice and freedom over limiting conventions, and focuses on sustained quality rather than short-sighted decisions.

digitarald/about-device 2

about:device: X-Ray for your app run-time.

digitarald/apps.mozillalabs.com 2

The source of the apps.mozillalabs.com website

digitarald/bean 2

an events api for javascript

digitarald/bonzo 2

simple, hassle-free, library agnostic, extensible DOM utility

issue commentwebpack/webpack

Webpack source maps are broken for debugging in Firefox

📯 The fix for missing .vue files landed in today's Nightly and will ride the trains with Firefox 80.

Stuk

comment created time in 3 days

issue closedfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

Steps to reproduce

Create a new project. Set it's devtool: "cheap-module-source-map" https://webpack.js.org/configuration/devtool/

Actual Behavior The source maps don't work

Expected Behavior They should work. If I set devtool: "eval-source-map" it works.

closed time in 3 days

andreicristianpetcu

issue commentfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

That should be the https://bugzilla.mozilla.org/show_bug.cgi?id=1594550 . Closing this one, as we track all bugs in bugzilla now.

andreicristianpetcu

comment created time in 3 days

issue commentfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

@andreicristianpetcu does the same cheap-module-source-map config work for Chrome?

andreicristianpetcu

comment created time in 3 days

issue commentfirefox-devtools/profiler

Hand cursor for expandable/collapsable resource tracks

@gregtatum correct, pointer is what I meant.

digitarald

comment created time in 5 days

issue commentfirefox-devtools/vscode-firefox-debug

Publish On open-vsx.org

@hbenl agreed, we have no reason to keep this extension limited to a walled garden.

evanoc3

comment created time in 9 days

issue commentcheckly/puppeteer-recorder

Firefox support

@tnolet auditing the CRX file in https://www.extensiontest.com/test/2bd86bf0-b57b-11ea-8f8c-ef9090840f8d only mentions one API (which can probably use runtime.onConnect).

The page I linked also guides you to submit to Firefox's addons. The docs I linked explain side-loading as well so you can do a try-run.

digitarald

comment created time in 11 days

issue commentmozilla/platform-status

Considering dropping Opera from Firefox Platform Status

@chrisdavidmills what's the compat data view on opera?

takenspc

comment created time in 11 days

issue commentmozilla/platform-status

Considering dropping Opera from Firefox Platform Status

Agreed, they don't seem to actively invest in the platform as much anymore and/or doing outreach to devs.

takenspc

comment created time in 11 days

issue openedcheckly/puppeteer-recorder

Firefox support

Firefox team member here. Since Puppeteer already has experimental support for Firefox, I'd love to help to get this extension working as well.

I suspect that it only takes minimal effort to make this extension work in Firefox and to submit it to Firefox's addon site: https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/ . If it turns out to be harder, I'd be happy to help with specifics.

created time in 12 days

issue openedfirefox-devtools/profiler

Resource tracks should have a tooltip for full URL

Tooltip would help with overflowing URLs.

v2 could be Copy URL menu (or Open URL, even), but currently that UI doesn't offer any context menu.

created time in 22 days

issue openedfirefox-devtools/profiler

Idea: Hide or mute idling threads

image

Only one thread actually has data, the rest is empty

User story: When slicing a profile down to a time range, I want to be able to tell quickly which threads are actually active, so that I can focus on the threads that have data.

It feels like the empty white (no data) or gray (not started) thread timelines just take up precious space. We could mute the empty ones or hide their timelines. Hiding the whole track might be too noisy when think about sliding the range left and right while tracks pop in and out.

created time in 22 days

issue openedfirefox-devtools/profiler

Hand cursor for expandable/collapsable resource tracks

To show that the resource tracks are expandable/collapsable, showing a hand cursor would help.

created time in 22 days

issue commentmdn/sprints

[DevTools] Firefox 78 updates

Please also track Rename UI references of "blacklist" to "ignore" in Debugger, which landed in 97 but could be applied as soon as we get to it.

Elchi3

comment created time in a month

issue commentfirefox-devtools/ux

Clarify disabled-pausing state

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1643130 and opened it up as good-first-bug 👋🏻

digitarald

comment created time in a month

issue commentwebpack/webpack

Webpack source maps are broken for debugging in Firefox

I assume you don't see any source map errors in Console? Just as second validation step, could you run your code through https://sourcemaps.io/ ? If it all shows up green, you could send the .map and .js files to me. Hi @digitarald! i don't see any source map errors in Console. I have run the code through https://sourcemaps.io/ and got lots of errors that i can't figure out. Bottomline is the sourcemap works fine with chrome but not in FF, any other ideas?

@lschnoller thanks for sharing your project via email. So far is looks like this issue is tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1642397 , which causes multiple vue files with similar names to show up as only one entry. Workaorund until we fix it (79, current nightly) is opening the files via Cmd-P quick open – can you confirm that this works?

Stuk

comment created time in a month

issue commentwebpack/webpack

Webpack source maps are broken for debugging in Firefox

Also broken for me in FF with any devtool value. Sourcemaps appear but error points to bundled code

@azukaar can you reproduce on Firefox Nightly or DevEdition? It would help if you have more specific STR – but it sounds like source maps don't load at all.

Stuk

comment created time in a month

issue commentfirefox-devtools/ux

Consistent blocklist UX with better icons & wording

Filed bug 1642811 for the renaming.

digitarald

comment created time in a month

issue commentwebpack/webpack

Webpack source maps are broken for debugging in Firefox

I have a vue app and source-map works perfectly with chrome but i still can't make it work with FF v76.0.1, v77.0b9 developer ed. nor 78.0a1 nightly build. It works fine with js files but not with vue files. In my vue.config.js i have set configureWebpack: { devtool: "source-map", ... } What could be happening here? PLEASE HELP! THANKS

I assume you don't see any source map errors in Console? Just as second validation step, could you run your code through https://sourcemaps.io/ ? If it all shows up green, you could send the .map and .js files to me.

Stuk

comment created time in a month

issue openedfirefox-devtools/profiler

Embedded data for share.firefox.dev links

It would be useful for devs to see a summary for shared profile links in services like Matrix/Slack/Twitter/etc.

oEmbed might solve this, so we can maintain this separate from the interface.

As a strawperson idea:

v0 could at least show generic Firefox Profiler pitch. v1 could show meta data of the profile v2 could show a screenshot of the timeline

Related

  • https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254: Reads oEmbed, Twitter card, Open Graph
  • https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

created time in a month

PR opened apollographql/apollo-client

Reviewers
Adding Firefox addon link

Follow up from https://github.com/apollographql/apollo-client-devtools/issues/73#issuecomment-630999845 , to support @jcreighton.

+1 -1

0 comment

1 changed file

pr created time in a month

push eventdigitarald/apollo-client

Harald Kirschner

commit sha a8a179c3658cf8223a6e903854863f5bbfeadd6f

Adding Firefox addon link

view details

push time in a month

fork digitarald/apollo-client

:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server

https://apollographql.com/client

fork in a month

issue commentmozilla/addons

Install button disabled, requires refresh to work

Fresh profile doesn't reproduce. Still trying to see which addons might cause this.

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

Make toolbox tab spacing a bit tighter

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1641405 for Network

fvsch

comment created time in a month

pull request commentfirefox-devtools/profiler

Increase the permalink's input width so that new permalinks are completely visible

@julienw what could also help to ensure the same width across all URLs and outputs is using font-variant-numeric: tabular-nums to make the characters fixed width and then sizing the element with ch units.

julienw

comment created time in a month

issue commentwebcompat/web-bugs

online.visualstudio.com - Firefox is unsupported browser

@miketaylr is on a thread. https://github.com/microsoft/vscode/issues?q=is%3Aopen+is%3Aissue+label%3Afirefox points to some of the issues.

digitarald

comment created time in a month

issue commentmozilla/redash

Missing CSV option for querying external CSV files

Maybe related https://discuss.redash.io/t/missing-csv-data-source-in-self-hosted-version/2473/6 ?

digitarald

comment created time in a month

issue openedmozilla/redash

Missing CSV option for

Issue Summary

CSV data import option is missing.

Steps to Reproduce

I followed https://redash.io/help/data-sources/querying/csv-files but can't find the CSV option in our redash instance.

created time in a month

issue commentfirefox-devtools/ux

Make toolbox tab spacing a bit tighter

@violasong as we are touching up the Network panel anyways, should we try the smaller tab space there first?

fvsch

comment created time in a month

issue commentfirefox-devtools/ux

Network table design refresh

This also simplifies the table a bit; as we don't have 3 columns (like current mockup) that still act like a table (column headers, customisation, sortable, etc; but like a single-column list. Thinking about the entries as cards, we can get creative about what information to show in a visual hierarchy.

Downside is the visual shifting that table-to-list causes (gmail somewhat suffers from that). But I would not expect the UI to constantly switch between them … either by closing the sidepanel or resizing the viewport.

I do love how this brings us closer to thinking about responsive UI first and really embracing smaller viewports (vs just moving panels around).

violasong

comment created time in a month

issue commentfirefox-devtools/ux

Polish Headers Side Panel

adding scroll overflow once it goes over.

line-clamp to the rescue.

janodvarko

comment created time in a month

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Just for reference, leaving this example for a super-long URLs that makes the URL preview take over the whole above the fold space for the panel; so we can test it against the new bug:

image

janodvarko

comment created time in a month

issue commentfirefox-devtools/ux

Polish Headers Side Panel

@violasong One aspect to think about is long header names and how to align the values:

image

janodvarko

comment created time in a month

issue commentmicrosoft/vscode

Web: Firefox support

@digitarald we see PWA as an environment for VS Online / Codespace users to embrace a similar desktop like experience as VS Code Desktop.

I understand the added value of PWA for this project with the additional keyboard access it provides, @rebornix. We will continue to make a case for it, listing your use cases.

But is the absence of PWA support in Firefox a strong enough reason to block Firefox for online.visualstudio.com, Codespaces and co?

rebornix

comment created time in a month

issue commentapollographql/apollo-client-devtools

Firefox support

@jcreighton thank you. I also found a Chrome-only reference on https://www.apollographql.com/docs/react/development-testing/developer-tooling/#apollo-client-devtools.

avrelaun

comment created time in a month

issue commentfirefox-devtools/ux

Clarify disabled-pausing state

I think I actually like the blue one on top best because it's a simple on-off of this button.

fwiw, request blocking goes also blue.

The struggle is real to have an enabled state for a disabling button. Apart from the strike and the color change, would an enabled button background add context?

digitarald

comment created time in a month

issue openedfirefox-devtools/vscode-firefox-debug

Support Automatic browser debugging

Automatic browser debugging opens a debug sessions for URLs clicked from the terminal. If users really use it it would add a happy path that avoids extra configuration.

https://github.com/microsoft/vscode-js-debug#automatic-browser-debugging

created time in 2 months

issue openedwebcompat/web-bugs

online.visualstudio.com - see bug description

<!-- @browser: Firefox 78.0 --> <!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:78.0) Gecko/20100101 Firefox/78.0 --> <!-- @reported_with: -->

URL: https://online.visualstudio.com/

Browser / Version: Firefox 78.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Chrome

Problem type: Something else Description: Site redirects with a browser not supported warning Steps to Reproduce: Site shows "Your browser isn’t currently supported in the preview, but we’ll be adding support soon." and then redirects. <details><summary>View the screenshot</summary><img alt='Screenshot' src='https://webcompat.com/uploads/2020/5/cb54c158-64fa-4bed-bc9c-72e2e7c60e45.jpg'></details>

<details> <summary>Browser Configuration</summary> <ul> <li>None</li> </ul> </details>

From webcompat.com with ❤️

created time in 2 months

issue commentapollographql/apollo-client-devtools

Firefox support

@digitarald Resubmitted a little bit ago 🤞

Thanks so much, @jcreighton. I touched base with the addons team 🤞.

As you ramp up, please don't hesitate to get browsers/devtools to help to get the Apollo tooling to the next level 🚀.

avrelaun

comment created time in 2 months

issue commentfirefox-devtools/ux

[Debugger] Onboarding for Map Scopes

cc @janodvarko @loganfsmyth @jaril @jasonLaster

digitarald

comment created time in 2 months

issue openedfirefox-devtools/ux

[Debugger] Onboarding for Map Scopes

Background

Map scopes transforms build/compressed into how the original source behaves. It's magical when enabled buy we can't enable it by default as it has performance overhead (especially on the first pause).

It makes several variable-related features more reliable:

  • Scopes pane
  • Variable hover preview (without it preview will not work at all for original variables)
  • Inline variable preview (same breakage as above)
  • With 78: Now also mapping in Logpoints (making logging work for original variables)

Problem

The checkbox is so subtle that it's easy to ignore, so users lose out on a better debugging experience.

Solution

Lightweight onboarding to opt users into enabling Map scopes when it's available for a file.

This could be a subtle bar in the Scopes pane on pausing or on top of the file as a lot of variable inspection happens in context of the code.

created time in 2 months

issue commentmicrosoft/vscode

Web: Firefox support

@rebornix I can see fullscreen being important for workflows as it allows full keyboard access.

Regarding PWA and to understand how it blocks you: Do you have any insights if users are adding VS Code as installed web app? Is that something that Codespaces encourages users?

rebornix

comment created time in 2 months

issue commentfirefox-devtools/profiler

Missing instructions on how to disable profiler completely

@gregtatum do we have logic in Firefox to remove the icon again? We could provide an "undo" for the "Add Profiler to Firefox" flow from the landing page.

Plan B could be just mentioning it after it got enabled "Manage the Profiler icon via Customize Toolbar".

perk11

comment created time in 2 months

issue commentmicrosoft/playwright

[Feature] Chrome/Firefox Extensions in headless mode

@aslushnikov can we help to determine if this is possible in Firefox or would you refrain from supporting this use case in Puppeteer when only one browser supports it?

wernerwernerwerner888

comment created time in 2 months

issue commentmicrosoft/vscode

Web: Firefox support

@miketaylr and I can help from the Firefox side to find the right bugs, people and input. Feel free to cc us on similar bugs.

rebornix

comment created time in 2 months

issue openedfirefox-devtools/ux

Clarify disabled-pausing state

We did some work, like fading out the breakpoint panels, to ensure disabled pausing is clearly communicated.

Seeing reports like https://twitter.com/__jakub_g/status/1260912327702073347 there is more work to do it seems.

Thoughts:

  • Is it just an expectation to look for icons users might be more used to, like Chrome's; then we should just get closer to that icon shape/color
  • As part of "footgun indicator" discussion, we shared mockups of "Pausing is disabled" warning bar similar to the "Debugger is paused"

cc @violasong @darkwing @fvsch @janodvarko

created time in 2 months

issue commentwebpack/webpack

Webpack source maps are broken for debugging in Firefox

@adjenks any more details on your project setup?

Stuk

comment created time in 2 months

issue openedmozilla/addons

Install button disabled, requires refresh to work

Describe the problem and steps to reproduce it:

  1. Open https://darkreader.org/help/en/
  2. Click through to Firefox AMO

What happened?

Install button stays disabled.

What did you expect to happen?

Install button works. It does work after refresh.

Anything else we should know?

ScreenFlow

created time in 2 months

issue commentfirefox-devtools/ux

[Toolbox] "Active Footgun" icon in panel tabs

To say something like "Hey, JavaScript is disabled. Want to enable it again?"

This is a very specific user opt-in (compared to pausing, which can happen async later due to some latent toggles), so I am not sure if it needs a specific callout beyond the footgun icon on the Debugger icon and then on the Settings button. Similarly, throttling in Network would also generate a warning and highlight the toolbar element – without a warning anywhere.

digitarald

comment created time in 2 months

issue openedwebcompat/web-bugs

app.giblib.com - site is not usable

<!-- @browser: Firefox 77.0 --> <!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:77.0) Gecko/20100101 Firefox/77.0 --> <!-- @reported_with: desktop-reporter --> <!-- @extra_labels: type-webrender-enabled -->

URL: https://app.giblib.com/

Browser / Version: Firefox 77.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Browser unsupported Steps to Reproduce: Just shows "It looks like you are using IExplorer to view this site. We highly recommend using Google Chrome to avoid any issues. …" <details><summary>View the screenshot</summary><img alt='Screenshot' src='https://webcompat.com/uploads/2020/4/48a10e54-7768-4a6a-be73-95cdc5288127.jpeg'></details>

<details> <summary>Browser Configuration</summary> <ul> <li>gfx.webrender.all: false</li><li>gfx.webrender.blob-images: true</li><li>gfx.webrender.enabled: true</li><li>image.mem.shared: true</li><li>buildID: 20200428100141</li><li>channel: nightly</li><li>GPUs: <ul> <li>active: true</li><li>description: </li><li>deviceID: 0x3e9b</li><li>vendorID: 0x8086</li><li>driverVersion: </li> </ul></li><li>hasTouchScreen: false</li><li>mixed active content blocked: false</li><li>mixed passive content blocked: false</li><li>tracking content blocked: false</li> </ul> </details>

View console log messages

From webcompat.com with ❤️

created time in 2 months

issue openedfirefox-devtools/profiler

Import for OpenTelemetry traces

Just wanted to have this tracked, as it needs some further exploration on what we can do with traces in the profiler and how useful it would be.

Resources:

  • https://github.com/open-telemetry/opentelemetry-specification/blob/master/specification/overview.md#trace
  • https://lightstep.com/blog/opentelemetry-101-what-is-tracing/
  • https://www.jaegertracing.io/

created time in 2 months

issue commentfirefox-devtools/ux

Improve design for community site (firefox-dev.tools)

We update the What's New section in devtools itself on regular basis; so for most releases we can pull out new additions. Question is how much this should be hit highlights or really regularely updated features.

Could the primary CTA be to download Dev Edition?

Related, we also have the developer newsletter that we should feature for signing up.

violasong

comment created time in 2 months

issue commentfirefox-devtools/ux

Inline error annotations in Debugger

The latest design from the patch switched to curly underline: image

digitarald

comment created time in 2 months

issue openedfirefox-devtools/ux

Inline error annotations in Debugger

https://phabricator.services.mozilla.com/D71337 is adding inline error annotations.

If an error is thrown the line gets annotated with an error icon that shows the error message + stack on hover.

The same mechanism could eventually also map console error and warnings to console locations to show them in context when loading a source and stepping through the code.

The idea would be to unblock landing the work soon and to file follow up bugs for UI polish.

@jasonLaster brought up a point, that the expression could be red underlined without an icon. Maybe the styling could be similar to matched strings, but in red?

image

created time in 2 months

issue commentapollographql/apollo-client-devtools

Firefox support

We make sure to hold the doors wide open for you! Let me know if I can help in any way.

avrelaun

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

See the method field, it's a drop down allowing the user to pick different HTTP method (POST, GET, etc.)

Agreed, I thought I am missing the reason why method should be a free form input as a dropdown makes a lot more sense.

We should provide autocompletion for headers as well, as we have a well-defined list and datalist on the input can provide a quick way to autocomplete.

Note the Hid auto-generated headers switch. Those headers are hidden by default. Not sure if we have any auto-generated headers though.

Which ones would that be, @janodvarko? I would have assumed Content-Length, but its in the list – so I guess its values from other panels like Authorization.

See the little (i) icon it shows a tooltip that explains purpose of the header and why it should be set.

MDN integration for picked headers would be great, as devs can look up the right format and other details.

Note the Bulk Edit button that switched the mode into raw so, the user can just type headers in multi-line text area (allows nice copy-paste)

Copy/pasting is an important use case, so devs are not forced into the split input format. This could also be another place for a Raw toggle.

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Make toolbox tab spacing a bit tighter

Seems like there is a general agreement to apply this smaller spacing for sidebar-tabbars and in vertical mode.

fvsch

comment created time in 2 months

push eventmozilla/platform-status

Chris Mills

commit sha a228590d3303aa20486def8907f37080800dddd4

updating fx logos to the new version

view details

Harald Kirschner

commit sha 82cccbcd16795c9bf3bfe1fad03a6587c24fe277

Merge pull request #604 from chrisdavidmills/update-fx-logo updating fx logos to the new version

view details

push time in 3 months

PR merged mozilla/platform-status

updating fx logos to the new version

As per https://github.com/mozilla/platform-status/issues/603

+0 -0

2 comments

3 changed files

chrisdavidmills

pr closed time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Break the connection with the current selection. We might have another UI indication to point to the original request used to resent (as suggested by Julian)

To simplify scope, we might skip that. This way "Edit & Resend" just becomes "Pre-populate the create request form with this request's details". If we move the form to the sidebar, the original request would still be selected until the user submits, I assume? But maybe I am missing why we should show the original request.

janodvarko

comment created time in 3 months

pull request commentmozilla/platform-status

updating fx logos to the new version

If all goes well, this will just deploy on merge 🤞

chrisdavidmills

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Is the idea behind the checkboxes that we would now save your inputs between sessions, and allow you to disable the ones you're not currently using?

Yes, a way to disable/enable entries to explore and iterate quickly.

And sounds like we'll be moving the form to the left sidebar? Is this because it's helpful to be able to see the right sidebar at the same time?

Just to clarify, this would be follow-up. Left sidebar allows to keep the form open while repeatedly firing requests. Right now sending a new request closes the form to focus the response.

[] : [_________]

+1, I actually had that in my wireframes as wider option. I just didn't think about making the first input smaller, which is a good idea.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

cc @fvsch as well who had some excellent input on forms in the past.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

If people here generally agree on the approach in the wireframes (that basically just map out key/value form input pairs); the scope of this UX issue would be mostly about the UI polish to correctly style the buttons/inputs.

image

cc @belen-albeza

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

One quick idea: buttons float on top on hover, like in Copy Rules:

I like that. One caveat to test during implementation is how hover-enabled buttons interact with selecting text portions.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

This could work, though the expanded query string part could end up being pretty massive

As it's expanded optionally, that seems acceptable.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

@digitarald I like that idea, out of curiosity how would it look for headers that have the warning icons (set-Cookie in this example)?

Maybe @violasong has ideas how some icons are always on and don't need hover. Otherwise we could show errors like we do them inline in the general section?

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

I thought we were saying that the full URL is important here, as this is the only place to see the whole thing (besides the query string, but that's an extra step and kind of different).

Right, makes sense. Might also work if we expand it to a full URL when the user expands this section. If we do a proper line-break (not like now), 1000+ character URLs will take up a lot of space.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

RFC: unifying syntax colors between CodeMirror and Reps

@jasonLaster @nchevobbe what do you think about less-purple reps styling?

I’ve been moving to a pattern of blue key and black/white value, and it would be great to have that here.

One aspect from Discourse that isn't covered is that keys of child objects in an inspected object and not blue in Chrome but gray; which helps reducing the color bursts. It seems right now the work just focused on toning down the string values, correct?

How would this be applied to image

fvsch

comment created time in 3 months

startedfirefox-devtools/ux

started time in 3 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

@violasong looks really nice! Makes me want to click around and play with it.

One thing I am not sure about is the shortened labels ("Blocking" is less descriptive than "Content Blocking") and other languages will vary in length as well. What's the strategy to make this responsive and overflow in sensible ways?

Harald's last suggestion for error message. This de-emphasizes the error and makes it more a part of the summary rather than an extra section. Sounds like that's what we want?

A more typically-sized URL with no params, shown in the style of the query param examples

Should this URL be limited in lines, using line-clamp?

FYI, the parts of the URL that we should show are all listed in https://developer.mozilla.org/en-US/docs/Web/API/URL .

Smaller toggle for switching to raw

Perfect size!

Just to get consensus (I am a fan of hover menus), is the idea from https://github.com/firefox-devtools/ux/issues/116#issuecomment-610742996 accepted? @bomsy @janodvarko

janodvarko

comment created time in 3 months

issue commentmozilla/fx-private-relay

Endless spinning page when hitting Add to Firefox button

Still fails, also with Network panel open and Cache disabled.

digitarald

comment created time in 3 months

issue commentfirefox-devtools/vscode-firefox-debug

Wrong output in VS code

The code is in devtools reps, which I am not sure if it helps to format output for vs code as it focuses on providing react components.

jluisgarcia

comment created time in 3 months

issue commentfirefox-devtools/vscode-firefox-debug

Open given URL on running Firefox instance when using "attach" launch configuration

I like the idea; this would make debugging and iterating a lot easier.

AObuchow

comment created time in 3 months

create barnchfirefox-devtools/vscode-firefox-debug

branch : bug195-readme-argument

created branch time in 3 months

issue commentfirefox-devtools/vscode-firefox-debug

Wrong output in VS code

Build-in DevTools use their own representation for types; while VS Code might fall back to common ones.

@hbenl is this something that gets lost in translation in the protocol, or the extension?

jluisgarcia

comment created time in 3 months

issue commentmozilla/fx-private-relay

Endless spinning page when hitting Add to Firefox button

After Sign In works I get image

digitarald

comment created time in 3 months

issue commentmozilla/fx-private-relay

Endless spinning page when hitting Add to Firefox button

Using Sign In has the same issue, but Refresh fixes it.

digitarald

comment created time in 3 months

issue openedmozilla/fx-private-relay

Endless spinning page when hitting Add to Firefox button

STR: Hit Add to Firefox AR: Endless spinning accounts page, no related console logs

image

Maybe because my Firefox email isn't @mozilla.com? I have a HAR file which I shared in private channels, as it might contain PII tokens.

created time in 3 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Idea: All the above, with Response headers in blue sans-serif 12px labels + black monospace 11px values.

@violasong the smaller font seems also good to save space for longer output. Blue is also good since the summary section already has a grid layout to differentiate visually.

It just occurred to me that you mentioned another example for this, how the Debugger sizes those lines. Is that sizing/spacing aligned? It seems like it:

image

The tracking protection notification message at the top is nice. We could use this concept for other messages as well (more info about request error state, etc)

What other errors did you have in mind, @janodvarko?

An alternative to the error could be adding a line with a warning in-line with the tracking category.

Referrer:         no-referrer-its-referer
Content Blocking: Tracking Content
                  🛡 Be aware that cookies or content for this URL could be blocked. (?)`

WDYT, @violasong ?

Color syntax for collapsed URL - awesome idea!

@violasong I like the idea. It does make it a bit more readable. I am not sure which parts we should highlight; as use cases vary on what's important to users. Have you seen an example of that anywhere else?

What's supposed to be in the Resend dropdown? I can think of "Edit and Resend" and "Resend", is that it?

Yes, that was my proposal, making sure we are exposing more options from the context meny in the toolbar. @violasong another idea would be an "Edit" button and a "Resend" button; where Edit implies that it would be send again anyways. So we avoid the dropdown.

What's suppoed to be in the Block dropdown?

"Block URL" is very blunt atm. I proposed this as we can expose more options. "Block Domain" and "Block Path" could be added here. To simplify, it is probably easier to use the blocking icon from the network toolbar and avoid the dropdown. If users want to fine-tune, the blocking sidepanel will open automatically anyways and they can edit the URL down to what they need.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/profiler

Understand Fenix developer needs

Cross-posted to https://bugzilla.mozilla.org/show_bug.cgi?id=1616887#c1

mstange

comment created time in 3 months

more