From f759a809b58e9941d708a1e95c86208dfe951e7c Mon Sep 17 00:00:00 2001
From: Hyunmo Ahn <mos_dev@naver.com>
Date: Mon, 21 Jan 2019 16:25:51 +0900
Subject: [PATCH 1/3] add dbclick feature in list of search window.

when double click list of search widget, widget will be opened.
---
 .../components/SearchItem/SearchItem.spec.jsx | 61 +++++++++++++++++++
 .../__snapshots__/SearchItem.spec.jsx.snap    |  2 +
 .../search/components/SearchItem/index.jsx    |  8 +++
 3 files changed, 71 insertions(+)

diff --git a/app/renderer/pages/search/components/SearchItem/SearchItem.spec.jsx b/app/renderer/pages/search/components/SearchItem/SearchItem.spec.jsx
index ed91867c..9cc8610e 100644
--- a/app/renderer/pages/search/components/SearchItem/SearchItem.spec.jsx
+++ b/app/renderer/pages/search/components/SearchItem/SearchItem.spec.jsx
@@ -67,6 +67,67 @@ describe('Test SearchItem Component', () => {
     });
   });
 
+  describe('test handleFocusWidget', () => {
+    it('when props.item.isOpen === true', () => {
+      const onShowWidget = jest.fn();
+      const mockEvent = {
+        preventDefault: jest.fn(),
+      };
+      const wrapper = shallow(
+        <SearchItem
+          item={{
+            ...mockItem,
+            isOpen: true,
+          }}
+          onShowWidget={onShowWidget}
+        />,
+      );
+
+      wrapper.instance().handleFocusWidget(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
+      expect(onShowWidget).toHaveBeenCalledTimes(1);
+      expect(onShowWidget).toHaveBeenCalledWith('mock-id');
+    });
+
+    it('when props.item.isOpen === false', () => {
+      const onShowWidget = jest.fn();
+      const mockEvent = {
+        preventDefault: jest.fn(),
+      };
+      const wrapper = shallow(
+        <SearchItem
+          item={{
+            ...mockItem,
+            isOpen: false,
+          }}
+          onShowWidget={onShowWidget}
+        />,
+      );
+
+      wrapper.instance().handleFocusWidget(mockEvent);
+      expect(mockEvent.preventDefault).toHaveBeenCalledTimes(0);
+      expect(onShowWidget).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('should call handleOpenWidget', () => {
+    const onShowWidget = jest.fn();
+    const wrapper = shallow(
+      <SearchItem
+        item={{
+          ...mockItem,
+          isOpen: false,
+        }}
+        onShowWidget={onShowWidget}
+      />,
+    );
+
+    wrapper.instance().handleOpenWidget();
+
+    expect(onShowWidget).toHaveBeenCalledTimes(1);
+  });
+
   it('should call handleToggleFavorites', () => {
     const onUpdateInfo = jest.fn();
     const wrapper = shallow(
diff --git a/app/renderer/pages/search/components/SearchItem/__snapshots__/SearchItem.spec.jsx.snap b/app/renderer/pages/search/components/SearchItem/__snapshots__/SearchItem.spec.jsx.snap
index 4fa80d9f..e50b665a 100644
--- a/app/renderer/pages/search/components/SearchItem/__snapshots__/SearchItem.spec.jsx.snap
+++ b/app/renderer/pages/search/components/SearchItem/__snapshots__/SearchItem.spec.jsx.snap
@@ -29,6 +29,7 @@ exports[`Test SearchItem Component should match to snapshot 1`] = `
     <button
       className="SearchItem__Btn"
       onClick={[Function]}
+      onDoubleClick={[Function]}
       type="button"
     >
       <strong
@@ -94,6 +95,7 @@ exports[`Test SearchItem Component should match to snapshot when item.searched =
     <button
       className="SearchItem__Btn"
       onClick={[Function]}
+      onDoubleClick={[Function]}
       type="button"
     >
       <strong
diff --git a/app/renderer/pages/search/components/SearchItem/index.jsx b/app/renderer/pages/search/components/SearchItem/index.jsx
index 7989bf19..3f9d5b63 100644
--- a/app/renderer/pages/search/components/SearchItem/index.jsx
+++ b/app/renderer/pages/search/components/SearchItem/index.jsx
@@ -34,6 +34,7 @@ class SearchItem extends React.Component {
     this.handleFocusWidget = this.handleFocusWidget.bind(this);
     this.handleToggleWidget = this.handleToggleWidget.bind(this);
     this.handleToggleFavorites = this.handleToggleFavorites.bind(this);
+    this.handleOpenWidget = this.handleOpenWidget.bind(this);
   }
 
   handleFocusWidget(e) {
@@ -55,6 +56,12 @@ class SearchItem extends React.Component {
     }
   }
 
+  handleOpenWidget() {
+    const { item, onShowWidget } = this.props;
+
+    onShowWidget(item.id);
+  }
+
   handleToggleFavorites() {
     const { item, onUpdateInfo } = this.props;
 
@@ -83,6 +90,7 @@ class SearchItem extends React.Component {
             className="SearchItem__Btn"
             type="button"
             onClick={this.handleFocusWidget}
+            onDoubleClick={this.handleOpenWidget}
           >
             <strong className="SearchItem__title-text">
               {(item.searched === 'both' || item.searched === 'name') ? (

From 24bcc3a008de5844bec0a465d442890fcfc173a3 Mon Sep 17 00:00:00 2001
From: Hyunmo Ahn <mos_dev@naver.com>
Date: Mon, 21 Jan 2019 16:45:31 +0900
Subject: [PATCH 2/3] Select whole address when double click address bar

---
 .../components/AddressBar/AddressBar.spec.jsx     | 15 ++++++++++++++-
 .../__snapshots__/AddressBar.spec.jsx.snap        |  3 +++
 .../pages/widget/components/AddressBar/index.jsx  |  1 +
 .../__snapshots__/WebWidget.spec.jsx.snap         |  1 +
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx b/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx
index 51494712..5bed26c2 100644
--- a/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx
+++ b/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import os from 'os';
 
 import AddressBar from '.';
@@ -323,4 +323,17 @@ describe('<AddressBar />', () => {
       expect(webView.stop).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('should handle dobule click on address input tag', () => {
+    const select = jest.fn();
+    const wrapper = mount(<AddressBar />);
+    const input = wrapper.find('.AddressBar__address-input');
+    const { current: inputRef } = wrapper.instance().addressInputRef;
+
+    inputRef.select = select;
+
+    expect(select).toHaveBeenCalledTimes(0);
+    input.simulate('doubleclick');
+    expect(select).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap b/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap
index 7055bd2e..3d31aa95 100644
--- a/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap
+++ b/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap
@@ -45,6 +45,7 @@ exports[`<AddressBar /> should match to snapshot when props.isLoading is true 1`
     <input
       className="AddressBar__address-input"
       onChange={[Function]}
+      onDoubleClick={[Function]}
       onKeyDown={[Function]}
       type="text"
       value=""
@@ -132,6 +133,7 @@ exports[`<AddressBar /> should match to snapshot when render default 1`] = `
     <input
       className="AddressBar__address-input"
       onChange={[Function]}
+      onDoubleClick={[Function]}
       onKeyDown={[Function]}
       type="text"
       value=""
@@ -219,6 +221,7 @@ exports[`<AddressBar /> should match to snapshot when state.isMenuOpen is true 1
     <input
       className="AddressBar__address-input"
       onChange={[Function]}
+      onDoubleClick={[Function]}
       onKeyDown={[Function]}
       type="text"
       value=""
diff --git a/app/renderer/pages/widget/components/AddressBar/index.jsx b/app/renderer/pages/widget/components/AddressBar/index.jsx
index f54f80d5..fc77f43c 100644
--- a/app/renderer/pages/widget/components/AddressBar/index.jsx
+++ b/app/renderer/pages/widget/components/AddressBar/index.jsx
@@ -222,6 +222,7 @@ class AddressBar extends React.Component {
             value={addressValue}
             onChange={this.handleAddressChange}
             onKeyDown={this.handleAddressEnter}
+            onDoubleClick={() => this.addressInputRef.current.select()}
           />
           <button
             className="AddressBar__address-button"
diff --git a/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap b/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap
index dcf4df12..cfc82c61 100644
--- a/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap
+++ b/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap
@@ -159,6 +159,7 @@ exports[`test WebWidget should match to snapshot when default render 1`] = `
                   <input
                     className="AddressBar__address-input"
                     onChange={[Function]}
+                    onDoubleClick={[Function]}
                     onKeyDown={[Function]}
                     type="text"
                     value=""

From d4bec7a0917f72f58126f0c63e553adbb4d104fe Mon Sep 17 00:00:00 2001
From: Hyunmo Ahn <mos_dev@naver.com>
Date: Wed, 23 Jan 2019 20:50:53 +0900
Subject: [PATCH 3/3] add reset button about address value

---
 .../components/AddressBar/AddressBar.scss     |  18 +-
 .../components/AddressBar/AddressBar.spec.jsx |  31 ++++
 .../__snapshots__/AddressBar.spec.jsx.snap    | 171 +++++++++++++++---
 .../widget/components/AddressBar/index.jsx    |  41 ++++-
 .../__snapshots__/WebWidget.spec.jsx.snap     |  22 ++-
 5 files changed, 239 insertions(+), 44 deletions(-)

diff --git a/app/renderer/pages/widget/components/AddressBar/AddressBar.scss b/app/renderer/pages/widget/components/AddressBar/AddressBar.scss
index d414c841..2e275bbd 100644
--- a/app/renderer/pages/widget/components/AddressBar/AddressBar.scss
+++ b/app/renderer/pages/widget/components/AddressBar/AddressBar.scss
@@ -22,16 +22,30 @@
   padding: 5px;
 }
 
-.AddressBar__address-input {
-  background-color: rgb(240, 240, 240);
+.AddressBar__address-value {
   display: flex;
   width: 80%;
+}
+
+.AddressBar__address-input {
+  background-color: rgb(240, 240, 240);
+  width: 100%;
+  height: 100%;
   font-size: 13px;
   font-weight: 500;
   margin-right: 5px;
   padding: 0 5px;
 }
 
+.AddressBar__cancel-icon {
+  background-color: #4e5c65;
+  border-radius: 50%;
+  width: 15px;
+  margin: 5px;
+
+  align-self: center;
+}
+
 .AddressBar__address-button {
   width: 20%;
   display: flex;
diff --git a/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx b/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx
index 5bed26c2..4dd8e661 100644
--- a/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx
+++ b/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx
@@ -42,6 +42,13 @@ describe('<AddressBar />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('should match to snapshot when state.isMouseOverInput true', () => {
+    const wrapper = shallow(<AddressBar />);
+    wrapper.setState({ isMouseOverInput: true });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('test react lifecycle', () => {
     const componentDidMount = jest.spyOn(AddressBar.prototype, 'componentDidMount');
     const componentWillUnmount = jest.spyOn(AddressBar.prototype, 'componentWillUnmount');
@@ -179,6 +186,19 @@ describe('<AddressBar />', () => {
     expect(wrapper.instance().state.addressValue).toBe('mock-value');
   });
 
+  it('should call handleAddressCancel', () => {
+    const focus = jest.fn();
+    const wrapper = mount(<AddressBar />);
+    wrapper.setState({ addressValue: 'mock-value' });
+    wrapper.instance().addressInputRef.current.focus = focus;
+
+    expect(wrapper.instance().state.addressValue).toBe('mock-value');
+    wrapper.instance().handleAddressCancel();
+    expect(wrapper.instance().state.addressValue).toBe('');
+
+    expect(focus).toHaveBeenCalledTimes(1);
+  });
+
   describe('test call handleAddressEnter', () => {
     const wrapper = shallow(<AddressBar webView={webView} />);
 
@@ -336,4 +356,15 @@ describe('<AddressBar />', () => {
     input.simulate('doubleclick');
     expect(select).toHaveBeenCalledTimes(1);
   });
+
+  it('test mouse event on .AddressBar__address-value', () => {
+    const wrapper = mount(<AddressBar />);
+    const div = wrapper.find('.AddressBar__address-value');
+
+    expect(wrapper.instance().state.isMouseOverInput).toBe(false);
+    div.simulate('mouseEnter');
+    expect(wrapper.instance().state.isMouseOverInput).toBe(true);
+    div.simulate('mouseLeave');
+    expect(wrapper.instance().state.isMouseOverInput).toBe(false);
+  });
 });
diff --git a/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap b/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap
index 3d31aa95..ae7d6b07 100644
--- a/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap
+++ b/app/renderer/pages/widget/components/AddressBar/__snapshots__/AddressBar.spec.jsx.snap
@@ -42,14 +42,20 @@ exports[`<AddressBar /> should match to snapshot when props.isLoading is true 1`
   <div
     className="AddressBar__address"
   >
-    <input
-      className="AddressBar__address-input"
-      onChange={[Function]}
-      onDoubleClick={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-      value=""
-    />
+    <div
+      className="AddressBar__address-value"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <input
+        className="AddressBar__address-input"
+        onChange={[Function]}
+        onDoubleClick={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
     <button
       className="AddressBar__address-button"
       onClick={[Function]}
@@ -130,14 +136,20 @@ exports[`<AddressBar /> should match to snapshot when render default 1`] = `
   <div
     className="AddressBar__address"
   >
-    <input
-      className="AddressBar__address-input"
-      onChange={[Function]}
-      onDoubleClick={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-      value=""
-    />
+    <div
+      className="AddressBar__address-value"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <input
+        className="AddressBar__address-input"
+        onChange={[Function]}
+        onDoubleClick={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
     <button
       className="AddressBar__address-button"
       onClick={[Function]}
@@ -218,14 +230,20 @@ exports[`<AddressBar /> should match to snapshot when state.isMenuOpen is true 1
   <div
     className="AddressBar__address"
   >
-    <input
-      className="AddressBar__address-input"
-      onChange={[Function]}
-      onDoubleClick={[Function]}
-      onKeyDown={[Function]}
-      type="text"
-      value=""
-    />
+    <div
+      className="AddressBar__address-value"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <input
+        className="AddressBar__address-input"
+        onChange={[Function]}
+        onDoubleClick={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
     <button
       className="AddressBar__address-button"
       onClick={[Function]}
@@ -279,3 +297,108 @@ exports[`<AddressBar /> should match to snapshot when state.isMenuOpen is true 1
   </button>
 </div>
 `;
+
+exports[`<AddressBar /> should match to snapshot when state.isMouseOverInput true 1`] = `
+<div
+  className="AddressBar"
+>
+  <button
+    className="AddressBar__button"
+    data-name="go-back-btn"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    <img
+      alt=""
+      src={Object {}}
+    />
+  </button>
+  <button
+    className="AddressBar__button"
+    data-name="go-forward-btn"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    <img
+      alt=""
+      src={Object {}}
+    />
+  </button>
+  <button
+    className="AddressBar__button"
+    onClick={[Function]}
+    type="button"
+  >
+    <img
+      alt=""
+      src={Object {}}
+    />
+  </button>
+  <div
+    className="AddressBar__address"
+  >
+    <div
+      className="AddressBar__address-value"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <input
+        className="AddressBar__address-input"
+        onChange={[Function]}
+        onDoubleClick={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+        value=""
+      />
+      <button
+        className="AddressBar__address-cancel"
+        onClick={[Function]}
+        type="button"
+      >
+        <img
+          alt=""
+          className="AddressBar__cancel-icon"
+          src={Object {}}
+        />
+      </button>
+    </div>
+    <button
+      className="AddressBar__address-button"
+      onClick={[Function]}
+      type="button"
+    >
+      <img
+        alt=""
+        className="AddressBar__home-icon"
+        src={Object {}}
+      />
+      <span
+        className="AddressBar__home-url"
+      />
+    </button>
+  </div>
+  <button
+    className="AddressBar__button AddressBar__more-btn"
+    onClick={[Function]}
+    type="button"
+  >
+    <img
+      alt=""
+      src={Object {}}
+    />
+  </button>
+  <button
+    className="AddressBar__pin-btn"
+    onClick={[Function]}
+    type="button"
+  >
+    <img
+      alt=""
+      className="AddressBar__pin"
+      src={Object {}}
+    />
+  </button>
+</div>
+`;
diff --git a/app/renderer/pages/widget/components/AddressBar/index.jsx b/app/renderer/pages/widget/components/AddressBar/index.jsx
index fc77f43c..e2f056e0 100644
--- a/app/renderer/pages/widget/components/AddressBar/index.jsx
+++ b/app/renderer/pages/widget/components/AddressBar/index.jsx
@@ -46,6 +46,7 @@ class AddressBar extends React.Component {
   state = {
     addressValue: '',
     isMenuOpen: false,
+    isMouseOverInput: false,
   };
   moreBtnRef = React.createRef();
   addressInputRef = React.createRef();
@@ -102,6 +103,11 @@ class AddressBar extends React.Component {
     this.setState({ addressValue: e.target.value });
   };
 
+  handleAddressCancel = () => {
+    this.setState({ addressValue: '' });
+    this.addressInputRef.current.focus();
+  };
+
   handleAddressEnter = (e) => {
     const { webView } = this.props;
     const { addressValue: address } = this.state;
@@ -150,7 +156,7 @@ class AddressBar extends React.Component {
   };
 
   render() {
-    const { addressValue, isMenuOpen } = this.state;
+    const { addressValue, isMouseOverInput, isMenuOpen } = this.state;
     const {
       id,
       currentUrl,
@@ -215,15 +221,30 @@ class AddressBar extends React.Component {
           </button>
         )}
         <div className="AddressBar__address">
-          <input
-            className="AddressBar__address-input"
-            type="text"
-            ref={this.addressInputRef}
-            value={addressValue}
-            onChange={this.handleAddressChange}
-            onKeyDown={this.handleAddressEnter}
-            onDoubleClick={() => this.addressInputRef.current.select()}
-          />
+          <div
+            className="AddressBar__address-value"
+            onMouseEnter={() => this.setState({ isMouseOverInput: true })}
+            onMouseLeave={() => this.setState({ isMouseOverInput: false })}
+          >
+            <input
+              className="AddressBar__address-input"
+              type="text"
+              ref={this.addressInputRef}
+              value={addressValue}
+              onChange={this.handleAddressChange}
+              onKeyDown={this.handleAddressEnter}
+              onDoubleClick={() => this.addressInputRef.current.select()}
+            />
+            {isMouseOverInput && (
+              <button
+                className="AddressBar__address-cancel"
+                type="button"
+                onClick={this.handleAddressCancel}
+              >
+                <img className="AddressBar__cancel-icon" src={cancelIcon} alt="" />
+              </button>
+            )}
+          </div>
           <button
             className="AddressBar__address-button"
             type="button"
diff --git a/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap b/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap
index cfc82c61..fd759837 100644
--- a/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap
+++ b/app/renderer/pages/widget/components/WebWidget/__snapshots__/WebWidget.spec.jsx.snap
@@ -156,14 +156,20 @@ exports[`test WebWidget should match to snapshot when default render 1`] = `
                 <div
                   className="AddressBar__address"
                 >
-                  <input
-                    className="AddressBar__address-input"
-                    onChange={[Function]}
-                    onDoubleClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="text"
-                    value=""
-                  />
+                  <div
+                    className="AddressBar__address-value"
+                    onMouseEnter={[Function]}
+                    onMouseLeave={[Function]}
+                  >
+                    <input
+                      className="AddressBar__address-input"
+                      onChange={[Function]}
+                      onDoubleClick={[Function]}
+                      onKeyDown={[Function]}
+                      type="text"
+                      value=""
+                    />
+                  </div>
                   <button
                     className="AddressBar__address-button"
                     onClick={[Function]}