Notes: disable adding a note if over character limit.

Make the character limit turn red if over the limit and disable the add
button.

Bug: 1394044
Change-Id: Ib1c15a64bf5a3bbd58c6ee4a2c46744b4fa1e489
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4308536
Commit-Queue: Caroline Rising <corising@chromium.org>
Reviewed-by: Yuheng Huang <yuhengh@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1115814}

chrome/browser/resources/side_panel/user_notes/user_note.html

@@ -1,4 +1,4 @@
-<style include="mwb-element-shared-style">
+<style include="mwb-element-shared-style cr-input-style">
   :host {
     --note-background-color: var(--google-grey-100);
     --note-content-vertical-padding: 6px;
@@ -96,6 +96,10 @@
     padding-bottom: 4px;
   }
 
+  #characterCounter[character-limit-exceeded] {
+    color: var(--cr-input-error-color);
+  }
+
   #cancelButton {
     margin-inline-end: var(--note-content-horizontal-padding);
   }
@@ -117,11 +121,15 @@
     on-input="onNoteContentInput_"></div>
 <template is="dom-if" if="[[editing_]]" restamp>
   <div id="editingFooter">
-    <span id="characterCounter">[[characterCounter_]]/176</span>
+    <span id="characterCounter"
+        character-limit-exceeded$="[[characterLimitExceeded_]]">
+      [[characterCounter_]]/176
+    </span>
     <cr-button id="cancelButton" class="tonal-button" on-click="onCancelClick_">
       $i18n{cancel}
     </cr-button>
-    <cr-button id="addButton" class="action-button" on-click="onAddClick_">
+    <cr-button id="addButton" class="action-button"
+        disabled="[[characterLimitExceeded_]]" on-click="onAddClick_">
       $i18n{add}
     </cr-button>
   </div>

chrome/browser/resources/side_panel/user_notes/user_note.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
+import 'chrome://resources/cr_elements/cr_input/cr_input_style.css.js';
 import 'chrome://resources/cr_elements/mwb_element_shared_style.css.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
@@ -68,6 +69,12 @@ export class UserNoteElement extends PolymerElement {
         type: String,
         value: '',
       },
+
+      characterLimitExceeded_: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
     };
   }
 
@@ -77,6 +84,7 @@ export class UserNoteElement extends PolymerElement {
   private editing_: boolean;
   private noteContent_: string;
   private showPlaceholder_: boolean;
+  private characterLimitExceeded_: boolean;
 
   private userNotesApi_: UserNotesApiProxy =
       UserNotesApiProxyImpl.getInstance();
@@ -101,6 +109,7 @@ export class UserNoteElement extends PolymerElement {
   }
 
   private computeCharacterCounter_(): number {
+    this.characterLimitExceeded_ = this.noteContent_.length > 176;
     return this.noteContent_.length;
   }
 

chrome/test/data/webui/side_panel/user_notes/user_notes_list_test.ts

@@ -251,4 +251,26 @@ suite('UserNotesListTest', () => {
           notesElements[i]!.$.noteContent.textContent);
     }
   });
+
+  test('note entry character count exceeded', async () => {
+    const notesElements = queryNotes();
+    const entryNote = notesElements[2]!;
+    // Add content exceeding 176 characters.
+    const sampleNoteContent =
+        'sample note contentsample note content sample note content sample ' +
+        'note content sample note content sample note content sample note ' +
+        'content sample note content sample note content sample note content';
+    entryNote.$.noteContent.textContent = sampleNoteContent;
+    assertEquals(
+        'plaintext-only',
+        entryNote.$.noteContent.getAttribute('contenteditable'));
+    // Trigger input event so that the character count gets updated.
+    entryNote.$.noteContent.dispatchEvent(
+        new CustomEvent('input', {bubbles: true, composed: true}));
+    entryNote.$.noteContent.focus();
+    await flushTasks();
+    const notesAddButton =
+        entryNote.shadowRoot!.querySelector('#addButton')! as HTMLButtonElement;
+    assertEquals(true, notesAddButton.disabled);
+  });
 });