Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

Highlight errors in editor#4467

Merged
wldcordeiro merged 5 commits intofirefox-devtools:masterfrom
nyrosmith:highlight_editor_errors
Oct 24, 2017
Merged

Highlight errors in editor#4467
wldcordeiro merged 5 commits intofirefox-devtools:masterfrom
nyrosmith:highlight_editor_errors

Conversation

@nyrosmith
Copy link
Contributor

@nyrosmith nyrosmith commented Oct 22, 2017

Associated Issue: #3112
I closed #4439 because after the editor refactoring I wasn't able to merge/rebase anymore.

highlight_editor_error

--editor-searchbar-height: 27px;
--editor-second-searchbar-height: 27px;
--debug-line-error-border: rgb(255, 0, 0);
--debug-expression-error-background: rgba(255, 127, 127, 0.5);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure which color to use as background.
This looked ok for me...

Copy link
Contributor

@bomsy bomsy Oct 22, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!
The background feels a bit strong to me, maybe lighter, or no background with just the red border lines

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do something light :)

return;
}

// if (pauseInfo && pauseInfo.why.type === "exception") {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot to remove this

Copy link
Contributor

@codehag codehag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one minor nit!

});
this.setState({ debugExpression });
} else {
doc.addLineClass(line, "line", "new-debug-line");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these two branches are almost exactly the same, with the exception of the the class names. how about something like this:

type TextClasses = {
  markTextClass: string,
  lineClass: string
}
getTextClasses(pauseInfo: Object): TextClasses {
  if (pauseInfo && pauseInfo.why.type === "exception") {
    return { markTextClass: "debug-expression-error", lineClass: "debug-expression-error" }
  }
  return { markTextClass: "debug-expression", lineClass: "new-debug-line" }
}

// ...

const { markTextClass, lineClass } = getTextClasses(pauseInfo);
doc.addLineClass(line, "line", markTextClass);
const debugExpression = markText(editor, lineClass, {
  start: { line, column },
  end: { line, column: null }
});
this.setState({ debugExpression });

this way, it is clear what is changing in the code, its not the entire if block, but just the class names

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right. Will change that

Copy link
Contributor

@wldcordeiro wldcordeiro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a really nice UX win 👍 Thanks a ton @nyrosmith

@wldcordeiro wldcordeiro merged commit 57cc666 into firefox-devtools:master Oct 24, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants