Search bar styling adjustments (full view) #562

nickbrandt · 2018-02-21T22:06:53Z

Resolves #477
Resolves #561

-Updated padding/sizing
-Included Search icon
-Added Clear icon in replacement of text link
-Updated placeholder copy to read 'Search Lockbox'
-Modifying code to create shared styles for doorhanger and full view filter

-Added search icon -Updated padding/colors -Included clear icon but needs implemented -Removed "entries" from placeholder copy

-Fixed padding/sizing to match design -Added search icon -Replaced text link with 'clear icon' -Updated placeholder copy to 'search lockbox'

-Darkening placeholder text -Updated border radius on inputs -Reverting search to use regular weight

…orhanger and full page view

linuxwolf

There are a couple of meta things to take care of.

linuxwolf · 2018-02-23T14:57:17Z

src/webextension/list/containers/item-filter.css

@@ -0,0 +1,47 @@
+.filter {


This needs to have the MPL-2.0 license header boilerplate. See the other CSS (or JS) files for what that is (also found at https://www.mozilla.org/en-US/MPL/headers/).

linuxwolf · 2018-02-23T14:58:45Z

src/webextension/list/manage/components/app.css

-.filter:focus-within:hover {
-  box-shadow: none;
-}
+}


files should end with a new line.

jimporter · 2018-02-27T19:35:51Z

src/webextension/icons/clear.svg

+            </g>
+        </g>
+    </g>
+</svg>


Nit: add a trailing newline

In my opinion, I think this class of nit is asking for too much.

While SVGs are technically XML, they are effectively image files created and updated in image processing applications. Some of those apps add the newline, and some don't, and I don't think it reasonable someone go into the file with a text editor to ensure the newline is present.

I was going to say the newline issue would be resolved by running through an SVG linter/optimizer like svgo, but now that I look at this more closely, there are bigger issues than just the trailing newline. A quick run through svgo shows that we could cut the size of this SVG by 76%.

I'll file an issue to do this for all our existing SVG assets, but it'd be nice to get these new assets optimized. I recommend the following svgo config:

svgo FILENAME --pretty --indent=2 --disable=removeXMLProcInst

I suppose I'd be ok with dropping --pretty and --indent, but I have occasionally had to look at SVG source to figure out why weird rendering stuff is happening, so having it be readable would be nice.

I'll file an issue to do this for all our existing SVG assets

Want to pile on to this existing one? #301

jimporter · 2018-02-27T19:36:03Z

src/webextension/icons/search.svg

+            </g>
+        </g>
+    </g>
+</svg>


Nit: add a trailing newline

jimporter · 2018-02-27T19:39:57Z

src/webextension/list/containers/item-filter.css

+ * 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/. */
+
+.filter {


Pretty much all of the changes in this file belong in src/webextension/widgets/input.css. This file should only be for component-specific overrides (and there actually shouldn't be any of those either).

@jimporter, @linuxwolf helped me set up this css file in order to apply styles to the search bar in both instances (full view + doorhanger). I can move the styles to input.css, but how can I then target the search/filter bar specifically? I'd be happy to jump on a vidyo to discuss.

@nickbrandt Just add a new class to the <FilterInput/> and write CSS as normal; there's a variable in filter-input.js called finalClassName that you could just prepend the style name too. It should be fairly straightforward to just copy the existing code.

This also applies to <PasswordInput/> in another PR.

jimporter · 2018-02-27T19:40:51Z

src/webextension/list/containers/item-filter.js


 function ItemFilter(props) {
  return (
    <Localized id="item-filter">
-      <FilterInput placeholder="fILTEr…" {...props}/>
+      <FilterInput placeholder="fILTEr…" className={styles.filter} {...props}/>


Since the item-filter.css file should be removed, so should this.

jimporter · 2018-02-27T19:51:26Z

src/webextension/list/containers/item-filter.css

+.filter {
+  border: 1px solid #b6b6b6;
+  position: relative;
+  margin: 12px;


Based on the specs, I think what we actually want here if for a new element (maybe a <Toolbar/>?) to wrap our <ItemFilter/> (put it in src/webextension/list/manage/components/app.js) and apply the margin there. That way, it'll be easier to move the "New Entry" button alongside the filter.

jimporter · 2018-02-27T19:55:53Z

src/webextension/list/containers/item-filter.css

+}
+
+.filter button {
+  text-indent: -9999px;


Instead of doing this to hide the text, we should remove the text, replace it with an image (either an <img> element or using the CSS below; however you think is best), and then give the button a title attribute for accessibility (in src/webextension/widgets/filter-input.js).

@jimporter I will need some help in removing the "clear" copy, as I'm unsure how that gets pulled in using the widgets.ftl file.

jimporter · 2018-02-27T19:56:13Z

src/webextension/list/containers/item-filter.css

+  height: 100%;
+}
+
+.filter button:before {


As above, two colons.

jimporter · 2018-02-27T19:57:38Z

src/webextension/list/manage/components/app.js

@@ -34,7 +34,7 @@ export default function App() {
              <CurrentAccountSummary/>
            </Toolbar>
            <aside>
-              <ItemFilter className={styles.filter}/>
+              <ItemFilter/>


Here's where we should be adding a new element to wrap the <ItemFilter/>.

jimporter · 2018-02-27T19:59:54Z

src/webextension/widgets/input.css

@@ -17,12 +17,12 @@
  width: -moz-available;
  background-color: #f9f9fa;
  border: 1px solid rgba(12, 12, 13, 0.3);
-  border-radius: 2px;
+  border-radius: 3px;


Where's this change coming from? It's not in the Photon spec, and the spec looks like the radius is 2px. @changecourse?

@changecourse had reviewed that with me and opted for 3px. However, if we feel Photon is using 2px lets just revert to that. Will update.

@nickbrandt Yeah, this is an area that the Photon design team needs to improve their specs, but it looked to me like 2px when comparing it to other widgets that actually have the border-radius specced.

jimporter · 2018-02-27T20:00:46Z

src/webextension/widgets/input.css

 }

 .input[disabled],
 .input-wrapper.disabled {
-  background-color: #ededf0;
+  opacity: .7;


Nit: add a leading 0.

-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

m8ttyB

r=PI

devinreams · 2018-02-28T16:45:41Z

@nickbrandt it looks like your change to address @jimporter's filter-input feedback "broke" the three related widgets > <FilterInput/> tests:

The change: https://github.com/mozilla-lockbox/lockbox-extension/pull/562/files#diff-00fc8b5f88e0ee72c6f31300383d2199R51
The test failures: https://travis-ci.org/mozilla-lockbox/lockbox-extension/builds/347050777

If not already planning to address the changes to the tests, perhaps it'd be best to get a quick double check from @jimporter or @linuxwolf to confirm this is now as requested here? Once everything is double-checked and green we should be ready to roll! 🚢

nickbrandt · 2018-02-28T17:03:12Z

@devinreams Thanks Devin. Yea, I had noticed the test failures and discussed with @linuxwolf. Planned on connecting with @jimporter to fix the failures as I'm not too familiar with TDD. I also still need to make a small change of removing the "Clear" text on the filter button.

…onsistency.

m8ttyB · 2018-03-01T20:39:38Z

@kimberlythegeek is ooo until next week. Earliest we can get an a11y review is Monday or Tuesday.

jimporter · 2018-03-01T20:41:30Z

@m8ttyB Well, it's already Thursday, so that's fine. Though if you know what the a11y tests consist of, feel free to preempt that.

changecourse · 2018-03-02T19:34:59Z

@jimporter, @devinreams, @nickbrandt Let's move forward with the 0.7 opacity for the disabled search bar... The current spec does not meet contrast spec for AA, but as it's a disabled UI element, it is fine based on some initial research around W3C expectations: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Specifically, how contrast minimums don't apply for this element: "Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."

This is true for our disabled buttons as well (not within AA spec, but compliant)

Additionally, by handling it in this manner (with Opacity) it allows us to not have to worry about styling elements individually within the search bar, such as the border and icons within it.

devinreams · 2018-03-02T21:18:19Z

Since the last recap (thanks @jimporter):

Address my concerns on some of (possibly) unnecessary CSS changes.

@nickbrandt committed 40e33df ✅

Run SVGs through svgo.

@nickbrandt committed f3500f5 ✅

Get a review from @kimberlythegeek that we're not causing accessibility problems with the opacity change

@changecourse chimed in, as UI and Photon subject matter expert, and intends to keep the opacity as-is ✅

That suggests to me this is ready for:

@jimporter final review
PI review
🚢 🌊

Meta changes addressed!

devinreams · 2018-03-05T21:54:55Z

@kimberlythegeek can we please get your quick review of @changecourse's last comment (requested by him sitting next to me here) re: opacity on a inactive state here?

@jimporter Can you please review this by Tuesday so we can address any final concerns before landing in the 0.1.8 version?

jimporter

Looks good!

We should still do an a11y-oriented pass on the visuals, but we can do that in one go (buttons might also need changed to be more accessible). I believe there's an issue on this already.

kimberlythegeek · 2018-03-06T14:54:25Z

@changecourse @devinreams I agree, disabled elements are not required to be contrast compliant.

kimberlythegeek

Reviewed code, and ran automated a11y tests to check for regressions.

Looks good! r+

devinreams · 2018-03-06T16:48:49Z

Tests broke, I will take a look here before merging to master...

devinreams · 2018-03-06T17:25:23Z

@nickbrandt I think there was a conflict when you last merged master into this branch. Long story short, the result ended up removing your .filter styles. Git can be the worst sometimes..

I just restored and committed those styles. Life is good (green) again and I'll merge to master since we got all our approvals in. ✅

@mheubusch

* 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

# This is the 1st commit message: # This is a combination of 2 commits. # This is the 1st commit message: # This is a combination of 3 commits. # This is the 1st commit message: # This is a combination of 9 commits. # This is the 1st commit message: # This is a combination of 15 commits. # This is the 1st commit message: # This is a combination of 49 commits. # This is the 1st commit message: # This is a combination of 2 commits. # This is the 1st commit message: # This is a combination of 25 commits. # This is the 1st commit message: flake8 # This is the commit message mozilla-lockwise#2: Refresh OAuth Access Tokens (mozilla-lockwise#547) # This is the commit message mozilla-lockwise#3: Styling adjustments for the account dropdown. (mozilla-lockwise#549) # This is the commit message mozilla-lockwise#4: Update Version and Release Notes to 0.1.7-alpha (mozilla-lockwise#558) # This is the commit message mozilla-lockwise#5: chore(package): update eslint-plugin-no-unsanitized to version 3.0.0 (mozilla-lockwise#537) # This is the commit message mozilla-lockwise#6: chore(package): update mocha to version 5.0.1 (mozilla-lockwise#544) # This is the commit message mozilla-lockwise#7: chore(package): update stylelint to version 9.1.1 (mozilla-lockwise#566) # This is the commit message mozilla-lockwise#8: chore(package): update stylelint-config-recommended to version 2.1.0 (mozilla-lockwise#551) # This is the commit message mozilla-lockwise#9: Add Support For Telemetry Scalars; Update Metrics.md (mozilla-lockwise#552) # This is the commit message mozilla-lockwise#10: Provide documentation about how to post PRs (mozilla-lockwise#507) # This is the commit message mozilla-lockwise#11: Ensure FxA account is stored always (mozilla-lockwise#570) # This is the commit message mozilla-lockwise#12: Update Version and Release Notes to 0.1.7-alpha1 (mozilla-lockwise#571) # This is the commit message mozilla-lockwise#13: Updated text color of entry list empty state for better contrast (mozilla-lockwise#560) # This is the commit message mozilla-lockwise#14: Add config file for pyup.io to update weekly (mozilla-lockwise#586) * create pyup.io config file * update all dependencies, not just security * remove extra whitespace # This is the commit message mozilla-lockwise#15: Update flake8-isort from 2.2.2 to 2.4 (mozilla-lockwise#587) # This is the commit message mozilla-lockwise#16: Update pytest from 3.3.1 to 3.4.1 (mozilla-lockwise#589) # This is the commit message mozilla-lockwise#17: Update pytest-selenium from 1.11.3 to 1.11.4 (mozilla-lockwise#590) # This is the commit message mozilla-lockwise#18: Update pypom from 1.2.0 to 1.3.0 (mozilla-lockwise#594) # This is the commit message mozilla-lockwise#19: Update selenium from 3.8.0 to 3.9.0 (mozilla-lockwise#592) # This is the commit message mozilla-lockwise#20: Update pytest-xdist from 1.20.1 to 1.22.2 (mozilla-lockwise#591) # This is the commit message mozilla-lockwise#21: Update flake8-docstrings from 1.1.0 to 1.3.0 (mozilla-lockwise#588) # This is the commit message mozilla-lockwise#22: More account dropdown style updates (mozilla-lockwise#597) * Styling updates based off Jim's code review of mozilla-lockwise#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. # This is the commit message mozilla-lockwise#23: Include whitespace in item fields so new lines are output (mozilla-lockwise#596) * Include whitespace in item fields so new lines are output * move white-space to all input text fields # This is the commit message mozilla-lockwise#24: Automatically focus the filter input when the page loads; resolves mozilla-lockwise#573 # This is the commit message mozilla-lockwise#25: Styling updates around entry list items (mozilla-lockwise#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. # This is the commit message mozilla-lockwise#2: 0.1.7-alpha1 (mozilla-lockwise#574) # This is the commit message mozilla-lockwise#2: Updating styling of 0 entries (home) page to reflect intended typography and spacing (mozilla-lockwise#607) - Into image shadow to Shadow 10 - Updated image border - Defined line height for intro paragraphs # This is the commit message mozilla-lockwise#3: Create a <PanelFooterButton/> and update the styles for the unlock do… (mozilla-lockwise#601) * Create a <PanelFooterButton/> and update the styles for the unlock doorhanger; resolves mozilla-lockwise#482 * latest Nessie with darker waves # This is the commit message mozilla-lockwise#4: Update selenium from 3.9.0 to 3.10.0 # This is the commit message mozilla-lockwise#5: chore(package): update documentation to version 6.0.0 # This is the commit message mozilla-lockwise#6: Require python 3.6 in deploy stage so pip can install tornado # This is the commit message mozilla-lockwise#7: Create/Edit Entry Details Styling Adjustments (mozilla-lockwise#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 # This is the commit message mozilla-lockwise#8: Improvements to search bar styling in full manage mode (mozilla-lockwise#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 # This is the commit message mozilla-lockwise#9: Make sure options_ui is fully displayed on about:addons (mozilla-lockwise#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 # This is the commit message mozilla-lockwise#10: added accessibility test plan to docs # This is the commit message mozilla-lockwise#11: Attempt to speed up branch and PR builds with Travis CI caching (mozilla-lockwise#604) * Speed up branch and PR builds with Travis CI caching * add pip cache # This is the commit message mozilla-lockwise#12: writing jenkins config # This is the commit message mozilla-lockwise#13: fixed typo # This is the commit message mozilla-lockwise#14: edited jenkins config # This is the commit message mozilla-lockwise#15: edited jenkins config # This is the commit message mozilla-lockwise#16: edited jenkins config # This is the commit message mozilla-lockwise#17: edited jenkins config # This is the commit message mozilla-lockwise#18: edited jenkins config # This is the commit message mozilla-lockwise#19: edited jenkins config # This is the commit message mozilla-lockwise#20: edited jenkins config # This is the commit message mozilla-lockwise#21: edited jenkins config # This is the commit message mozilla-lockwise#22: edited jenkins config # This is the commit message mozilla-lockwise#23: edited jenkins config # This is the commit message mozilla-lockwise#24: edited jenkins config # This is the commit message mozilla-lockwise#25: added jenkins build script # This is the commit message mozilla-lockwise#26: edited jenkins config # This is the commit message mozilla-lockwise#27: edited jenkins config # This is the commit message mozilla-lockwise#28: edited jenkins config # This is the commit message mozilla-lockwise#29: edited jenkins config # This is the commit message mozilla-lockwise#30: edited jenkins config # This is the commit message mozilla-lockwise#31: edited jenkins config # This is the commit message mozilla-lockwise#32: edited jenkins config # This is the commit message mozilla-lockwise#33: edited jenkins config # This is the commit message mozilla-lockwise#34: edited jenkins config # This is the commit message mozilla-lockwise#35: including a11y tests # This is the commit message mozilla-lockwise#36: flake8 # This is the commit message mozilla-lockwise#37: flake8 # This is the commit message mozilla-lockwise#38: removed pypom from test reqs # This is the commit message mozilla-lockwise#39: edited jenkins config # This is the commit message mozilla-lockwise#40: edited jenkins config # This is the commit message mozilla-lockwise#41: edited jenkins config # This is the commit message mozilla-lockwise#42: edited jenkins config # This is the commit message mozilla-lockwise#43: edited jenkins config # This is the commit message mozilla-lockwise#44: Styling adjustment to align entry detail buttons during edit and view mode change (mozilla-lockwise#608) # This is the commit message mozilla-lockwise#45: Fix <ItemFilter/> to actually update its state from Redux # This is the commit message mozilla-lockwise#46: Fix importing of chai-enzyme in <ButtonStack/> test # This is the commit message mozilla-lockwise#47: Automatically select the filter input's text on load (if there is any) # This is the commit message mozilla-lockwise#48: Pre-fill the URL of the current tab into the doorhanger's filter # This is the commit message mozilla-lockwise#49: Prepare 0.1.8 release (mozilla-lockwise#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 # This is the commit message mozilla-lockwise#2: Fix the color of the horizontal line in the item details of the manager # This is the commit message mozilla-lockwise#3: edited jenkins config # This is the commit message mozilla-lockwise#4: edited jenkins config # This is the commit message mozilla-lockwise#5: edited jenkins config # This is the commit message mozilla-lockwise#6: edited jenkins config # This is the commit message mozilla-lockwise#7: edited jenkins config # This is the commit message mozilla-lockwise#8: edited jenkins config # This is the commit message mozilla-lockwise#9: edited jenkins config # This is the commit message mozilla-lockwise#10: edited jenkins config # This is the commit message mozilla-lockwise#11: edited jenkins config # This is the commit message mozilla-lockwise#12: edited jenkins config # This is the commit message mozilla-lockwise#13: edited jenkins config # This is the commit message mozilla-lockwise#14: Move python runtime for deploy stage out of 'on' requirement So the pages actually build using python 3.6 instead of just checking to make sure its in the 3.6 runtime # This is the commit message mozilla-lockwise#15: Downgrade Travis deploy script to fix pages deploy See travis-ci/travis-ci#9312 # This is the commit message mozilla-lockwise#2: Improve implementation of <Stack/> (formerly <ButtonStack/>) Unfortunately, to have behavior like <xul:deck>, the only way I can figure out is just to use the XUL box model. :( # This is the commit message mozilla-lockwise#3: Allow greater customization of <CopyToClipboardButton/> # This is the commit message mozilla-lockwise#4: Provide visuals for the quick-copy buttons in the doorhanger list view # This is the commit message mozilla-lockwise#5: Add support for copying the username and password from the quick-copy buttons # This is the commit message mozilla-lockwise#6: Add telemetry for the quick-copy buttons # This is the commit message mozilla-lockwise#7: Address styling concerns # This is the commit message mozilla-lockwise#8: Add tests for quick-copy behavior # This is the commit message mozilla-lockwise#9: Address mozilla-lockwise#570 Post-Merge Code Review Comments (mozilla-lockwise#647) # This is the commit message mozilla-lockwise#2: changes to metrics # This is the commit message mozilla-lockwise#3: Update stylelint to the latest version 🚀 (mozilla-lockwise#658) * chore(package): update stylelint to version 9.1.2 * chore(package): update stylelint to version 9.1.3 # This is the commit message mozilla-lockwise#2: Update flake8-isort from 2.4 to 2.5 (mozilla-lockwise#671) # This is the commit message mozilla-lockwise#2: Docs are wrong becuase sync is not currently supported fixes mozilla-lockwise#670

nickbrandt added 3 commits February 20, 2018 17:18

Styling adjustments for entry list filter.

2357c07

-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

3aef8d9

-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

d477c45

-Darkening placeholder text -Updated border radius on inputs -Reverting search to use regular weight

nickbrandt requested a review from jimporter as a code owner February 21, 2018 22:06

ghost assigned nickbrandt Feb 21, 2018

ghost added the in progress We are actively working on it. label Feb 21, 2018

nickbrandt added 2 commits February 22, 2018 09:50

Merge branch 'master' into 477-search-bar-styling

095f951

Moving location of styles for filter/search in order to cover both do…

26c597b

…orhanger and full page view

sandysage added this to the 0.1.8 milestone Feb 22, 2018

changecourse mentioned this pull request Feb 27, 2018

DR: Doorhanger entries list, align to photon #483

Closed

6 tasks

linuxwolf previously requested changes Feb 27, 2018

View reviewed changes

linuxwolf requested a review from a team February 27, 2018 18:42

linuxwolf added the needs-pi label Feb 27, 2018

Adding MPL-2.0 license to item-filter file and new line on app.css

c97dd66

jimporter suggested changes Feb 27, 2018

View reviewed changes

m8ttyB added pi-verified needs-pi and removed needs-pi pi-verified labels Feb 27, 2018

Updates based on PR feedback

89bbf07

-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

m8ttyB previously approved these changes Feb 28, 2018

View reviewed changes

m8ttyB added pi-verified and removed needs-pi labels Feb 28, 2018

Removing "clear" text from filter button

957ac0b

nickbrandt dismissed m8ttyB’s stale review via 957ac0b February 28, 2018 18:36

m8ttyB added needs-pi and removed pi-verified labels Feb 28, 2018

Merge branch 'master' into 477-search-bar-styling

e8843f3

Removed some unnecessary styles left behind and updated padding for c…

40e33df

…onsistency.

m8ttyB requested a review from kimberlythegeek March 1, 2018 20:43

nickbrandt and others added 2 commits March 1, 2018 13:43

Ran clear and search svgs through svgo

f3500f5

Merge branch 'master' into 477-search-bar-styling

ba29fa0

ghost assigned jimporter Mar 1, 2018

devinreams requested a review from jimporter March 2, 2018 21:18

jimporter previously approved these changes Mar 5, 2018

View reviewed changes

kimberlythegeek previously approved these changes Mar 6, 2018

View reviewed changes

m8ttyB added pi-verified and removed needs-pi labels Mar 6, 2018

Merge branch 'master' into 477-search-bar-styling

28e31d5

nickbrandt dismissed stale reviews from kimberlythegeek and jimporter via 28e31d5 March 6, 2018 16:37

Restore filter styles lost in master branch merge 28e31d5

ecc6943

devinreams merged commit d1ae13c into master Mar 6, 2018

ghost removed the in progress We are actively working on it. label Mar 6, 2018

devinreams deleted the 477-search-bar-styling branch March 6, 2018 17:37

devinreams mentioned this pull request Mar 6, 2018

Create a shared component for Search #561

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Search bar styling adjustments (full view) #562

Search bar styling adjustments (full view) #562

nickbrandt commented Feb 21, 2018 •

edited

linuxwolf left a comment

linuxwolf Feb 23, 2018

linuxwolf Feb 23, 2018

jimporter Feb 27, 2018

linuxwolf Feb 27, 2018

jimporter Feb 27, 2018

devinreams Feb 27, 2018

jimporter Feb 27, 2018

jimporter Feb 27, 2018 •

edited

nickbrandt Feb 27, 2018

jimporter Feb 27, 2018

jimporter Feb 27, 2018

jimporter Feb 27, 2018

jimporter Feb 27, 2018

nickbrandt Feb 27, 2018

jimporter Feb 27, 2018

jimporter Feb 27, 2018

jimporter Feb 27, 2018

nickbrandt Feb 27, 2018

jimporter Feb 27, 2018

jimporter Feb 27, 2018

m8ttyB left a comment

devinreams commented Feb 28, 2018

nickbrandt commented Feb 28, 2018

m8ttyB commented Mar 1, 2018

jimporter commented Mar 1, 2018

changecourse commented Mar 2, 2018 •

edited

devinreams commented Mar 2, 2018

devinreams commented Mar 5, 2018

jimporter left a comment

kimberlythegeek commented Mar 6, 2018

kimberlythegeek left a comment •

edited

devinreams commented Mar 6, 2018

devinreams commented Mar 6, 2018

Search bar styling adjustments (full view) #562

Search bar styling adjustments (full view) #562

Conversation

nickbrandt commented Feb 21, 2018 • edited

linuxwolf left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jimporter Feb 27, 2018 • edited

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

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

Choose a reason for hiding this comment

m8ttyB left a comment

Choose a reason for hiding this comment

devinreams commented Feb 28, 2018

nickbrandt commented Feb 28, 2018

m8ttyB commented Mar 1, 2018

jimporter commented Mar 1, 2018

changecourse commented Mar 2, 2018 • edited

devinreams commented Mar 2, 2018

devinreams commented Mar 5, 2018

jimporter left a comment

Choose a reason for hiding this comment

kimberlythegeek commented Mar 6, 2018

kimberlythegeek left a comment • edited

Choose a reason for hiding this comment

devinreams commented Mar 6, 2018

devinreams commented Mar 6, 2018

nickbrandt commented Feb 21, 2018 •

edited

jimporter Feb 27, 2018 •

edited

changecourse commented Mar 2, 2018 •

edited

kimberlythegeek left a comment •

edited