Photon updates, 2nd pass #351
Conversation
|
For those following along, here was the result of a very quick-n-dirty pass at the punch-list from #331: BEFORE
AFTER
I know @changecourse is still finalizing some of the screens and planning to get them into Zeplin so we can confirm sizes, shapes, colors, etc. fairly quickly and easily. So, I'll hit pause 🙅♂️ here for a little bit knowing we're moving in a good direction and no big concerns spotted (yet?). For what its worth, the refactor and work @jimporter has done in #338 made the shared components (and styles) very easy to target and update. 👏 |
| } | ||
|
|
||
| .title, .subtitle { | ||
| weight: 600; |
There was a problem hiding this comment.
Thanks very much @pdehaan 🙇
| font-size: 80%; | ||
| opacity: 0.75; | ||
| font-size: 13px; | ||
| font-wight: 400; |
devinreams
force-pushed
the
331-photon-updates-2nd-pass
branch
from
784135e
to
50bb187
Compare
|
|
|
This PR is getting a bit .. long. @jimporter Can you please help me review it as-is and then work on a follow-up branch to tackle some of the more interesting/tricky stuff outlined below? @linuxwolf I will still assume I should hold off on a merge here until your branch has landed since so much moved around on the popup, homepage, first run, etc. DONE (ready for review)
TODO (moved to 3rd pass at #392)
|
package.json
Outdated
| @@ -4,7 +4,7 @@ | |||
| "id": "lockbox@mozilla.com", | |||
| "version": "0.1.3-alpha", | |||
| "main": "dist/bootstrap.js", | |||
| "description": "A Lockbox extension for Firefox", | |||
| "description": "the simple way to store, retrieve and manage website login info", | |||
There was a problem hiding this comment.
Mentioned in a previous comment, but this doesn't follow the Photon spec on capitalization.
devinreams
force-pushed
the
331-photon-updates-2nd-pass
branch
from
69fe967
to
615932e
Compare
|
This has been rebased (and resolved) against all the work at #362 (FxA) and force pushed. ✅ @jimporter This is ready for your review today knowing there are a bunch of "todo" items still. I want to try to tackle those in (a) separate small branch(es) to try and get as much done as quickly before we have to start our QA and release process. |
|
Integration tests are failing but re-written at #391. Once both have landed this will look a bit more sane. |
|
I'm going to 🔨 call this branch good-enough and spin up a "3rd pass" issue to track the remaining open items so we can land this as-is: #392 |
devinreams
force-pushed
the
331-photon-updates-2nd-pass
branch
from
16d1552
to
d3b4e6d
Compare
|
@jrbenny35 I somehow broke these integration when merging in the latest (they were passing before). I've looked around at the sign in selectors and I think I updated them to be accurate (last 2 commits) but I'm still getting failures on the last three tests: https://travis-ci.org/mozilla-lockbox/lockbox-extension/jobs/313141734#L2027-L2029 You're much smarter/faster at these than I. Can you tell what the root cause is here? 😬 |
|
@devinreams looks like you changed it to |
There was a problem hiding this comment.
Note: for this and subsequent "reviews", I'm just looking one commit at a time. That's the only way I can find to constrain the diff to just the changes you've made, excluding the FxA stuff (unless I go whole hog and do the entire review from the git command line, which I'd rather avoid). Apologies in advance for the spam.
edit: Apparently Github slurped in review comments from multiple commits, so their UI is just bad. Hopefully I'll be able to finish the rest of this review with just one more "main" review.
| @@ -3,7 +3,10 @@ | |||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |||
|
|
|||
| .item-details { | |||
| margin: 2em; | |||
| padding: 2em; | |||
| background-color: #f3f3f5; | |||
There was a problem hiding this comment.
Where is this color value coming from (aside from Zeplin, of course)? It's not one of the defined colors in the Photon theme specs, and the difference between the BG color here and on the <Homepage/> (#f9f9fa) is very slight.
More generally, I don't think this is the right place to put these styles; <ItemDetails/> (and <EditItemDetails/>) are designed as (theoretically) reusable components that could be put anywhere. Somewhere in <CurrentSelection/> would be a better place for styles of this sort, assuming we even want a different BG color from the <Homepage/>.
There was a problem hiding this comment.
It's not one of the defined colors in the Photon theme specs
@changecourse can you comment on this? 😕
I don't think this is the right place to put these styles; (and ) are designed as (theoretically) reusable components that could be put anywhere.
👍
There was a problem hiding this comment.
Agreed... updated colors to align to spec.
Dark list items should be Grey 20 (#EDEDF0)
Lighter list items should be Grey 10 (#F9F9FA)
Content area bg for the selected item should match either of these two values depending on the color of the list item selected.
| margin: 2em; | ||
| padding: 2em; | ||
| background-color: #f3f3f5; | ||
| height: 100%; |
There was a problem hiding this comment.
I don't think this does what you want (since it doesn't actually do anything :/). The spec shows that all the empty space below the form should be the same color, but in practice, the background-color defined above only applies to the form area.
There was a problem hiding this comment.
The spec shows that all the empty space below the form should be the same color, but in practice, the background-color defined above only applies to the form area.
You're right. And I struggled to see why/how to fix it with a quick glance. I assume it has to do with grid/flex? If you have any pointers I'd appreciate it, otherwise I'll keep hunting around.
There was a problem hiding this comment.
And I struggled to see why/how to fix it with a quick glance. I assume it has to do with grid/flex?
Wait, never mind, I think I see it now. Removing the "height" and set the right background-color.
| padding: 2em; | ||
| background-color: #f3f3f5; | ||
| height: 100%; | ||
| border-bottom: 1px solid #e9e9ea; |
There was a problem hiding this comment.
What is this for? I don't see it in the spec.
| @@ -42,7 +42,7 @@ body > main, | |||
|
|
|||
| .app-main > aside { | |||
| grid-column: 1; | |||
| min-width: 0; | |||
| min-width: 320px; | |||
There was a problem hiding this comment.
This seems a bit wide as a minimum. While 320px is fine as a target, I'd expect this to flex smaller for narrower windows. Rather than setting min-width so high, I'd recommend something more modest (somewhere in the 150-200px range?) and then adjust the grid-template-columns property of the parent node to get something around 320px in practice.
|
|
||
| function ItemCount({count}) { | ||
| return ( | ||
| <Localized id="toolbar-item-count" $count={count}> |
There was a problem hiding this comment.
Don't forget to remove the corresponding l10n string.
There was a problem hiding this comment.
Ok, here's the rest of the review. Hopefully I caught everything and didn't confuse too much between this and the FxA PR.
edit: Some of the comments say they're outdated, but I don't think they are; they're just near other lines that have been changed. Apologies if any really are outdated.
src/webextension/widgets/toolbar.js
Outdated
| @@ -24,18 +24,3 @@ Toolbar.propTypes = { | |||
| Toolbar.defaultProps = { | |||
| className: "", | |||
| }; | |||
|
|
|||
| export function ToolbarSpace({className}) { | |||
There was a problem hiding this comment.
If possible, could you remove this commit and the commit that reverts this? It'll help keep our history a bit less cluttered, which is something that'll get more important as we continue to stabilize things. (This is part of a larger issue where our current strategy of commits is going to make it a lot harder to back things out if we discover a regression.)
| @@ -18,7 +18,7 @@ export default function SendFeedback() { | |||
|
|
|||
| return ( | |||
| <Localized id="toolbar-send-feedback"> | |||
| <Button theme="ghost" onClick={doClick}> | |||
| <Button theme="ghost" size="puffy" onClick={doClick}> | |||
There was a problem hiding this comment.
Have we run this by the Photon design folks? My reading of the Photon spec doesn't indicate to me that this is the right place to use puffy buttons. An example of where we might use puffy buttons would be our modal dialogs.
Use the puffy version when you display a call to action in large components or views. Bigger space, bigger targets. For example the modal of Firefox onboarding.
I'm just not sure all the buttons in a toolbar really fits in with this. Notably, the main Firefox toolbar uses fairly small buttons, despite being Photon-themed.
I suppose this is something that's easy to change down the road, but I do want to be reasonably sure we're following the spirit of the Photon specs as much as possible.
There was a problem hiding this comment.
Have we run this by the Photon design folks? My reading of the Photon spec doesn't indicate to me that this is the right place to use puffy buttons.
@changecourse As I'm following your toolbar button designs (more or less successfully...) can you comment on the above? "Don't worry about it.." may be an acceptable response. 😏
There was a problem hiding this comment.
I've gone back n' forth on this, but landed on puffy to be painfully obvious for primary/secondary CTA's for the time being... we may revisit and make them smaller down the road if needed.
src/webextension/widgets/button.js
Outdated
| @@ -11,6 +11,7 @@ const THEME_CLASS_NAME = { | |||
| primary: `${styles.primaryTheme}`, | |||
| normal: `${styles.normalTheme}`, | |||
| ghost: `${styles.ghostTheme}`, | |||
| link: `${styles.linkTheme}`, | |||
There was a problem hiding this comment.
Rather than making a new theme, I think we want to create a whole new <Link/> component with an external prop. Aside from being more flexible (this implementation only supports external links, and not internal ones), links and buttons have different ARIA roles, so visually impaired users would be given the wrong information.
At minimum, in the short term, we'd want to apply the correct ARIA role to link-themed buttons (aria-role="link", I believe), but a <Link/> component would be preferable. If we do stick with link-themed buttons for now, we should at least add a unit test to make sure the theming and ARIA role are correctly applied.
There was a problem hiding this comment.
in the PR, the "link" theme is being used for:
- The welcome page's "Sign in to your Firefox Account" button (lots of logic back there)
- The "Copy [to clipboard]" button
- The "Send Feedback" (open an external page)
Of these, one is definitely open an external link. The others are really actions. Is it appropriate to treat all of these treated as external links, even for ARIA?
There was a problem hiding this comment.
The only one that we want to use <Link/> now is "Send Feedback"; the others are really buttons. While the theming for them might want to change eventually (especially for the Copy button), I don't think we should make things that are actions look like links, for the same reason we wouldn't give them an ARIA role of "link".
There was a problem hiding this comment.
Don't forget to remove this bit (and the corresponding CSS).
| @@ -46,10 +46,10 @@ toolbar-item-count = | |||
|
|
|||
| toolbar-add-item = New Entry | |||
| toolbar-go-home = Home | |||
| toolbar-send-feedback = Provide Feedback | |||
| toolbar-send-feedback = Submit Feedback | |||
There was a problem hiding this comment.
"Submit Feedback" really sounds like the thing that happens after you've filled out the feedback form and are sending it to us, especially since "Submit" is a somewhat-technical term. Maybe something like "Give Feedback", or at least "Submit Feedback..."? (Note the ellipsis.) The "..." is a common pattern for indicating that this action requires followup information (i.e. the user's feedback), and is what Firefox proper uses in the Help menu.
There was a problem hiding this comment.
"Submit Feedback" really sounds like the thing that happens after you've filled out the feedback form and are sending it to us, especially since "Submit" is a somewhat-technical term
@changecourse I presume "Submit" was an intentional decision made recently?
There was a problem hiding this comment.
This was a copy request from our team, but I tend to agree with you... I'm not happy about "Submit" as opposed to "Provide"
@sandysage final call.
There was a problem hiding this comment.
Let's stick with "provide" as @changecourse suggests.
src/webextension/widgets/button.css
Outdated
| @@ -59,9 +59,6 @@ | |||
| background-color: #002275; | |||
| } | |||
|
|
|||
| .normal-theme:hover, | |||
| .ghost-theme:hover { | |||
| background-color: rgba(12, 12, 13, 0.3); | |||
There was a problem hiding this comment.
As noted elsewhere, this rule isn't redundant; I just miscopied it. You'll probably get a conflict from this when I merge my CSS PR.
src/webextension/widgets/input.css
Outdated
| color: #0c0c0d; | ||
| text-align: left; | ||
| line-height: 1.5; | ||
| letter-spacing: 0.2px; |
There was a problem hiding this comment.
Again, where are line-height and letter-spacing coming from? I don't see them in the Photon spec.
| <Localized id="homepage-title" $count={count}> | ||
| <h1>{title}</h1> | ||
| <Localized id="homepage-title"> | ||
| <h1>{"tHe sIMPLe wAy tO sTORE..."}</h1> |
There was a problem hiding this comment.
You don't need the {""} surrounding this text.
| [1] You have { $count } entry in your { product-title } | ||
| *[other] You have { $count } entries in your { product-title } | ||
| } | ||
| the simple way to store, retrieve, and manage website login info |
There was a problem hiding this comment.
I think I commented on this on #362, but this doesn't appear to follow the Photon spec for capitalization. I looked around through the Firefox UI and I can't find any examples of all lower-case text like this. Pretty much everything is either title case or sentence case (with a smattering of all-caps stuff).
package.json
Outdated
| @@ -4,7 +4,7 @@ | |||
| "id": "lockbox@mozilla.com", | |||
| "version": "0.1.3-alpha", | |||
| "main": "dist/bootstrap.js", | |||
| "description": "A Lockbox extension for Firefox", | |||
| "description": "the simple way to store, retrieve and manage website login info", | |||
There was a problem hiding this comment.
Mentioned in a previous comment, but this doesn't follow the Photon spec on capitalization.
| homepage-linkaccount-title = Add Serious Security & Convenience | ||
| homepage-linkaccount-description = | ||
| Creating a Firefox account - or adding { product-title } to an existing account - protects your logins | ||
| with the strongest encryption available. | ||
| Now create a Firefox account – or add Lockbox to an existing |
There was a problem hiding this comment.
Should there be spaces around the em dash? Usually I see them used without spaces.
|
Now that master is... very different. I'm going to:
Because of 2, review stuff will kinda disappear (thanks, GitHub), hence step 1. But then it'll be nice clean history (without merge and revert commits), as @jimporter requested and hopefully easy to re-review. Stay tuned... |
|
Here's my todo list based on the decisions made thus far above:
Here we goooooooo.... (in Mario voice) |
…ing an entry And change color of selected item in scroll list to match so it looks like one continuous tab/element
|
Ok, I've addressed everything except:
|
|
@devinreams GitHub won't let me ask you for review (presumably because you're an assignee; good thing we haven't actually assigned the entire team to this PR yet!), so I'll just flag you manually via this fancy message! :) |
jimporter
force-pushed
the
331-photon-updates-2nd-pass
branch
from
b4d31d3
to
d332ec1
Compare
jimporter
force-pushed
the
331-photon-updates-2nd-pass
branch
from
d332ec1
to
16f76e7
Compare
|
Thanks for the late-night commits. This is looking great! I'm kinda embarrassed at how easy some of the changes were (hindsight is 20/20) but the hard part is not the typing, its knowing how and where it all goes. I appreciate it. 😊
Good point. And I think our best way to capture and prioritize these amongst the team's various plans is to have issues created for these added to the backlog. I agree something like "Add test coverage for Telemetry middleware" is a perfect candidate. Then when planning time comes, we can see the various "debt" we need to pay back and it's an easy negotiation to pop those kinds of things to the top of the stack.
I don't think we'll want to change this now given the Alpha user feedback. Despite there being some remaining concerns, let's try this and see if it improves the user experience as we hope it does. Either way, yes, when we support multiple origins we'll need to re-imagine this entirely. 🙃 I'll tack these three items onto the list in #392 anyway so we can keep them there for discussion/final decisions, either way. What do you think @jimporter? Good to merge and rebase #387 and #399 against so we can release this thang? 🤠 |
src/webextension/widgets/panel.js
Outdated
| <img src={imgSrc} alt={imgAlt}/></Button> : null} | ||
| {onBack ? ( | ||
| <Button theme="ghost" size="micro" onClick={onBack}> | ||
| <Localized id="panel-back-button"> |
There was a problem hiding this comment.
I swear I tried this (amongst a few other things). I really get confused on how this Localized component works sometimes... thanks for this.
|
@devinreams I'd like to have a quick chat with Ryan first about what we can do with the item list, since I still need to do a few things there (how much I do depends on the discussion with Ryan, but the minimum amount is still greater than 0). Then we can click the big green button. |
…box/lockbox-extension into 331-photon-updates-2nd-pass
…box/lockbox-extension into 331-photon-updates-2nd-pass
|
Someone please add this on your next push diff --git a/.travis.yml b/.travis.yml
index 7d1d1df..197b8e9 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -15,7 +15,7 @@ jobs:
apt:
packages:
- jwm
- env: TOXENV=integration-tests MOZ_HEADLESS=1 GECKODRIVER=0.19.1
+ env: TOXENV=integration-tests GECKODRIVER=0.19.1
before_install:
- wget -O /tmp/geckodriver.tar.gz https://github.com/mozilla/geckodriver/releases/download/v$GECKODRIVER/geckodriver-v$GECKODRIVER-linux64.tar.gz
- mkdir $HOME/geckodriver && tar xvf /tmp/geckodriver.tar.gz -C $HOME/geckodriver
@@ -26,8 +26,6 @@ jobs:
- nvm install node
- pip install tox
before_script:
- - jwm &
- - sleep 10
- npm install
- ENABLE_DOORHANGER=1 npm run package
script: tox |
|
@jimporter ItemFilter (search box) styles and blue-er focus state are looking much cleaner now. Thank you. @jrbenny35 and thanks again for the help with the improved integration tests. I got over-the-shoulder approval from nearly everyone involved in this branch. We're all very ready for this to merge! I think there's plenty of good retro material in here. 😉 🚢 |
ghost
removed
the
* Remove link to empty API guide Fixes #366 Depends on #51 * Remove redundant link the COC is linked from the Contributing page which is a better landing page overall. keep it simple. * Disable the filter when there are no items; resolves #324 * Add disabled state for buttons and disable the "add item" button when editing a new item This also fixes some CSS with the "active" state of the button widget * Refactor our telemetry to use Redux middleware * Add missing telemetry events (and send the item id across) * Create a Redux action for sending feedback * Add a Redux action for copying fields * Rename the object for various telemetry events * Add telemetry to the doorhanger * Be extra careful about the possibility of telemetry failing * Firefox Accounts Integration (#362) * Add instruction on how to run Tox recreate (#396) * Add note on how to recreate tox dependencies * Rewrap all the lines to 80 * Prepare 0.1.4-alpha and release notes (#393) * Bump version to 0.1.4-alpha * Quick draft and placeholder release notes * Update release-notes.md * Add "FxA can eat your logins" warnings * Update release-notes.md * typos * Documentation updates from product team (#386) * add FAQs placeholder page * update homepage and styles to be HTML because it was faster than trying to make custom theme stuff happen * update navigation to be simpler * change extension to match language * finish converting index to html * add draft FAQ copy * typo and inconsistent use of Add-ons vs Extensions in menu * back to markdown with admonitions * fix styles to match new markup * move the project note to the bottom of the page * remove exclamation icons in headers * updated tour and intro based on current FxA functionality * copy edits from legal and content teams * Disable the filter when there are no items; resolves #324 * Add disabled state for buttons and disable the "add item" button when editing a new item This also fixes some CSS with the "active" state of the button widget * Refactor our telemetry to use Redux middleware * Add missing telemetry events (and send the item id across) * Create a Redux action for sending feedback * Add a Redux action for copying fields * Rename the object for various telemetry events * Add telemetry to the doorhanger * Be extra careful about the possibility of telemetry failing * Firefox Accounts Integration (#362) * add the tour screen shots * address @mheubusch comments as best can be done * Incorporate more Photon-inspired UX and UI improvements (#351) * Fix text color of wrapped inputs; resolves #264 * Change background color of primary content area when viewing or creating an entry And change color of selected item in scroll list to match so it looks like one continuous tab/element * Removal of horizontal divider in Create a New Entry & View Entry Details and change Delete button to be a button * Add arrow indicator, hide when item selected * Match title and subtitle font sizes and weights * Adjust sidebar width * Remove item count from toolbar * Update Navigation to match comps - navigation links to match Photon - larger with puffy sizes - no side vs main toolbar * fix font-weight typos from bad partial commit * Add link theme and external link icon * Small copy changes recently noticed * Center text on modal * Remove sidebar border Need a clever way to add it back and "punch through" selected items, though * Normal button for home * re-order origin and title fields so address is first * remove notes placeholder * better spacing for empty sidebar text * sidebar item typography and colors to match * make the indicator arrow more style than semantic and use the proper icon * add semantic navigation arrow image to replace left arrow tag * rename new, edit, delete, button and confirmation strings * hide right border on selected list item so its like a tab into the panel * improved modal styles * consistent bytton styles and sizes * improved item detail input and title styles * remove fancy counter from homepage * quick tweaks to doorhanger styles * re-order title and address to match d6ea846 * actually finish the re-ordering of title and address from 0c0884a * updated description to match comps * update sidebar background colors to match comps * merge FxA changes into homepage * remove pre-Alpha homepage greeting * lower-case 'e' for entry now * use product-title placeholder and undo accidental CSS specificity breakage * remove superfulous brackets * remove superfulous height and border, set proper color on item details * remove unused localized toolbar string * Merge and fix some conflicts against FxA * remove unused Homepage prop removed at 536d7e4 * sane sidebar min with grid shift to achieve wider-ness * move homepage and FxA blurb styles around and match comps * improve text and button hierarchy and clarity on modal dialogs * localize the backwards navigation arrow on popup * update item and scroll list colors to match Photon greys * "provide feedback" link for user clarity submit feedback happens after feedback is drafted * explicitly disable browser style, prevents warning messages * quick attempt fix vertical alignment of arrow indicator * fix integration tests for login, add entry, delete, and doorhanger * set a normal min-width to achieve fairly consistent size buttons so short words like "Save" and "Edit" fill a minimum amount of space that has a good hit-area, but "Delete Entry" expands to fill space * change the "go back" button to micro to fit the space better * update ID locator in login.py tests * add external link widget (#397) * add external link widget * address code review comments * address children property feedback * integration test: find the correct sign in link * put things back where they were and address @jimporter review comments * Updated integration tests * Fix failing integration tests. * Fix flake8 * Fix text color of wrapped inputs; resolves #264 * Change background color of primary content area when viewing or creating an entry And change color of selected item in scroll list to match so it looks like one continuous tab/element * Removal of horizontal divider in Create a New Entry & View Entry Details and change Delete button to be a button * Add arrow indicator, hide when item selected * Match title and subtitle font sizes and weights * Adjust sidebar width * Remove item count from toolbar * Update Navigation to match comps - navigation links to match Photon - larger with puffy sizes - no side vs main toolbar * fix font-weight typos from bad partial commit * Add link theme and external link icon * Small copy changes recently noticed * Center text on modal * Remove sidebar border Need a clever way to add it back and "punch through" selected items, though * Normal button for home * re-order origin and title fields so address is first * remove notes placeholder * better spacing for empty sidebar text * sidebar item typography and colors to match * make the indicator arrow more style than semantic and use the proper icon * add semantic navigation arrow image to replace left arrow tag * rename new, edit, delete, button and confirmation strings * hide right border on selected list item so its like a tab into the panel * improved modal styles * consistent bytton styles and sizes * improved item detail input and title styles * remove fancy counter from homepage * quick tweaks to doorhanger styles * re-order title and address to match d6ea846 * updated description to match comps * actually finish the re-ordering of title and address from 0c0884a * update sidebar background colors to match comps * merge FxA changes into homepage * remove pre-Alpha homepage greeting * lower-case 'e' for entry now * use product-title placeholder and undo accidental CSS specificity breakage * remove superfulous brackets * remove superfulous height and border, set proper color on item details * remove unused localized toolbar string * Merge and fix some conflicts against FxA * remove unused Homepage prop removed at 536d7e4 * sane sidebar min with grid shift to achieve wider-ness * move homepage and FxA blurb styles around and match comps * improve text and button hierarchy and clarity on modal dialogs * localize the backwards navigation arrow on popup * update item and scroll list colors to match Photon greys * "provide feedback" link for user clarity submit feedback happens after feedback is drafted * explicitly disable browser style, prevents warning messages * quick attempt fix vertical alignment of arrow indicator * fix integration tests for login, add entry, delete, and doorhanger * set a normal min-width to achieve fairly consistent size buttons so short words like "Save" and "Edit" fill a minimum amount of space that has a good hit-area, but "Delete Entry" expands to fill space * change the "go back" button to micro to fit the space better * update ID locator in login.py tests * add external link widget (#397) * add external link widget * address code review comments * address children property feedback * integration test: find the correct sign in link * put things back where they were and address @jimporter review comments * Updated integration tests * Fix failing integration tests. * Fix flake8 * Fix homepage wait to load * Fix flake8 * Fix homepage wait to load * slow the browser down because these tests are failing very occasionally * make sure the FxA linked typography matches signed out guest mode * bump toolbar and first run actions link sizes up to match nearby button sizes * localization introduced at 9db70b2 is not actually working this way returning [object Object] instead of string * put back input sizes so there's no visibile jump going from edit to view undo some of my changes at 234d001 so things line up properly * better wrapping accounting for width of "Lockbox" * also set account-summary span to 15px for now for nav size consistency * sentence case our tagline * minr Padd missing semi-colon * address input review comments * Localize the back button for <PanelHeader/> * Use normal button style for signing into Firefox Account * Simplify button CSS when using button icons This does a few things: * Makes the <PanelHeader/>'s back button bigger so people have an easier time clicking it * Sets line-height of buttons to 1 to ensure that icons are vertically centered (this is ok because the labels never wrap anyway) * Adjusts the vertical alignment of icons when there's a label next to them For text-only buttons, there should be no visual changes whatsoever. * Use a "ghost" button with some custom styling for the "copy" button * Remove "link" button theme * Add missing semicolon * Move `grid-column-start` definition for the main toolbar to the proper place * Move font-size definition for the main toolbar to a better spot * Fix tests * Updated waits for integration tests. * Fix integration test flake8 errors. * Input focus state should be higher priority than input hover state! * Improve styles for management page's <ItemFilter/> * fix from @jrbenny35 * Make the origin field non-monospace * add HEADLESS back * Add an external FAQ link to navigation (#387) * Replicate send-feedback to create a FAQ link component admittedly a total copy/paste job and not certain if good for long term maintenance with potential for changes (like if/when one or the other becomes something else) versus making send-feedback abstract to take two and then split out later when either one changes to be something other than a simple link :thinking_face: * redo open-faq to match send-feedback with telemetry updates * update to use common ExternalLink widget * Fix sizing of various components in the manager to allow (very!) narrow screens * Add an intro page to the manager; resolves #292 * Remove ENABLE_DOORHANGER code we won't ever want to have it not enabled from here forward, so removing the code entirely * Minor fixes before release (#407) * fix broken markdown link * change "FAQs" to "FAQ" based on recent copy text decision * change intro titles to sentence case based on recent copy text decision * remove first run warning about no data guarantee we want users to rely on this now * visually center the FxA blurbs on the home page * increase FAQ navigation link size to match toolbar sizes * add a little more space between clickable navigation items in toolbar * Extended timeout for integration tests. * Re-wrap the input item fields so they don't regress and break the page (#409) * wrap the notes text area input so it doesn't break the page * remove redundant overflow styles
…wise#351) * Fix text color of wrapped inputs; resolves mozilla-lockwise#264 * Change background color of primary content area when viewing or creating an entry And change color of selected item in scroll list to match so it looks like one continuous tab/element * Removal of horizontal divider in Create a New Entry & View Entry Details and change Delete button to be a button * Add arrow indicator, hide when item selected * Match title and subtitle font sizes and weights * Adjust sidebar width * Remove item count from toolbar * Update Navigation to match comps - navigation links to match Photon - larger with puffy sizes - no side vs main toolbar * fix font-weight typos from bad partial commit * Add link theme and external link icon * Small copy changes recently noticed * Center text on modal * Remove sidebar border Need a clever way to add it back and "punch through" selected items, though * Normal button for home * re-order origin and title fields so address is first * remove notes placeholder * better spacing for empty sidebar text * sidebar item typography and colors to match * make the indicator arrow more style than semantic and use the proper icon * add semantic navigation arrow image to replace left arrow tag * rename new, edit, delete, button and confirmation strings * hide right border on selected list item so its like a tab into the panel * improved modal styles * consistent bytton styles and sizes * improved item detail input and title styles * remove fancy counter from homepage * quick tweaks to doorhanger styles * re-order title and address to match d6ea846 * actually finish the re-ordering of title and address from 0c0884a * updated description to match comps * update sidebar background colors to match comps * merge FxA changes into homepage * remove pre-Alpha homepage greeting * lower-case 'e' for entry now * use product-title placeholder and undo accidental CSS specificity breakage * remove superfulous brackets * remove superfulous height and border, set proper color on item details * remove unused localized toolbar string * Merge and fix some conflicts against FxA * remove unused Homepage prop removed at 536d7e4 * sane sidebar min with grid shift to achieve wider-ness * move homepage and FxA blurb styles around and match comps * improve text and button hierarchy and clarity on modal dialogs * localize the backwards navigation arrow on popup * update item and scroll list colors to match Photon greys * "provide feedback" link for user clarity submit feedback happens after feedback is drafted * explicitly disable browser style, prevents warning messages * quick attempt fix vertical alignment of arrow indicator * fix integration tests for login, add entry, delete, and doorhanger * set a normal min-width to achieve fairly consistent size buttons so short words like "Save" and "Edit" fill a minimum amount of space that has a good hit-area, but "Delete Entry" expands to fill space * change the "go back" button to micro to fit the space better * update ID locator in login.py tests * add external link widget (mozilla-lockwise#397) * add external link widget * address code review comments * address children property feedback * integration test: find the correct sign in link * put things back where they were and address @jimporter review comments * Updated integration tests * Fix failing integration tests. * Fix flake8 * Fix text color of wrapped inputs; resolves mozilla-lockwise#264 * Change background color of primary content area when viewing or creating an entry And change color of selected item in scroll list to match so it looks like one continuous tab/element * Removal of horizontal divider in Create a New Entry & View Entry Details and change Delete button to be a button * Add arrow indicator, hide when item selected * Match title and subtitle font sizes and weights * Adjust sidebar width * Remove item count from toolbar * Update Navigation to match comps - navigation links to match Photon - larger with puffy sizes - no side vs main toolbar * fix font-weight typos from bad partial commit * Add link theme and external link icon * Small copy changes recently noticed * Center text on modal * Remove sidebar border Need a clever way to add it back and "punch through" selected items, though * Normal button for home * re-order origin and title fields so address is first * remove notes placeholder * better spacing for empty sidebar text * sidebar item typography and colors to match * make the indicator arrow more style than semantic and use the proper icon * add semantic navigation arrow image to replace left arrow tag * rename new, edit, delete, button and confirmation strings * hide right border on selected list item so its like a tab into the panel * improved modal styles * consistent bytton styles and sizes * improved item detail input and title styles * remove fancy counter from homepage * quick tweaks to doorhanger styles * re-order title and address to match d6ea846 * updated description to match comps * actually finish the re-ordering of title and address from 0c0884a * update sidebar background colors to match comps * merge FxA changes into homepage * remove pre-Alpha homepage greeting * lower-case 'e' for entry now * use product-title placeholder and undo accidental CSS specificity breakage * remove superfulous brackets * remove superfulous height and border, set proper color on item details * remove unused localized toolbar string * Merge and fix some conflicts against FxA * remove unused Homepage prop removed at 536d7e4 * sane sidebar min with grid shift to achieve wider-ness * move homepage and FxA blurb styles around and match comps * improve text and button hierarchy and clarity on modal dialogs * localize the backwards navigation arrow on popup * update item and scroll list colors to match Photon greys * "provide feedback" link for user clarity submit feedback happens after feedback is drafted * explicitly disable browser style, prevents warning messages * quick attempt fix vertical alignment of arrow indicator * fix integration tests for login, add entry, delete, and doorhanger * set a normal min-width to achieve fairly consistent size buttons so short words like "Save" and "Edit" fill a minimum amount of space that has a good hit-area, but "Delete Entry" expands to fill space * change the "go back" button to micro to fit the space better * update ID locator in login.py tests * add external link widget (mozilla-lockwise#397) * add external link widget * address code review comments * address children property feedback * integration test: find the correct sign in link * put things back where they were and address @jimporter review comments * Updated integration tests * Fix failing integration tests. * Fix flake8 * Fix homepage wait to load * Fix flake8 * Fix homepage wait to load * slow the browser down because these tests are failing very occasionally * make sure the FxA linked typography matches signed out guest mode * bump toolbar and first run actions link sizes up to match nearby button sizes * localization introduced at 9db70b2 is not actually working this way returning [object Object] instead of string * put back input sizes so there's no visibile jump going from edit to view undo some of my changes at 234d001 so things line up properly * better wrapping accounting for width of "Lockbox" * also set account-summary span to 15px for now for nav size consistency * sentence case our tagline * minr Padd missing semi-colon * address input review comments * Localize the back button for <PanelHeader/> * Use normal button style for signing into Firefox Account * Simplify button CSS when using button icons This does a few things: * Makes the <PanelHeader/>'s back button bigger so people have an easier time clicking it * Sets line-height of buttons to 1 to ensure that icons are vertically centered (this is ok because the labels never wrap anyway) * Adjusts the vertical alignment of icons when there's a label next to them For text-only buttons, there should be no visual changes whatsoever. * Use a "ghost" button with some custom styling for the "copy" button * Remove "link" button theme * Add missing semicolon * Move `grid-column-start` definition for the main toolbar to the proper place * Move font-size definition for the main toolbar to a better spot * Fix tests * Updated waits for integration tests. * Fix integration test flake8 errors. * Input focus state should be higher priority than input hover state! * Improve styles for management page's <ItemFilter/> * fix from @jrbenny35 * Make the origin field non-monospace * add HEADLESS back
* Remove link to empty API guide Fixes #366 Depends on #51 * Remove redundant link the COC is linked from the Contributing page which is a better landing page overall. keep it simple. * Disable the filter when there are no items; resolves #324 * Add disabled state for buttons and disable the "add item" button when editing a new item This also fixes some CSS with the "active" state of the button widget * Refactor our telemetry to use Redux middleware * Add missing telemetry events (and send the item id across) * Create a Redux action for sending feedback * Add a Redux action for copying fields * Rename the object for various telemetry events * Add telemetry to the doorhanger * Be extra careful about the possibility of telemetry failing * Firefox Accounts Integration (#362) * Add instruction on how to run Tox recreate (#396) * Add note on how to recreate tox dependencies * Rewrap all the lines to 80 * Prepare 0.1.4-alpha and release notes (#393) * Bump version to 0.1.4-alpha * Quick draft and placeholder release notes * Update release-notes.md * Add "FxA can eat your logins" warnings * Update release-notes.md * typos * Documentation updates from product team (#386) * add FAQs placeholder page * update homepage and styles to be HTML because it was faster than trying to make custom theme stuff happen * update navigation to be simpler * change extension to match language * finish converting index to html * add draft FAQ copy * typo and inconsistent use of Add-ons vs Extensions in menu * back to markdown with admonitions * fix styles to match new markup * move the project note to the bottom of the page * remove exclamation icons in headers * updated tour and intro based on current FxA functionality * copy edits from legal and content teams * Disable the filter when there are no items; resolves #324 * Add disabled state for buttons and disable the "add item" button when editing a new item This also fixes some CSS with the "active" state of the button widget * Refactor our telemetry to use Redux middleware * Add missing telemetry events (and send the item id across) * Create a Redux action for sending feedback * Add a Redux action for copying fields * Rename the object for various telemetry events * Add telemetry to the doorhanger * Be extra careful about the possibility of telemetry failing * Firefox Accounts Integration (#362) * add the tour screen shots * address @mheubusch comments as best can be done * Incorporate more Photon-inspired UX and UI improvements (#351) * Fix text color of wrapped inputs; resolves #264 * Change background color of primary content area when viewing or creating an entry And change color of selected item in scroll list to match so it looks like one continuous tab/element * Removal of horizontal divider in Create a New Entry & View Entry Details and change Delete button to be a button * Add arrow indicator, hide when item selected * Match title and subtitle font sizes and weights * Adjust sidebar width * Remove item count from toolbar * Update Navigation to match comps - navigation links to match Photon - larger with puffy sizes - no side vs main toolbar * fix font-weight typos from bad partial commit * Add link theme and external link icon * Small copy changes recently noticed * Center text on modal * Remove sidebar border Need a clever way to add it back and "punch through" selected items, though * Normal button for home * re-order origin and title fields so address is first * remove notes placeholder * better spacing for empty sidebar text * sidebar item typography and colors to match * make the indicator arrow more style than semantic and use the proper icon * add semantic navigation arrow image to replace left arrow tag * rename new, edit, delete, button and confirmation strings * hide right border on selected list item so its like a tab into the panel * improved modal styles * consistent bytton styles and sizes * improved item detail input and title styles * remove fancy counter from homepage * quick tweaks to doorhanger styles * re-order title and address to match d6ea846 * actually finish the re-ordering of title and address from 0c0884a * updated description to match comps * update sidebar background colors to match comps * merge FxA changes into homepage * remove pre-Alpha homepage greeting * lower-case 'e' for entry now * use product-title placeholder and undo accidental CSS specificity breakage * remove superfulous brackets * remove superfulous height and border, set proper color on item details * remove unused localized toolbar string * Merge and fix some conflicts against FxA * remove unused Homepage prop removed at 536d7e4 * sane sidebar min with grid shift to achieve wider-ness * move homepage and FxA blurb styles around and match comps * improve text and button hierarchy and clarity on modal dialogs * localize the backwards navigation arrow on popup * update item and scroll list colors to match Photon greys * "provide feedback" link for user clarity submit feedback happens after feedback is drafted * explicitly disable browser style, prevents warning messages * quick attempt fix vertical alignment of arrow indicator * fix integration tests for login, add entry, delete, and doorhanger * set a normal min-width to achieve fairly consistent size buttons so short words like "Save" and "Edit" fill a minimum amount of space that has a good hit-area, but "Delete Entry" expands to fill space * change the "go back" button to micro to fit the space better * update ID locator in login.py tests * add external link widget (#397) * add external link widget * address code review comments * address children property feedback * integration test: find the correct sign in link * put things back where they were and address @jimporter review comments * Updated integration tests * Fix failing integration tests. * Fix flake8 * Fix text color of wrapped inputs; resolves #264 * Change background color of primary content area when viewing or creating an entry And change color of selected item in scroll list to match so it looks like one continuous tab/element * Removal of horizontal divider in Create a New Entry & View Entry Details and change Delete button to be a button * Add arrow indicator, hide when item selected * Match title and subtitle font sizes and weights * Adjust sidebar width * Remove item count from toolbar * Update Navigation to match comps - navigation links to match Photon - larger with puffy sizes - no side vs main toolbar * fix font-weight typos from bad partial commit * Add link theme and external link icon * Small copy changes recently noticed * Center text on modal * Remove sidebar border Need a clever way to add it back and "punch through" selected items, though * Normal button for home * re-order origin and title fields so address is first * remove notes placeholder * better spacing for empty sidebar text * sidebar item typography and colors to match * make the indicator arrow more style than semantic and use the proper icon * add semantic navigation arrow image to replace left arrow tag * rename new, edit, delete, button and confirmation strings * hide right border on selected list item so its like a tab into the panel * improved modal styles * consistent bytton styles and sizes * improved item detail input and title styles * remove fancy counter from homepage * quick tweaks to doorhanger styles * re-order title and address to match d6ea846 * updated description to match comps * actually finish the re-ordering of title and address from 0c0884a * update sidebar background colors to match comps * merge FxA changes into homepage * remove pre-Alpha homepage greeting * lower-case 'e' for entry now * use product-title placeholder and undo accidental CSS specificity breakage * remove superfulous brackets * remove superfulous height and border, set proper color on item details * remove unused localized toolbar string * Merge and fix some conflicts against FxA * remove unused Homepage prop removed at 536d7e4 * sane sidebar min with grid shift to achieve wider-ness * move homepage and FxA blurb styles around and match comps * improve text and button hierarchy and clarity on modal dialogs * localize the backwards navigation arrow on popup * update item and scroll list colors to match Photon greys * "provide feedback" link for user clarity submit feedback happens after feedback is drafted * explicitly disable browser style, prevents warning messages * quick attempt fix vertical alignment of arrow indicator * fix integration tests for login, add entry, delete, and doorhanger * set a normal min-width to achieve fairly consistent size buttons so short words like "Save" and "Edit" fill a minimum amount of space that has a good hit-area, but "Delete Entry" expands to fill space * change the "go back" button to micro to fit the space better * update ID locator in login.py tests * add external link widget (#397) * add external link widget * address code review comments * address children property feedback * integration test: find the correct sign in link * put things back where they were and address @jimporter review comments * Updated integration tests * Fix failing integration tests. * Fix flake8 * Fix homepage wait to load * Fix flake8 * Fix homepage wait to load * slow the browser down because these tests are failing very occasionally * make sure the FxA linked typography matches signed out guest mode * bump toolbar and first run actions link sizes up to match nearby button sizes * localization introduced at 9db70b2 is not actually working this way returning [object Object] instead of string * put back input sizes so there's no visibile jump going from edit to view undo some of my changes at 234d001 so things line up properly * better wrapping accounting for width of "Lockbox" * also set account-summary span to 15px for now for nav size consistency * sentence case our tagline * minr Padd missing semi-colon * address input review comments * Localize the back button for <PanelHeader/> * Use normal button style for signing into Firefox Account * Simplify button CSS when using button icons This does a few things: * Makes the <PanelHeader/>'s back button bigger so people have an easier time clicking it * Sets line-height of buttons to 1 to ensure that icons are vertically centered (this is ok because the labels never wrap anyway) * Adjusts the vertical alignment of icons when there's a label next to them For text-only buttons, there should be no visual changes whatsoever. * Use a "ghost" button with some custom styling for the "copy" button * Remove "link" button theme * Add missing semicolon * Move `grid-column-start` definition for the main toolbar to the proper place * Move font-size definition for the main toolbar to a better spot * Fix tests * Updated waits for integration tests. * Fix integration test flake8 errors. * Input focus state should be higher priority than input hover state! * Improve styles for management page's <ItemFilter/> * fix from @jrbenny35 * Make the origin field non-monospace * add HEADLESS back * Add an external FAQ link to navigation (#387) * Replicate send-feedback to create a FAQ link component admittedly a total copy/paste job and not certain if good for long term maintenance with potential for changes (like if/when one or the other becomes something else) versus making send-feedback abstract to take two and then split out later when either one changes to be something other than a simple link :thinking_face: * redo open-faq to match send-feedback with telemetry updates * update to use common ExternalLink widget * Fix sizing of various components in the manager to allow (very!) narrow screens * Add an intro page to the manager; resolves #292 * Remove ENABLE_DOORHANGER code we won't ever want to have it not enabled from here forward, so removing the code entirely * Minor fixes before release (#407) * fix broken markdown link * change "FAQs" to "FAQ" based on recent copy text decision * change intro titles to sentence case based on recent copy text decision * remove first run warning about no data guarantee we want users to rely on this now * visually center the FxA blurbs on the home page * increase FAQ navigation link size to match toolbar sizes * add a little more space between clickable navigation items in toolbar * Extended timeout for integration tests. * Re-wrap the input item fields so they don't regress and break the page (#409) * wrap the notes text area input so it doesn't break the page * remove redundant overflow styles * Fix feedback link on docs/index (#411) Signed-off-by: Peter deHaan <peter@deseloper.com> * Added error handling to class name munger. * Allow running integration tests on Python 3.* instead of just 3.6 * Release instructions on creating a production PR (#422) * update instructions to reflect creation of a PR from master to production * set correct release date, remove unnecessary heading * more clear about how to compare master and production branches with handy link that should always work! * request explicit approval in the instructions * add handy link to releases * address nits * Update contributing URL to point to waffle, not GitHub projects (#423) * Move unit tests to test/unit/; resolves #383 * Update pytest from 3.3.0 to 3.3.1 * Update pytest-selenium from 1.11.0 to 1.11.3 * Update pytest-xdist from 1.18.2 to 1.20.1 * Convert to Date.now() to avoid NaN * Fix invalid docs/css/extra.css rule (#434) * explicitly use guest-mode app key (#436) * add integration test script runner (#400) * Don't fire an onChange event from <ScrollingList/> if the new item is already selected This resolves - in a roundabout way - an issue with clicking the "new item" placeholder entry in the item list causing the editor widget to go away. * Improve selected/focus state for the item list; resolves #414 * Add stylelintrc config * Run CSS through prettier * Add a warn-only mode for stylelint * Make Everything Build Again (#470) * Add stylelintrc config * Run CSS through prettier * Add a warn-only mode for stylelint * make everything build again * Pulls version from package.json and appends to survey link * Update dependencies (2018-01) (#472) * Fix for failing builds on travisci (#474) * Ensure that updating the fields in <EditItemDetails/> actually triggers a UI change This helps bullet-proof our code for issues like #438, though the next commit will resolve this in a different way (by disabling the new button during editing). * Disable the "new item" button when editing an existing item; resolves #438 * initial test plan for our telemetry work * Fix <ScrollingList/> prop types; resolves #451 * Update dependencies to enable Greenkeeper 🌴 (#304) * Update Release Notes and Version to 0.5.1 (#501) * Implement a better copy-to-clipboard button; resolves #318 * Fix spurious warning from <ItemDetailsPanel/> test * Add timeout test for <CopyToClipboardButton/> * Remove unused <ErrorMessage/>; resolves #240 * chore(package): update style-loader to version 0.20.1 Closes #502 * Display More Profile Information (#486) * Implement light vs. full signout (#506) * Add a <Link/> widget and ensure that it (and <ExternalLink/>) are keyboard-accessible * Implement a dropdown for the account label; resolves #442 * Update button's focus CSS to match spec * Change <Link/>'s implementation to use a button This ensure that we don't see a spurious URL in the bottom of the window (generated by Firefox) in the bottom of the window. * Fix scrolling in management view (#531) * update to version 0.1.6-alpha (#527) * Update eslint-plugin-mozilla to the latest version 🚀 (#509) * chore(package): update events to version 2.0.0 (#511) * chore(package): update babel-minify-webpack-plugin to version 0.3.0 (#525) * chore(package): update eslint-plugin-node to version 6.0.0 (#518) * Fix: guest mode does not work on restart (#543) * pin and ignore to eslint-plugin-mozilla@0.6.0 (#546) * Refresh OAuth Access Tokens (#547) * Styling adjustments for the account dropdown. (#549) * Update Version and Release Notes to 0.1.7-alpha (#558) * chore(package): update eslint-plugin-no-unsanitized to version 3.0.0 (#537) * chore(package): update mocha to version 5.0.1 (#544) * chore(package): update stylelint to version 9.1.1 (#566) * chore(package): update stylelint-config-recommended to version 2.1.0 (#551) * Add Support For Telemetry Scalars; Update Metrics.md (#552) * Provide documentation about how to post PRs (#507) * Ensure FxA account is stored always (#570) * Update Version and Release Notes to 0.1.7-alpha1 (#571) * Updated text color of entry list empty state for better contrast (#560) * Add config file for pyup.io to update weekly (#586) * create pyup.io config file * update all dependencies, not just security * remove extra whitespace * Update flake8-isort from 2.2.2 to 2.4 (#587) * Update pytest from 3.3.1 to 3.4.1 (#589) * Update pytest-selenium from 1.11.3 to 1.11.4 (#590) * Update pypom from 1.2.0 to 1.3.0 (#594) * Update selenium from 3.8.0 to 3.9.0 (#592) * Update pytest-xdist from 1.20.1 to 1.22.2 (#591) * Update flake8-docstrings from 1.1.0 to 1.3.0 (#588) * More account dropdown style updates (#597) * Styling updates based off Jim's code review of #549 -Updated pseudo-elements to have two colons instead of one -Moved toolbar margin update to be specific to navigation bar -Removed arrowhead down icon that is no longer in use -Updated dropdown hover, focus and active states after reviewing how Firefox browser handles similar items * Updating toolbar to use px instead of ch to be consistent. * Include whitespace in item fields so new lines are output (#596) * Include whitespace in item fields so new lines are output * move white-space to all input text fields * Automatically focus the filter input when the page loads; resolves #573 * Styling updates around entry list items (#553) * Styling updates around entry list items -Active and focus states -Increased padding to match mocks -New chevron icon -Updated aside background color -Moved border between search and entries in order to apply active border color to top entry item -Small copy change to empty state * Changes based off PR feedback -Removed arrowhead right icon that is no longer used -Removed some styling around border between filter and list items until we get the filter updated. * Add custom "no username" instruction text when adding entry * Remove string interpolation and use better const name * Ran cheveron-right through svgo, sizing was also updated. * update to latest package-lock.json after production branch merge to get the two branches up to date and matching each other they diverged and production became 95 commits behind and 5 ahead due to rename/delete conflicts and I "took" the conflicting changes from production to the package-lock file, now I want the actual latest result of `npm i` * Updating styling of 0 entries (home) page to reflect intended typography and spacing (#607) - Into image shadow to Shadow 10 - Updated image border - Defined line height for intro paragraphs * Create a <PanelFooterButton/> and update the styles for the unlock do… (#601) * Create a <PanelFooterButton/> and update the styles for the unlock doorhanger; resolves #482 * latest Nessie with darker waves * Update selenium from 3.9.0 to 3.10.0 * chore(package): update documentation to version 6.0.0 * Require python 3.6 in deploy stage so pip can install tornado * Create/Edit Entry Details Styling Adjustments (#567) * Styling adjustments for entry details -Added show/hide icons for password -Reordered fields to match new designs -Removed monospace class from username field -Fixed sizing/spacing to match designs -Updated to use box-sizing: border box, and fixed issues this caused in other areas -Updated placeholder copy and labels to match design changes -Added min-width to buttons * Adding min-width to normal button style and larger min-width for primary buttons * Styling for dialog box and adding new critical/red button style * Changes based on PR review -ran svgo on show icon to optimize -created new notes class in entry details for styling -removed box sizing and associated style changes -moved password styles to input.css -Removed show/hide button text and keys -Changed critical theme to danger theme -Reverted dialog to use primary button by default * Re-localize the show/hide password input buttons * Fix input tests to also check for first "input" class * Better RegEx for munged password input class tests * Fixing missed styles from box-sizing removal that needed updated * Provide the option of using "danger" buttons in dialog boxes These are currently used in two places: * Deleting items * Resetting the datastore * restore indentation * Fixes based on PR changes requested -Ran show icon through svgo -Moved input max-width for entry creation/edition fields to item-fields.css -Created new "wide" button sub-theme for instances to include min-width property -Added size theme to save/edit button on entry details * Adding .input class to item fields for styling and removing unnecessary selector * Improvements to search bar styling in full manage mode (#562) * Styling adjustments for entry list filter. -Added search icon -Updated padding/colors -Included clear icon but needs implemented -Removed "entries" from placeholder copy * Styling updates for entries list filter in aside -Fixed padding/sizing to match design -Added search icon -Replaced text link with 'clear icon' -Updated placeholder copy to 'search lockbox' * Changes after review with Ryan -Darkening placeholder text -Updated border radius on inputs -Reverting search to use regular weight * Moving location of styles for filter/search in order to cover both doorhanger and full page view * Adding MPL-2.0 license to item-filter file and new line on app.css * Updates based on PR feedback -Added new line at end of SVG files -Removed item-filter.css and moved styles to input.css file -Wrapped filter in <toolbar> element and applied padding there -Added title attribute to clear button * Removing "clear" text from filter button * Update input test regex to include first input filter class * Restore localization of "Clear" text on search * Better RegEx for munged input class tests * Removed some unnecessary styles left behind and updated padding for consistency. * Ran clear and search svgs through svgo * Restore filter styles lost in master branch merge 28e31d5 * Make sure options_ui is fully displayed on about:addons (#603) * Make sure options_ui is fully displayed on about:addons * flex-direction is actually not necessary, not sure why i ended up with it * add margin so button focus state fits and text aligns with items above * add min-height to give the warning dialog more room to breathe * added accessibility test plan to docs * Attempt to speed up branch and PR builds with Travis CI caching (#604) * Speed up branch and PR builds with Travis CI caching * add pip cache * Styling adjustment to align entry detail buttons during edit and view mode change (#608) * Fix <ItemFilter/> to actually update its state from Redux * Fix importing of chai-enzyme in <ButtonStack/> test * Automatically select the filter input's text on load (if there is any) * Pre-fill the URL of the current tab into the doorhanger's filter * Prepare 0.1.8 release (#612) * bump version numbers to 0.1.8-alpha * draft release notes based on current progress and fixed release note headings in previous release * recent additions for release notes * last items included in this release * remove depdencies updates from release notes
Resolves #331
Starting a branch off of the WIP doorhanger #338 to work on style improvementsReview Comments
list/manage/components/app.css"While 320px is fine as a target, I'd expect this to flex smaller for narrower windows." recommend something more modest, then adjust the grid-template-columns property of the parent nodelist/manage/components/item-details.cssDark list items should be Grey 20 (#EDEDF0), Lighter list items should be Grey 10 (#F9F9FA)<ItemDetails/>(and<EditItemDetails/>) are designed as (theoretically) reusable components that could be put anywhere. Somewhere in<CurrentSelection/>would be a better place(NEW) Content area bg for the selected item should match either of these two values depending on the color of the list item selectedmoved to Photon updates, 3rd pass #392list/manage/components/item-details.cssheight: 100% "I don't think this does what you want"list/manage/components/item-details.cssborder-bottom "What is this for?"list/manage/containers/item-count.jstoolbar-item-count "Don't forget to remove the corresponding l10n string."package.jsondescription "this doesn't follow the Photon spec on capitalization..."list/components/item-summary.cssarrowhead-right "This isn't vertically centered"list/manage/components/homepage.jsh1 "You don't need the {""} surrounding this text."locales/en-US/list.ftl"Provide Feedback"widgets/button.cssnormal-theme:hover "This rule isn't redundant.."widgets/button.cssmin-width is property of size, not theme...widgets/button.js"Rather than making a new theme, I think we want to create a whole new<Link/>component" handled by add external link widget #397"in the short term, we'd want to apply the correct ARIA role to link-themed buttons"supersededwidgets/dialog-box.cssfont-width: 300 "This seems a bit big/heavy for the dialog text... not so bad for delete"widgets/panel.js"We should localize the alt to say something like "Go back"."