Fix chrome 56 sign in, emoji layout

src/components/emoticonsDropdown/tabs/emoji.ts

@@ -128,6 +128,7 @@ export default class EmojiTab implements EmoticonsTab {
     //.reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), '');
 
     const spanEmoji = document.createElement('span');
+    spanEmoji.classList.add('category-item');
 
     let kek: string;
     /* if(unified) {
@@ -152,6 +153,12 @@ export default class EmojiTab implements EmoticonsTab {
   
     spanEmoji.innerHTML = kek;
 
+    if(spanEmoji.children.length > 1) {
+      const first = spanEmoji.firstElementChild;
+      spanEmoji.innerHTML = '';
+      spanEmoji.append(first);
+    }
+
     if(spanEmoji.firstElementChild) {
       (spanEmoji.firstElementChild as HTMLImageElement).setAttribute('loading', 'lazy');
     }

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -7,7 +7,7 @@ import appUsersManager from "../../../lib/appManagers/appUsersManager";
 import { logger } from "../../../lib/logger";
 import { RichTextProcessor } from "../../../lib/richtextprocessor";
 import $rootScope from "../../../lib/rootScope";
-import { getAbbreviation, limitSymbols } from "../../../lib/utils";
+import { limitSymbols } from "../../../lib/utils";
 import AppMediaViewer from "../../appMediaViewer";
 import AvatarElement from "../../avatar";
 import { horizontalMenu } from "../../horizontalMenu";
@@ -545,7 +545,7 @@ export default class AppSharedMediaTab implements SliderTab {
           
           //this.log('wrapping webpage', webpage);
           
-          previewDiv.innerHTML = getAbbreviation(webpage.title || webpage.display_url || webpage.description || webpage.url, true);
+          previewDiv.innerHTML = RichTextProcessor.getAbbreviation(webpage.title || webpage.display_url || webpage.description || webpage.url, true);
           previewDiv.classList.add('empty');
           if(webpage.photo) {
             let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 60, 60))

src/lib/appManagers/appChatsManager.ts

@@ -2,8 +2,7 @@ import { ChatAdminRights, ChatBannedRights, ChatFull, ChatParticipants, InputCha
 import apiManager from '../mtproto/mtprotoworker';
 import { RichTextProcessor } from "../richtextprocessor";
 import $rootScope from "../rootScope";
-import searchIndexManager from "../searchIndexManager";
-import { copy, getAbbreviation, isObject, numberWithCommas, safeReplaceObject } from "../utils";
+import { copy, isObject, numberWithCommas, safeReplaceObject } from "../utils";
 import apiUpdatesManager from "./apiUpdatesManager";
 import appMessagesManager from "./appMessagesManager";
 import appProfileManager from "./appProfileManager";
@@ -107,7 +106,7 @@ export class AppChatsManager {
 
     const oldChat = this.chats[chat.id];
 
-    chat.initials = getAbbreviation(chat.title);
+    chat.initials = RichTextProcessor.getAbbreviation(chat.title);
 
     if(chat.pFlags === undefined) {
       chat.pFlags = {};

src/lib/appManagers/appImManager.ts

@@ -32,12 +32,13 @@ import mediaSizes from '../../helpers/mediaSizes';
 import { isTouchSupported } from '../../helpers/touchSupport';
 import { isAndroid, isApple, isSafari } from '../../helpers/userAgent';
 import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer';
+import { langPack } from '../langPack';
 import { logger, LogLevels } from "../logger";
 import apiManager from '../mtproto/mtprotoworker';
 import { MOUNT_CLASS_TO } from '../mtproto/mtproto_config';
 import { RichTextProcessor } from "../richtextprocessor";
 import $rootScope from '../rootScope';
-import { cancelEvent, defineNotNumerableProperties, findUpClassName, findUpTag, getObjectKeysAndSort, langPack, numberWithCommas, placeCaretAtEnd, whichChild } from "../utils";
+import { cancelEvent, defineNotNumerableProperties, findUpClassName, findUpTag, getObjectKeysAndSort, numberWithCommas, placeCaretAtEnd, whichChild } from "../utils";
 import apiUpdatesManager from './apiUpdatesManager';
 import appChatsManager, { Channel, Chat } from "./appChatsManager";
 import appDialogsManager from "./appDialogsManager";
@@ -685,7 +686,7 @@ export class AppImManager {
           appSidebarRight.forwardTab.closeBtn.click();
         } else */ if(this.chatSelection.isSelecting) {
           this.chatSelection.cancelSelection();
-        } else if(this.chatInputC.replyElements.container.classList.contains('active')) {
+        } else if(this.columnEl.classList.contains('is-helper-active')) {
           this.chatInputC.replyElements.cancelBtn.click();
         } else if(this.peerID != 0) { // hide current dialog
           this.setPeer(0);

src/lib/appManagers/appMessagesManager.ts

@@ -3,6 +3,7 @@ import { CancellablePromise, deferredPromise } from "../../helpers/cancellablePr
 import { Dialog as MTDialog, DialogFilter, DialogPeer, DocumentAttribute, InputMessage, Message, MessagesDialogs, MessagesFilter, MessagesMessages, MessagesPeerDialogs, MethodDeclMap, PhotoSize, SendMessageAction, Update } from "../../layer";
 import { InvokeApiOptions, Modify } from "../../types";
 import { bigint, nextRandomInt } from "../bin_utils";
+import { langPack } from "../langPack";
 import { logger, LogLevels } from "../logger";
 import type { ApiFileManager } from '../mtproto/apiFileManager';
 //import apiManager from '../mtproto/apiManager';
@@ -13,7 +14,7 @@ import { RichTextProcessor } from "../richtextprocessor";
 import $rootScope from "../rootScope";
 import searchIndexManager from '../searchIndexManager';
 import AppStorage from '../storage';
-import { copy, deepEqual, defineNotNumerableProperties, getObjectKeysAndSort, langPack, limitSymbols, listMergeSorted, safeReplaceObject, splitStringByLength, tsNow } from "../utils";
+import { copy, deepEqual, defineNotNumerableProperties, getObjectKeysAndSort, limitSymbols, listMergeSorted, safeReplaceObject, splitStringByLength, tsNow } from "../utils";
 //import { telegramMeWebService } from "../mtproto/mtproto";
 import apiUpdatesManager from "./apiUpdatesManager";
 import appChatsManager from "./appChatsManager";

src/lib/appManagers/appUsersManager.ts

@@ -6,7 +6,7 @@ import serverTimeManager from "../mtproto/serverTimeManager";
 import { RichTextProcessor } from "../richtextprocessor";
 import $rootScope from "../rootScope";
 import searchIndexManager from "../searchIndexManager";
-import { getAbbreviation, isObject, safeReplaceObject, tsNow } from "../utils";
+import { isObject, safeReplaceObject, tsNow } from "../utils";
 import appChatsManager from "./appChatsManager";
 import appPeersManager from "./appPeersManager";
 import appStateManager from "./appStateManager";
@@ -246,7 +246,7 @@ export class AppUsersManager {
 
     user.sortName = user.pFlags.deleted ? '' : searchIndexManager.cleanSearchText(fullName, false);
 
-    user.initials = getAbbreviation(fullName);
+    user.initials = RichTextProcessor.getAbbreviation(fullName);
 
     if(user.status) {
       if((user.status as UserStatus.userStatusOnline).expires) {

src/lib/langPack.ts

@@ -0,0 +1,27 @@
+export const langPack: {[actionType: string]: string} = {
+  "messageActionChatCreate": "created the group",
+	"messageActionChatEditTitle": "changed group name",
+	"messageActionChatEditPhoto": "changed group photo",
+	"messageActionChatDeletePhoto": "removed group photo",
+	"messageActionChatReturn": "returned to group",
+	"messageActionChatJoined": "joined the group",
+  "messageActionChatAddUser": "invited {}",
+  "messageActionChatAddUsers": "invited {} users",
+	"messageActionChatLeave": "left the group",
+	"messageActionChatDeleteUser": "removed user {}",
+	"messageActionChatJoinedByLink": "joined the group",
+  "messageActionPinMessage": "pinned message",
+  "messageActionContactSignUp": "joined Telegram",
+	"messageActionChannelCreate": "Channel created",
+	"messageActionChannelEditTitle": "Channel renamed",
+	"messageActionChannelEditPhoto": "Channel photo updated",
+  "messageActionChannelDeletePhoto": "Channel photo removed",
+  "messageActionHistoryClear": "",//"History cleared",
+
+  "messageActionChannelMigrateFrom": "",
+
+  "messageActionPhoneCall.in_ok": "Incoming Call",
+	"messageActionPhoneCall.out_ok": "Outgoing Call",
+	"messageActionPhoneCall.in_missed": "Missed Call",
+	"messageActionPhoneCall.out_missed": "Cancelled Call",
+};

src/lib/mtproto/mtproto.service.ts

@@ -223,4 +223,6 @@ function alignLimit(limit: number) {
   return 2 ** Math.ceil(Math.log(limit) / Math.log(2));
 }
 
+//export default () => {};
+
 //MOUNT_CLASS_TO && (MOUNT_CLASS_TO.onFetch = onFetch);

src/lib/polyfill.ts

@@ -58,6 +58,23 @@ String.prototype.toHHMMSS = function(leadZero = false) {
   return (hours ? /* ('0' + hours).slice(-2) */hours + ':' : '') + minutes + ':' + seconds;
 };
 
+/* Promise.prototype.finally = Promise.prototype.finally || {
+  finally(fn: () => any) {
+    const onFinally = (callback: typeof fn) => Promise.resolve(fn()).then(callback);
+    return this.then(
+      result => onFinally(() => result),
+      reason => onFinally(() => Promise.reject(reason))
+    );
+  }
+}.finally; */
+Promise.prototype.finally = Promise.prototype.finally || function<T>(this: Promise<T>, fn: () => any) {
+  const onFinally = (callback: typeof fn) => Promise.resolve(fn()).then(callback);
+  return this.then(
+    result => onFinally(() => result),
+    reason => onFinally(() => Promise.reject(reason))
+  );
+};
+
 declare global {
   interface Uint8Array {
     hex: string;
@@ -76,4 +93,8 @@ declare global {
   interface String {
     toHHMMSS(leadZero?: boolean): string;
   }
+
+  interface Promise<T> {
+    finally: (onfinally?: () => void) => Promise<T>;
+  }
 }

src/lib/richtextprocessor.ts

@@ -798,6 +798,30 @@ namespace RichTextProcessor {
   export function matchUrl(text: string) {
     return text.match(urlRegExp);
   }
+
+  const el = document.createElement('span');
+  export function getAbbreviation(str: string, onlyFirst = false) {
+    const wrapped = wrapEmojiText(str);
+    el.innerHTML = wrapped;
+
+    const childNodes = el.childNodes;
+    let first = '', last = '';
+
+    const firstNode = childNodes[0];
+    if('length' in firstNode) first = (firstNode as any).textContent.charAt(0).toUpperCase(); 
+    else first = (firstNode as HTMLElement).outerHTML;
+
+    if(onlyFirst) return first;
+
+    if(str.indexOf(' ') !== -1) {
+      const lastNode = childNodes[childNodes.length - 1];
+      if(lastNode == firstNode) last = lastNode.textContent.split(' ').pop().charAt(0).toUpperCase();
+      else if('length' in lastNode) last = (lastNode as any).textContent.charAt(0).toUpperCase(); 
+      else last = (lastNode as HTMLElement).outerHTML;
+    }
+
+    return first + last;
+  }
 }
 
 MOUNT_CLASS_TO && (MOUNT_CLASS_TO.RichTextProcessor = RichTextProcessor);

src/lib/utils.ts

@@ -1,5 +1,4 @@
 import type { DownloadOptions } from "./mtproto/apiFileManager";
-import { RichTextProcessor } from "./richtextprocessor";
 
 /* export function isInDOM(element: Element, parentNode?: HTMLElement): boolean {
   if(!element) {
@@ -197,34 +196,6 @@ export function generatePathData(x: number, y: number, width: number, height: nu
   return data.join(' ');
 };
 
-export const langPack: {[actionType: string]: string} = {
-  "messageActionChatCreate": "created the group",
-	"messageActionChatEditTitle": "changed group name",
-	"messageActionChatEditPhoto": "changed group photo",
-	"messageActionChatDeletePhoto": "removed group photo",
-	"messageActionChatReturn": "returned to group",
-	"messageActionChatJoined": "joined the group",
-  "messageActionChatAddUser": "invited {}",
-  "messageActionChatAddUsers": "invited {} users",
-	"messageActionChatLeave": "left the group",
-	"messageActionChatDeleteUser": "removed user {}",
-	"messageActionChatJoinedByLink": "joined the group",
-  "messageActionPinMessage": "pinned message",
-  "messageActionContactSignUp": "joined Telegram",
-	"messageActionChannelCreate": "Channel created",
-	"messageActionChannelEditTitle": "Channel renamed",
-	"messageActionChannelEditPhoto": "Channel photo updated",
-  "messageActionChannelDeletePhoto": "Channel photo removed",
-  "messageActionHistoryClear": "",//"History cleared",
-
-  "messageActionChannelMigrateFrom": "",
-
-  "messageActionPhoneCall.in_ok": "Incoming Call",
-	"messageActionPhoneCall.out_ok": "Outgoing Call",
-	"messageActionPhoneCall.in_missed": "Missed Call",
-	"messageActionPhoneCall.out_missed": "Cancelled Call",
-};
-
 export function isObject(object: any) {
   return typeof(object) === 'object' && object !== null;
 }
@@ -234,30 +205,6 @@ export function tsNow(seconds?: boolean) {
   return seconds ? Math.floor(t / 1000) : t;
 }
 
-const el = document.createElement('span');
-export function getAbbreviation(str: string, onlyFirst = false) {
-  const wrapped = RichTextProcessor.wrapEmojiText(str);
-  el.innerHTML = wrapped;
-
-  const childNodes = el.childNodes;
-  let first = '', last = '';
-
-  const firstNode = childNodes[0];
-  if('length' in firstNode) first = (firstNode as any).textContent.charAt(0).toUpperCase(); 
-  else first = (firstNode as HTMLElement).outerHTML;
-
-  if(onlyFirst) return first;
-
-  if(str.indexOf(' ') !== -1) {
-    const lastNode = childNodes[childNodes.length - 1];
-    if(lastNode == firstNode) last = lastNode.textContent.split(' ').pop().charAt(0).toUpperCase();
-    else if('length' in lastNode) last = (lastNode as any).textContent.charAt(0).toUpperCase(); 
-    else last = (lastNode as HTMLElement).outerHTML;
-  }
-
-  return first + last;
-}
-
 export function safeReplaceObject(wasObject: any, newObject: any) {
   for(var key in wasObject) {
     if(!newObject.hasOwnProperty(key) && key.charAt(0) != '$') {
@@ -607,7 +554,9 @@ export function cancelSelection() {
   }
 }
 
-export function getSelectedText() {
+//(window as any).splitStringByLength = splitStringByLength;
+
+export function getSelectedText(): string {
   if(window.getSelection) {
     return window.getSelection().toString();
     // @ts-ignore
@@ -615,7 +564,6 @@ export function getSelectedText() {
     // @ts-ignore
     return document.selection.createRange().text;
   }
-  return '';
-}​
   
-//(window as any).splitStringByLength = splitStringByLength;
+  return '';
+}

src/pages/pageSignIn.ts

@@ -280,7 +280,7 @@ let onFirstMount = () => {
       });
       
       return nearestDcResult;
-    }).then((nearestDcResult: any) => {
+    }).then((nearestDcResult) => {
       let country = countries.find((c) => c.code == nearestDcResult.country);
       if(country) {
         if(!selectCountryCode.value.length && !telEl.value.length) {

src/scss/partials/_emojiDropdown.scss

@@ -1,5 +1,5 @@
 .emoji-dropdown {
-	display: flex;
+	display: flex/*  !important */;
 	flex-direction: column;
 	width: 100%;
 	//height: 282px;
@@ -158,18 +158,21 @@
 	.emoji-category {
 		//padding-top: 1px;
 		position: relative;
+		margin: 0 -.125rem;
 
 		.category-items {
-			display: grid;
+			// ! No chrome 56 support
+			/* display: grid;
 			grid-column-gap: 2.44px;
 			grid-template-columns: repeat(auto-fill, 42px);
-			justify-content: space-between;
+			justify-content: space-between; */
 
 			font-size: 2.25rem;
 			line-height: 2.25rem;
 
-			> span {
-				margin: 0;
+			.category-item {
+				display: inline-block;
+				margin: 0 1.44px; // ! magic number
 				padding: 4px 4px;
 				line-height: inherit;
 				border-radius: 8px;
@@ -183,6 +186,7 @@
 					width: 100%;
 					height: 100%;
 					vertical-align: unset;
+					margin: 0;
 				}
 				
 				html.no-touch &:hover {

src/scss/partials/_leftSidebar.scss

@@ -47,6 +47,7 @@
     border-bottom: 1px solid #dadce0;
     position: relative;
     box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16);
+    flex: 0 0 auto;
 
     .scrollable {
       position: relative;
@@ -101,16 +102,24 @@
       }
     }
 
-    &:not(.hide) + .scrollable {
+    /* &:not(.hide) + .scrollable {
       top: 44px;
       height: calc(100% - 44px);
-    }
+    } */
   }
 
   #chats-container {
     max-height: 100%;
     overflow: hidden;
     position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    > .scrollable {
+      flex: 1 1 auto;
+      position: relative;
+    }
   }
 
   #folders-container {

src/scss/partials/_slider.scss

@@ -190,6 +190,8 @@ $slider-time: .25s;
   // }
   
   > div {
+    height: 100%;
+    max-height: 100%;
     width: 100%;
     max-width: 100%;
     //transition: transform .42s, filter .42s;