tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_rules_edit-selector-click-on-scrollbar.js (2673B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Testing ruleview inplace-editor is not blurred when clicking on the ruleview
      7 // container scrollbar.
      8 
      9 const TEST_URI = `
     10  <style type="text/css">
     11    div.testclass {
     12      color: black;
     13    }
     14    .a {
     15      color: #aaa;
     16    }
     17    .b {
     18      color: #bbb;
     19    }
     20    .c {
     21      color: #ccc;
     22    }
     23    .d {
     24      color: #ddd;
     25    }
     26    .e {
     27      color: #eee;
     28    }
     29    .f {
     30      color: #fff;
     31    }
     32  </style>
     33  <div class="testclass a b c d e f">Styled Node</div>
     34 `;
     35 
     36 add_task(async function () {
     37  info("Toolbox height should be small enough to force scrollbars to appear");
     38  await new Promise(done => {
     39    const options = { set: [["devtools.toolbox.footer.height", 200]] };
     40    SpecialPowers.pushPrefEnv(options, done);
     41  });
     42 
     43  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     44  const { inspector, view } = await openRuleView();
     45  await selectNode(".testclass", inspector);
     46 
     47  info("Check we have an overflow on the ruleview container.");
     48  const container = view.element;
     49  const hasScrollbar = container.offsetHeight < container.scrollHeight;
     50  ok(hasScrollbar, "The rule view container should have a vertical scrollbar.");
     51 
     52  info("Focusing an existing selector name in the rule-view.");
     53  const ruleEditor = getRuleViewRuleEditor(view, 1);
     54  const editor = await focusEditableField(view, ruleEditor.selectorText);
     55  is(
     56    inplaceEditor(ruleEditor.selectorText),
     57    editor,
     58    "The selector editor is focused."
     59  );
     60 
     61  info("Click on the scrollbar element.");
     62  await clickOnRuleviewScrollbar(view);
     63 
     64  is(
     65    editor.input,
     66    view.styleDocument.activeElement,
     67    "The editor input should still be focused."
     68  );
     69 
     70  info("Check a new value can still be committed in the editable field");
     71  const newValue = ".testclass.a.b.c.d.e.f";
     72  const onRuleViewChanged = once(view, "ruleview-changed");
     73 
     74  info("Enter new value and commit.");
     75  editor.input.value = newValue;
     76  EventUtils.synthesizeKey("KEY_Enter");
     77  await onRuleViewChanged;
     78  ok(getRuleViewRule(view, newValue), "Rule with '" + newValue + " 'exists.");
     79 });
     80 
     81 async function clickOnRuleviewScrollbar(view) {
     82  const container = view.element.parentNode;
     83  const onScroll = once(container, "scroll");
     84  const rect = container.getBoundingClientRect();
     85  // click 5 pixels before the bottom-right corner should hit the scrollbar
     86  EventUtils.synthesizeMouse(
     87    container,
     88    rect.width - 5,
     89    rect.height - 5,
     90    {},
     91    view.styleWindow
     92  );
     93  await onScroll;
     94 
     95  ok(true, "The rule view container scrolled after clicking on the scrollbar.");
     96 }