Print Statements 1.5

[jasonLaster]

Suggestions

• [x] Next previous buttons could use a fill which would be more consistent with other buttons
• [x] The summary body could be white which would be a tad lighter
• [x] The edit mode footer should just show the condition button. This will make it more discoverable
• [x] RecordReplay/design#21
• [x] RecordReplay/design#10

Figma

Proposed

Current

[jonbell-lot23]

Hey @bvaughn I've got a request!

I fixed a bunch of easy stuff in this ticket, and there's one remaining. We want to remove everything from the bottom row when you're editing a print statement. Here's a visual. Right now it looks like the top one but we want it to be like the bottom one:

I looked at the code and I wasn't sure the smartest way to say "Hey if you're in edit mode, just don't show all this stuff." The way I had planned to do it feels very sloppy and hacky. Can you do it The Way Brian Would Do It and then show me how you did it?

[jasonLaster]

@jonbell-lot23 for fun - how about you open a PR and we can share some feedback on how we'd do it 😄

[jasonLaster]

btw here's my quick, didn't run the code guess

--- a/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointNavigation.js
+++ b/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointNavigation.js
@@ -54,6 +54,24 @@ function BreakpointNavigation({
     }
   }, [analysisPoints]);

+  if (editing) {
+    <div className="breakpoint-navigation">
+      <div className="flex-grow" />
+      <button
+        className={classnames(
+          "h-5 w-5 rounded-full border p-px pt-0.5",
+          showCondition
+            ? "border-primaryAccent text-primaryAccent"
+            : "border-gray-500 text-gray-500"
+        )}
+        style={{ height: "1.25rem", borderRadius: "100%" }}
+        onClick={() => setShowCondition(!showCondition)}
+      >
+        <MaterialIcon>filter_list</MaterialIcon>
+      </button>
+    </div>;
+  }
+
   return (
     <div className={classnames("breakpoint-navigation", { empty: isEmpty })}>
       {!isEmpty ? (
@@ -65,27 +83,13 @@ function BreakpointNavigation({
         <div className="flex-grow" />
       )}
       <div className="text-center">
-        {editing && (
-          <button
-            className={classnames(
-              "h-5 w-5 rounded-full border p-px pt-0.5",
-              showCondition
-                ? "border-primaryAccent text-primaryAccent"
-                : "border-gray-500 text-gray-500"
-            )}
-            style={{ height: "1.25rem", borderRadius: "100%" }}
-            onClick={() => setShowCondition(!showCondition)}
-          >
-            <MaterialIcon>filter_list</MaterialIcon>
-          </button>
-        )}
-        {!editing && (
+        {
           <PanelStatus
             indexed={indexed}
             executionPoint={lastExecutionPoint}
             analysisPoints={analysisPoints}
           />
-        )}
+        }
       </div>
     </div>
   );

[jonbell-lot23]

I'm going to start using an acronym to represent a nuanced thought that's going to come up more and more:

I like code challenges but I have a lot of design work to do and that's where I provide the most value to Replay, so the best use of my time with code stuff is to sometimes delegate. Or ....

-> ILCCBIHALODWTDATWIPTMVTRSTBUOMTWCSITSD <-

This one in particular seems doable, because the code snippet above looks fine. But it's lower priority than my design tasks. Best to have eng take it on and I'll learn from it on the periphery.

[jasonLaster]

sounds good - happy to run with it

[bvaughn]

Haha, just saw that I was assigned and then unassigned this issue while I was asleep 😆 startup life! haha

I'd be happy to do this kind of change (little UI tweaks can be fun!) Feel free to tag me on stuff like this in the future.