Doorhanger list view updates (#64)

* logins API, squashed, first version

* Change onCreated to onAdded

* Remove Mozilla-GUID type from schema and replace refs to GUIDs with refs to plain IDs

* Add touch() convenience method

* It's nsILoginMetaInfo, not nsILoginMetaData

* WIP: so close, got nothin

When webdriver opens the extension page, the browser.experiments.logins
API is not present. When I open the extension page myself, via going to
about:debugging, and doing
  browser.tabs.create({
    url: browser.extension.getURL(
           "/test/integration/test-pages/logins-api.html")
  }),
the test page seems just fine. Maybe webdriver needs some magic powers?

* Set the legacy enabled pref when testing, so the API experiments will be available

* fix typo in touch method

* Fill in happy path tests

* Please the linter

* correctly test for update results

* Final tweaks to update() API method

* The webextensions framework auto-inserts 'null' default values for any
specified keys that are missing, causing updates to break
LoginManager.modifyLogin() type checking. Filter out those null values.

* Create a coding convention to make clearer which things are vanilla JS
objects with login fields, which are nsILoginInfo objects, and which are
nsIPropertyBags used to modifyLogin.

* Be sure to wait for async test shutdown before heading onto the next test

* Initial minimal logins API connection to datastore

Connected to #21

* Revise event/message flow in datastore to rely on updates from Login API to apply changes

* Doorhanger list view updates

- fixes #12

* style cleanups for popup list

* more style tweaks to list

* remove refs to verbose and oncopy in panel

* final style nits, and info icon update

src/list/components/item-list.css

@@ -8,7 +8,7 @@
   padding: 40px;
   overflow: hidden;
   overflow-wrap: break-word;
-  color: #4a4a4f;
+  color: #737373;
   font-size: 15px;
   line-height: 1.5;
   letter-spacing: 0.2px;
@@ -25,17 +25,18 @@
 }
 
 .item .item-summary:hover {
-  background-color: rgba(10, 132, 255, 0.07);
+  background-color: #ededf0;
 }
 
 .item .item-summary:active {
-  background-color: rgba(10, 132, 255, 0.12);
+  background-color: #e7e7e7;
 }
 
 .item[data-selected] .item-summary {
   position: relative;
-  background-color: rgba(10, 132, 255, 0.12);
-  box-shadow: 0 -1px 0 rgba(10, 132, 255, 0.4), 0 1px 0 rgba(10, 132, 255, 0.4);
+  background-color: #e7e7e7;
+  box-shadow: 0 -1px 0 #e7e7e7, 0 1px 0 #e7e7e7;
+  cursor: pointer;
 }
 
 /* Provide borders at the top and bottom of selected items. These are ::before
@@ -69,8 +70,3 @@
 .item-list:focus .item[data-selected] .item-summary::after {
   background-color: #0a84ff;
 }
-
-.verbose + .verbose {
-  margin-top: 4px;
-  border-top: 1px solid #d7d7db;
-}

src/list/components/item-list.js

@@ -11,17 +11,16 @@ import ScrollingList from "../../widgets/scrolling-list";
 
 import styles from "./item-list.css";
 
-export default function ItemList({items, itemClassName, verbose, onCopy,
-                                  ...props}) {
+export default function ItemList({items, itemClassName, panel, ...props}) {
   return (
     <ScrollingList {...props} className={"itemList " + styles.itemList}
                    itemClassName={classNames([
-                     styles.item, verbose && styles.verbose, itemClassName,
+                     styles.item, itemClassName,
                    ])} data={items} styledItems={false}>
       {({id, title, username}) => {
         return (
           <ItemSummary className={styles.itemSummary} id={id} title={title}
-                       username={username} verbose={verbose} onCopy={onCopy}/>
+          username={username} panel={panel}/>
         );
       }}
     </ScrollingList>
@@ -37,13 +36,11 @@ ItemList.propTypes = {
     }).isRequired
   ).isRequired,
   itemClassName: PropTypes.string,
-  verbose: PropTypes.bool,
-  onCopy: PropTypes.func,
+  panel: PropTypes.bool,
 };
 
 ItemList.defaultProps = {
   itemClassName: "",
-  verbose: false,
 };
 
 export function ItemListPlaceholder({children}) {

src/list/components/item-summary.css

@@ -2,22 +2,37 @@
  * 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/. */
 
-.item-summary-container::before {
-  content: "";
-  float: right;
+.item-summary-container {
+  cursor: pointer;
+}
+
+.item-summary {
+  padding: 9px 15px;
   position: relative;
-  width: 5px;
-  height: 9px;
-  margin: 32px 20px;
-  background-image: url(/icons/chevron-right.svg);
+}
+
+.info {
+  position: absolute;
+  right: 0px;
+  top: -3px;
+  width: 18px;
+  height: 18px;
+  margin: 20px;
+  margin-right: 12px;
+  background-image: url(/icons/info.svg);
   background-repeat: no-repeat;
-  background-size: 5px 9px;
-  z-index: 2;
+  background-size: 18px 18px;
+  background-position: 50%;
+  padding: 7px;
+  border-radius: 2px;
 }
 
-.item-summary {
-  padding: 16px 20px;
-  font-size: 15px;
+.info:hover {
+  background-color: rgba(12, 12, 13, 0.1);
+}
+
+.item-summary:hover .info {
+  background-image: url(/icons/info-dark.svg);
 }
 
 .title,
@@ -30,40 +45,13 @@
 }
 
 .title {
-  font-weight: bold;
+  font-size: 15px;
+  font-weight: 600;
+  color: #0c0c0d;
 }
 
 .subtitle {
   font-size: 13px;
   font-weight: 400;
-}
-
-.copy-buttons {
-  border-top: 1px solid #d7d7db;
-  display: flex;
-}
-
-.copy-button {
-  flex: 1;
-  height: 40px;
-}
-
-.copy-button + .copy-button {
-  border-inline-start: 1px solid #d7d7db;
-}
-
-.copy-button-inner {
-  border-radius: 0;
-}
-
-.copy-button-inner:focus {
-  box-shadow: inset 0 0 0 2px #0a84ff;
-}
-
-.copy-button-inner:hover {
-  background-color: #ededf0;
-}
-
-.copy-button-inner:active:hover {
-  background-color: #d7d7db;
+  color: #737373;
 }

src/list/components/item-summary.js

@@ -8,54 +8,10 @@ import React from "react";
 
 import { classNames } from "../../common";
 import { NEW_ITEM_ID } from "../common";
-import CopyToClipboardButton from "../../widgets/copy-to-clipboard-button";
 
 import styles from "./item-summary.css";
 
-function ItemSummaryCopyButtons({id, username, onCopy}) {
-  async function getPassword() {
-    const response = await browser.runtime.sendMessage({
-      type: "get_item",
-      id,
-    });
-    return response.item.entry.password;
-  }
-
-  return (
-    <div className={styles.copyButtons}
-         onMouseDown={(e) => e.stopPropagation()}>
-      <Localized id="item-summary-copy-username" attrs={{title: true}}>
-        <CopyToClipboardButton className={styles.copyButton}
-                               buttonClassName={styles.copyButtonInner}
-                               value={username}
-                               onCopy={toCopy => onCopy("username", toCopy)}>
-          cOPy uSERNAMe
-        </CopyToClipboardButton>
-      </Localized>
-      <Localized id="item-summary-copy-password" attrs={{title: true}}>
-        <CopyToClipboardButton className={styles.copyButton}
-                               buttonClassName={styles.copyButtonInner}
-                               value={getPassword}
-                               onCopy={toCopy => onCopy("password", toCopy)}>
-          cOPy pASSWORd
-        </CopyToClipboardButton>
-      </Localized>
-    </div>
-  );
-}
-
-ItemSummaryCopyButtons.propTypes = {
-  id: PropTypes.string.isRequired,
-  username: PropTypes.string.isRequired,
-  onCopy: PropTypes.func.isRequired,
-};
-
-export default function ItemSummary({className, id, title, username, verbose,
-                                     onCopy}) {
-  // istanbul ignore next
-  if (id === NEW_ITEM_ID && verbose) {
-    throw new Error("verbose <ItemSummary/> cannot be used with new items");
-  }
+export default function ItemSummary({className, id, title, username, panel}) {
 
   const trimmedTitle = title.trim();
   const trimmedUsername = username.trim();
@@ -74,9 +30,8 @@ export default function ItemSummary({className, id, title, username, verbose,
                    $length={trimmedUsername.length}>
           <div data-name="subtitle" className={styles.subtitle}>no uSERNAMe</div>
         </Localized>
+        {panel && <span className={styles.info}></span>}
       </div>
-      {verbose && <ItemSummaryCopyButtons id={id} username={username}
-                                          onCopy={onCopy}/>}
     </div>
   );
 }
@@ -86,14 +41,13 @@ ItemSummary.propTypes = {
   id: PropTypes.string,
   title: PropTypes.string,
   username: PropTypes.string,
-  verbose: PropTypes.bool,
-  onCopy: PropTypes.func,
+  panel: PropTypes.bool,
 };
 
 ItemSummary.defaultProps = {
   className: "",
   id: null,
   title: "",
   username: "",
-  verbose: false,
+  showInfo: false,
 };

src/list/containers/item-filter.js

@@ -16,7 +16,7 @@ function ItemFilter({inputRef, ...props}) {
       "aria-label": true, "placeholder": true,
     }}>
       <FilterInput {...props} aria-label="fILTER…" placeholder="fILTEr…"
-                   ref={inputRef}/>
+                   ref={inputRef} />
     </Localized>
   );
 }

src/list/popup/components/app.css

@@ -5,10 +5,10 @@
 body {
   padding: 0;
   margin: 0;
-  width: 280px;
-  height: 360px;
+  width: 300px;
+  height: 339px;
   color: #0c0c0d;
-  background-color: #ededf0;
+  background-color: #ffffff;
   font: caption;
   font-size: 13px;
   -moz-user-select: none;

src/list/popup/components/item-details-panel.css

@@ -4,4 +4,22 @@
 
 .panel-body {
   padding: 1em;
+  background: #F9F9FA;
+}
+
+.panel-header {
+  background: #fff;
+  text-align: center;
+}
+
+.panel-header .edit-btn {
+  display: block;
+  background-image: url(/icons/edit.svg);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  height: 16px;
+  width: 16px;
+  position: absolute;
+  top: 16px;
+  right: 8px;
 }

src/list/popup/components/item-details-panel.js

@@ -6,23 +6,40 @@ import { Localized } from "fluent-react";
 import React from "react";
 import PropTypes from "prop-types";
 
-import Panel, { PanelHeader, PanelBody } from "../../../widgets/panel";
+import Panel, { PanelHeader, PanelBody, PanelFooter,
+                PanelFooterButton } from "../../../widgets/panel";
 import { ItemFields } from "../../components/item-fields";
 
 import styles from "./item-details-panel.css";
 
 export default function ItemDetailsPanel({fields, onCopy, onBack}) {
+  const openWebsite = (url) => {
+    browser.runtime.sendMessage({
+      type: "open_site",
+      url,
+    });
+    window.close();
+  };
+
   return (
     <Panel>
       <Localized id="item-details-panel-title">
-        <PanelHeader onBack={onBack}>
-          eNTRy dETAILs
+        <PanelHeader onBack={onBack} className={styles.panelHeader}>
+          lOGIn dETAILs
         </PanelHeader>
       </Localized>
 
       <PanelBody className={styles.panelBody}>
         <ItemFields fields={fields} onCopy={onCopy}/>
       </PanelBody>
+
+      <PanelFooter border="floating">
+        <Localized id="list-detail-button">
+          <PanelFooterButton onClick={openWebsite} className={styles.panelFooterButton}>
+            oPEn wEBSITe
+          </PanelFooterButton>
+        </Localized>
+      </PanelFooter>
     </Panel>
   );
 }