[NextBrowser] UI for bookmarks page. 68/315868/4
authorshahnawaz.a <shahnawaz.a@samsung.com>
Thu, 5 Dec 2024 09:24:58 +0000 (14:54 +0530)
committerBot Blink <blinkbot@samsung.com>
Thu, 5 Dec 2024 11:43:43 +0000 (11:43 +0000)
Change-Id: I363f0adfe38c10fb8207896db4cb77bbbb89d4e2
Signed-off-by: shahnawaz.a <shahnawaz.a@samsung.com>
chrome/browser/resources/samsung/BUILD.gn
chrome/browser/resources/samsung/quick.js
chrome/browser/resources/samsung/samsung_bookmarks_app.html [new file with mode: 0644]
chrome/browser/resources/samsung/samsung_bookmarks_app.js [new file with mode: 0644]
chrome/browser/resources/samsung/samsung_featured.html
chrome/browser/resources/samsung/samsung_featured_header.html
chrome/browser/resources/samsung/samsung_featured_quick.css
chrome/browser/ui/browser_command_controller.cc
ui/webui/resources/js/samsung/hybridnavigation.js

index 508b4eefb34633fb87db90eecb40fa6f3c301998..519d21987eb1fe6e3d4dcb4b4d8fd114bf92accd 100644 (file)
@@ -11,6 +11,7 @@ build_webui("build") {
     "samsung_featured_app.ts",
     "samsung_featured_header.js",
     "samsung_opentabs_app.js",
+    "samsung_bookmarks_app.js",
     "samsung_watchlater_app.ts",
   ]
   non_web_component_files = [
index f9da917ee6aa2b6a2285a228f106cb2cc85b038e..99ae390ae02a845bb5d081f61d1b6ba75c437db8 100644 (file)
@@ -20,12 +20,14 @@ function settingPageVisibility(loc)
     let featuredPageComponent = document.getElementsByTagName('SAMSUNG-FEATURED-APP');
     let opentabsPageComponent = document.getElementsByTagName('SAMSUNG-OPENTABS-APP');
     let watchLaterPageComponent = document.getElementsByTagName('SAMSUNG-WATCHLATER-APP');
+    let bookmarksPageComponent = document.getElementsByTagName('SAMSUNG-BOOKMARKS-APP');
 
     if(loc == "featured" || loc == "")
     {
         featuredPageComponent[0].style.display = '';
         watchLaterPageComponent[0].style.display = 'none';
         opentabsPageComponent[0].style.display = 'none';
+        bookmarksPageComponent[0].style.display = 'none';
         setSelectedTabs('buttonQuick');
     }
     else if(loc == "openedTabs")
@@ -33,12 +35,22 @@ function settingPageVisibility(loc)
         featuredPageComponent[0].style.display = 'none';
         watchLaterPageComponent[0].style.display = 'none';
         opentabsPageComponent[0].style.display = '';
+        bookmarksPageComponent[0].style.display = 'none';
         setSelectedTabs('buttonOpenedTabs');
     }
+    else if(loc == "bookmarks")
+    {
+        featuredPageComponent[0].style.display = 'none';
+        opentabsPageComponent[0].style.display = 'none';
+        bookmarksPageComponent[0].style.display = '';
+        watchLaterPageComponent[0].style.display = 'none';
+        setSelectedTabs('buttonBookmarks');
+    }
     else if(loc == "watchlater"){
         featuredPageComponent[0].style.display = 'none';
         opentabsPageComponent[0].style.display = 'none';
         watchLaterPageComponent[0].style.display = '';
+        bookmarksPageComponent[0].style.display = 'none';
        setSelectedTabs('buttonWatchLater');
     }
 
diff --git a/chrome/browser/resources/samsung/samsung_bookmarks_app.html b/chrome/browser/resources/samsung/samsung_bookmarks_app.html
new file mode 100644 (file)
index 0000000..0152901
--- /dev/null
@@ -0,0 +1,88 @@
+<style include="samsung-common samsung-opentabs-bookmarks shared-style cr-shared-style">
+    dialog [slot=body] {
+         white-space: pre-wrap;
+       }
+
+   .mostvisited.highContrast .button:hover {
+     background-image: url(chrome://resources/images/samsung/high_contrast/button_1_f.png) !important;
+ }
+
+ .mostvisited.highContrast .bookmarkGridItem:hover {
+     background-image: url(chrome://resources/images/samsung/high_contrast/bookmark_bg_f.png) !important;
+
+  img {
+     overflow: hidden !important;
+     white-space: nowrap;
+     text-overflow: ellipsis;
+ }
+
+ }
+ </style>
+
+ <div id="container" class="bookmark">
+   <div class="antiScrollWrapper">
+        <div id="bookmarkWrapper">
+            <div id="bookmarkButtons" class="bookmarksButtons">
+                <div id="" aria-label="Bookmark button" class="button removeAllButtons" tabindex="0" on-click = "onDeleteAllClicked_">
+                    <div id="" on-click = "onDeleteAllClicked_" ></div>
+                    <div id="" class="marquee buttonCaption" on-click = "onDeleteAllClicked_" style="text-overflow: ellipsis; direction: ltr;">Delete All</div>
+                </div>
+            </div>
+            <div id="watchingWatchLater" class="">Samsung Account shubham.garg@samsung.com</div>
+            <div id = 'thumbnailGrid' class = 'thumbnailGrid'>
+                <template is="dom-repeat" items="[[thumbnailOptions]]">
+                    <div class="bookmarkGridItem" id="">
+                        <div class="bookmarkItemThumbnail marquee_img">
+                            <a class="bookmarkThumbnailLink" href="[[item.url]]" aria-label="[[item.title]]" type="{bookmarkType}" target="{source}">
+                                <div class="bookmarkItemFavicon {bookmarkType}">
+                                    <div class="itemFaviconOpenTabs" >
+                                        <img src = "[[item.favicon_data]]" alt = " " on-error = "onErroInImageLoad_">
+                                    </div>
+                                </div>
+                                <div class="marquee bookmarkItemName description" aria-label="[[item.title]]">
+                                [[item.title]]
+                                </div>
+                            </a>
+                            <a>
+                                <div class="itemEdit" aria-label="{removeDescAria} ' + lang.TV_SID_BUTTON  + '" >
+                                <div class="tooltipArrow"></div>
+                                    <div class="tooltipWrapper">
+                                        <div class="content description">
+                                        Edit
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>
+                            <a>
+                                <div class="closeButton" id="[[item.device_id]]" aria-label="{removeDescAria} ' + lang.TV_SID_BUTTON  + '" on-click="onDeleteOneClicked_">
+                                <div class="tooltipArrow"></div>
+                                    <div class="tooltipWrapper">
+                                        <div class="content description">
+                                        Remove
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+    <cr-lazy-render id="dialog">
+        <template>
+          <cr-dialog consume-keydown-event>
+            <div slot="title" id="title">Remove Selected</div>
+            <div slot="body" id="body">Are you sure you want to delete ?</div>
+            <div slot="button-container">
+              <cr-button class="cancel-button" on-click="onDialogCancelClick_">
+                Cancel
+              </cr-button>
+              <cr-button class="action-button" on-click="onDialogConfirmClick_">
+                Remove
+              </cr-button>
+            </div>
+          </cr-dialog>
+        </template>
+      </cr-lazy-render>
+ </div>
\ No newline at end of file
diff --git a/chrome/browser/resources/samsung/samsung_bookmarks_app.js b/chrome/browser/resources/samsung/samsung_bookmarks_app.js
new file mode 100644 (file)
index 0000000..9716a3d
--- /dev/null
@@ -0,0 +1,171 @@
+import './samsung_common.css.js';
+import './samsung_opentabs_bookmarks.css.js';
+
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {getTemplate} from './samsung_bookmarks_app.html.js';
+import { SamsungDataServiceImpl }  from './samsung_data_service.js';
+import {changeIsPopUpOpened} from 'chrome://resources/js/samsung/hybridnavigation.js';
+
+export class SBookmarksElement extends PolymerElement {
+  static get is() {
+    return 'samsung-bookmarks-app';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+        thumbnailOptions: {
+            type: Array,
+          },
+    };
+  }
+
+  thumbnailOptions = [] ;
+  grid ;
+  splices = [];
+
+  constructor () {
+    super();
+    this.deviceIdToBeRemoved="";
+    this.splices = [];
+    this.thumbnailOptions = [
+      {
+          "device_id" : '1',
+          "url": "https://www.google.com",
+          "title": "Google",
+          "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.google.com"
+      },
+      {
+          "device_id" : '2',
+          "url": "https://www.facebook.com",
+          "title": "Facebook",
+          "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.facebook.com"
+      },
+      {
+          "device_id" : '3',
+          "url": "https://www.yahoo.com",
+          "title": "Yahoo",
+          "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.yahoo.com"
+      },
+      {
+          "device_id" : '4',
+          "url": "https://www.youtube.com",
+          "title": "Youtube",
+          "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.youtube.com"
+      },
+      {
+          "device_id" : '5',
+          "url": "https://www.vimeo.com",
+          "title": "Vimeo",
+          "favicon_data": "http://www.google.com/s2/favicons?domain=https://vimeo.com"
+      },
+      {
+          "device_id" : '6',
+          "url": "https://www.amazon.com",
+          "title": "Amazon",
+          "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.amazon.com"
+      },
+      {
+        "device_id" : '7',
+        "url": "https://www.msn.com",
+        "title": "MSN",
+        "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.msn.com"
+      },
+      {
+        "device_id" : '8',
+        "url": "https://edition.cnn.com/",
+        "title": "CNN",
+        "favicon_data": "hhttp://www.google.com/s2/favicons?domain=https://www.msnbc.com"
+      },
+      {
+        "device_id" : '9',
+        "url": "https://www.imdb.com/",
+        "title": "IMDB",
+        "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.imdb.com"
+      }
+  ]
+
+  for (const item of this.thumbnailOptions) {
+    item.favicon_data = ("chrome://image/?"+item.favicon_data);
+  }
+
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+  }
+
+ onDeleteAllClicked_(event){
+  console.log('onDeleteAllClicked_');
+  event.stopPropagation();
+  changeIsPopUpOpened("true");
+  this.$.dialog.get().showModal();
+     const diaglogButton = this.shadowRoot.querySelector('.action-button');
+     diaglogButton.focus();
+     console.log(this.thumbnailOptions);
+
+     let cancelButtonNode = document.querySelector('samsung-bookmarks-app')?.shadowRoot?.querySelector('.cancel-button');
+     if(cancelButtonNode && cancelButtonNode.style)
+     {
+      cancelButtonNode.style.marginRight = '10px';
+     }
+}
+
+onDialogConfirmClick_() {
+  console.log('onDialogConfirmClick_');
+  changeIsPopUpOpened("false");
+  const dialog = this.$.dialog.getIfExists();
+  const samsungDataService = SamsungDataServiceImpl.getInstance();
+  samsungDataService.removeDevice(this.deviceIdToBeRemoved);
+  this.thumbnailOptions = [];
+  dialog.close();
+}
+
+onDialogCancelClick_() {
+  console.log('onDialogCancelClick_');
+  changeIsPopUpOpened("false");
+  const dialog = this.$.dialog.getIfExists();
+  dialog.close();
+}
+
+ onErroInImageLoad_(event){
+  const img = event.target;
+  img.src = "chrome://resources/images/samsung/wb_logo_web_32.png";
+ }
+
+ onDeleteOneClicked_(event){
+    console.log('onDeleteOneClicked_');
+    this.deviceIdToBeRemoved = "";
+    event.stopPropagation();
+    const button = event.target;
+    const numberValue = button.getAttribute('id');
+    this.deviceIdToBeRemoved = numberValue;
+    console.log(this.deviceIdToBeRemoved);
+    this.splices = [];
+    let delIndex = [] ;
+    let removed = [];
+    this.thumbnailOptions.forEach((e,index)=>{
+        if(e.device_id == numberValue)
+        {
+            delIndex = e;
+            console.log(e);
+            removed = this.thumbnailOptions.splice(index,1);
+        }
+    });
+    this.splices.push(
+    {
+        index:delIndex,
+        removed: removed,
+        addedCount : 0,
+        object : this.thumbnailOptions,
+        type:'splice'
+    }
+    );
+    this.notifySplices('thumbnailOptions',this.splices);
+ }
+}
+
+window.customElements.define(SBookmarksElement.is, SBookmarksElement);
\ No newline at end of file
index a98a48bddaca5b907036642743c5489ef11a97ba..229c1ac2e1c63fe99333d9569207254acd0b12dc 100644 (file)
@@ -8,6 +8,7 @@
     <samsung-featured-header > </samsung-featured-header>
     <samsung-featured-app style ="display :none;"></samsung-featured-app>
     <samsung-opentabs-app style="display: none;"></samsung-opentabs-app>
+    <samsung-bookmarks-app style="display: none;"></samsung-bookmarks-app>
     <samsung-watchlater-app style="display: none;"></samsung-watchlater-app>
   </body>
   <style>
@@ -19,5 +20,6 @@
   <script type="module" src="samsung_featured_header.js"></script>
   <script type="module" src="samsung_featured_app.js"></script>
   <script type="module" src="samsung_opentabs_app.js"></script>
+  <script type="module" src="samsung_bookmarks_app.js"></script>
   <script type="module" src="samsung_watchlater_app.js"></script>
 </html>
\ No newline at end of file
index 012006f196eb94392258246119c2ed40b3e1eecb..93508f0b78029400eccca51a9fe44eae12b3b81f 100644 (file)
       <!-- <div id = 'buttonMost' class = 'button' role="button" on-click="onMostVisitedClick_">
           <div class = 'marquee buttonCaption' aria-hidden="true">Most Visited</div>
       </div>
-      <div class = 'tabSeperator'></div>
+      <div class = 'tabSeperator'></div>  -->
       <div id = 'buttonBookmarks' class = 'button' role="button"  on-click="onBookmarkClick_">
           <div class = 'marquee buttonCaption' aria-hidden="true">Bookmarks</div>
       </div>
-      <div class = 'tabSeperator'></div> -->
+      <div class = 'tabSeperator'></div>
       <div id = 'buttonWatchLater' class = 'button' role="button"  on-click="onWatchlaterClick_">
           <div class = 'captionWatchLater'>
         <div class = 'marquee buttonCaption' aria-hidden="true" >Watch later</div>
index a425b82fe61086c57406b94904b4f3a975cabd68..a6374ae99d5c69026923027f5fdb439561993ee3 100644 (file)
@@ -52,7 +52,7 @@
 }
 
 #buttonWrapper.headerList .button {
-  width: calc(30% - 2px);
+  width: calc(25% - 2px);
 }
 
 #buttonWrapper .button.deselected:hover {
index 4ea185c0aa51452d727f63a1a69e669a10c48468..862757c668bfcb1e167fd7d4d995878e1cb9120e 100644 (file)
@@ -837,7 +837,11 @@ bool BrowserCommandController::ExecuteCommandWithDisposition(
                           chrome::kPeopleSubPage);
       break;
     case IDC_SHOW_BOOKMARK_MANAGER:
+#if defined(SAMSUNG_MENU_TREE_UI)
+      NewTabWithURL(browser_, "chrome://featured/#bookmarks");
+#else
       ShowBookmarkManager(browser_->GetBrowserForOpeningWebUi());
+#endif
       break;
     case IDC_SHOW_BOOKMARK_SIDE_PANEL:
       SidePanelUI::GetSidePanelUIForBrowser(browser_)->Show(
index 50d9a43c0a9e7b2253778495d59c6a7a1e3874a6..3ee1731824ea65b41be9fef2b8b63f5cd3526927 100644 (file)
@@ -121,7 +121,7 @@ function isElementVisible(element) {
 function isFocusable(element) {
     if(element.tagName == 'OPTION') alert('found')
     const focusableTags = ['OPTION','A', 'CR-BUTTON', 'SELECT', 'CR-SLIDER', 'OPTION', 'CR-TOGGLE', 'INPUT'];
-    const focusableClasses = ['closeButton', 'bookmarkGriditem', 'thumbnailGriditem', 'buttonCaption'];
+    const focusableClasses = ['closeButton', 'bookmarkGriditem', 'thumbnailGriditem', 'buttonCaption','itemEdit'];
     const focusableRoles = ['tab'];
     // const focusableIds = ['checkbox','labelWrapper', 'profile-row','icon'];
     const focusableIds = ['checkbox','icon'];