profile
viewpoint
Jason Laster jasonLaster Mozilla New York City

climatescape/climatescape.org 70

Discover the organizations solving climate change

jasonLaster/blink-devtools-docs 25

A collection of docs for primary blink devtools classes

AirtableBridge/AirtableBridge 17

Sync Airtable data

auchenberg/devtools.rocks 3

Curated DevTools resources for web builders

grstearns/OnlinePythonTutor 1

Learn Python by executing code online and visualizing data structures

jasonLaster/Boxes-and-Bins 1

Contextual Text Editor

Garbee/debugger.html 0

The Firefox debugger that works anywhere

push eventjasonLaster/devtools

Jason Laster

commit sha e5e93ebfe312d5dc02621f5b848c8360ee172c23

tweaks

view details

push time in 2 hours

create barnchjasonLaster/devtools

branch : virtualized-outline

created branch time in 3 hours

issue openedRecordReplay/devtools

Chat with us is broken

https://user-images.githubusercontent.com/254562/144718954-bc7dc478-26f5-4c03-b0f0-8365e5881da4.mov

created time in 6 hours

issue openedRecordReplay/devtools

Update Accordion component

Our current accordion has a couple of issues:

  1. the panels can be awkward sizes
  2. the panels cannot be resized

this library should be a good starting point https://github.com/DanFessler/react-panelgroup

created time in 17 hours

PR opened RecordReplay/devtools

Protect onRefreshGraphics while hot reloading

small hot-reloading fix

+13 -11

0 comment

4 changed files

pr created time in 17 hours

create barnchjasonLaster/devtools

branch : refresh-graphics

created branch time in 17 hours

push eventjasonLaster/devtools

Dan Miller

commit sha 585e020b5e76417f6929b4c418c6e0ca886299bb

semgrep: ignore a dynamic eval (#4461)

view details

Jaril

commit sha 26fca4fe302eac09b9eff1db71f48f90e1952b9e

Pass the Session ID to mixpanel when tracking the upload time (#4482)

view details

Jason Laster

commit sha 15b4cfd12054343c1a3902bc5c29620a40f36641

Fix events panel scrolling

view details

Jason Laster

commit sha b2fe81c0e82bcadb237c8111cd14365739f0f092

Resize the gutter when we add a brekapoint

view details

Holger Benl

commit sha b96e1b29a6a71b722bc460b11834252616b29cb3

Setup inspector store earlier (#4414)

view details

Holger Benl

commit sha 73bfeeb7cc64c2c6ab40267d3d655b0279e24cb1

Call preventDefault on cursor key events in the markup panel (#4423)

view details

Holger Benl

commit sha 5b55e8e4a5069353d9957bed9744707f00253930

Revert "Fix highlighter and node picker when screenshots are scaled" This reverts commit ffcaa1da0b739ada5cab3fb3bbf963e918c02bdb.

view details

Holger Benl

commit sha 6decf41d4d61ea6d6d8a03a6415240b9b604227e

Use the current screenshot's scale

view details

Holger Benl

commit sha e918271ef61292b39a7f3dad577c2750a7b38de0

Setup inspector store even earlier

view details

Holger Benl

commit sha f4a1ab3c650f03592eab86c3613daa617921a265

Fix the breadcrumbs divider URL

view details

Logan Smyth

commit sha f5045f749e1311686ffa27305140c91e7ab83756

Pass the full set of sorted events when adding keyboard and navigation events. (#4479)

view details

Josh Morrow

commit sha 3619784e8a499451b477fc00741ffbaf66d6f33f

Fix Apollo Mocks This gets the final CI check passing. The primary changes are: - Update Apollo mocks to look like our updated API responses - Take playwright out of headless mode (not sure why is necessary) - Tell semgrep to ignore the `test` folder - Do lots of miscellaneous sorting in files that I touched during this change

view details

Jason Laster

commit sha d01f94228d7ba1e683cf428f3cdb285bad0b2986

QuickOpen: exclude webpack-internal files from sources search

view details

Jaril

commit sha 566155e0321b7e9059b16fc761b8944b1c360df4

Make sure the right-most replay padding is not white (#4516)

view details

Jaril

commit sha 776cc629e62b32ba166f0c2376df1addea90ece4

Fix events overflow (#4511) * Fix events overflow * Remove height: 100%

view details

Jason Laster

commit sha 6b643e1f957175f4661b81ef8ad66ff0b0462fdb

Add bubbles to loadings screens (#4499)

view details

Jason Laster

commit sha 4097b6132e6b48e89bc1b802e668334718b503ad

Update nag logic (#4492) * Update styling for nags * Update Nag logic * Fix ts Co-authored-by: Jaril <jarilvalenciano@gmail.com>

view details

Josh Morrow

commit sha 3c04fc5365c1322cb6ac7f9f57a935d48e8047c1

Fixup some style aspects of the LoadingTip Just a couple of small things I noticed when going through this this morning! It also looks to me like we could probably forego redux here, but since that's already done, I'm good with keeping it.

view details

Jaril

commit sha bc596b11e336e0e7e72f1a003bb1fc0add8ffa05

Rename the breakpoint pane to print statements pane (#4517)

view details

Holger Benl

commit sha f0c60094e3093b0f3973d9fc839b56dd43bd73b6

Reenable returning to a route after login

view details

push time in 17 hours

Pull request review commentRecordReplay/devtools

Memoize outline view

  .content.open {   height: auto;+  display: flex;+  flex-direction: column;+  overflow-y: hidden;

this is probably the riskiest part, but it helps keep the outline filter input at the top

jasonLaster

comment created time in 18 hours

PullRequestReviewEvent

push eventjasonLaster/devtools

Ryan Duffy

commit sha 6bd8985298df29325aa29db1be999e4fffd5d979

Fix sharing replays publicly from sharing modal (#4739)

view details

Jason Laster

commit sha 444711e78011f1a885f14f0d767b9e960a22df8a

show loading progress bar sooner fixes #4735 (#4742)

view details

Ryan Duffy

commit sha 88ed3143711e5e5c8160bea15204f12bd5705e00

add headers to next config (#4740)

view details

Jason Laster

commit sha 891f0342005638ad720ced44db8993a24dbed27a

Speed up the outline view fixes #4741

view details

push time in 18 hours

PR opened RecordReplay/devtools

Memoize outline view
  • Memoizes the utils that fetch the function lists
  • also limits the list that is shown to 500 global functions and 50 class functions. Using a virtualized list will help
+35 -14

0 comment

5 changed files

pr created time in 18 hours

create barnchjasonLaster/devtools

branch : memoize-outline-view

created branch time in 18 hours

issue openedRecordReplay/devtools

Material Icons are occassionally missing

Description: Screen Shot 2021-12-03 at 9 04 23 PM

created time in 18 hours

pull request commentRecordReplay/devtools

More visible +/- button

I'd love to pick this up again and see if we can get it across the finish line

jaril

comment created time in a day

pull request commentRecordReplay/devtools

Show the unwrapped react events in the events filter/dropdown count

lets drop this... it feels a bit too unwieldy

jaril

comment created time in a day

issue closedRecordReplay/devtools

Implement an indeterminate loading UI

Our loading screen should be flexible enough to handle different states without needing to reload based on different if statements.


Zypsy passed along a loading animation. Can we please put this on our loading screen? loader.html.zip

closed time in a day

jaril

issue commentRecordReplay/devtools

Implement an indeterminate loading UI

closing in favor of #4541. We can revisit a more generic spinner later

jaril

comment created time in a day

issue commentRecordReplay/devtools

Put Loom link behind experimental flag

https://github.com/RecordReplay/devtools/pull/4487

will try and wrap soon

jonbell-lot23

comment created time in a day

issue commentRecordReplay/devtools

React DevTools steals keyboard arrow events from the comments pane

It looks like views/DevTools.js is adding a global keydown handler. We can either fix this by running React DevTools in an iframe or scoping this handler to React DevTools root node.

cc @bvaughn

jasonLaster

comment created time in a day

push eventRecordReplay/devtools

Jason Laster

commit sha 444711e78011f1a885f14f0d767b9e960a22df8a

show loading progress bar sooner fixes #4735 (#4742)

view details

push time in 2 days

issue closedRecordReplay/devtools

Long time waiting for recording to load without any messages

I've been creating some node recordings to debug some stuff, but the UX while waiting for the recording to load isn't very good. The tab sits for a long time when trying to view the recording, with no messaging at all about what is happening. Here is the recording FWIW https://app.replay.io/recording/71194c1d-b4e8-4c44-91c8-a6ac12bc1f58

closed time in 2 days

bhackett1024

pull request commentRecordReplay/devtools

Add a console loading bar whenever there's a logpoint analysis in flight

By the way, there's another use case where we also want to listen for when the initial console messages are loaded

I think this should be sufficient

diff --git a/src/devtools/client/webconsole/actions/messages.js b/src/devtools/client/webconsole/actions/messages.js
index fa3705e3..c8ef5682 100644
--- a/src/devtools/client/webconsole/actions/messages.js
+++ b/src/devtools/client/webconsole/actions/messages.js
@@ -29,14 +29,17 @@ const defaultIdGenerator = new IdGenerator();
 let queuedMessages = [];
 let throttledDispatchPromise = null;

-export function setupMessages(store) {
+export async function setupMessages(store) {
   LogpointHandlers.onPointLoading = (logGroupId, point, time, location) =>
     store.dispatch(onLogpointLoading(logGroupId, point, time, location));
   LogpointHandlers.onResult = (logGroupId, point, time, location, pause, values) =>
     store.dispatch(onLogpointResult(logGroupId, point, time, location, pause, values));
   LogpointHandlers.clearLogpoint = logGroupId => store.dispatch(messagesClearLogpoint(logGroupId));

-  ThreadFront.findConsoleMessages((_, msg) => store.dispatch(onConsoleMessage(msg)));
+  await ThreadFront.findConsoleMessages((_, msg) => store.dispatch(onConsoleMessage(msg)));
+  dispatch({
+    type: "console-messages-loaded",
+  });
 }

 function convertStack(stack, { frames }) {
diff --git a/src/protocol/thread/thread.ts b/src/protocol/thread/thread.ts
index 6e8c998b..fed9ac7f 100644
--- a/src/protocol/thread/thread.ts
+++ b/src/protocol/thread/thread.ts
@@ -817,11 +817,6 @@ class _ThreadFront {
   async findConsoleMessages(onConsoleMessage: (pause: Pause, message: Message) => void) {
     const sessionId = await this.waitForSession();

-    client.Console.findMessages({}, sessionId).then(({ overflow }) => {
-      if (overflow) {
-        console.warn("Too many console messages, not all will be shown");
-      }
-    });
     client.Console.addNewMessageListener(async ({ message }) => {
       await this.ensureAllSources();
       const pause = new Pause(sessionId);
@@ -843,6 +838,12 @@ class _ThreadFront {
       }
       onConsoleMessage(pause, message);
     });
+
+    return client.Console.findMessages({}, sessionId).then(({ overflow }) => {
+      if (overflow) {
+        console.warn("Too many console messages, not all will be shown");
+      }
+    });
   }
jaril

comment created time in 2 days

Pull request review commentRecordReplay/devtools

Add a console loading bar whenever there's a logpoint analysis in flight

 function messages(state = MessageState(), action) {       });       return newState; +    case "REMOVE_LOG_GROUP_ID": {+      const newPendingLogGroupIds = new Set(state.pendingLogGroupIds);+      newPendingLogGroupIds.delete(action.logGroupId);++      return {+        ...state,+        pendingLogGroupIds: newPendingLogGroupIds,+      };+    }++    case "ADD_LOG_GROUP_ID": {

perhaps ADD_PENDING_LOG_GROUP_ID

jaril

comment created time in 2 days

Pull request review commentRecordReplay/devtools

Add a console loading bar whenever there's a logpoint analysis in flight

+import React, { ReactNode } from "react";+import { connect, ConnectedProps } from "react-redux";+import LoadingProgressBar from "ui/components/shared/LoadingProgressBar";+import { UIState } from "ui/state";+import { hasPendingLogGroupIds } from "../../selectors/messages";++function ConsoleLoadingBar({ hasPendingLogGroupIds }: PropsFromRedux) {+  if (!hasPendingLogGroupIds) {+    return null;+  }++  return <LoadingProgressBar />;

Nice - does this push the UI down? Can we make it absolute?

jaril

comment created time in 2 days

Pull request review commentRecordReplay/devtools

Add a console loading bar whenever there's a logpoint analysis in flight

 export function setupMessages(store) {     store.dispatch(onLogpointLoading(logGroupId, point, time, location));   LogpointHandlers.onResult = (logGroupId, point, time, location, pause, values) =>     store.dispatch(onLogpointResult(logGroupId, point, time, location, pause, values));-  LogpointHandlers.clearLogpoint = logGroupId => store.dispatch(messagesClearLogpoint(logGroupId));+  LogpointHandlers.clearLogpoint = logGroupId => {+    store.dispatch(removeLogGroupId(logGroupId));+    store.dispatch(messagesClearLogpoint(logGroupId));

minor point, but it's okay to also listen for this action in the reducer and do the same thing. you might not need: removeLogGroupId

jaril

comment created time in 2 days

Pull request review commentRecordReplay/devtools

Add a console loading bar whenever there's a logpoint analysis in flight

 export function addBreakpoint(     if (disabled) {       // If we just clobbered an enabled breakpoint with a disabled one, we need       // to remove any installed breakpoint in the server.-      await client.removeBreakpoint(location);-    } else {-      await client.setBreakpoint(breakpoint.location, breakpoint.options);+      return await client.removeBreakpoint(location);+    }++    const [oldLogGroupId, logGroupId] = await client.setBreakpoint(+      breakpoint.location,+      breakpoint.options+    );++    // Keep a reference to the analysis's log group id in redux. That way, we can reference+    // and clear it if we happen to remove the breakpoint before the analysis is finished.+    dispatch(setBreakpointOptions(cx, location, { ...options, logGroupId }));++    // This is defensive just to make sure we always clear unneeded logGroupIds.+    if (oldLogGroupId !== logGroupId) {+      dispatch(removeLogGroupId(oldLogGroupId));

can we do this all in the reducer? feels like this could be simpler. For instance, the console reducer could listen for the setBreakpointOptions action and see ooh, we're trying to change an already existing analysis... also - another option is to use a location-key which might be simpler than log-group-id.

jaril

comment created time in 2 days

PullRequestReviewEvent
PullRequestReviewEvent
more