Design refresh of the top bar with the menubuttons #3029

julienw · 2020-11-04T14:38:18Z

Design spec

This losely follows the design spec from Figma:

Of course the part with "delete" is not there yet. Also I didn't change the metainfo panel yet, I'll do that together with adding the delete button there.

I decided to go with a slight refresh, without changing the locations of the buttons.
You'll see that to be able to do that I came up with some other icons and labels than the ones defined in the spec, but I think they won't be a problem.

Screenshots

Deploy previews

production
deploy preview

codecov · 2020-11-04T17:41:24Z

Codecov Report

Merging #3029 (a876008) into main (4e49b61) will decrease coverage by 0.01%.
The diff coverage is 76.92%.

@@            Coverage Diff             @@
##             main    #3029      +/-   ##
==========================================
- Coverage   88.14%   88.13%   -0.02%     
==========================================
  Files         240      240              
  Lines       19083    19100      +17     
  Branches     4871     4885      +14     
==========================================
+ Hits        16821    16833      +12     
- Misses       2095     2100       +5     
  Partials      167      167

Impacted Files	Coverage Δ
src/components/app/ListOfPublishedProfiles.js	`98.68% <ø> (ø)`
src/components/app/MenuButtons/Permalink.js	`83.33% <ø> (ø)`
src/components/app/ProfileName.js	`74.35% <ø> (ø)`
src/components/app/MenuButtons/index.js	`86.79% <73.91%> (-10.43%)`	⬇️
src/components/app/MenuButtons/Publish.js	`76.47% <100.00%> (+0.98%)`	⬆️
src/components/shared/ButtonWithPanel/index.js	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4e49b61...a876008. Read the comment docs.

julienw · 2020-11-05T12:55:09Z

src/components/app/MenuButtons/Permalink.css

@@ -2,6 +2,10 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

+.menuButtonsPermalinkButtonButton::before {


These class names are crazy, I'll do a pass on them in a next PR. Previously we had this menuButtons wrapper that we don't have anymore, so I think there's room to simplification.

For what it's worth, I don't mind crazy class names.

julienw · 2020-11-05T13:50:08Z

src/components/app/MenuButtons/index.css

  border: 0;
-  border-left: 1px solid var(--grey-30);


Replaced with some generated content where needed

julienw · 2020-11-05T15:36:06Z

src/test/components/ProfileViewer.test.js

+    store.dispatch(
+      updateUrlState(
+        stateFromLocation({
+          pathname: '/from-addon',
+          search: '',
+          hash: '',
+        })
+      )
+    );


This is made necessary because the new code throws an error when the datasource is "none" (which makes sense).

julienw · 2020-11-05T15:36:38Z

src/components/app/MenuButtons/index.js

@@ -78,8 +79,32 @@ class MenuButtonsImpl extends React.PureComponent<Props> {
    this.props.dismissNewlyPublished();
  }

+  _getUploadedStatus(dataSource: DataSource) {


I'm using this util better in the next patch.

julienw · 2020-11-05T15:41:16Z

src/components/app/MenuButtons/index.css

-  padding: 0 20px;
+  padding: 0 12px;


This is a bit more compact but still good when the border are removed.

Praise: Looks nice to me!

julienw · 2020-11-05T15:54:24Z

res/img/svg/link-dark.svg

+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect fill="rgba(12, 12, 13, .8)" x="7" y="3.286" width="2" height="9.429" rx="1" ry="1" transform="rotate(-45 8 8)"></rect><path fill="rgba(12, 12, 13, .8)" d="M2.354 4.522L4.485 2.39a.5.5 0 0 1 .711 0l3.19 3.19.014-.015a2 2 0 0 0 0-2.821L6.272.616a2 2 0 0 0-2.821 0L.616 3.451a2 2 0 0 0 0 2.821L2.744 8.4a1.993 1.993 0 0 0 2.8.02l-3.19-3.186a.5.5 0 0 1 0-.712zm13.062 5.237L13.287 7.63a2 2 0 0 0-2.821 0l-.015.015 3.189 3.189a.5.5 0 0 1 0 .711l-2.132 2.132a.5.5 0 0 1-.711 0L7.61 10.49a1.993 1.993 0 0 0 .02 2.8l2.128 2.128a2 2 0 0 0 2.821 0l2.835-2.835a2 2 0 0 0 .002-2.824z"></path></svg>


As you see, now I took the habit to name the file -dark to make it clear that they are the "dark" version for these icons (too bad we can't use context-fill on the normal web).

gregtatum · 2020-11-06T20:37:14Z

Gerald's markers 2.0 migration got in front of this review, but I plan on tackling it at the beginning of next week.

gregtatum

I'm marking "request changes" as I think it would be good to chat a bit real-time about some of the changes, and I think we should sort out the icon system for the header to be consistent in how the icons are presented.

I would suggest letting me use Sketch to modify the existing icons to be consistent on the 12x12 grid, as specified by the Photon guidelines. This will make the icons not blurry, have a consistent layout, and consistent stroke size. Let's chat real-time about this tomorrow.

gregtatum · 2020-11-09T20:13:19Z

src/components/shared/ButtonWithPanel/index.js

@@ -169,15 +169,16 @@ export class ButtonWithPanel extends React.PureComponent<Props, State> {
        className={classNames('buttonWithPanel', className, { open })}
        ref={this._wrapperRef}
      >
-        <input
+        <button


Question: What's motivating this change?

I don't mind, but it would be good to know the decision process here.

This is so that we can add ::before and ::after on them. These pseudo-selectors add another inline element inside the target element. This doesn't work with an input because it has no child elements, but this works with a button.
See https://codepen.io/julienw/pen/dyXrLGg for example.

Maybe we could have done the icon system using simple background-images and left padding, but I thought that using pseudo-elements would make it possible to harness the power of flex for the positioning instead of pixel-positioning things.

gregtatum · 2020-11-09T20:28:24Z

src/components/app/MenuButtons/index.css

+   * So here is the layout for this element:
+   * <-left padding-> <-ICON (1em)-> <-4px-> CONTENT
+   */
+  width: 1em;


Suggestion: I would prefer this to be defined in pixels, as it's being used next to fonts defined in pixels. I don't want to mix and match font units, as this will make things more complicated. Right now the icons are fuzzy, and not aligned well.

The icons will resize correctly on my machine when defined in px

According to photon, icons are either defined on a 16px or 12px grid.

https://design.firefox.com/photon/visuals/iconography.html

I think we need to re-work these icons into a 12x12 grid system in order to have them consistently displayed. I think this is important to get correct now, as these are in a primary position in the UI. I'd prefer not to follow-up with this. I think it's worth chatting about it real-time tomorrow, but I can use Sketch on my computer to fix the icons to work on the 12x12 grid and be consistent.

FTR I used 1em initially, not so that it would resize when zooming, but so that if we change the font-size of an element this would adjust automatically without needing that we change the value everywhere else.

I defined them all to 12px, also also reworked the existing one for the Docs button to the 12px grid. Now the icon sizes are 12px despite the font-size being 11px, but this still looks good in my opinion so I didn't change the font-size.

TBH I don't really see the difference from the previous version :-)

src/components/app/ProfileName.css

gregtatum · 2020-11-09T20:38:57Z

src/components/app/MenuButtons/index.js

@@ -132,7 +134,7 @@ class MenuButtonsImpl extends React.PureComponent<Props> {
      return (
        <button
          type="button"
-          className="menuButtonsButton menuButtonsAbortUploadButton"
+          className="menuButtonsButton menuButtonsShareButtonButton menuButtonsButtonButton__hasIcon menuButtonsShareButtonButton__uploading"


Suggestion: In the past, we have done this as .menuButtonsShareButtonButton .has-icon .uploading, and then in the style .menuButtonsShareButtonButton.has-icon { ... } This is a new practice. I would prefer to keep it consistent with our existing practices. I would suggest if we want to move with a new style with this, to discuss this practice, get agreement on it, and come up with a plan to migrate our existing usages to follow this new practice.

I had a look at our codebase, and we have several uses of this same pattern, but I think all of them are my work.

In very short, this is how BEM or CSS Guidelines suggest using modifier classes. I believe the goals are: 1. avoiding inadvertent reuse of some classes across the project, 2. reducing specificity and so avoiding specifity wars in the long run, 3. encouraging reuse for some classes by separating real utility classes from modifier classes.

I'll look at summarizing arguments for both sides on a discussion issue. In the mean time I'll look at following your suggestion and see if this makes things the same or more complicated.

So I decided to keep the way I was doing here, but I changed the class names to make them shorter and less surprising.

The main reason I like using a namespace prefix is that this makes it very obvious that these classes are used only here.
I hope that will be better with the new names.

gregtatum · 2020-11-09T20:39:47Z

src/components/app/MenuButtons/index.css

+    1em;
+}
+
+.menuButtonsMetaInfoButtonButton__uploaded::before {


See my comment on the snapshot test for the style names.

gregtatum · 2020-11-09T20:46:58Z

src/components/app/MenuButtons/Permalink.css

@@ -2,6 +2,10 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

+.menuButtonsPermalinkButtonButton::before {


For what it's worth, I don't mind crazy class names.

res/img/svg/link-dark.svg

res/img/svg/material/cloud_off.svg

src/components/app/MenuButtons/index.js

src/components/app/MenuButtons/Publish.css

gregtatum · 2020-11-10T17:36:02Z

As discussed in chat, here are some 12x12 icons. Let me know if you need any changes on them. 27a96cf

This isn't strictly necessary, but now this is more self-documented.

julienw · 2020-11-17T19:13:20Z

src/components/app/MenuButtons/index.css

+/* We're using ::after for borders because ::before is used for icons. */
+.menuButtonsButton-hasRightBorder::after,
+.menuButtonsButton-hasLeftBorder::after {


Note: I'm adding better comments in a later commit.

julienw · 2020-11-17T19:32:20Z

src/components/app/MenuButtons/index.js

-        {this._renderMetaInfoButton()}
        {this._renderRevertProfile()}
+        {this._renderMetaInfoButton()}


Surprisingly, we have no test for this... I did try to write one but kept running into weird problems with jest fake timers and react-testing-library that I don't really want to debug now :/

julienw · 2020-11-17T19:34:57Z

@gregtatum I think I handled most of your comments. I added new commits that you'll identify with their "Review comments" prefix, and some others after them. Except these ones, I picked your commit with the new icons above in the stack, and I also edited my commit with my icons to remove them, but that's otherwise the only changes I made to the old commits.

I'd like to highlight the main comment I didn't change: I didn't change the class names fully, but instead I made them less surprising, I hope that will be okay. I definitely intend to start a discussion issue about this topic.

gregtatum

Thanks for working through my review feedback. It all looks great!

julienw force-pushed the menubutton-design-refresh branch 2 times, most recently from 62f803b to 969e378 Compare November 4, 2020 20:12

julienw added this to the Delete uploaded profiles [Unified Profiler] milestone Nov 5, 2020

julienw commented Nov 5, 2020

View reviewed changes

julienw force-pushed the menubutton-design-refresh branch 2 times, most recently from e1e0dad to 812fec1 Compare November 5, 2020 15:33

julienw commented Nov 5, 2020

View reviewed changes

julienw force-pushed the menubutton-design-refresh branch from 812fec1 to 2f8afcb Compare November 5, 2020 15:40

julienw commented Nov 5, 2020

View reviewed changes

julienw force-pushed the menubutton-design-refresh branch 3 times, most recently from 3e4a348 to 4589085 Compare November 5, 2020 15:53

julienw commented Nov 5, 2020

View reviewed changes

julienw force-pushed the menubutton-design-refresh branch from 4589085 to b6bb427 Compare November 5, 2020 16:05

julienw changed the title ~~Menubutton design refresh~~ Design refresh of the top bar with the menubuttons Nov 5, 2020

julienw marked this pull request as ready for review November 5, 2020 16:25

julienw requested a review from gregtatum November 5, 2020 16:32

julienw added a commit to julienw/perf.html that referenced this pull request Nov 9, 2020

[PR firefox-devtools#3029] Menu buttons refresh

f8060b3

gregtatum requested changes Nov 9, 2020

View reviewed changes

gregtatum mentioned this pull request Nov 9, 2020

Implement new animation for commiting selection range (Issue #1140) #2978

Merged

julienw and others added 5 commits November 17, 2020 15:28

Use button for menu buttons

ebc0201

Implement a function to determine the upload status

5c41176

Add 12x12 icons

11b88a1

Menu buttons refresh

878a738

Review comment: Extract the menu buttons border into their own classes

39ae656

This isn't strictly necessary, but now this is more self-documented.

Review comment: move the revert operation to the left

455454b

julienw force-pushed the menubutton-design-refresh branch 3 times, most recently from e0b91b9 to 9fc544f Compare November 17, 2020 16:52

julienw added 6 commits November 17, 2020 20:08

Review comments: use 12px icons

232af4c

Review comment: rework the upload animation

541bc40

Review comment: simplify class names and make them less surprising

036ce74

Further simplification: remove the style menuButtonsLink

16f402d

Add a few comments to the menu buttons CSS files

cfef0f5

Review comment: Change remaining UI still using the name 'publish'

a876008

julienw force-pushed the menubutton-design-refresh branch from 2fc8eed to a876008 Compare November 17, 2020 19:11

julienw commented Nov 17, 2020

View reviewed changes

julienw requested a review from gregtatum November 17, 2020 19:35

gregtatum approved these changes Nov 18, 2020

View reviewed changes

julienw merged commit 144758c into firefox-devtools:main Nov 19, 2020

julienw mentioned this pull request Nov 20, 2020

Add a test to cover publishing and reverting using the publishing panel #3069

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design refresh of the top bar with the menubuttons #3029

Design refresh of the top bar with the menubuttons #3029

julienw commented Nov 4, 2020 •

edited

Loading

codecov bot commented Nov 4, 2020 •

edited

Loading

julienw Nov 5, 2020

gregtatum Nov 9, 2020

julienw Nov 5, 2020 •

edited

Loading

julienw Nov 5, 2020

julienw Nov 5, 2020

julienw Nov 5, 2020

gregtatum Nov 9, 2020

julienw Nov 5, 2020

gregtatum commented Nov 6, 2020

gregtatum left a comment

gregtatum Nov 9, 2020

julienw Nov 17, 2020 •

edited

Loading

gregtatum Nov 9, 2020

julienw Nov 17, 2020

gregtatum Nov 9, 2020

julienw Nov 17, 2020 •

edited

Loading

julienw Nov 17, 2020 •

edited

Loading

gregtatum Nov 9, 2020

gregtatum Nov 9, 2020

gregtatum commented Nov 10, 2020

julienw Nov 17, 2020

julienw Nov 17, 2020

julienw commented Nov 17, 2020

gregtatum left a comment

Design refresh of the top bar with the menubuttons #3029

Design refresh of the top bar with the menubuttons #3029

Conversation

julienw commented Nov 4, 2020 • edited Loading

Design spec

Screenshots

Deploy previews

codecov bot commented Nov 4, 2020 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julienw Nov 5, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gregtatum commented Nov 6, 2020

gregtatum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julienw Nov 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julienw Nov 17, 2020 • edited Loading

Choose a reason for hiding this comment

julienw Nov 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gregtatum commented Nov 10, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julienw commented Nov 17, 2020

gregtatum left a comment

Choose a reason for hiding this comment

julienw commented Nov 4, 2020 •

edited

Loading

codecov bot commented Nov 4, 2020 •

edited

Loading

julienw Nov 5, 2020 •

edited

Loading

julienw Nov 17, 2020 •

edited

Loading

julienw Nov 17, 2020 •

edited

Loading

julienw Nov 17, 2020 •

edited

Loading